@awell-health/ui-library 0.1.64 → 0.1.65

package/dist/index.js

@@ -35035,22 +35035,92 @@ Check the top-level render call using <` + t + ">.");
 
     var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
 
+    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) {
+      let copy;
+      const isArray = Array.isArray(data);
+      if (data instanceof Date) {
+        copy = new Date(data);
+      } else
+      if (data instanceof Set) {
+        copy = new Set(data);
+      } else
+      if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (
+      isArray || isObject(data))) {
+        copy = isArray ? [] : {};
+        if (!isArray && !isPlainObject(data)) {
+          copy = data;
+        } else
+        {
+          for (const key in data) {
+            if (data.hasOwnProperty(key)) {
+              copy[key] = cloneObject(data[key]);
+            }
+          }
+        }
+      } else
+      {
+        return data;
+      }
+      return copy;
+    }
+
     var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 
     var isUndefined = (val) => val === undefined;
 
-    var get = (obj, path, defaultValue) => {
-      if (!path || !isObject(obj)) {
+    var get = (object, path, defaultValue) => {
+      if (!path || !isObject(object)) {
         return defaultValue;
       }
-      const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);
-      return isUndefined(result) || result === obj ?
-      isUndefined(obj[path]) ?
+      const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+      return isUndefined(result) || result === object ?
+      isUndefined(object[path]) ?
       defaultValue :
-      obj[path] :
+      object[path] :
       result;
     };
 
+    var isBoolean = (value) => typeof value === 'boolean';
+
+    var isKey = (value) => /^\w*$/.test(value);
+
+    var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
+    var set = (object, path, value) => {
+      let index = -1;
+      const tempPath = isKey(path) ? [path] : stringToPath(path);
+      const length = tempPath.length;
+      const lastIndex = length - 1;
+      while (++index < length) {
+        const key = tempPath[index];
+        let newValue = value;
+        if (index !== lastIndex) {
+          const objValue = object[key];
+          newValue =
+          isObject(objValue) || Array.isArray(objValue) ?
+          objValue :
+          !isNaN(+tempPath[index + 1]) ?
+          [] :
+          {};
+        }
+        if (key === '__proto__') {
+          return;
+        }
+        object[key] = newValue;
+        object = object[key];
+      }
+      return object;
+    };
+
     const EVENTS = {
       BLUR: 'blur',
       FOCUS_OUT: 'focusout',
@@ -35074,46 +35144,48 @@ Check the top-level render call using <` + t + ">.");
 
 
     const HookFormContext = /*#__PURE__*/React__default["default"].createContext(null);
-    /**
-     * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
-     *
-     * @remarks
-     * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
-     *
-     * @returns return all useForm methods
-     *
-     * @example
-     * ```tsx
-     * function App() {
-     *   const methods = useForm();
-     *   const onSubmit = data => console.log(data);
-     *
-     *   return (
-     *     <FormProvider {...methods} >
-     *       <form onSubmit={methods.handleSubmit(onSubmit)}>
-     *         <NestedInput />
-     *         <input type="submit" />
-     *       </form>
-     *     </FormProvider>
-     *   );
-     * }
-     *
-     *  function NestedInput() {
-     *   const { register } = useFormContext(); // retrieve all hook methods
-     *   return <input {...register("test")} />;
-     * }
-     * ```
+    /**
+     * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+     *
+     * @returns return all useForm methods
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const methods = useForm();
+     *   const onSubmit = data => console.log(data);
+     *
+     *   return (
+     *     <FormProvider {...methods} >
+     *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+     *         <NestedInput />
+     *         <input type="submit" />
+     *       </form>
+     *     </FormProvider>
+     *   );
+     * }
+     *
+     *  function NestedInput() {
+     *   const { register } = useFormContext(); // retrieve all hook methods
+     *   return <input {...register("test")} />;
+     * }
+     * ```
      */
     const useFormContext = () => React__default["default"].useContext(HookFormContext);
 
-    var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
-      const result = {};
+    var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
+      const result = {
+        defaultValues: control._defaultValues };
+
       for (const key in formState) {
         Object.defineProperty(result, key, {
           get: () => {
             const _key = key;
-            if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
-              _proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+            if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
+              control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
             }
             localProxyFormState && (localProxyFormState[_key] = true);
             return formState[_key];
@@ -35125,7 +35197,8 @@ Check the top-level render call using <` + t + ">.");
 
     var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
-    var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
+    var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
+      updateFormState(formStateData);
       const { name, ...formState } = formStateData;
       return isEmptyObject(formState) ||
       Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
@@ -35135,12 +35208,12 @@ Check the top-level render call using <` + t + ">.");
 
     var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
 
-    var shouldSubscribeByName = (name, signalName, exact) => exact && signalName ?
-    name === signalName :
-    !name ||
+    var shouldSubscribeByName = (name, signalName, exact) => !name ||
     !signalName ||
     name === signalName ||
     convertToArrayPayload(name).some((currentName) => currentName && (
+    exact ?
+    currentName === signalName :
     currentName.startsWith(signalName) ||
     signalName.startsWith(currentName)));
 
@@ -35148,187 +35221,161 @@ Check the top-level render call using <` + t + ">.");
       const _props = React__default["default"].useRef(props);
       _props.current = props;
       React__default["default"].useEffect(() => {
-        const tearDown = (subscription) => {
-          if (subscription) {
-            subscription.unsubscribe();
-          }
-        };
         const subscription = !props.disabled &&
+        _props.current.subject &&
         _props.current.subject.subscribe({
-          next: _props.current.callback });
+          next: _props.current.next });
 
-        return () => tearDown(subscription);
+        return () => {
+          subscription && subscription.unsubscribe();
+        };
       }, [props.disabled]);
     }
 
-    /**
-     * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
-     *
-     * @remarks
-     * [API](https://react-hook-form.com/api/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
-     *
-     * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
-     *
-     * @example
-     * ```tsx
-     * function App() {
-     *   const { register, handleSubmit, control } = useForm({
-     *     defaultValues: {
-     *     firstName: "firstName"
-     *   }});
-     *   const { dirtyFields } = useFormState({
-     *     control
-     *   });
-     *   const onSubmit = (data) => console.log(data);
-     *
-     *   return (
-     *     <form onSubmit={handleSubmit(onSubmit)}>
-     *       <input {...register("firstName")} placeholder="First Name" />
-     *       {dirtyFields.firstName && <p>Field is dirty.</p>}
-     *       <input type="submit" />
-     *     </form>
-     *   );
-     * }
-     * ```
+    /**
+     * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
+     *
+     * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const { register, handleSubmit, control } = useForm({
+     *     defaultValues: {
+     *     firstName: "firstName"
+     *   }});
+     *   const { dirtyFields } = useFormState({
+     *     control
+     *   });
+     *   const onSubmit = (data) => console.log(data);
+     *
+     *   return (
+     *     <form onSubmit={handleSubmit(onSubmit)}>
+     *       <input {...register("firstName")} placeholder="First Name" />
+     *       {dirtyFields.firstName && <p>Field is dirty.</p>}
+     *       <input type="submit" />
+     *     </form>
+     *   );
+     * }
+     * ```
      */
     function useFormState(props) {
       const methods = useFormContext();
       const { control = methods.control, disabled, name, exact } = props || {};
       const [formState, updateFormState] = React__default["default"].useState(control._formState);
+      const _mounted = React__default["default"].useRef(true);
       const _localProxyFormState = React__default["default"].useRef({
         isDirty: false,
+        isLoading: false,
         dirtyFields: false,
         touchedFields: false,
+        validatingFields: false,
         isValidating: false,
         isValid: false,
         errors: false });
 
       const _name = React__default["default"].useRef(name);
-      const _mounted = React__default["default"].useRef(true);
       _name.current = name;
-      const callback = React__default["default"].useCallback((value) => _mounted.current &&
-      shouldSubscribeByName(_name.current, value.name, exact) &&
-      shouldRenderFormState(value, _localProxyFormState.current) &&
-      updateFormState({
-        ...control._formState,
-        ...value }),
-      [control, exact]);
       useSubscribe({
         disabled,
-        callback,
+        next: (value) => _mounted.current &&
+        shouldSubscribeByName(_name.current, value.name, exact) &&
+        shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) &&
+        updateFormState({
+          ...control._formState,
+          ...value }),
+
         subject: control._subjects.state });
 
       React__default["default"].useEffect(() => {
         _mounted.current = true;
+        _localProxyFormState.current.isValid && control._updateValid(true);
         return () => {
           _mounted.current = false;
         };
-      }, []);
-      return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
+      }, [control]);
+      return getProxyFormState(formState, control, _localProxyFormState.current, false);
     }
 
     var isString = (value) => typeof value === 'string';
 
-    var generateWatchOutput = (names, _names, formValues, isGlobal) => {
-      const isArray = Array.isArray(names);
+    var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
       if (isString(names)) {
         isGlobal && _names.watch.add(names);
-        return get(formValues, names);
+        return get(formValues, names, defaultValue);
       }
-      if (isArray) {
-        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
-        get(formValues, fieldName)));
+      if (Array.isArray(names)) {
+        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
       }
       isGlobal && (_names.watchAll = true);
       return formValues;
     };
 
