chore: resolve conflicts

reports/api-extractor.md

@@ -60,6 +60,7 @@ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = a
     _getWatch: WatchInternal<TFieldValues>;
     _updateFieldArray: BatchFieldArrayUpdate;
     _getFieldArray: <TFieldArrayValues>(name: InternalFieldName) => Partial<TFieldArrayValues>[];
+    _setErrors: (errors: FieldErrors<TFieldValues>) => void;
     _updateDisabledField: (props: {
         disabled?: boolean;
         name: FieldName<any>;
@@ -676,6 +677,7 @@ export type UseFormProps<TFieldValues extends FieldValues = FieldValues, TContex
     reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
     defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
     values: TFieldValues;
+    errors: FieldErrors<TFieldValues>;
     resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
     resolver: Resolver<TFieldValues, TContext>;
     context: TContext;
@@ -861,7 +863,7 @@ export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartia
 
 // Warnings were encountered during analysis:
 //
-// src/types/form.ts:439:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
+// src/types/form.ts:440:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/__tests__/useForm.server.test.tsx

@@ -25,6 +25,32 @@ describe('useForm with SSR', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
+  it('should display error with errors prop', () => {
+    const App = () => {
+      const {
+        register,
+        formState: { errors },
+      } = useForm<{
+        test: string;
+      }>({
+        errors: {
+          test: { type: 'test', message: 'test error' },
+        },
+      });
+
+      return (
+        <div>
+          <input {...register('test')} />
+          <span role="alert">{errors.test && errors.test.message}</span>
+        </div>
+      );
+    };
+
+    expect(renderToString(<App />)).toEqual(
+      '<div><input name="test"/><span role="alert">test error</span></div>',
+    );
+  });
+
   it('should not pass down constrained API for server side rendering', () => {
     const App = () => {
       const { register } = useForm<{

src/__tests__/useForm.test.tsx

@@ -12,6 +12,7 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import { VALIDATION_MODE } from '../constants';
 import {
   Control,
+  FieldErrors,
   RegisterOptions,
   UseFormRegister,
   UseFormReturn,
@@ -551,6 +552,55 @@ describe('useForm', () => {
 
       await waitFor(() => expect(span.textContent).toBe('data'));
     });
+
+    it('should display the latest error message with errors prop', () => {
+      const Form = () => {
+        type FormValues = {
+          test1: string;
+          test2: string;
+        };
+        const [errorsState, setErrorsState] = React.useState<
+          FieldErrors<FormValues>
+        >({
+          test1: { type: 'test1', message: 'test1 error' },
+        });
+        const {
+          register,
+          formState: { errors },
+        } = useForm<FormValues>({
+          errors: errorsState,
+        });
+
+        return (
+          <div>
+            <input {...register('test1')} type="text" />
+            <span role="alert">{errors.test1 && errors.test1.message}</span>
+            <input {...register('test2')} type="text" />
+            <span role="alert">{errors.test2 && errors.test2.message}</span>
+            <button
+              onClick={() =>
+                setErrorsState((errors) => ({
+                  ...errors,
+                  test2: { type: 'test2', message: 'test2 error' },
+                }))
+              }
+            >
+              Set Errors
+            </button>
+          </div>
+        );
+      };
+
+      render(<Form />);
+
+      const alert1 = screen.getAllByRole('alert')[0];
+      expect(alert1.textContent).toBe('test1 error');
+
+      fireEvent.click(screen.getByRole('button'));
+
+      const alert2 = screen.getAllByRole('alert')[1];
+      expect(alert2.textContent).toBe('test2 error');
+    });
   });
 
   describe('handleChangeRef', () => {

src/logic/createFormControl.ts

@@ -114,10 +114,7 @@ export function createFormControl<
     isValid: false,
     touchedFields: {},
     dirtyFields: {},
-    errors:
-      isObject(_options.errors) || isObject(_options.defaultErrors)
-        ? _options.errors || _options.defaultErrors || {}
-        : {},
+    errors: _options.errors || _options.defaultErrors || {},
     disabled: false,
   };
   let _fields: FieldRefs = {};
@@ -253,9 +250,10 @@ export function createFormControl<
   };
 
   const _setErrors = (errors: FieldErrors<TFieldValues>) => {
-    deepMerge(_formState.errors, errors);
+    _formState.errors = errors;
     _subjects.state.next({
       errors: _formState.errors,
+      isValid: false,
     });
   };
 

src/useForm.ts

@@ -66,10 +66,7 @@ export function useForm<
     submitCount: 0,
     dirtyFields: {},
     touchedFields: {},
-    errors:
-      isObject(props.errors) || isObject(props.defaultErrors)
-        ? props.errors || props.defaultErrors || {}
-        : {},
+    errors: props.errors || props.defaultErrors || {},
     disabled: false,
     defaultValues: isFunction(props.defaultValues)
       ? undefined

src/utils/isObject.ts

@@ -1,7 +1,8 @@
 import isDateObject from './isDateObject';
 import isNullOrUndefined from './isNullOrUndefined';
 
-export const isObjectType = (value: unknown) => typeof value === 'object';
+export const isObjectType = (value: unknown): value is object =>
+  typeof value === 'object';
 
 export default <T extends object>(value: unknown): value is T =>
   !isNullOrUndefined(value) &&

src/utils/swap.ts

@@ -1,3 +1,3 @@
 export default <T>(data: T[], indexA: number, indexB: number): void => {
-  data[indexA] = [data[indexB], (data[indexB] = data[indexA])][0];
+  [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
 };