-    var isFunction = (value) => typeof value === 'function';
-
-    var objectHasFunction = (data) => {
-      for (const key in data) {
-        if (isFunction(data[key])) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    /**
-     * Custom hook to subscribe to field change and isolate re-rendering at the component level.
-     *
-     * @remarks
-     *
-     * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
-     *
-     * @example
-     * ```tsx
-     * const { watch } = useForm();
-     * const values = useWatch({
-     *   name: "fieldName"
-     *   control,
-     * })
-     * ```
+    /**
+     * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+     *
+     * @remarks
+     *
+     * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+     *
+     * @example
+     * ```tsx
+     * const { control } = useForm();
+     * const values = useWatch({
+     *   name: "fieldName"
+     *   control,
+     * })
+     * ```
      */
     function useWatch(props) {
       const methods = useFormContext();
       const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
       const _name = React__default["default"].useRef(name);
       _name.current = name;
-      const callback = React__default["default"].useCallback((formState) => {
-        if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-          const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-          updateValue(isUndefined(_name.current) ||
-          isObject(fieldValues) && !objectHasFunction(fieldValues) ?
-          { ...fieldValues } :
-          Array.isArray(fieldValues) ?
-          [...fieldValues] :
-          isUndefined(fieldValues) ?
-          defaultValue :
-          fieldValues);
-        }
-      }, [control, exact, defaultValue]);
       useSubscribe({
         disabled,
-        subject: control._subjects.watch,
-        callback });
+        subject: control._subjects.values,
+        next: (formState) => {
+          if (shouldSubscribeByName(_name.current, formState.name, exact)) {
+            updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
+          }
+        } });
 
-      const [value, updateValue] = React__default["default"].useState(isUndefined(defaultValue) ?
-      control._getWatch(name) :
-      defaultValue);
-      React__default["default"].useEffect(() => {
-        control._removeUnmounted();
-      });
+      const [value, updateValue] = React__default["default"].useState(control._getWatch(name, defaultValue));
+      React__default["default"].useEffect(() => control._removeUnmounted());
       return value;
     }
 
-    /**
-     * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
-     *
-     * @remarks
-     * [API](https://react-hook-form.com/api/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
-     *
-     * @param props - the path name to the form field value, and validation rules.
-     *
-     * @returns field properties, field and form state. {@link UseControllerReturn}
-     *
-     * @example
-     * ```tsx
-     * function Input(props) {
-     *   const { field, fieldState, formState } = useController(props);
-     *   return (
-     *     <div>
-     *       <input {...field} placeholder={props.name} />
-     *       <p>{fieldState.isTouched && "Touched"}</p>
-     *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
-     *     </div>
-     *   );
-     * }
-     * ```
+    /**
+     * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+     *
+     * @param props - the path name to the form field value, and validation rules.
+     *
+     * @returns field properties, field and form state. {@link UseControllerReturn}
+     *
+     * @example
+     * ```tsx
+     * function Input(props) {
+     *   const { field, fieldState, formState } = useController(props);
+     *   return (
+     *     <div>
+     *       <input {...field} placeholder={props.name} />
+     *       <p>{fieldState.isTouched && "Touched"}</p>
+     *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
+     *     </div>
+     *   );
+     * }
+     * ```
      */
     function useController(props) {
       const methods = useFormContext();
-      const { name, control = methods.control, shouldUnregister } = props;
+      const { name, disabled, control = methods.control, shouldUnregister } = props;
       const isArrayField = isNameInFieldArray(control._names.array, name);
       const value = useWatch({
         control,
@@ -35342,50 +35389,67 @@ Check the top-level render call using <` + t + ">.");
 
       const _registerProps = React__default["default"].useRef(control.register(name, {
         ...props.rules,
-        value }));
+        value,
+        ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}) }));
 
       React__default["default"].useEffect(() => {
+        const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
           const field = get(control._fields, name);
-          if (field) {
+          if (field && field._f) {
             field._f.mount = value;
           }
         };
         updateMounted(name, true);
+        if (_shouldUnregisterField) {
+          const value = cloneObject(get(control._options.defaultValues, name));
+          set(control._defaultValues, name, value);
+          if (isUndefined(get(control._formValues, name))) {
+            set(control._formValues, name, value);
+          }
+        }
         return () => {
-          const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
           (isArrayField ?
-          _shouldUnregisterField && !control._stateFlags.action :
+          _shouldUnregisterField && !control._state.action :
           _shouldUnregisterField) ?
           control.unregister(name) :
           updateMounted(name, false);
         };
       }, [name, control, isArrayField, shouldUnregister]);
+      React__default["default"].useEffect(() => {
+        if (get(control._fields, name)) {
+          control._updateDisabledField({
+            disabled,
+            fields: control._fields,
+            name,
+            value: get(control._fields, name)._f.value });
+
+        }
+      }, [disabled, name, control]);
       return {
         field: {
           name,
           value,
-          onChange: React__default["default"].useCallback((event) => {
-            _registerProps.current.onChange({
-              target: {
-                value: getEventValue(event),
-                name: name },
-
-              type: EVENTS.CHANGE });
-
-          }, [name]),
-          onBlur: React__default["default"].useCallback(() => {
-            _registerProps.current.onBlur({
-              target: {
-                value: get(control._formValues, name),
-                name: name },
-
-              type: EVENTS.BLUR });
-
-          }, [name, control]),
-          ref: React__default["default"].useCallback((elm) => {
+          ...(isBoolean(disabled) || formState.disabled ?
+          { disabled: formState.disabled || disabled } :
+          {}),
+          onChange: React__default["default"].useCallback((event) => _registerProps.current.onChange({
+            target: {
+              value: getEventValue(event),
+              name: name },
+
+            type: EVENTS.CHANGE }),
+          [name]),
+          onBlur: React__default["default"].useCallback(() => _registerProps.current.onBlur({
+            target: {
+              value: get(control._formValues, name),
+              name: name },
+
+            type: EVENTS.BLUR }),
+          [name, control]),
+          ref: (elm) => {
             const field = get(control._fields, name);
-            if (elm && field && elm.focus) {
+            if (field && elm) {
               field._f.ref = {
                 focus: () => elm.focus(),
                 select: () => elm.select(),
@@ -35393,67 +35457,75 @@ Check the top-level render call using <` + t + ">.");
                 reportValidity: () => elm.reportValidity() };
 
             }
-          }, [name, control._fields]) },
+          } },
 
         formState,
         fieldState: Object.defineProperties({}, {
           invalid: {
+            enumerable: true,
             get: () => !!get(formState.errors, name) },
 
           isDirty: {
+            enumerable: true,
             get: () => !!get(formState.dirtyFields, name) },
 
           isTouched: {
+            enumerable: true,
             get: () => !!get(formState.touchedFields, name) },
 
+          isValidating: {
+            enumerable: true,
+            get: () => !!get(formState.validatingFields, name) },
+
           error: {
+            enumerable: true,
             get: () => get(formState.errors, name) } }) };
 
 
 
     }
 
-    /**
-     * Component based on `useController` hook to work with controlled component.
-     *
-     * @remarks
-     * [API](https://react-hook-form.com/api/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
-     *
-     * @param props - the path name to the form field value, and validation rules.
-     *
-     * @returns provide field handler functions, field and form state.
-     *
-     * @example
-     * ```tsx
-     * function App() {
-     *   const { control } = useForm<FormValues>({
-     *     defaultValues: {
-     *       test: ""
-     *     }
-     *   });
-     *
-     *   return (
-     *     <form>
-     *       <Controller
-     *         control={control}
-     *         name="test"
-     *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
-     *           <>
-     *             <input
-     *               onChange={onChange} // send value to hook form
-     *               onBlur={onBlur} // notify when input is touched
-     *               value={value} // return updated value
-     *               ref={ref} // set ref for focus management
-     *             />
-     *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
-     *             <p>{fieldState.isTouched ? "touched" : ""}</p>
-     *           </>
-     *         )}
-     *       />
-     *     </form>
-     *   );
-     * }
-     * ```
+    /**
+     * Component based on `useController` hook to work with controlled component.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+     *
+     * @param props - the path name to the form field value, and validation rules.
+     *
+     * @returns provide field handler functions, field and form state.
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const { control } = useForm<FormValues>({
+     *     defaultValues: {
+     *       test: ""
+     *     }
+     *   });
+     *
+     *   return (
+     *     <form>
+     *       <Controller
+     *         control={control}
+     *         name="test"
+     *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
+     *           <>
+     *             <input
+     *               onChange={onChange} // send value to hook form
+     *               onBlur={onBlur} // notify when input is touched
+     *               value={value} // return updated value
+     *               ref={ref} // set ref for focus management
+     *             />
+     *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
+     *             <p>{fieldState.isTouched ? "touched" : ""}</p>
+     *           </>
+     *         )}
+     *       />
+     *     </form>
+     *   );
+     * }
+     * ```
      */
     const Controller = (props) => props.render(useController(props));
 
@@ -35467,72 +35539,64 @@ Check the top-level render call using <` + t + ">.");
 
     {};
 
-    var isKey = (value) => /^\w*$/.test(value);
+    var getValidationModes = (mode) => ({
+      isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+      isOnBlur: mode === VALIDATION_MODE.onBlur,
+      isOnChange: mode === VALIDATION_MODE.onChange,
+      isOnAll: mode === VALIDATION_MODE.all,
+      isOnTouch: mode === VALIDATION_MODE.onTouched });
 
-    var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
 
-    function set(object, path, value) {
-      let index = -1;
-      const tempPath = isKey(path) ? [path] : stringToPath(path);
-      const length = tempPath.length;
-      const lastIndex = length - 1;
-      while (++index < length) {
-        const key = tempPath[index];
-        let newValue = value;
-        if (index !== lastIndex) {
-          const objValue = object[key];
-          newValue =
-          isObject(objValue) || Array.isArray(objValue) ?
-          objValue :
-          !isNaN(+tempPath[index + 1]) ?
-          [] :
-          {};
-        }
-        object[key] = newValue;
-        object = object[key];
-      }
-      return object;
-    }
+    var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (
+    _names.watchAll ||
+    _names.watch.has(name) ||
+    [..._names.watch].some((watchName) => name.startsWith(watchName) &&
+    /^\.\w+/.test(name.slice(watchName.length))));
 
-    const focusFieldBy = (fields, callback, fieldsNames) => {
+    const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
       for (const key of fieldsNames || Object.keys(fields)) {
         const field = get(fields, key);
         if (field) {
           const { _f, ...currentField } = field;
-          if (_f && callback(_f.name)) {
-            if (_f.ref.focus && isUndefined(_f.ref.focus())) {
+          if (_f) {
+            if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
               break;
             } else
-            if (_f.refs) {
-              _f.refs[0].focus();
+            if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
               break;
+            } else
+            {
+              iterateFieldsByAction(currentField, action);
             }
           } else
           if (isObject(currentField)) {
-            focusFieldBy(currentField, callback);
+            iterateFieldsByAction(currentField, action);
           }
         }
       }
     };
 
-    var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (
-    _names.watchAll ||
-    _names.watch.has(name) ||
-    [..._names.watch].some((watchName) => name.startsWith(watchName) &&
-    /^\.\w+/.test(name.slice(watchName.length))));
-
     var updateFieldArrayRootError = (errors, error, name) => {
-      const fieldArrayErrors = compact(get(errors, name));
+      const fieldArrayErrors = convertToArrayPayload(get(errors, name));
       set(fieldArrayErrors, 'root', error[name]);
       set(errors, name, fieldArrayErrors);
       return errors;
     };
 
-    var isBoolean = (value) => typeof value === 'boolean';
-
     var isFileInput = (element) => element.type === 'file';
 
-    var isMessage = (value) => isString(value) || /*#__PURE__*/React__default["default"].isValidElement(value);
+    var isFunction = (value) => typeof value === 'function';
+
+    var isHTMLElement = (value) => {
+      if (!isWeb) {
+        return false;
+      }
+      const owner = value ? value.ownerDocument : 0;
+      return value instanceof (
+      owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
+    };
+
+    var isMessage = (value) => isString(value);
 
     var isRadioInput = (element) => element.type === 'radio';
 
@@ -35595,15 +35659,16 @@ Check the top-level render call using <` + t + ">.");
       message: '' };
 
 
-    var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+    var validateField = async (field, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
       const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, disabled } = field._f;
+      const inputValue = get(formValues, name);
       if (!mount || disabled) {
         return {};
       }
       const inputRef = refs ? refs[0] : ref;
       const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
-          inputRef.setCustomValidity(isBoolean(message) ? '' : message || ' ');
+          inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
           inputRef.reportValidity();
         }
       };
@@ -35611,7 +35676,10 @@ Check the top-level render call using <` + t + ">.");
       const isRadio = isRadioInput(ref);
       const isCheckBox = isCheckBoxInput(ref);
       const isRadioOrCheckbox = isRadio || isCheckBox;
-      const isEmpty = (valueAsNumber || isFileInput(ref)) && !ref.value ||
+      const isEmpty = (valueAsNumber || isFileInput(ref)) &&
+      isUndefined(ref.value) &&
+      isUndefined(inputValue) ||
+      isHTMLElement(ref) && ref.value === '' ||
       inputValue === '' ||
       Array.isArray(inputValue) && !inputValue.length;
       const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
@@ -35653,7 +35721,8 @@ Check the top-level render call using <` + t + ">.");
         const maxOutput = getValueAndMessage(max);
         const minOutput = getValueAndMessage(min);
         if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
-          const valueNumber = ref.valueAsNumber || +inputValue;
+          const valueNumber = ref.valueAsNumber || (
+          inputValue ? +inputValue : inputValue);
           if (!isNullOrUndefined(maxOutput.value)) {
             exceedMax = valueNumber > maxOutput.value;
           }
@@ -35663,11 +35732,22 @@ Check the top-level render call using <` + t + ">.");
         } else
         {
           const valueDate = ref.valueAsDate || new Date(inputValue);
-          if (isString(maxOutput.value)) {
-            exceedMax = valueDate > new Date(maxOutput.value);
-          }
-          if (isString(minOutput.value)) {
-            exceedMin = valueDate < new Date(minOutput.value);
+          const convertTimeToDate = (time) => new Date(new Date().toDateString() + ' ' + time);
+          const isTime = ref.type == 'time';
+          const isWeek = ref.type == 'week';
+          if (isString(maxOutput.value) && inputValue) {
+            exceedMax = isTime ?
+            convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) :
+            isWeek ?
+            inputValue > maxOutput.value :
+            valueDate > new Date(maxOutput.value);
+          }
+          if (isString(minOutput.value) && inputValue) {
+            exceedMin = isTime ?
+            convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) :
+            isWeek ?
+            inputValue < minOutput.value :
+            valueDate < new Date(minOutput.value);
           }
         }
         if (exceedMax || exceedMin) {
@@ -35684,9 +35764,9 @@ Check the top-level render call using <` + t + ">.");
         const maxLengthOutput = getValueAndMessage(maxLength);
         const minLengthOutput = getValueAndMessage(minLength);
         const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
-        inputValue.length > maxLengthOutput.value;
+        inputValue.length > +maxLengthOutput.value;
         const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
-        inputValue.length < minLengthOutput.value;
+        inputValue.length < +minLengthOutput.value;
         if (exceedMax || exceedMin) {
           getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
           if (!validateAllFieldCriteria) {
@@ -35712,7 +35792,7 @@ Check the top-level render call using <` + t + ">.");
       }
       if (validate) {
         if (isFunction(validate)) {
-          const result = await validate(inputValue);
+          const result = await validate(inputValue, formValues);
           const validateError = getValidateError(result, inputRef);
           if (validateError) {
             error[name] = {
@@ -35731,7 +35811,7 @@ Check the top-level render call using <` + t + ">.");
             if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
               break;
             }
-            const validateError = getValidateError(await validate[key](inputValue), inputRef, key);
+            const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
             if (validateError) {
               validationResult = {
                 ...validateError,
@@ -35758,43 +35838,6 @@ Check the top-level render call using <` + t + ">.");
       return error;
     };
 
-    var isWeb = typeof window !== 'undefined' &&
-    typeof window.HTMLElement !== 'undefined' &&
-    typeof document !== 'undefined';
-
-    function cloneObject(data) {
-      let copy;
-      const isArray = Array.isArray(data);
-      if (data instanceof Date) {
-        copy = new Date(data);
-      } else
-      if (data instanceof Set) {
-        copy = new Set(data);
-      } else
-      if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (
-      isArray || isObject(data))) {
-        copy = isArray ? [] : {};
-        for (const key in data) {
-          if (isFunction(data[key])) {
-            copy = data;
-            break;
-          }
-          copy[key] = cloneObject(data[key]);
-        }
-      } else
-      {
-        return data;
-      }
-      return copy;
-    }
-
-    var getValidationModes = (mode) => ({
-      isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-      isOnBlur: mode === VALIDATION_MODE.onBlur,
-      isOnChange: mode === VALIDATION_MODE.onChange,
-      isOnAll: mode === VALIDATION_MODE.all,
-      isOnTouch: mode === VALIDATION_MODE.onTouched });
-
     function baseGet(object, updatePath) {
       const length = updatePath.slice(0, -1).length;
       let index = 0;
@@ -35805,47 +35848,37 @@ Check the top-level render call using <` + t + ">.");
     }
     function isEmptyArray(obj) {
       for (const key in obj) {
-        if (!isUndefined(obj[key])) {
+        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
           return false;
         }
       }
       return true;
     }
     function unset(object, path) {
-      const updatePath = isKey(path) ? [path] : stringToPath(path);
-      const childObject = updatePath.length == 1 ? object : baseGet(object, updatePath);
-      const key = updatePath[updatePath.length - 1];
-      let previousObjRef;
+      const paths = Array.isArray(path) ?
+      path :
+      isKey(path) ?
+      [path] :
+      stringToPath(path);
+      const childObject = paths.length === 1 ? object : baseGet(object, paths);
+      const index = paths.length - 1;
+      const key = paths[index];
       if (childObject) {
         delete childObject[key];
       }
-      for (let k = 0; k < updatePath.slice(0, -1).length; k++) {
-        let index = -1;
-        let objectRef;
-        const currentPaths = updatePath.slice(0, -(k + 1));
-        const currentPathsLength = currentPaths.length - 1;
-        if (k > 0) {
-          previousObjRef = object;
-        }
-        while (++index < currentPaths.length) {
-          const item = currentPaths[index];
-          objectRef = objectRef ? objectRef[item] : object[item];
-          if (currentPathsLength === index && (
-          isObject(objectRef) && isEmptyObject(objectRef) ||
-          Array.isArray(objectRef) && isEmptyArray(objectRef))) {
-            previousObjRef ? delete previousObjRef[item] : delete object[item];
-          }
-          previousObjRef = objectRef;
-        }
+      if (index !== 0 && (
+      isObject(childObject) && isEmptyObject(childObject) ||
+      Array.isArray(childObject) && isEmptyArray(childObject))) {
+        unset(object, paths.slice(0, -1));
       }
       return object;
     }
 
-    function createSubject() {
+    var createSubject = () => {
       let _observers = [];
       const next = (value) => {
         for (const observer of _observers) {
-          observer.next(value);
+          observer.next && observer.next(value);
         }
       };
       const subscribe = (observer) => {
@@ -35867,7 +35900,7 @@ Check the top-level render call using <` + t + ">.");
         subscribe,
         unsubscribe };
 
-    }
+    };
 
     var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
@@ -35902,18 +35935,21 @@ Check the top-level render call using <` + t + ">.");
       return true;
     }
 
-    var isHTMLElement = (value) => {
-      const owner = value ? value.ownerDocument : 0;
-      const ElementClass = owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement;
-      return value instanceof ElementClass;
-    };
-
     var isMultipleSelect = (element) => element.type === `select-multiple`;
 
     var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
     var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
+    var objectHasFunction = (data) => {
+      for (const key in data) {
+        if (isFunction(data[key])) {
+          return true;
+        }
+      }
+      return false;
+    };
+
     function markFieldsDirty(data, fields = {}) {
       const isParentNodeArray = Array.isArray(data);
       if (isObject(data) || isParentNodeArray) {
@@ -35958,9 +35994,11 @@ Check the top-level render call using <` + t + ">.");
     var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value) ?
     value :
     valueAsNumber ?
-    value === '' || isNullOrUndefined(value) ?
+    value === '' ?
     NaN :
+    value ?
     +value :
+    value :
     valueAsDate && isString(value) ?
     new Date(value) :
     setValueAs ?
@@ -36002,7 +36040,7 @@ Check the top-level render call using <` + t + ">.");
     };
 
     var getRuleValue = (rule) => isUndefined(rule) ?
-    undefined :
+    rule :
     isRegex(rule) ?
     rule.source :
     isObject(rule) ?
@@ -36078,23 +36116,28 @@ Check the top-level render call using <` + t + ">.");
         ...props };
 
       let _formState = {
+        submitCount: 0,
         isDirty: false,
+        isLoading: isFunction(_options.defaultValues),
         isValidating: false,
-        dirtyFields: {},
         isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
         isSubmitting: false,
         isSubmitSuccessful: false,
         isValid: false,
-        errors: {} };
+        touchedFields: {},
+        dirtyFields: {},
+        validatingFields: {},
+        errors: _options.errors || {},
+        disabled: _options.disabled || false };
 
       let _fields = {};
-      let _defaultValues = cloneObject(_options.defaultValues) || {};
+      let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values) ?
+      cloneObject(_options.defaultValues || _options.values) || {} :
+      {};
       let _formValues = _options.shouldUnregister ?
       {} :
       cloneObject(_defaultValues);
-      let _stateFlags = {
+      let _state = {
         action: false,
         mount: false,
         watch: false };
@@ -36107,17 +36150,17 @@ Check the top-level render call using <` + t + ">.");
 
       let delayErrorCallback;
       let timer = 0;
-      let validateFields = {};
       const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
+        validatingFields: false,
         touchedFields: false,
         isValidating: false,
         isValid: false,
         errors: false };
 
       const _subjects = {
-        watch: createSubject(),
+        values: createSubject(),
         array: createSubject(),
         state: createSubject() };
 
@@ -36126,32 +36169,43 @@ Check the top-level render call using <` + t + ">.");
       const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
       const debounce = (callback) => (wait) => {
         clearTimeout(timer);
-        timer = window.setTimeout(callback, wait);
+        timer = setTimeout(callback, wait);
       };
-      const _updateValid = async (shouldSkipRender) => {
-        let isValid = false;
-        if (_proxyFormState.isValid) {
-          isValid = _options.resolver ?
+      const _updateValid = async (shouldUpdateValid) => {
+        if (_proxyFormState.isValid || shouldUpdateValid) {
+          const isValid = _options.resolver ?
           isEmptyObject((await _executeSchema()).errors) :
           await executeBuiltInValidation(_fields, true);
-          if (!shouldSkipRender && isValid !== _formState.isValid) {
-            _formState.isValid = isValid;
+          if (isValid !== _formState.isValid) {
             _subjects.state.next({
               isValid });
 
           }
         }
-        return isValid;
+      };
+      const _updateIsValidating = (names, isValidating) => {
+        if (_proxyFormState.isValidating || _proxyFormState.validatingFields) {
+          (names || Array.from(_names.mount)).forEach((name) => {
+            if (name) {
+              isValidating ?
+              set(_formState.validatingFields, name, isValidating) :
+              unset(_formState.validatingFields, name);
+            }
+          });
+          _subjects.state.next({
+            validatingFields: _formState.validatingFields,
+            isValidating: !isEmptyObject(_formState.validatingFields) });
+
+        }
       };
       const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
-          _stateFlags.action = true;
+          _state.action = true;
           if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
             const fieldValues = method(get(_fields, name), args.argA, args.argB);
             shouldSetValues && set(_fields, name, fieldValues);
           }
-          if (_proxyFormState.errors &&
-          shouldUpdateFieldsAndState &&
+          if (shouldUpdateFieldsAndState &&
           Array.isArray(get(_formState.errors, name))) {
             const errors = method(get(_formState.errors, name), args.argA, args.argB);
             shouldSetValues && set(_formState.errors, name, errors);
@@ -36167,6 +36221,7 @@ Check the top-level render call using <` + t + ">.");
             _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
           }
           _subjects.state.next({
+            name,
             isDirty: _getDirty(name, values),
             dirtyFields: _formState.dirtyFields,
             errors: _formState.errors,
@@ -36182,6 +36237,13 @@ Check the top-level render call using <` + t + ">.");
         _subjects.state.next({
           errors: _formState.errors });
 
+      };
+      const _setErrors = (errors) => {
+        _formState.errors = errors;
+        _subjects.state.next({
+          errors: _formState.errors,
+          isValid: false });
+
       };
       const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
@@ -36192,45 +36254,54 @@ Check the top-level render call using <` + t + ">.");
           shouldSkipSetValueAs ?
           set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) :
           setFieldValue(name, defaultValue);
-          _stateFlags.mount && _updateValid();
+          _state.mount && _updateValid();
         }
       };
       const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
-        let isFieldDirty = false;
+        let shouldUpdateField = false;
+        let isPreviousDirty = false;
         const output = {
           name };
 
-        const isPreviousFieldTouched = get(_formState.touchedFields, name);
-        if (_proxyFormState.isDirty) {
-          const isPreviousFormDirty = _formState.isDirty;
-          _formState.isDirty = output.isDirty = _getDirty();
-          isFieldDirty = isPreviousFormDirty !== output.isDirty;
-        }
-        if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
-          const isPreviousFieldDirty = get(_formState.dirtyFields, name);
-          const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
-          isCurrentFieldPristine ?
+        const disabledField = !!(get(_fields, name) &&
+        get(_fields, name)._f &&
+        get(_fields, name)._f.disabled);
+        if (!isBlurEvent || shouldDirty) {
+          if (_proxyFormState.isDirty) {
+            isPreviousDirty = _formState.isDirty;
+            _formState.isDirty = output.isDirty = _getDirty();
+            shouldUpdateField = isPreviousDirty !== output.isDirty;
+          }
+          const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
+          isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
+          isCurrentFieldPristine || disabledField ?
           unset(_formState.dirtyFields, name) :
           set(_formState.dirtyFields, name, true);
           output.dirtyFields = _formState.dirtyFields;
-          isFieldDirty =
-          isFieldDirty ||
-          isPreviousFieldDirty !== get(_formState.dirtyFields, name);
-        }
-        if (isBlurEvent && !isPreviousFieldTouched) {
-          set(_formState.touchedFields, name, isBlurEvent);
-          output.touchedFields = _formState.touchedFields;
-          isFieldDirty =
-          isFieldDirty ||
-          _proxyFormState.touchedFields &&
-          isPreviousFieldTouched !== isBlurEvent;
-        }
-        isFieldDirty && shouldRender && _subjects.state.next(output);
-        return isFieldDirty ? output : {};
+          shouldUpdateField =
+          shouldUpdateField ||
+          _proxyFormState.dirtyFields &&
+          isPreviousDirty !== !isCurrentFieldPristine;
+        }
+        if (isBlurEvent) {
+          const isPreviousFieldTouched = get(_formState.touchedFields, name);
+          if (!isPreviousFieldTouched) {
+            set(_formState.touchedFields, name, isBlurEvent);
+            output.touchedFields = _formState.touchedFields;
+            shouldUpdateField =
+            shouldUpdateField ||
+            _proxyFormState.touchedFields &&
+            isPreviousFieldTouched !== isBlurEvent;
+          }
+        }
+        shouldUpdateField && shouldRender && _subjects.state.next(output);
+        return shouldUpdateField ? output : {};
       };
-      const shouldRenderByError = async (name, isValid, error, fieldState) => {
+      const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
-        const shouldUpdateValid = _proxyFormState.isValid && _formState.isValid !== isValid;
+        const shouldUpdateValid = _proxyFormState.isValid &&
+        isBoolean(isValid) &&
+        _formState.isValid !== isValid;
         if (props.delayError && error) {
           delayErrorCallback = debounce(() => updateErrors(name, error));
           delayErrorCallback(props.delayError);
@@ -36247,7 +36318,7 @@ Check the top-level render call using <` + t + ">.");
         shouldUpdateValid) {
           const updatedFormState = {
             ...fieldState,
-            ...(shouldUpdateValid ? { isValid } : {}),
+            ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
             errors: _formState.errors,
             name };
 
@@ -36257,20 +36328,15 @@ Check the top-level render call using <` + t + ">.");
 
           _subjects.state.next(updatedFormState);
         }
-        validateFields[name]--;
-        if (_proxyFormState.isValidating &&
-        !Object.values(validateFields).some((v) => v)) {
-          _subjects.state.next({
-            isValidating: false });
-
-          validateFields = {};
-        }
       };
-      const _executeSchema = async (name) => _options.resolver ?
-      await _options.resolver({ ..._formValues }, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation)) :
-      {};
+      const _executeSchema = async (name) => {
+        _updateIsValidating(name, true);
+        const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
+        _updateIsValidating(name);
+        return result;
+      };
       const executeSchemaAndUpdateState = async (names) => {
-        const { errors } = await _executeSchema();
+        const { errors } = await _executeSchema(names);
         if (names) {
           for (const name of names) {
             const error = get(errors, name);
@@ -36293,7 +36359,9 @@ Check the top-level render call using <` + t + ">.");
             const { _f, ...fieldValue } = field;
             if (_f) {
               const isFieldArrayRoot = _names.array.has(_f.name);
-              const fieldError = await validateField(field, get(_formValues, _f.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
+              _updateIsValidating([name], true);
+              const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+              _updateIsValidating([name]);
               if (fieldError[_f.name]) {
                 context.valid = false;
                 if (shouldOnlyCheckValid) {
@@ -36326,19 +36394,16 @@ Check the top-level render call using <` + t + ">.");
       };
       const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
       !deepEqual(getValues(), _defaultValues));
-      const _getWatch = (names, defaultValue, isGlobal) => {
-        const fieldValues = {
-          ...(_stateFlags.mount ?
-          _formValues :
-          isUndefined(defaultValue) ?
-          _defaultValues :
-          isString(names) ?
-          { [names]: defaultValue } :
-          defaultValue) };
-
-        return generateWatchOutput(names, _names, fieldValues, isGlobal);
-      };
-      const _getFieldArray = (name) => compact(get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
+      const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
+        ...(_state.mount ?
+        _formValues :
+        isUndefined(defaultValue) ?
+        _defaultValues :
+        isString(names) ?
+        { [names]: defaultValue } :
+        defaultValue) },
+      isGlobal, defaultValue);
+      const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
       const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);
         let fieldValue = value;
@@ -36348,16 +36413,16 @@ Check the top-level render call using <` + t + ">.");
             !fieldReference.disabled &&
             set(_formValues, name, getFieldValueAs(value, fieldReference));
             fieldValue =
-            isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value) ?
+            isHTMLElement(fieldReference.ref) && isNullOrUndefined(value) ?
             '' :
             value;
             if (isMultipleSelect(fieldReference.ref)) {
-              [...fieldReference.ref.options].forEach((selectRef) => selectRef.selected = fieldValue.includes(selectRef.value));
+              [...fieldReference.ref.options].forEach((optionRef) => optionRef.selected = fieldValue.includes(optionRef.value));
             } else
             if (fieldReference.refs) {
               if (isCheckBoxInput(fieldReference.ref)) {
                 fieldReference.refs.length > 1 ?
-                fieldReference.refs.forEach((checkboxRef) => !checkboxRef.disabled && (
+                fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) && (
                 checkboxRef.checked = Array.isArray(fieldValue) ?
                 !!fieldValue.find((data) => data === checkboxRef.value) :
                 fieldValue === checkboxRef.value)) :
@@ -36374,8 +36439,9 @@ Check the top-level render call using <` + t + ">.");
             {
               fieldReference.ref.value = fieldValue;
               if (!fieldReference.ref.type) {
-                _subjects.watch.next({
-                  name });
+                _subjects.values.next({
+                  name,
+                  values: { ..._formValues } });
 
               }
             }
@@ -36406,14 +36472,13 @@ Check the top-level render call using <` + t + ">.");
         if (isFieldArray) {
           _subjects.array.next({
             name,
-            values: _formValues });
+            values: { ..._formValues } });
 
           if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
           options.shouldDirty) {
-            _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
             _subjects.state.next({
               name,
-              dirtyFields: _formState.dirtyFields,
+              dirtyFields: getDirtyFields(_defaultValues, _formValues),
               isDirty: _getDirty(name, cloneValue) });
 
           }
@@ -36423,21 +36488,28 @@ Check the top-level render call using <` + t + ">.");
           setValues(name, cloneValue, options) :
           setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next({});
-        _subjects.watch.next({
-          name });
+        isWatched(name, _names) && _subjects.state.next({ ..._formState });
+        _subjects.values.next({
+          name: _state.mount ? name : undefined,
+          values: { ..._formValues } });
 
       };
       const onChange = async (event) => {
+        _state.mount = true;
         const target = event.target;
         let name = target.name;
+        let isFieldValueUpdated = true;
         const field = get(_fields, name);
+        const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
+        const _updateIsFieldValueUpdated = (fieldValue) => {
+          isFieldValueUpdated =
+          Number.isNaN(fieldValue) ||
+          fieldValue === get(_formValues, name, fieldValue);
+        };
         if (field) {
           let error;
           let isValid;
-          const fieldValue = target.type ?
-          getFieldValue(field._f) :
-          getEventValue(event);
+          const fieldValue = getCurrentFieldValue();
           const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
           const shouldSkipValidation = !hasValidation(field._f) &&
           !_options.resolver &&
@@ -36456,43 +36528,60 @@ Check the top-level render call using <` + t + ">.");
           const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
           const shouldRender = !isEmptyObject(fieldState) || watched;
           !isBlurEvent &&
-          _subjects.watch.next({
+          _subjects.values.next({
             name,
-            type: event.type });
+            type: event.type,
+            values: { ..._formValues } });
 
           if (shouldSkipValidation) {
+            _proxyFormState.isValid && _updateValid();
             return shouldRender &&
             _subjects.state.next({ name, ...(watched ? {} : fieldState) });
           }
-          !isBlurEvent && watched && _subjects.state.next({});
-          validateFields[name] = validateFields[name] ? +1 : 1;
-          _subjects.state.next({
-            isValidating: true });
-
+          !isBlurEvent && watched && _subjects.state.next({ ..._formState });
           if (_options.resolver) {
             const { errors } = await _executeSchema([name]);
-            const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
-            const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
-            error = errorLookupResult.error;
-            name = errorLookupResult.name;
-            isValid = isEmptyObject(errors);
+            _updateIsFieldValueUpdated(fieldValue);
+            if (isFieldValueUpdated) {
+              const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+              const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+              error = errorLookupResult.error;
+              name = errorLookupResult.name;
+              isValid = isEmptyObject(errors);
+            }
           } else
           {
-            error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-            isValid = await _updateValid(true);
+            _updateIsValidating([name], true);
+            error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+            _updateIsValidating([name]);
+            _updateIsFieldValueUpdated(fieldValue);
+            if (isFieldValueUpdated) {
+              if (error) {
+                isValid = false;
+              } else
+              if (_proxyFormState.isValid) {
+                isValid = await executeBuiltInValidation(_fields, true);
+              }
+            }
           }
-          field._f.deps &&
-          trigger(field._f.deps);
-          shouldRenderByError(name, isValid, error, fieldState);
+          if (isFieldValueUpdated) {
+            field._f.deps &&
+            trigger(field._f.deps);
+            shouldRenderByError(name, isValid, error, fieldState);
+          }
+        }
+      };
+      const _focusInput = (ref, key) => {
+        if (get(_formState.errors, key) && ref.focus) {
+          ref.focus();
+          return 1;
         }
+        return;
       };
       const trigger = async (name, options = {}) => {
         let isValid;
         let validationResult;
         const fieldNames = convertToArrayPayload(name);
-        _subjects.state.next({
-          isValidating: true });
-
         if (_options.resolver) {
           const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
           isValid = isEmptyObject(errors);
@@ -36515,19 +36604,17 @@ Check the top-level render call using <` + t + ">.");
           _proxyFormState.isValid && isValid !== _formState.isValid ?
           {} :
           { name }),
-          ...(_options.resolver ? { isValid } : {}),
-          errors: _formState.errors,
-          isValidating: false });
+          ...(_options.resolver || !name ? { isValid } : {}),
+          errors: _formState.errors });
 
         options.shouldFocus &&
         !validationResult &&
-        focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
+        iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
         return validationResult;
       };
       const getValues = (fieldNames) => {
         const values = {
-          ..._defaultValues,
-          ...(_stateFlags.mount ? _formValues : {}) };
+          ...(_state.mount ? _formValues : _defaultValues) };
 
         return isUndefined(fieldNames) ?
         values :
@@ -36538,20 +36625,24 @@ Check the top-level render call using <` + t + ">.");
       const getFieldState = (name, formState) => ({
         invalid: !!get((formState || _formState).errors, name),
         isDirty: !!get((formState || _formState).dirtyFields, name),
-        isTouched: !!get((formState || _formState).touchedFields, name),
-        error: get((formState || _formState).errors, name) });
+        error: get((formState || _formState).errors, name),
+        isValidating: !!get(_formState.validatingFields, name),
+        isTouched: !!get((formState || _formState).touchedFields, name) });
 
       const clearErrors = (name) => {
-        name ?
-        convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName)) :
-        _formState.errors = {};
+        name &&
+        convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
         _subjects.state.next({
-          errors: _formState.errors });
+          errors: name ? _formState.errors : {} });
 
       };
       const setError = (name, error, options) => {
         const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
+        const currentError = get(_formState.errors, name) || {};
+        // Don't override existing error messages elsewhere in the object tree.
+        const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
         set(_formState.errors, name, {
+          ...restOfErrorTree,
           ...error,
           ref });
 
@@ -36563,38 +36654,52 @@ Check the top-level render call using <` + t + ">.");
         options && options.shouldFocus && ref && ref.focus && ref.focus();
       };
       const watch = (name, defaultValue) => isFunction(name) ?
-      _subjects.watch.subscribe({
-        next: (info) => name(_getWatch(undefined, defaultValue), info) }) :
+      _subjects.values.subscribe({
+        next: (payload) => name(_getWatch(undefined, defaultValue), payload) }) :
 
       _getWatch(name, defaultValue, true);
       const unregister = (name, options = {}) => {
         for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
           _names.mount.delete(fieldName);
           _names.array.delete(fieldName);
-          if (get(_fields, fieldName)) {
-            if (!options.keepValue) {
-              unset(_fields, fieldName);
-              unset(_formValues, fieldName);
-            }
-            !options.keepError && unset(_formState.errors, fieldName);
-            !options.keepDirty && unset(_formState.dirtyFields, fieldName);
-            !options.keepTouched && unset(_formState.touchedFields, fieldName);
-            !_options.shouldUnregister &&
-            !options.keepDefaultValue &&
-            unset(_defaultValues, fieldName);
-          }
-        }
-        _subjects.watch.next({});
+          if (!options.keepValue) {
+            unset(_fields, fieldName);
+            unset(_formValues, fieldName);
+          }
+          !options.keepError && unset(_formState.errors, fieldName);
+          !options.keepDirty && unset(_formState.dirtyFields, fieldName);
+          !options.keepTouched && unset(_formState.touchedFields, fieldName);
+          !options.keepIsValidating &&
+          unset(_formState.validatingFields, fieldName);
+          !_options.shouldUnregister &&
+          !options.keepDefaultValue &&
+          unset(_defaultValues, fieldName);
+        }
+        _subjects.values.next({
+          values: { ..._formValues } });
+
         _subjects.state.next({
           ..._formState,
           ...(!options.keepDirty ? {} : { isDirty: _getDirty() }) });
 
         !options.keepIsValid && _updateValid();
       };
+      const _updateDisabledField = ({ disabled, name, field, fields, value }) => {
+        if (isBoolean(disabled) && _state.mount || !!disabled) {
+          const inputValue = disabled ?
+          undefined :
+          isUndefined(value) ?
+          getFieldValue(field ? field._f : get(fields, name)._f) :
+          value;
+          set(_formValues, name, inputValue);
+          updateTouchAndDirty(name, inputValue, false, false, true);
+        }
+      };
       const register = (name, options = {}) => {
         let field = get(_fields, name);
         const disabledIsDefined = isBoolean(options.disabled);
         set(_fields, name, {
+          ...(field || {}),
           _f: {
             ...(field && field._f ? field._f : { ref: { name } }),
             name,
@@ -36603,15 +36708,20 @@ Check the top-level render call using <` + t + ">.");
 
 
         _names.mount.add(name);
-        field ?
-        disabledIsDefined &&
-        set(_formValues, name, options.disabled ?
-        undefined :
-        get(_formValues, name, getFieldValue(field._f))) :
-        updateValidAndValue(name, true, options.value);
+        if (field) {
+          _updateDisabledField({
+            field,
+            disabled: options.disabled,
+            name,
+            value: options.value });
+
+        } else
+        {
+          updateValidAndValue(name, true, options.value);
+        }
         return {
           ...(disabledIsDefined ? { disabled: options.disabled } : {}),
-          ...(_options.shouldUseNativeValidation ?
+          ...(_options.progressive ?
           {
             required: !!options.required,
             min: getRuleValue(options.min),
@@ -36648,9 +36758,7 @@ Check the top-level render call using <` + t + ">.");
                     refs: [
                     ...refs.filter(live),
                     fieldRef,
-                    ...(!!Array.isArray(get(_defaultValues, name)) ?
-                    [{}] :
-                    [])],
+                    ...(Array.isArray(get(_defaultValues, name)) ? [{}] : [])],
 
                     ref: { type: fieldRef.type, name } } :
 
@@ -36665,69 +36773,86 @@ Check the top-level render call using <` + t + ">.");
                 field._f.mount = false;
               }
               (_options.shouldUnregister || options.shouldUnregister) &&
-              !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
+              !(isNameInFieldArray(_names.array, name) && _state.action) &&
               _names.unMount.add(name);
             }
           } };
 
       };
+      const _focusError = () => _options.shouldFocusError &&
+      iterateFieldsByAction(_fields, _focusInput, _names.mount);
+      const _disableForm = (disabled) => {
+        if (isBoolean(disabled)) {
+          _subjects.state.next({ disabled });
+          iterateFieldsByAction(_fields, (ref, name) => {
+            const currentField = get(_fields, name);
+            if (currentField) {
+              ref.disabled = currentField._f.disabled || disabled;
+              if (Array.isArray(currentField._f.refs)) {
+                currentField._f.refs.forEach((inputRef) => {
+                  inputRef.disabled = currentField._f.disabled || disabled;
+                });
+              }
+            }
+          }, 0, false);
+        }
+      };
       const handleSubmit = (onValid, onInvalid) => async (e) => {
+        let onValidError = undefined;
         if (e) {
           e.preventDefault && e.preventDefault();
           e.persist && e.persist();
         }
-        let hasNoPromiseError = true;
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
           isSubmitting: true });
 
-        try {
-          if (_options.resolver) {
-            const { errors, values } = await _executeSchema();
-            _formState.errors = errors;
-            fieldValues = values;
-          } else
-          {
-            await executeBuiltInValidation(_fields);
-          }
-          if (isEmptyObject(_formState.errors)) {
-            _subjects.state.next({
-              errors: {},
-              isSubmitting: true });
+        if (_options.resolver) {
+          const { errors, values } = await _executeSchema();
+          _formState.errors = errors;
+          fieldValues = values;
+        } else
+        {
+          await executeBuiltInValidation(_fields);
+        }
+        unset(_formState.errors, 'root');
+        if (isEmptyObject(_formState.errors)) {
+          _subjects.state.next({
+            errors: {} });
 
+          try {
             await onValid(fieldValues, e);
-          } else
-          {
-            if (onInvalid) {
-              await onInvalid({ ..._formState.errors }, e);
-            }
-            _options.shouldFocusError &&
-            focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
           }
-        }
-        catch (err) {
-          hasNoPromiseError = false;
-          throw err;
-        } finally
+          catch (error) {
+            onValidError = error;
+          }
+        } else
         {
-          _formState.isSubmitted = true;
-          _subjects.state.next({
-            isSubmitted: true,
-            isSubmitting: false,
-            isSubmitSuccessful: isEmptyObject(_formState.errors) && hasNoPromiseError,
-            submitCount: _formState.submitCount + 1,
-            errors: _formState.errors });
+          if (onInvalid) {
+            await onInvalid({ ..._formState.errors }, e);
+          }
+          _focusError();
+          setTimeout(_focusError);
+        }
+        _subjects.state.next({
+          isSubmitted: true,
+          isSubmitting: false,
+          isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
+          submitCount: _formState.submitCount + 1,
+          errors: _formState.errors });
 
+        if (onValidError) {
+          throw onValidError;
         }
       };
       const resetField = (name, options = {}) => {
         if (get(_fields, name)) {
           if (isUndefined(options.defaultValue)) {
-            setValue(name, get(_defaultValues, name));
+            setValue(name, cloneObject(get(_defaultValues, name)));
           } else
           {
             setValue(name, options.defaultValue);
-            set(_defaultValues, name, options.defaultValue);
+            set(_defaultValues, name, cloneObject(options.defaultValue));
           }
           if (!options.keepTouched) {
             unset(_formState.touchedFields, name);
@@ -36735,7 +36860,7 @@ Check the top-level render call using <` + t + ">.");
           if (!options.keepDirty) {
             unset(_formState.dirtyFields, name);
             _formState.isDirty = options.defaultValue ?
-            _getDirty(name, get(_defaultValues, name)) :
+            _getDirty(name, cloneObject(get(_defaultValues, name))) :
             _getDirty();
           }
           if (!options.keepError) {
@@ -36745,12 +36870,11 @@ Check the top-level render call using <` + t + ">.");
           _subjects.state.next({ ..._formState });
         }
       };
-      const reset = (formValues, keepStateOptions = {}) => {
-        const updatedValues = formValues || _defaultValues;
+      const _reset = (formValues, keepStateOptions = {}) => {
+        const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
-        const values = formValues && !isEmptyObject(formValues) ?
-        cloneUpdatedValues :
-        _defaultValues;
+        const isEmptyResetValues = isEmptyObject(formValues);
+        const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
         if (!keepStateOptions.keepDefaultValues) {
           _defaultValues = updatedValues;
         }
@@ -36770,13 +36894,13 @@ Check the top-level render call using <` + t + ">.");
                   const fieldReference = Array.isArray(field._f.refs) ?
                   field._f.refs[0] :
                   field._f.ref;
-                  try {
-                    if (isHTMLElement(fieldReference)) {
-                      fieldReference.closest('form').reset();
+                  if (isHTMLElement(fieldReference)) {
+                    const form = fieldReference.closest('form');
+                    if (form) {
+                      form.reset();
                       break;
                     }
                   }
-                  catch (_a) {}
                 }
               }
             }
@@ -36786,82 +36910,123 @@ Check the top-level render call using <` + t + ">.");
           keepStateOptions.keepDefaultValues ?
           cloneObject(_defaultValues) :
           {} :
-          cloneUpdatedValues;
+          cloneObject(values);
           _subjects.array.next({
-            values });
+            values: { ...values } });
 
-          _subjects.watch.next({
-            values });
+          _subjects.values.next({
+            values: { ...values } });
 
         }
         _names = {
-          mount: new Set(),
+          mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
           unMount: new Set(),
           array: new Set(),
           watch: new Set(),
           watchAll: false,
           focus: '' };
 
-        _stateFlags.mount =
-        !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
-        _stateFlags.watch = !!props.shouldUnregister;
+        _state.mount =
+        !_proxyFormState.isValid ||
+        !!keepStateOptions.keepIsValid ||
+        !!keepStateOptions.keepDirtyValues;
+        _state.watch = !!props.shouldUnregister;
         _subjects.state.next({
           submitCount: keepStateOptions.keepSubmitCount ?
           _formState.submitCount :
           0,
-          isDirty: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues ?
+          isDirty: isEmptyResetValues ?
+          false :
+          keepStateOptions.keepDirty ?
           _formState.isDirty :
           !!(keepStateOptions.keepDefaultValues &&
           !deepEqual(formValues, _defaultValues)),
           isSubmitted: keepStateOptions.keepIsSubmitted ?
           _formState.isSubmitted :
           false,
-          dirtyFields: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues ?
+          dirtyFields: isEmptyResetValues ?
+          {} :
+          keepStateOptions.keepDirtyValues ?
+          keepStateOptions.keepDefaultValues && _formValues ?
+          getDirtyFields(_defaultValues, _formValues) :
           _formState.dirtyFields :
           keepStateOptions.keepDefaultValues && formValues ?
           getDirtyFields(_defaultValues, formValues) :
+          keepStateOptions.keepDirty ?
+          _formState.dirtyFields :
           {},
           touchedFields: keepStateOptions.keepTouched ?
           _formState.touchedFields :
           {},
-          errors: keepStateOptions.keepErrors ?
-          _formState.errors :
-          {},
-          isSubmitting: false,
-          isSubmitSuccessful: false });
+          errors: keepStateOptions.keepErrors ? _formState.errors : {},
+          isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ?
+          _formState.isSubmitSuccessful :
+          false,
+          isSubmitting: false });
 
       };
+      const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ?
+      formValues(_formValues) :
+      formValues, keepStateOptions);
       const setFocus = (name, options = {}) => {
-        const field = get(_fields, name)._f;
-        const fieldRef = field.refs ? field.refs[0] : field.ref;
-        fieldRef.focus();
-        options.shouldSelect && fieldRef.select();
+        const field = get(_fields, name);
+        const fieldReference = field && field._f;
+        if (fieldReference) {
+          const fieldRef = fieldReference.refs ?
+          fieldReference.refs[0] :
+          fieldReference.ref;
+          if (fieldRef.focus) {
+            fieldRef.focus();
+            options.shouldSelect && fieldRef.select();
+          }
+        }
+      };
+      const _updateFormState = (updatedFormState) => {
+        _formState = {
+          ..._formState,
+          ...updatedFormState };
+
       };
+      const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
+      _options.defaultValues().then((values) => {
+        reset(values, _options.resetOptions);
+        _subjects.state.next({
+          isLoading: false });
+
+      });
       return {
         control: {
           register,
           unregister,
           getFieldState,
+          handleSubmit,
+          setError,
           _executeSchema,
           _getWatch,
           _getDirty,
           _updateValid,
           _removeUnmounted,
           _updateFieldArray,
+          _updateDisabledField,
           _getFieldArray,
+          _reset,
+          _resetDefaultValues,
+          _updateFormState,
+          _disableForm,
           _subjects,
           _proxyFormState,
+          _setErrors,
           get _fields() {
             return _fields;
           },
           get _formValues() {
             return _formValues;
           },
-          get _stateFlags() {
-            return _stateFlags;
+          get _state() {
+            return _state;
           },
-          set _stateFlags(value) {
-            _stateFlags = value;
+          set _state(value) {
+            _state = value;
           },
           get _defaultValues() {
             return _defaultValues;
@@ -36904,84 +37069,116 @@ Check the top-level render call using <` + t + ">.");
 
     }
 
-    /**
-     * Custom hook to manage the entire form.
-     *
-     * @remarks
-     * [API](https://react-hook-form.com/api/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)
-     *
-     * @param props - form configuration and validation parameters.
-     *
-     * @returns methods - individual functions to manage the form state. {@link UseFormReturn}
-     *
-     * @example
-     * ```tsx
-     * function App() {
-     *   const { register, handleSubmit, watch, formState: { errors } } = useForm();
-     *   const onSubmit = data => console.log(data);
-     *
-     *   console.log(watch("example"));
-     *
-     *   return (
-     *     <form onSubmit={handleSubmit(onSubmit)}>
-     *       <input defaultValue="test" {...register("example")} />
-     *       <input {...register("exampleRequired", { required: true })} />
-     *       {errors.exampleRequired && <span>This field is required</span>}
-     *       <input type="submit" />
-     *     </form>
-     *   );
-     * }
-     * ```
+    /**
+     * Custom hook to manage the entire form.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)
+     *
+     * @param props - form configuration and validation parameters.
+     *
+     * @returns methods - individual functions to manage the form state. {@link UseFormReturn}
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const { register, handleSubmit, watch, formState: { errors } } = useForm();
+     *   const onSubmit = data => console.log(data);
+     *
+     *   console.log(watch("example"));
+     *
+     *   return (
+     *     <form onSubmit={handleSubmit(onSubmit)}>
+     *       <input defaultValue="test" {...register("example")} />
+     *       <input {...register("exampleRequired", { required: true })} />
+     *       {errors.exampleRequired && <span>This field is required</span>}
+     *       <button>Submit</button>
+     *     </form>
+     *   );
+     * }
+     * ```
      */
     function useForm(props = {}) {
       const _formControl = React__default["default"].useRef();
+      const _values = React__default["default"].useRef();
       const [formState, updateFormState] = React__default["default"].useState({
         isDirty: false,
         isValidating: false,
-        dirtyFields: {},
+        isLoading: isFunction(props.defaultValues),
         isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
         isSubmitting: false,
         isSubmitSuccessful: false,
         isValid: false,
-        errors: {} });
+        submitCount: 0,
+        dirtyFields: {},
+        touchedFields: {},
+        validatingFields: {},
+        errors: props.errors || {},
+        disabled: props.disabled || false,
+        defaultValues: isFunction(props.defaultValues) ?
+        undefined :
+        props.defaultValues });
 
-      if (_formControl.current) {
-        _formControl.current.control._options = props;
-      } else
-      {
+      if (!_formControl.current) {
         _formControl.current = {
           ...createFormControl(props),
           formState };
 
       }
       const control = _formControl.current.control;
-      const callback = React__default["default"].useCallback((value) => {
-        if (shouldRenderFormState(value, control._proxyFormState, true)) {
-          control._formState = {
-            ...control._formState,
-            ...value };
-
-          updateFormState({ ...control._formState });
-        }
-      }, [control]);
+      control._options = props;
       useSubscribe({
         subject: control._subjects.state,
-        callback });
+        next: (value) => {
+          if (shouldRenderFormState(value, control._proxyFormState, control._updateFormState, true)) {
+            updateFormState({ ...control._formState });
+          }
+        } });
 
+      React__default["default"].useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
       React__default["default"].useEffect(() => {
-        if (!control._stateFlags.mount) {
-          control._proxyFormState.isValid && control._updateValid();
-          control._stateFlags.mount = true;
+        if (control._proxyFormState.isDirty) {
+          const isDirty = control._getDirty();
+          if (isDirty !== formState.isDirty) {
+            control._subjects.state.next({
+              isDirty });
+
+          }
+        }
+      }, [control, formState.isDirty]);
+      React__default["default"].useEffect(() => {
+        if (props.values && !deepEqual(props.values, _values.current)) {
+          control._reset(props.values, control._options.resetOptions);
+          _values.current = props.values;
+          updateFormState((state) => ({ ...state }));
+        } else
+        {
+          control._resetDefaultValues();
+        }
+      }, [props.values, control]);
+      React__default["default"].useEffect(() => {
+        if (props.errors) {
+          control._setErrors(props.errors);
+        }
+      }, [props.errors, control]);
+      React__default["default"].useEffect(() => {
+        if (!control._state.mount) {
+          control._updateValid();
+          control._state.mount = true;
         }
-        if (control._stateFlags.watch) {
-          control._stateFlags.watch = false;
-          control._subjects.state.next({});
+        if (control._state.watch) {
+          control._state.watch = false;
+          control._subjects.state.next({ ...control._formState });
         }
         control._removeUnmounted();
       });
-      _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
+      React__default["default"].useEffect(() => {
+        props.shouldUnregister &&
+        control._subjects.values.next({
+          values: control._getWatch() });
+
+      }, [props.shouldUnregister, control]);
+      _formControl.current.formState = getProxyFormState(formState, control);
       return _formControl.current;
     }
 
@@ -37725,25 +37922,32 @@ Check the top-level render call using <` + t + ">.");
       return [];
     };
     var getDirtyFieldValues = function (formMethods) {
-      var dirtyFields = formMethods.formState.dirtyFields,getValues = formMethods.getValues;
+      var getValues = formMethods.getValues,getFieldState = formMethods.getFieldState;
       var allValues = getValues();
-      var dirtyValues = Object.keys(dirtyFields).reduce(function (acc, key) {
-        if (dirtyFields[key]) {
+      var dirtyValues = Object.keys(getValues()).reduce(function (acc, key) {
+        if (getFieldState(key).isDirty) {
           acc[key] = allValues[key];
         }
         return acc;
       }, {});
       return dirtyValues;
     };
+    var markInitialValuesAsDirty = function (_a) {
+      var formMethods = _a.formMethods,defaultValues = _a.defaultValues,initialValues = _a.initialValues;
+      formMethods.reset(defaultValues);
+      Object.keys(initialValues).forEach(function (key) {
+        formMethods.setValue(key, initialValues[key], {
+          shouldDirty: true,
+          shouldTouch: true });
+
+      });
+    };
 
     var useTraditionalForm = function (_a) {
       var questions = _a.questions,evaluateDisplayConditions = _a.evaluateDisplayConditions,onSubmit = _a.onSubmit,errorLabels = _a.errorLabels,storedAnswers = _a.storedAnswers,_b = _a.autosaveAnswers,autosaveAnswers = _b === void 0 ? true : _b,onAnswersChange = _a.onAnswersChange;
       var initialValues = convertToFormFormat(storedAnswers, questions);
-      var defaultValues = !isEmpty(initialValues) && autosaveAnswers ?
-      initialValues :
-      getInitialValues(questions);
       var formMethods = useForm({
-        defaultValues: defaultValues,
+        defaultValues: getInitialValues(questions),
         shouldUnregister: false,
         shouldFocusError: true,
         mode: 'all' });
@@ -37780,6 +37984,23 @@ Check the top-level render call using <` + t + ">.");
       React.useEffect(function () {
         updateQuestionVisibility();
       }, [updateQuestionVisibility]);
+      React.useEffect(function () {
+        if (autosaveAnswers && !isEmpty(initialValues)) {
+          markInitialValuesAsDirty({
+            formMethods: formMethods,
+            initialValues: initialValues,
+            defaultValues: getInitialValues(questions) });
+
+          formMethods.trigger().then(function () {
+            var _a;
+            var allValues = formMethods.getValues();
+            if (onAnswersChange) {
+              onAnswersChange((_a = JSON.stringify(allValues)) !== null && _a !== void 0 ? _a : '{}');
+            }
+            updateQuestionVisibility();
+          });
+        }
+      }, []);
       var handleConvertAndSubmitForm = function (formResponse) {return __awaiter(void 0, void 0, void 0, function () {
           return __generator(this, function (_a) {
             switch (_a.label) {
@@ -37797,17 +38018,17 @@ Check the top-level render call using <` + t + ">.");
           });
         });};
       var submitForm = function () {return __awaiter(void 0, void 0, void 0, function () {
-          var errors;
+          var formErrors;
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:return [4, updateQuestionVisibility()];
               case 1:
                 _a.sent();
-                errors = visibleQuestions.flatMap(function (vq) {
+                formErrors = visibleQuestions.flatMap(function (vq) {
                   return getErrorsForQuestion(vq, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse);
                 });
-                setErrors(errors);
-                if (errors.length == 0) {
+                setErrors(formErrors);
+                if (formErrors.length === 0) {
                   setFormHasErrors(false);
                   formMethods.handleSubmit(handleConvertAndSubmitForm)();
                 } else
@@ -37833,11 +38054,8 @@ Check the top-level render call using <` + t + ">.");
       var questions = _a.questions,evaluateDisplayConditions = _a.evaluateDisplayConditions,onSubmit = _a.onSubmit,errorLabels = _a.errorLabels,storedAnswers = _a.storedAnswers,_b = _a.autosaveAnswers,autosaveAnswers = _b === void 0 ? true : _b,onAnswersChange = _a.onAnswersChange;
       var initialValues = convertToFormFormat(storedAnswers, questions);
       var _c = useValidate(),isValidE164Number = _c.isValidE164Number,validateDateResponse = _c.validateDateResponse,validateNumberResponse = _c.validateNumberResponse;
-      var defaultValues = !isEmpty(initialValues) && autosaveAnswers ?
-      initialValues :
-      getInitialValues(questions);
       var formMethods = useForm({
-        defaultValues: defaultValues,
+        defaultValues: getInitialValues(questions),
         shouldUnregister: false,
         shouldFocusError: true,
         mode: 'all' });
@@ -37885,6 +38103,23 @@ Check the top-level render call using <` + t + ">.");
       React.useEffect(function () {
         updateQuestionVisibility();
       }, [updateQuestionVisibility]);
+      React.useEffect(function () {
+        if (autosaveAnswers && !isEmpty(initialValues)) {
+          markInitialValuesAsDirty({
+            formMethods: formMethods,
+            initialValues: initialValues,
+            defaultValues: getInitialValues(questions) });
+
+          formMethods.trigger().then(function () {
+            var _a;
+            var allValues = formMethods.getValues();
+            if (onAnswersChange) {
+              onAnswersChange((_a = JSON.stringify(allValues)) !== null && _a !== void 0 ? _a : '{}');
+            }
+            updateQuestionVisibility();
+          });
+        }
+      }, []);
       var handleCheckForErrors = function (currentQuestion) {
         var errorsWithoutCurrent = errors.filter(function (err) {return err.id !== (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id);});
         var existingErrors = getErrorsForQuestion(currentQuestion, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse);