react-hook-form 7.0.0-rc.8 → 7.0.3

package/dist/index.umd.development.js

@@ -26,7 +26,7 @@
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  var isUndefined = (val) => val === undefined;
+  var isCheckBoxInput = (element) => element.type === 'checkbox';
 
   var isNullOrUndefined = (value) => value == null;
 
@@ -36,8 +36,20 @@
       isObjectType(value) &&
       !(value instanceof Date);
 
+  var getControllerValue = (event) => isObject(event) && event.target
+      ? isCheckBoxInput(event.target)
+          ? event.target.checked
+          : event.target.value
+      : event;
+
+  var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
+
+  var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
+
   var compact = (value) => value.filter(Boolean);
 
+  var isUndefined = (val) => val === undefined;
+
   var get = (obj = {}, path, defaultValue) => {
       const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
       return isUndefined(result) || result === obj
@@ -47,6 +59,175 @@
           : result;
   };
 
+  const EVENTS = {
+      BLUR: 'blur',
+      CHANGE: 'change',
+  };
+  const VALIDATION_MODE = {
+      onBlur: 'onBlur',
+      onChange: 'onChange',
+      onSubmit: 'onSubmit',
+      onTouched: 'onTouched',
+      all: 'all',
+  };
+  const SELECT = 'select';
+  const UNDEFINED = 'undefined';
+  const INPUT_VALIDATION_RULES = {
+      max: 'max',
+      min: 'min',
+      maxLength: 'maxLength',
+      minLength: 'minLength',
+      pattern: 'pattern',
+      required: 'required',
+      validate: 'validate',
+  };
+
+  var omit = (source, key) => {
+      const copy = Object.assign({}, source);
+      delete copy[key];
+      return copy;
+  };
+
+  const FormContext = React__namespace.createContext(null);
+  FormContext.displayName = 'RHFContext';
+  const useFormContext = () => React__namespace.useContext(FormContext);
+  const FormProvider = (props) => (React__namespace.createElement(FormContext.Provider, { value: omit(props, 'children') }, props.children));
+
+  var getProxyFormState = (isProxyEnabled, formState, readFormStateRef, localReadFormStateRef, isRoot = true) => isProxyEnabled
+      ? new Proxy(formState, {
+          get: (obj, prop) => {
+              if (prop in obj) {
+                  if (readFormStateRef.current[prop] !== VALIDATION_MODE.all) {
+                      readFormStateRef.current[prop] = isRoot
+                          ? VALIDATION_MODE.all
+                          : true;
+                  }
+                  localReadFormStateRef &&
+                      (localReadFormStateRef.current[prop] = true);
+                  return obj[prop];
+              }
+              return undefined;
+          },
+      })
+      : formState;
+
+  var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
+
+  var shouldRenderFormState = (formState, readFormStateRef, isRoot) => isEmptyObject(formState) ||
+      Object.keys(formState).length >= Object.keys(readFormStateRef).length ||
+      Object.keys(formState).find((key) => readFormStateRef[key] ===
+          (isRoot ? VALIDATION_MODE.all : true));
+
+  var isWeb = typeof window !== UNDEFINED &&
+      typeof window.HTMLElement !== UNDEFINED &&
+      typeof document !== UNDEFINED;
+
+  const isProxyEnabled = isWeb ? 'Proxy' in window : typeof Proxy !== UNDEFINED;
+
+  function useFormState(props) {
+      const methods = useFormContext();
+      const { formStateRef, formStateSubjectRef, readFormStateRef } = (props && props.control) || methods.control;
+      const [formState, updateFormState] = React__namespace.useState(formStateRef.current);
+      const readFormState = React__namespace.useRef({
+          isDirty: false,
+          dirtyFields: false,
+          touchedFields: false,
+          isValidating: false,
+          isValid: false,
+          errors: false,
+      });
+      React__namespace.useEffect(() => {
+          const formStateSubscription = formStateSubjectRef.current.subscribe({
+              next: (formState) => {
+                  shouldRenderFormState(formState, readFormState.current) &&
+                      updateFormState(Object.assign(Object.assign({}, formStateRef.current), formState));
+              },
+          });
+          return () => formStateSubscription.unsubscribe();
+      }, []);
+      return getProxyFormState(isProxyEnabled, formState, readFormStateRef, readFormState, false);
+  }
+
+  function useController({ name, rules, defaultValue, control, }) {
+      const methods = useFormContext();
+      const { defaultValuesRef, register, fieldsRef, fieldArrayNamesRef, controllerSubjectRef, } = control || methods.control;
+      const { onChange, onBlur, ref } = register(name, rules);
+      const [value, setInputStateValue] = React__namespace.useState(isUndefined(get(fieldsRef.current, name)._f.value) ||
+          isNameInFieldArray(fieldArrayNamesRef.current, name)
+          ? isUndefined(defaultValue)
+              ? get(defaultValuesRef.current, name)
+              : defaultValue
+          : get(fieldsRef.current, name)._f.value);
+      const formState = useFormState({
+          control: control || methods.control,
+      });
+      get(fieldsRef.current, name)._f.value = value;
+      React__namespace.useEffect(() => {
+          const controllerSubscription = controllerSubjectRef.current.subscribe({
+              next: (data) => (!data.name || name === data.name) &&
+                  setInputStateValue(get(data.values, name)),
+          });
+          ref({
+              target: value,
+          });
+          return () => controllerSubscription.unsubscribe();
+      }, [name]);
+      return {
+          field: {
+              onChange: (event) => {
+                  const value = getControllerValue(event);
+                  setInputStateValue(value);
+                  onChange({
+                      target: {
+                          value,
+                          name: name,
+                      },
+                      type: EVENTS.CHANGE,
+                  });
+              },
+              onBlur: () => {
+                  onBlur({
+                      target: {
+                          name: name,
+                      },
+                      type: EVENTS.BLUR,
+                  });
+              },
+              name,
+              value,
+              ref,
+          },
+          formState,
+          fieldState: Object.defineProperties({}, {
+              invalid: {
+                  get() {
+                      return !!get(formState.errors, name);
+                  },
+              },
+              isDirty: {
+                  get() {
+                      return !!get(formState.dirtyFields, name);
+                  },
+              },
+              isTouched: {
+                  get() {
+                      return !!get(formState.touchedFields, name);
+                  },
+              },
+              error: {
+                  get() {
+                      return get(formState.errors, name);
+                  },
+              },
+          }),
+      };
+  }
+
+  const Controller = (props) => props.render(useController(props));
+
+  var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
+      ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
+
   var isKey = (value) => /^\w*$/.test(value);
 
   var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
@@ -74,12 +255,6 @@
       return object;
   }
 
-  var omit = (source, key) => {
-      const copy = Object.assign({}, source);
-      delete copy[key];
-      return copy;
-  };
-
   const focusFieldBy = (fields, callback, fieldsNames) => {
       for (const key of fieldsNames || Object.keys(fields)) {
           const field = get(fields, key);
@@ -102,26 +277,40 @@
       }
   };
 
-  var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-  function deepMerge(target, source) {
-      if (isPrimitive(target) || isPrimitive(source)) {
-          return source;
-      }
-      for (const key in source) {
-          const targetValue = target[key];
-          const sourceValue = source[key];
-          try {
-              target[key] =
-                  (isObject(targetValue) && isObject(sourceValue)) ||
-                      (Array.isArray(targetValue) && Array.isArray(sourceValue))
-                      ? deepMerge(targetValue, sourceValue)
-                      : sourceValue;
+  const getFieldsValues = (fieldsRef, defaultValuesRef = { current: {} }, output = {}) => {
+      for (const name in fieldsRef.current) {
+          const field = fieldsRef.current[name];
+          if (field) {
+              const _f = field._f;
+              const current = omit(field, '_f');
+              set(output, name, _f
+                  ? _f.ref.disabled || (_f.refs && _f.refs.every((ref) => ref.disabled))
+                      ? undefined
+                      : _f.value
+                  : Array.isArray(field)
+                      ? []
+                      : {});
+              if (current) {
+                  getFieldsValues({
+                      current,
+                  }, defaultValuesRef, output[name]);
+              }
           }
-          catch (_a) { }
       }
-      return target;
-  }
+      return Object.assign(Object.assign({}, defaultValuesRef.current), output);
+  };
+
+  var generateId = () => {
+      const d = typeof performance === UNDEFINED ? Date.now() : performance.now() * 1000;
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+          const r = (Math.random() * 16 + d) % 16 | 0;
+          return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+      });
+  };
+
+  var mapIds = (values = [], keyName) => values.map((value) => (Object.assign({ [keyName]: (value && value[keyName]) || generateId() }, value)));
+
+  var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
   function deepEqual(object1, object2, isErrorObject) {
       if (isPrimitive(object1) ||
@@ -152,6 +341,25 @@
       return true;
   }
 
+  function deepMerge(target, source) {
+      if (isPrimitive(target) || isPrimitive(source)) {
+          return source;
+      }
+      for (const key in source) {
+          const targetValue = target[key];
+          const sourceValue = source[key];
+          try {
+              target[key] =
+                  (isObject(targetValue) && isObject(sourceValue)) ||
+                      (Array.isArray(targetValue) && Array.isArray(sourceValue))
+                      ? deepMerge(targetValue, sourceValue)
+                      : sourceValue;
+          }
+          catch (_a) { }
+      }
+      return target;
+  }
+
   function setDirtyFields(values, defaultValues, dirtyFields, parentNode, parentName) {
       let index = -1;
       while (++index < values.length) {
@@ -175,476 +383,625 @@
   }
   var setFieldArrayDirtyFields = (values, defaultValues, dirtyFields) => deepMerge(setDirtyFields(values, defaultValues, dirtyFields.slice(0, values.length)), setDirtyFields(defaultValues, values, dirtyFields.slice(0, values.length)));
 
-  var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
-
-  const EVENTS = {
-      BLUR: 'blur',
-      CHANGE: 'change',
-  };
-  const VALIDATION_MODE = {
-      onBlur: 'onBlur',
-      onChange: 'onChange',
-      onSubmit: 'onSubmit',
-      onTouched: 'onTouched',
-      all: 'all',
-  };
-  const SELECT = 'select';
-  const UNDEFINED = 'undefined';
-  const INPUT_VALIDATION_RULES = {
-      max: 'max',
-      min: 'min',
-      maxLength: 'maxLength',
-      minLength: 'minLength',
-      pattern: 'pattern',
-      required: 'required',
-      validate: 'validate',
-  };
-
-  var shouldRenderFormState = (formState, readFormStateRef, isRoot) => isEmptyObject(formState) ||
-      Object.keys(formState).length >= Object.keys(readFormStateRef).length ||
-      Object.keys(formState).find((key) => readFormStateRef[key] ===
-          (isRoot ? VALIDATION_MODE.all : true));
-
-  const getFieldsValues = (fieldsRef, defaultValuesRef = { current: {} }, output = {}) => {
-      for (const name in fieldsRef.current) {
-          const field = fieldsRef.current[name];
-          if (field) {
-              const _f = field._f;
-              const current = omit(field, '_f');
-              set(output, name, _f
-                  ? _f.ref.disabled || (_f.refs && _f.refs.every((ref) => ref.disabled))
-                      ? undefined
-                      : _f.value
-                  : Array.isArray(field)
-                      ? []
-                      : {});
-              if (current) {
-                  getFieldsValues({
-                      current,
-                  }, defaultValuesRef, output[name]);
-              }
-          }
-      }
-      return Object.assign(Object.assign({}, defaultValuesRef.current), output);
-  };
-
-  const defaultReturn = {
-      isValid: false,
-      value: null,
-  };
-  var getRadioValue = (options) => Array.isArray(options)
-      ? options.reduce((previous, option) => option && option.checked && !option.disabled
-          ? {
-              isValid: true,
-              value: option.value,
-          }
-          : previous, defaultReturn)
-      : defaultReturn;
-
-  var getMultipleSelectValue = (options) => [...options]
-      .filter(({ selected }) => selected)
-      .map(({ value }) => value);
-
-  var isRadioInput = (element) => element.type === 'radio';
-
-  var isFileInput = (element) => element.type === 'file';
+  function append(data, value) {
+      return [...data, ...(Array.isArray(value) ? value : [value])];
+  }
 
-  var isCheckBoxInput = (element) => element.type === 'checkbox';
+  var fillEmptyArray = (value) => Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
 
-  var isMultipleSelect = (element) => element.type === `${SELECT}-multiple`;
+  function insert(data, index, value) {
+      return [
+          ...data.slice(0, index),
+          ...(Array.isArray(value) ? value : [value]),
+          ...data.slice(index),
+      ];
+  }
 
-  const defaultResult = {
-      value: false,
-      isValid: false,
-  };
-  const validResult = { value: true, isValid: true };
-  var getCheckboxValue = (options) => {
-      if (Array.isArray(options)) {
-          if (options.length > 1) {
-              const values = options
-                  .filter((option) => option && option.checked && !option.disabled)
-                  .map((option) => option.value);
-              return { value: values, isValid: !!values.length };
+  var moveArrayAt = (data, from, to) => {
+      if (Array.isArray(data)) {
+          if (isUndefined(data[to])) {
+              data[to] = undefined;
           }
-          return options[0].checked && !options[0].disabled
-              ? // @ts-expect-error expected to work in the browser
-                  options[0].attributes && !isUndefined(options[0].attributes.value)
-                      ? isUndefined(options[0].value)
-                          ? validResult
-                          : { value: options[0].value, isValid: true }
-                      : validResult
-              : defaultResult;
+          data.splice(to, 0, data.splice(from, 1)[0]);
+          return data;
       }
-      return defaultResult;
+      return [];
   };
 
-  var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => valueAsNumber
-      ? value === ''
-          ? NaN
-          : +value
-      : valueAsDate
-          ? new Date(value)
-          : setValueAs
-              ? setValueAs(value)
-              : value;
+  function prepend(data, value) {
+      return [...(Array.isArray(value) ? value : [value]), ...data];
+  }
 
-  function getFieldValue(field) {
-      if (field && field._f) {
-          const ref = field._f.ref;
-          if (ref.disabled) {
-              return;
-          }
-          if (isFileInput(ref)) {
-              return ref.files;
-          }
-          if (isRadioInput(ref)) {
-              return getRadioValue(field._f.refs).value;
-          }
-          if (isMultipleSelect(ref)) {
-              return getMultipleSelectValue(ref.options);
-          }
-          if (isCheckBoxInput(ref)) {
-              return getCheckboxValue(field._f.refs).value;
-          }
-          return getFieldValueAs(isUndefined(ref.value) ? field._f.ref.value : ref.value, field._f);
+  function removeAtIndexes(data, indexes) {
+      let i = 0;
+      const temp = [...data];
+      for (const index of indexes) {
+          temp.splice(index - i, 1);
+          i++;
       }
-  }
+      return compact(temp).length ? temp : [];
+  }
+  var removeArrayAt = (data, index) => isUndefined(index)
+      ? []
+      : removeAtIndexes(data, (Array.isArray(index) ? index : [index]).sort((a, b) => a - b));
 
-  var isErrorStateChanged = ({ errors, name, error, validFields, fieldsWithValidation, }) => {
-      const isValid = isUndefined(error);
-      const previousError = get(errors, name);
-      return ((isValid && !!previousError) ||
-          (!isValid && !deepEqual(previousError, error, true)) ||
-          (isValid && get(fieldsWithValidation, name) && !get(validFields, name)));
+  var swapArrayAt = (data, indexA, indexB) => {
+      data[indexA] = [data[indexB], (data[indexB] = data[indexA])][0];
   };
 
-  var isRegex = (value) => value instanceof RegExp;
-
-  var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
-      ? validationData
-      : {
-          value: validationData,
-          message: '',
-      };
-
-  var isString = (value) => typeof value === 'string';
-
-  var isFunction = (value) => typeof value === 'function';
-
   var isBoolean = (value) => typeof value === 'boolean';
 
-  var isMessage = (value) => isString(value) || React__namespace.isValidElement(value);
-
-  function getValidateError(result, ref, type = 'validate') {
-      if (isMessage(result) || (isBoolean(result) && !result)) {
-          return {
-              type,
-              message: isMessage(result) ? result : '',
-              ref,
-          };
+  function baseGet(object, updatePath) {
+      const length = updatePath.slice(0, -1).length;
+      let index = 0;
+      while (index < length) {
+          object = isUndefined(object) ? index++ : object[updatePath[index++]];
       }
-  }
-
-  var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
-      ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
-
-  var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, value: inputValue, }, }, validateAllFieldCriteria) => {
-      const error = {};
-      const isRadio = isRadioInput(ref);
-      const isCheckBox = isCheckBoxInput(ref);
-      const isRadioOrCheckbox = isRadio || isCheckBox;
-      const isEmpty = !inputValue || (Array.isArray(inputValue) && !inputValue.length);
-      const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
-      const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
-          const message = exceedMax ? maxLengthMessage : minLengthMessage;
-          error[name] = Object.assign({ type: exceedMax ? maxType : minType, message,
-              ref }, appendErrorsCurry(exceedMax ? maxType : minType, message));
-      };
-      if (required &&
-          ((!isRadio && !isCheckBox && (isEmpty || isNullOrUndefined(inputValue))) ||
-              (isBoolean(inputValue) && !inputValue) ||
-              (isCheckBox && !getCheckboxValue(refs).isValid) ||
-              (isRadio && !getRadioValue(refs).isValid))) {
-          const { value, message } = isMessage(required)
-              ? { value: !!required, message: required }
-              : getValueAndMessage(required);
-          if (value) {
-              error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: isRadioOrCheckbox ? (refs || [])[0] || {} : ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
-              if (!validateAllFieldCriteria) {
-                  return error;
+      return object;
+  }
+  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;
+      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) &&
+                          !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
+                  previousObjRef ? delete previousObjRef[item] : delete object[item];
               }
+              previousObjRef = objectRef;
           }
       }
-      if ((!isNullOrUndefined(min) || !isNullOrUndefined(max)) &&
-          inputValue !== '') {
-          let exceedMax;
-          let exceedMin;
-          const maxOutput = getValueAndMessage(max);
-          const minOutput = getValueAndMessage(min);
-          if (!isNaN(inputValue)) {
-              const valueNumber = ref.valueAsNumber || parseFloat(inputValue);
-              if (!isNullOrUndefined(maxOutput.value)) {
-                  exceedMax = valueNumber > maxOutput.value;
-              }
-              if (!isNullOrUndefined(minOutput.value)) {
-                  exceedMin = valueNumber < minOutput.value;
-              }
+      return object;
+  }
+
+  const useFieldArray = ({ control, name, keyName = 'id', }) => {
+      const methods = useFormContext();
+      const focusNameRef = React__namespace.useRef('');
+      const { isWatchAllRef, watchFieldsRef, getFormIsDirty, watchSubjectRef, fieldArraySubjectRef, fieldArrayNamesRef, fieldsRef, defaultValuesRef, formStateRef, formStateSubjectRef, readFormStateRef, validFieldsRef, fieldsWithValidationRef, fieldArrayDefaultValuesRef, } = control || methods.control;
+      const [fields, setFields] = React__namespace.useState(mapIds(get(fieldArrayDefaultValuesRef.current, getNodeParentName(name))
+          ? get(fieldArrayDefaultValuesRef.current, name, [])
+          : get(defaultValuesRef.current, name, []), keyName));
+      set(fieldArrayDefaultValuesRef.current, name, [...fields]);
+      fieldArrayNamesRef.current.add(name);
+      const omitKey = (fields) => fields.map((field) => omit((field || {}), keyName));
+      const getCurrentFieldsValues = () => {
+          const values = get(getFieldsValues(fieldsRef, defaultValuesRef), name, []);
+          return mapIds(get(fieldArrayDefaultValuesRef.current, name, []).map((item, index) => (Object.assign(Object.assign({}, item), values[index]))), keyName);
+      };
+      const getFocusDetail = (index, options) => options
+          ? !isUndefined(options.focusIndex)
+              ? `${name}.${options.focusIndex}`
+              : options.focusName
+                  ? options.focusName
+                  : !options.shouldFocus
+                      ? ''
+                      : `${name}.${index}`
+          : `${name}.${index}`;
+      const resetFields = (index) => (Array.isArray(index) ? index : [index]).forEach((currentIndex) => set(fieldsRef.current, `${name}${isUndefined(currentIndex) ? '' : `.${currentIndex}`}`, isUndefined(currentIndex) ? [] : undefined));
+      const setFieldsAndNotify = (fieldsValues = []) => setFields(mapIds(fieldsValues, keyName));
+      const cleanup = (ref) => !compact(get(ref, name, [])).length && unset(ref, name);
+      const updateDirtyFieldsWithDefaultValues = (updatedFieldArrayValues) => updatedFieldArrayValues &&
+          set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+      const batchStateUpdate = (method, args, updatedFieldArrayValues = [], shouldSet = true) => {
+          if (get(fieldsRef.current, name)) {
+              const output = method(get(fieldsRef.current, name), args.argA, args.argB);
+              shouldSet && set(fieldsRef.current, name, output);
           }
-          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);
-              }
+          if (Array.isArray(get(formStateRef.current.errors, name))) {
+              const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
+              shouldSet && set(formStateRef.current.errors, name, output);
+              cleanup(formStateRef.current.errors);
           }
-          if (exceedMax || exceedMin) {
-              getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
-              if (!validateAllFieldCriteria) {
-                  return error;
-              }
+          if (readFormStateRef.current.touchedFields &&
+              get(formStateRef.current.touchedFields, name)) {
+              const output = method(get(formStateRef.current.touchedFields, name), args.argA, args.argB);
+              shouldSet && set(formStateRef.current.touchedFields, name, output);
+              cleanup(formStateRef.current.touchedFields);
           }
-      }
-      if (isString(inputValue) && !isEmpty && (maxLength || minLength)) {
-          const maxLengthOutput = getValueAndMessage(maxLength);
-          const minLengthOutput = getValueAndMessage(minLength);
-          const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
-              inputValue.length > maxLengthOutput.value;
-          const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
-              inputValue.length < minLengthOutput.value;
-          if (exceedMax || exceedMin) {
-              getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
-              if (!validateAllFieldCriteria) {
-                  return error;
-              }
+          if (readFormStateRef.current.dirtyFields ||
+              readFormStateRef.current.isDirty) {
+              set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+              updateDirtyFieldsWithDefaultValues(updatedFieldArrayValues);
+              cleanup(formStateRef.current.dirtyFields);
           }
-      }
-      if (isString(inputValue) && pattern && !isEmpty) {
-          const { value: patternValue, message } = getValueAndMessage(pattern);
-          if (isRegex(patternValue) && !patternValue.test(inputValue)) {
-              error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
-                  ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
-              if (!validateAllFieldCriteria) {
-                  return error;
-              }
+          if (readFormStateRef.current.isValid) {
+              set(validFieldsRef.current, name, method(get(validFieldsRef.current, name, []), args.argA));
+              cleanup(validFieldsRef.current);
+              set(fieldsWithValidationRef.current, name, method(get(fieldsWithValidationRef.current, name, []), args.argA));
+              cleanup(fieldsWithValidationRef.current);
           }
-      }
-      if (validate) {
-          const validateRef = isRadioOrCheckbox && refs ? refs[0] : ref;
-          if (isFunction(validate)) {
-              const result = await validate(inputValue);
-              const validateError = getValidateError(result, validateRef);
-              if (validateError) {
-                  error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
-                  if (!validateAllFieldCriteria) {
-                      return error;
-                  }
-              }
+          formStateSubjectRef.current.next({
+              isDirty: getFormIsDirty(name, omitKey(updatedFieldArrayValues)),
+              errors: formStateRef.current.errors,
+              isValid: formStateRef.current.isValid,
+          });
+      };
+      const registerFieldArray = (values, index = 0, parentName = '') => values.forEach((appendValueItem, valueIndex) => Object.entries(appendValueItem).forEach(([key, value]) => {
+          const inputName = `${parentName || name}.${parentName ? valueIndex : index + valueIndex}.${key}`;
+          Array.isArray(value)
+              ? registerFieldArray(value, valueIndex, inputName)
+              : set(fieldsRef.current, inputName, {
+                  _f: {
+                      ref: {
+                          name: inputName,
+                      },
+                      name: inputName,
+                      value,
+                  },
+              });
+      }));
+      const append$1 = (value, options) => {
+          const appendValue = Array.isArray(value) ? value : [value];
+          const updatedFieldArrayValues = append(getCurrentFieldsValues(), appendValue);
+          const currentIndex = updatedFieldArrayValues.length - appendValue.length;
+          setFieldsAndNotify(updatedFieldArrayValues);
+          batchStateUpdate(append, {
+              argA: fillEmptyArray(value),
+          }, updatedFieldArrayValues, false);
+          registerFieldArray(appendValue, currentIndex);
+          focusNameRef.current = getFocusDetail(currentIndex, options);
+      };
+      const prepend$1 = (value, options) => {
+          const prependValue = Array.isArray(value) ? value : [value];
+          const updatedFieldArrayValues = prepend(getCurrentFieldsValues(), prependValue);
+          setFieldsAndNotify(updatedFieldArrayValues);
+          batchStateUpdate(prepend, {
+              argA: fillEmptyArray(value),
+          }, updatedFieldArrayValues);
+          registerFieldArray(prependValue);
+          focusNameRef.current = getFocusDetail(0, options);
+      };
+      const remove = (index) => {
+          const updatedFieldArrayValues = removeArrayAt(getCurrentFieldsValues(), index);
+          resetFields(index);
+          setFieldsAndNotify(updatedFieldArrayValues);
+          batchStateUpdate(removeArrayAt, {
+              argA: index,
+          }, updatedFieldArrayValues);
+      };
+      const insert$1 = (index, value, options) => {
+          const insertValue = Array.isArray(value) ? value : [value];
+          const updatedFieldArrayValues = insert(getCurrentFieldsValues(), index, insertValue);
+          setFieldsAndNotify(updatedFieldArrayValues);
+          batchStateUpdate(insert, {
+              argA: index,
+              argB: fillEmptyArray(value),
+          }, updatedFieldArrayValues);
+          registerFieldArray(insertValue, index);
+          focusNameRef.current = getFocusDetail(index, options);
+      };
+      const swap = (indexA, indexB) => {
+          const fieldValues = getCurrentFieldsValues();
+          swapArrayAt(fieldValues, indexA, indexB);
+          batchStateUpdate(swapArrayAt, {
+              argA: indexA,
+              argB: indexB,
+          }, fieldValues, false);
+          setFieldsAndNotify(fieldValues);
+      };
+      const move = (from, to) => {
+          const fieldValues = getCurrentFieldsValues();
+          moveArrayAt(fieldValues, from, to);
+          setFieldsAndNotify(fieldValues);
+          batchStateUpdate(moveArrayAt, {
+              argA: from,
+              argB: to,
+          }, fieldValues, false);
+      };
+      React__namespace.useEffect(() => {
+          if (isWatchAllRef.current) {
+              formStateSubjectRef.current.next({});
           }
-          else if (isObject(validate)) {
-              let validationResult = {};
-              for (const [key, validateFunction] of Object.entries(validate)) {
-                  if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+          else {
+              for (const watchField of watchFieldsRef.current) {
+                  if (name.startsWith(watchField)) {
+                      formStateSubjectRef.current.next({});
                       break;
                   }
-                  const validateResult = await validateFunction(inputValue);
-                  const validateError = getValidateError(validateResult, validateRef, key);
-                  if (validateError) {
-                      validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
-                      if (validateAllFieldCriteria) {
-                          error[name] = validationResult;
-                      }
-                  }
-              }
-              if (!isEmptyObject(validationResult)) {
-                  error[name] = Object.assign({ ref: validateRef }, validationResult);
-                  if (!validateAllFieldCriteria) {
-                      return error;
-                  }
               }
           }
-      }
-      return error;
+          watchSubjectRef.current.next({
+              name,
+              value: get(getFieldsValues(fieldsRef, defaultValuesRef), name, []),
+          });
+          focusNameRef.current &&
+              focusFieldBy(fieldsRef.current, (key) => key.startsWith(focusNameRef.current));
+          focusNameRef.current = '';
+          fieldArraySubjectRef.current.next({
+              name,
+              fields: omitKey([...fields]),
+          });
+      }, [fields, name]);
+      React__namespace.useEffect(() => {
+          const fieldArraySubscription = fieldArraySubjectRef.current.subscribe({
+              next({ name: inputFieldArrayName, fields, isReset }) {
+                  if (isReset) {
+                      unset(fieldsRef.current, inputFieldArrayName || name);
+                      inputFieldArrayName
+                          ? set(fieldArrayDefaultValuesRef.current, inputFieldArrayName, fields)
+                          : (fieldArrayDefaultValuesRef.current = fields);
+                      setFieldsAndNotify(get(fieldArrayDefaultValuesRef.current, name));
+                  }
+              },
+          });
+          !get(fieldsRef.current, name) && set(fieldsRef.current, name, []);
+          return () => {
+              fieldArrayDefaultValuesRef.current = getFieldsValues(fieldsRef);
+              fieldArraySubscription.unsubscribe();
+          };
+      }, []);
+      return {
+          swap: React__namespace.useCallback(swap, [name]),
+          move: React__namespace.useCallback(move, [name]),
+          prepend: React__namespace.useCallback(prepend$1, [name]),
+          append: React__namespace.useCallback(append$1, [name]),
+          remove: React__namespace.useCallback(remove, [name]),
+          insert: React__namespace.useCallback(insert$1, [name]),
+          fields: fields,
+      };
   };
 
-  var skipValidation = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidateOnBlur, isReValidateOnChange, isBlurEvent, isSubmitted, isOnAll, }) => {
-      if (isOnAll) {
-          return false;
-      }
-      else if (!isSubmitted && isOnTouch) {
-          return !(isTouched || isBlurEvent);
-      }
-      else if (isSubmitted ? isReValidateOnBlur : isOnBlur) {
-          return !isBlurEvent;
+  function getFields(fieldsNames, fieldsRefs) {
+      const currentFields = {};
+      for (const name of fieldsNames) {
+          const field = get(fieldsRefs, name);
+          if (field) {
+              !isKey(name)
+                  ? set(currentFields, name, field._f)
+                  : (currentFields[name] = field._f);
+          }
       }
-      else if (isSubmitted ? isReValidateOnChange : isOnChange) {
-          return isBlurEvent;
+      return currentFields;
+  }
+
+  var isFileInput = (element) => element.type === 'file';
+
+  var isMultipleSelect = (element) => element.type === `${SELECT}-multiple`;
+
+  var isRadioInput = (element) => element.type === 'radio';
+
+  const defaultResult = {
+      value: false,
+      isValid: false,
+  };
+  const validResult = { value: true, isValid: true };
+  var getCheckboxValue = (options) => {
+      if (Array.isArray(options)) {
+          if (options.length > 1) {
+              const values = options
+                  .filter((option) => option && option.checked && !option.disabled)
+                  .map((option) => option.value);
+              return { value: values, isValid: !!values.length };
+          }
+          return options[0].checked && !options[0].disabled
+              ? // @ts-expect-error expected to work in the browser
+                  options[0].attributes && !isUndefined(options[0].attributes.value)
+                      ? isUndefined(options[0].value) || options[0].value === ''
+                          ? validResult
+                          : { value: options[0].value, isValid: true }
+                      : validResult
+              : defaultResult;
       }
-      return true;
+      return defaultResult;
   };
 
-  var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
+  var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => valueAsNumber
+      ? value === ''
+          ? NaN
+          : +value
+      : valueAsDate
+          ? new Date(value)
+          : setValueAs
+              ? setValueAs(value)
+              : value;
 
-  var getProxyFormState = (isProxyEnabled, formState, readFormStateRef, localReadFormStateRef, isRoot = true) => isProxyEnabled
-      ? new Proxy(formState, {
-          get: (obj, prop) => {
-              if (prop in obj) {
-                  if (readFormStateRef.current[prop] !== VALIDATION_MODE.all) {
-                      readFormStateRef.current[prop] = isRoot
-                          ? VALIDATION_MODE.all
-                          : true;
-                  }
-                  localReadFormStateRef &&
-                      (localReadFormStateRef.current[prop] = true);
-                  return obj[prop];
-              }
-              return undefined;
-          },
-      })
-      : formState;
+  var getMultipleSelectValue = (options) => [...options]
+      .filter(({ selected }) => selected)
+      .map(({ value }) => value);
 
-  class Subscription {
-      constructor() {
-          this.tearDowns = [];
-      }
-      add(tearDown) {
-          this.tearDowns.push(tearDown);
-      }
-      unsubscribe() {
-          for (const teardown of this.tearDowns) {
-              teardown();
+  const defaultReturn = {
+      isValid: false,
+      value: null,
+  };
+  var getRadioValue = (options) => Array.isArray(options)
+      ? options.reduce((previous, option) => option && option.checked && !option.disabled
+          ? {
+              isValid: true,
+              value: option.value,
           }
-          this.tearDowns = [];
-      }
-  }
-  class Subscriber {
-      constructor(observer, subscription) {
-          this.observer = observer;
-          this.closed = false;
-          subscription.add(() => (this.closed = true));
-      }
-      next(value) {
-          if (!this.closed) {
-              this.observer.next(value);
+          : previous, defaultReturn)
+      : defaultReturn;
+
+  function getFieldValue(field) {
+      if (field && field._f) {
+          const ref = field._f.ref;
+          if (ref.disabled) {
+              return;
           }
-      }
-  }
-  class Subject {
-      constructor() {
-          this.observers = [];
-      }
-      next(value) {
-          for (const observer of this.observers) {
-              observer.next(value);
+          if (isFileInput(ref)) {
+              return ref.files;
           }
-      }
-      subscribe(observer) {
-          const subscription = new Subscription();
-          const subscriber = new Subscriber(observer, subscription);
-          this.observers.push(subscriber);
-          return subscription;
-      }
-      unsubscribe() {
-          this.observers = [];
+          if (isRadioInput(ref)) {
+              return getRadioValue(field._f.refs).value;
+          }
+          if (isMultipleSelect(ref)) {
+              return getMultipleSelectValue(ref.options);
+          }
+          if (isCheckBoxInput(ref)) {
+              return getCheckboxValue(field._f.refs).value;
+          }
+          return getFieldValueAs(isUndefined(ref.value) ? field._f.ref.value : ref.value, field._f);
       }
   }
 
-  var isWeb = typeof window !== UNDEFINED &&
-      typeof window.HTMLElement !== UNDEFINED &&
-      typeof document !== UNDEFINED;
-
-  const isProxyEnabled = isWeb ? 'Proxy' in window : typeof Proxy !== UNDEFINED;
+  var isErrorStateChanged = ({ errors, name, error, validFields, fieldsWithValidation, }) => {
+      const isValid = isUndefined(error);
+      const previousError = get(errors, name);
+      return ((isValid && !!previousError) ||
+          (!isValid && !deepEqual(previousError, error, true)) ||
+          (isValid && get(fieldsWithValidation, name) && !get(validFields, name)));
+  };
 
-  function baseGet(object, updatePath) {
-      const length = updatePath.slice(0, -1).length;
-      let index = 0;
-      while (index < length) {
-          object = isUndefined(object) ? index++ : object[updatePath[index++]];
+  var skipValidation = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidateOnBlur, isReValidateOnChange, isBlurEvent, isSubmitted, isOnAll, }) => {
+      if (isOnAll) {
+          return false;
       }
-      return object;
-  }
-  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;
-      if (childObject) {
-          delete childObject[key];
+      else if (!isSubmitted && isOnTouch) {
+          return !(isTouched || isBlurEvent);
       }
-      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) &&
-                          !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
-                  previousObjRef ? delete previousObjRef[item] : delete object[item];
-              }
-              previousObjRef = objectRef;
-          }
+      else if (isSubmitted ? isReValidateOnBlur : isOnBlur) {
+          return !isBlurEvent;
       }
-      return object;
-  }
+      else if (isSubmitted ? isReValidateOnChange : isOnChange) {
+          return isBlurEvent;
+      }
+      return true;
+  };
 
-  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 isFunction = (value) => typeof value === 'function';
 
-  var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+  var isString = (value) => typeof value === 'string';
 
-  var isHTMLElement = (value) => value instanceof HTMLElement;
+  var isMessage = (value) => isString(value) || React__namespace.isValidElement(value);
 
-  function getFields(fieldsNames, fieldsRefs) {
-      const currentFields = {};
-      for (const name of fieldsNames) {
-          const field = get(fieldsRefs, name);
-          if (field) {
-              !isKey(name)
-                  ? set(currentFields, name, field._f)
-                  : (currentFields[name] = field._f);
-          }
+  var isRegex = (value) => value instanceof RegExp;
+
+  function getValidateError(result, ref, type = 'validate') {
+      if (isMessage(result) || (isBoolean(result) && !result)) {
+          return {
+              type,
+              message: isMessage(result) ? result : '',
+              ref,
+          };
       }
-      return currentFields;
   }
 
-  const isWindowUndefined = typeof window === UNDEFINED;
-  function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, criteriaMode, } = {}) {
-      const fieldsRef = React__namespace.useRef({});
-      const fieldsNamesRef = React__namespace.useRef(new Set());
-      const formStateSubjectRef = React__namespace.useRef(new Subject());
-      const watchSubjectRef = React__namespace.useRef(new Subject());
-      const controllerSubjectRef = React__namespace.useRef(new Subject());
-      const fieldArraySubjectRef = React__namespace.useRef(new Subject());
-      const fieldArrayDefaultValuesRef = React__namespace.useRef({});
-      const watchFieldsRef = React__namespace.useRef(new Set());
-      const isMountedRef = React__namespace.useRef(false);
-      const fieldsWithValidationRef = React__namespace.useRef({});
-      const validFieldsRef = React__namespace.useRef({});
-      const defaultValuesRef = React__namespace.useRef(defaultValues);
-      const isWatchAllRef = React__namespace.useRef(false);
-      const contextRef = React__namespace.useRef(context);
-      const resolverRef = React__namespace.useRef(resolver);
-      const fieldArrayNamesRef = React__namespace.useRef(new Set());
-      const validationMode = getValidationModes(mode);
-      const isValidateAllFieldCriteria = criteriaMode === VALIDATION_MODE.all;
-      const [formState, setFormState] = React__namespace.useState({
-          isDirty: false,
-          isValidating: false,
-          dirtyFields: {},
-          isSubmitted: false,
+  var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
+      ? validationData
+      : {
+          value: validationData,
+          message: '',
+      };
+
+  var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, value: inputValue, }, }, validateAllFieldCriteria) => {
+      const error = {};
+      const isRadio = isRadioInput(ref);
+      const isCheckBox = isCheckBoxInput(ref);
+      const isRadioOrCheckbox = isRadio || isCheckBox;
+      const isEmpty = inputValue === '' || (Array.isArray(inputValue) && !inputValue.length);
+      const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
+      const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
+          const message = exceedMax ? maxLengthMessage : minLengthMessage;
+          error[name] = Object.assign({ type: exceedMax ? maxType : minType, message,
+              ref }, appendErrorsCurry(exceedMax ? maxType : minType, message));
+      };
+      if (required &&
+          ((!isRadio && !isCheckBox && (isEmpty || isNullOrUndefined(inputValue))) ||
+              (isBoolean(inputValue) && !inputValue) ||
+              (isCheckBox && !getCheckboxValue(refs).isValid) ||
+              (isRadio && !getRadioValue(refs).isValid))) {
+          const { value, message } = isMessage(required)
+              ? { value: !!required, message: required }
+              : getValueAndMessage(required);
+          if (value) {
+              error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: isRadioOrCheckbox ? (refs || [])[0] || {} : ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
+              if (!validateAllFieldCriteria) {
+                  return error;
+              }
+          }
+      }
+      if ((!isNullOrUndefined(min) || !isNullOrUndefined(max)) &&
+          inputValue !== '') {
+          let exceedMax;
+          let exceedMin;
+          const maxOutput = getValueAndMessage(max);
+          const minOutput = getValueAndMessage(min);
+          if (!isNaN(inputValue)) {
+              const valueNumber = ref.valueAsNumber || parseFloat(inputValue);
+              if (!isNullOrUndefined(maxOutput.value)) {
+                  exceedMax = valueNumber > maxOutput.value;
+              }
+              if (!isNullOrUndefined(minOutput.value)) {
+                  exceedMin = valueNumber < minOutput.value;
+              }
+          }
+          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);
+              }
+          }
+          if (exceedMax || exceedMin) {
+              getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+              if (!validateAllFieldCriteria) {
+                  return error;
+              }
+          }
+      }
+      if (isString(inputValue) && !isEmpty && (maxLength || minLength)) {
+          const maxLengthOutput = getValueAndMessage(maxLength);
+          const minLengthOutput = getValueAndMessage(minLength);
+          const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
+              inputValue.length > maxLengthOutput.value;
+          const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
+              inputValue.length < minLengthOutput.value;
+          if (exceedMax || exceedMin) {
+              getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
+              if (!validateAllFieldCriteria) {
+                  return error;
+              }
+          }
+      }
+      if (isString(inputValue) && pattern && !isEmpty) {
+          const { value: patternValue, message } = getValueAndMessage(pattern);
+          if (isRegex(patternValue) && !patternValue.test(inputValue)) {
+              error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
+                  ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
+              if (!validateAllFieldCriteria) {
+                  return error;
+              }
+          }
+      }
+      if (validate) {
+          const validateRef = isRadioOrCheckbox && refs ? refs[0] : ref;
+          if (isFunction(validate)) {
+              const result = await validate(inputValue);
+              const validateError = getValidateError(result, validateRef);
+              if (validateError) {
+                  error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
+                  if (!validateAllFieldCriteria) {
+                      return error;
+                  }
+              }
+          }
+          else if (isObject(validate)) {
+              let validationResult = {};
+              for (const [key, validateFunction] of Object.entries(validate)) {
+                  if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+                      break;
+                  }
+                  const validateResult = await validateFunction(inputValue);
+                  const validateError = getValidateError(validateResult, validateRef, key);
+                  if (validateError) {
+                      validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
+                      if (validateAllFieldCriteria) {
+                          error[name] = validationResult;
+                      }
+                  }
+              }
+              if (!isEmptyObject(validationResult)) {
+                  error[name] = Object.assign({ ref: validateRef }, validationResult);
+                  if (!validateAllFieldCriteria) {
+                      return error;
+                  }
+              }
+          }
+      }
+      return error;
+  };
+
+  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 isHTMLElement = (value) => value instanceof HTMLElement;
+
+  var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+
+  class Subscription {
+      constructor() {
+          this.tearDowns = [];
+      }
+      add(tearDown) {
+          this.tearDowns.push(tearDown);
+      }
+      unsubscribe() {
+          for (const teardown of this.tearDowns) {
+              teardown();
+          }
+          this.tearDowns = [];
+      }
+  }
+  class Subscriber {
+      constructor(observer, subscription) {
+          this.observer = observer;
+          this.closed = false;
+          subscription.add(() => (this.closed = true));
+      }
+      next(value) {
+          if (!this.closed) {
+              this.observer.next(value);
+          }
+      }
+  }
+  class Subject {
+      constructor() {
+          this.observers = [];
+      }
+      next(value) {
+          for (const observer of this.observers) {
+              observer.next(value);
+          }
+      }
+      subscribe(observer) {
+          const subscription = new Subscription();
+          const subscriber = new Subscriber(observer, subscription);
+          this.observers.push(subscriber);
+          return subscription;
+      }
+      unsubscribe() {
+          this.observers = [];
+      }
+  }
+
+  const isWindowUndefined = typeof window === UNDEFINED;
+  function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, criteriaMode, } = {}) {
+      const fieldsRef = React__namespace.useRef({});
+      const fieldsNamesRef = React__namespace.useRef(new Set());
+      const formStateSubjectRef = React__namespace.useRef(new Subject());
+      const watchSubjectRef = React__namespace.useRef(new Subject());
+      const controllerSubjectRef = React__namespace.useRef(new Subject());
+      const fieldArraySubjectRef = React__namespace.useRef(new Subject());
+      const fieldArrayDefaultValuesRef = React__namespace.useRef({});
+      const watchFieldsRef = React__namespace.useRef(new Set());
+      const isMountedRef = React__namespace.useRef(false);
+      const fieldsWithValidationRef = React__namespace.useRef({});
+      const validFieldsRef = React__namespace.useRef({});
+      const defaultValuesRef = React__namespace.useRef(defaultValues);
+      const isWatchAllRef = React__namespace.useRef(false);
+      const contextRef = React__namespace.useRef(context);
+      const resolverRef = React__namespace.useRef(resolver);
+      const fieldArrayNamesRef = React__namespace.useRef(new Set());
+      const validationMode = getValidationModes(mode);
+      const isValidateAllFieldCriteria = criteriaMode === VALIDATION_MODE.all;
+      const [formState, setFormState] = React__namespace.useState({
+          isDirty: false,
+          isValidating: false,
+          dirtyFields: {},
+          isSubmitted: false,
           submitCount: 0,
           touchedFields: {},
           isSubmitting: false,
@@ -737,7 +1094,7 @@
                       name,
                   });
               }
-              options.shouldDirty && updateAndGetDirtyState(name);
+              options.shouldDirty && updateAndGetDirtyState(name, value);
               options.shouldValidate && trigger(name);
           }
       }, []);
@@ -749,17 +1106,18 @@
           }
           return false;
       }, []);
-      const updateAndGetDirtyState = React__namespace.useCallback((name, shouldRender = true) => {
+      const updateAndGetDirtyState = React__namespace.useCallback((name, inputValue, shouldRender = true) => {
           if (readFormStateRef.current.isDirty ||
               readFormStateRef.current.dirtyFields) {
-              const isFieldDirty = !deepEqual(get(defaultValuesRef.current, name), getFieldValue(get(fieldsRef.current, name)));
+              const isFieldDirty = !deepEqual(get(defaultValuesRef.current, name), inputValue);
               const isDirtyFieldExist = get(formStateRef.current.dirtyFields, name);
               const previousIsDirty = formStateRef.current.isDirty;
               isFieldDirty
                   ? set(formStateRef.current.dirtyFields, name, true)
                   : unset(formStateRef.current.dirtyFields, name);
+              formStateRef.current.isDirty = getFormIsDirty();
               const state = {
-                  isDirty: getFormIsDirty(),
+                  isDirty: formStateRef.current.isDirty,
                   dirtyFields: formStateRef.current.dirtyFields,
               };
               const isChanged = (readFormStateRef.current.isDirty &&
@@ -880,8 +1238,11 @@
                       isDirty: getFormIsDirty(name, value),
                   });
               }
+              !value.length &&
+                  set(fieldsRef.current, name, []) &&
+                  set(fieldArrayDefaultValuesRef.current, name, []);
           }
-          field && !field._f
+          (field && !field._f) || isFieldArray
               ? setInternalValues(name, value, isFieldArray ? {} : options)
               : setFieldValue(name, value, options, true, !field);
           isFieldWatched(name) && formStateSubjectRef.current.next({});
@@ -902,7 +1263,7 @@
               if (!isUndefined(inputValue)) {
                   field._f.value = inputValue;
               }
-              const state = updateAndGetDirtyState(name, false);
+              const state = updateAndGetDirtyState(name, field._f.value, false);
               if (isBlurEvent && !get(formStateRef.current.touchedFields, name)) {
                   set(formStateRef.current.touchedFields, name, true);
                   state.touchedFields = formStateRef.current.touchedFields;
@@ -1059,7 +1420,8 @@
                   ? Array.isArray(field._f.refs) &&
                       compact(field._f.refs).find((option) => ref.value === option.value && option === ref)
                   : ref === field._f.ref) ||
-                  !field) {
+                  !field ||
+                  (isWeb && isHTMLElement(field._f.ref) && !isHTMLElement(ref))) {
                   return;
               }
               field = {
@@ -1093,13 +1455,15 @@
           }
       };
       const register = React__namespace.useCallback((name, options) => {
+          const isInitialRegister = !get(fieldsRef.current, name);
           set(fieldsRef.current, name, {
-              _f: Object.assign(Object.assign(Object.assign({}, (get(fieldsRef.current, name)
-                  ? Object.assign({ ref: get(fieldsRef.current, name)._f.ref }, get(fieldsRef.current, name)._f) : { ref: { name } })), { name }), options),
+              _f: Object.assign(Object.assign(Object.assign({}, (isInitialRegister
+                  ? { ref: { name } }
+                  : Object.assign({ ref: (get(fieldsRef.current, name)._f || {}).ref }, get(fieldsRef.current, name)._f))), { name }), options),
           });
           options && set(fieldsWithValidationRef.current, name, true);
           fieldsNamesRef.current.add(name);
-          updateValueAndGetDefault(name);
+          isInitialRegister && updateValueAndGetDefault(name);
           return isWindowUndefined
               ? { name: name }
               : {
@@ -1139,487 +1503,135 @@
                   await onValid(fieldValues, e);
               }
               else {
-                  onInvalid && (await onInvalid(formStateRef.current.errors, e));
-                  shouldFocusError &&
-                      focusFieldBy(fieldsRef.current, (key) => get(formStateRef.current.errors, key), fieldsNamesRef.current);
-              }
-          }
-          finally {
-              formStateRef.current.isSubmitted = true;
-              formStateSubjectRef.current.next({
-                  isSubmitted: true,
-                  isSubmitting: false,
-                  isSubmitSuccessful: isEmptyObject(formStateRef.current.errors),
-                  submitCount: formStateRef.current.submitCount + 1,
-                  errors: formStateRef.current.errors,
-              });
-          }
-      }, [shouldFocusError, isValidateAllFieldCriteria, criteriaMode]);
-      const resetFromState = React__namespace.useCallback(({ keepErrors, keepDirty, keepIsSubmitted, keepTouched, keepIsValid, keepSubmitCount, }) => {
-          if (!keepIsValid) {
-              validFieldsRef.current = {};
-              fieldsWithValidationRef.current = {};
-          }
-          watchFieldsRef.current = new Set();
-          isWatchAllRef.current = false;
-          formStateSubjectRef.current.next({
-              submitCount: keepSubmitCount ? formStateRef.current.submitCount : 0,
-              isDirty: keepDirty ? formStateRef.current.isDirty : false,
-              isSubmitted: keepIsSubmitted ? formStateRef.current.isSubmitted : false,
-              isValid: keepIsValid
-                  ? formStateRef.current.isValid
-                  : !validationMode.isOnSubmit,
-              dirtyFields: keepDirty ? formStateRef.current.dirtyFields : {},
-              touchedFields: keepTouched ? formStateRef.current.touchedFields : {},
-              errors: keepErrors ? formStateRef.current.errors : {},
-              isSubmitting: false,
-              isSubmitSuccessful: false,
-          });
-      }, []);
-      const reset = (values, keepStateOptions = {}) => {
-          const updatedValues = values || defaultValuesRef.current;
-          if (isWeb && !keepStateOptions.keepValues) {
-              for (const field of Object.values(fieldsRef.current)) {
-                  if (field && field._f) {
-                      const inputRef = Array.isArray(field._f.refs)
-                          ? field._f.refs[0]
-                          : field._f.ref;
-                      if (isHTMLElement(inputRef)) {
-                          try {
-                              inputRef.closest('form').reset();
-                              break;
-                          }
-                          catch (_a) { }
-                      }
-                  }
-              }
-          }
-          !keepStateOptions.keepDefaultValues &&
-              (defaultValuesRef.current = Object.assign({}, updatedValues));
-          if (!keepStateOptions.keepValues) {
-              fieldsRef.current = {};
-              controllerSubjectRef.current.next({
-                  values: Object.assign({}, updatedValues),
-              });
-              watchSubjectRef.current.next({
-                  value: Object.assign({}, updatedValues),
-              });
-              fieldArraySubjectRef.current.next({
-                  fields: Object.assign({}, updatedValues),
-                  isReset: true,
-              });
-          }
-          resetFromState(keepStateOptions);
-      };
-      React__namespace.useEffect(() => {
-          isMountedRef.current = true;
-          const formStateSubscription = formStateSubjectRef.current.subscribe({
-              next(formState = {}) {
-                  if (shouldRenderFormState(formState, readFormStateRef.current, true)) {
-                      formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), formState);
-                      setFormState(formStateRef.current);
-                  }
-              },
-          });
-          const useFieldArraySubscription = fieldArraySubjectRef.current.subscribe({
-              next(state) {
-                  if (state.fields && state.name && readFormStateRef.current.isValid) {
-                      const values = getFieldsValues(fieldsRef);
-                      set(values, state.name, state.fields);
-                      updateIsValid(values);
-                  }
-              },
-          });
-          resolverRef.current && readFormStateRef.current.isValid && updateIsValid();
-          return () => {
-              watchSubjectRef.current.unsubscribe();
-              formStateSubscription.unsubscribe();
-              useFieldArraySubscription.unsubscribe();
-          };
-      }, []);
-      return {
-          control: React__namespace.useMemo(() => ({
-              register,
-              isWatchAllRef,
-              watchFieldsRef,
-              getFormIsDirty,
-              formStateSubjectRef,
-              fieldArraySubjectRef,
-              controllerSubjectRef,
-              watchSubjectRef,
-              watchInternal,
-              fieldsRef,
-              validFieldsRef,
-              fieldsWithValidationRef,
-              fieldArrayNamesRef,
-              readFormStateRef,
-              formStateRef,
-              defaultValuesRef,
-              fieldArrayDefaultValuesRef,
-          }), []),
-          formState: getProxyFormState(isProxyEnabled, formState, readFormStateRef),
-          trigger,
-          register,
-          handleSubmit,
-          watch: React__namespace.useCallback(watch, []),
-          setValue: React__namespace.useCallback(setValue, [setInternalValues]),
-          getValues: React__namespace.useCallback(getValues, []),
-          reset: React__namespace.useCallback(reset, []),
-          clearErrors: React__namespace.useCallback(clearErrors, []),
-          unregister: React__namespace.useCallback(unregister, []),
-          setError: React__namespace.useCallback(setError, []),
-      };
-  }
-
-  const FormContext = React__namespace.createContext(null);
-  FormContext.displayName = 'RHFContext';
-  const useFormContext = () => React__namespace.useContext(FormContext);
-  const FormProvider = (props) => (React__namespace.createElement(FormContext.Provider, { value: omit(props, 'children') }, props.children));
-
-  var generateId = () => {
-      const d = typeof performance === UNDEFINED ? Date.now() : performance.now() * 1000;
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-          const r = (Math.random() * 16 + d) % 16 | 0;
-          return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
-      });
-  };
-
-  var mapIds = (values = [], keyName) => values.map((value) => (Object.assign({ [keyName]: (value && value[keyName]) || generateId() }, value)));
-
-  function removeAtIndexes(data, indexes) {
-      let i = 0;
-      const temp = [...data];
-      for (const index of indexes) {
-          temp.splice(index - i, 1);
-          i++;
-      }
-      return compact(temp).length ? temp : [];
-  }
-  var removeArrayAt = (data, index) => isUndefined(index)
-      ? []
-      : removeAtIndexes(data, (Array.isArray(index) ? index : [index]).sort((a, b) => a - b));
-
-  var moveArrayAt = (data, from, to) => {
-      if (Array.isArray(data)) {
-          if (isUndefined(data[to])) {
-              data[to] = undefined;
-          }
-          data.splice(to, 0, data.splice(from, 1)[0]);
-          return data;
-      }
-      return [];
-  };
-
-  var swapArrayAt = (data, indexA, indexB) => {
-      data[indexA] = [data[indexB], (data[indexB] = data[indexA])][0];
-  };
-
-  function prepend(data, value) {
-      return [...(Array.isArray(value) ? value : [value]), ...data];
-  }
-
-  function append(data, value) {
-      return [...data, ...(Array.isArray(value) ? value : [value])];
-  }
-
-  function insert(data, index, value) {
-      return [
-          ...data.slice(0, index),
-          ...(Array.isArray(value) ? value : [value]),
-          ...data.slice(index),
-      ];
-  }
-
-  var fillEmptyArray = (value) => Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
-
-  const useFieldArray = ({ control, name, keyName = 'id', }) => {
-      const methods = useFormContext();
-      const focusNameRef = React__namespace.useRef('');
-      const { isWatchAllRef, watchFieldsRef, getFormIsDirty, watchSubjectRef, fieldArraySubjectRef, fieldArrayNamesRef, fieldsRef, defaultValuesRef, formStateRef, formStateSubjectRef, readFormStateRef, validFieldsRef, fieldsWithValidationRef, fieldArrayDefaultValuesRef, } = control || methods.control;
-      const [fields, setFields] = React__namespace.useState(mapIds(get(fieldArrayDefaultValuesRef.current, getNodeParentName(name))
-          ? get(fieldArrayDefaultValuesRef.current, name, [])
-          : get(defaultValuesRef.current, name, []), keyName));
-      set(fieldArrayDefaultValuesRef.current, name, [...fields]);
-      fieldArrayNamesRef.current.add(name);
-      const omitKey = (fields) => fields.map((field) => omit((field || {}), keyName));
-      const getCurrentFieldsValues = () => {
-          const values = get(getFieldsValues(fieldsRef, defaultValuesRef), name, []);
-          return mapIds(get(fieldArrayDefaultValuesRef.current, name, []).map((item, index) => (Object.assign(Object.assign({}, item), values[index]))), keyName);
-      };
-      const getFocusDetail = (index, options) => options
-          ? !isUndefined(options.focusIndex)
-              ? `${name}.${options.focusIndex}`
-              : options.focusName
-                  ? options.focusName
-                  : !options.shouldFocus
-                      ? ''
-                      : `${name}.${index}`
-          : `${name}.${index}`;
-      const resetFields = (index) => (Array.isArray(index) ? index : [index]).forEach((currentIndex) => set(fieldsRef.current, `${name}${isUndefined(currentIndex) ? '' : `.${currentIndex}`}`, isUndefined(currentIndex) ? [] : undefined));
-      const setFieldsAndNotify = (fieldsValues = []) => setFields(mapIds(fieldsValues, keyName));
-      const cleanup = (ref) => !compact(get(ref, name, [])).length && unset(ref, name);
-      const updateDirtyFieldsWithDefaultValues = (updatedFieldArrayValues) => updatedFieldArrayValues &&
-          set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
-      const batchStateUpdate = (method, args, updatedFieldArrayValues = [], shouldSet = true) => {
-          if (get(fieldsRef.current, name)) {
-              const output = method(get(fieldsRef.current, name), args.argA, args.argB);
-              shouldSet && set(fieldsRef.current, name, output);
-          }
-          if (Array.isArray(get(formStateRef.current.errors, name))) {
-              const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
-              shouldSet && set(formStateRef.current.errors, name, output);
-              cleanup(formStateRef.current.errors);
-          }
-          if (readFormStateRef.current.touchedFields &&
-              get(formStateRef.current.touchedFields, name)) {
-              const output = method(get(formStateRef.current.touchedFields, name), args.argA, args.argB);
-              shouldSet && set(formStateRef.current.touchedFields, name, output);
-              cleanup(formStateRef.current.touchedFields);
-          }
-          if (readFormStateRef.current.dirtyFields ||
-              readFormStateRef.current.isDirty) {
-              set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
-              updateDirtyFieldsWithDefaultValues(updatedFieldArrayValues);
-              cleanup(formStateRef.current.dirtyFields);
-          }
-          if (readFormStateRef.current.isValid) {
-              set(validFieldsRef.current, name, method(get(validFieldsRef.current, name, []), args.argA));
-              cleanup(validFieldsRef.current);
-              set(fieldsWithValidationRef.current, name, method(get(fieldsWithValidationRef.current, name, []), args.argA));
-              cleanup(fieldsWithValidationRef.current);
-          }
-          formStateSubjectRef.current.next({
-              isDirty: getFormIsDirty(name, omitKey(updatedFieldArrayValues)),
-              errors: formStateRef.current.errors,
-              isValid: formStateRef.current.isValid,
-          });
-      };
-      const registerFieldArray = (values, index = 0, parentName = '') => values.forEach((appendValueItem, valueIndex) => Object.entries(appendValueItem).forEach(([key, value]) => {
-          const inputName = `${parentName || name}.${parentName ? valueIndex : index + valueIndex}.${key}`;
-          Array.isArray(value)
-              ? registerFieldArray(value, valueIndex, inputName)
-              : set(fieldsRef.current, inputName, {
-                  _f: {
-                      ref: {
-                          name: inputName,
-                      },
-                      name: inputName,
-                      value,
-                  },
-              });
-      }));
-      const append$1 = (value, options) => {
-          const appendValue = Array.isArray(value) ? value : [value];
-          const updatedFieldArrayValues = append(getCurrentFieldsValues(), appendValue);
-          const currentIndex = updatedFieldArrayValues.length - appendValue.length;
-          setFieldsAndNotify(updatedFieldArrayValues);
-          batchStateUpdate(append, {
-              argA: fillEmptyArray(value),
-          }, updatedFieldArrayValues, false);
-          registerFieldArray(appendValue, currentIndex);
-          focusNameRef.current = getFocusDetail(currentIndex, options);
-      };
-      const prepend$1 = (value, options) => {
-          const prependValue = Array.isArray(value) ? value : [value];
-          const updatedFieldArrayValues = prepend(getCurrentFieldsValues(), prependValue);
-          setFieldsAndNotify(updatedFieldArrayValues);
-          batchStateUpdate(prepend, {
-              argA: fillEmptyArray(value),
-          }, updatedFieldArrayValues);
-          registerFieldArray(prependValue);
-          focusNameRef.current = getFocusDetail(0, options);
-      };
-      const remove = (index) => {
-          const updatedFieldArrayValues = removeArrayAt(getCurrentFieldsValues(), index);
-          resetFields(index);
-          setFieldsAndNotify(updatedFieldArrayValues);
-          batchStateUpdate(removeArrayAt, {
-              argA: index,
-          }, updatedFieldArrayValues);
-      };
-      const insert$1 = (index, value, options) => {
-          const insertValue = Array.isArray(value) ? value : [value];
-          const updatedFieldArrayValues = insert(getCurrentFieldsValues(), index, insertValue);
-          setFieldsAndNotify(updatedFieldArrayValues);
-          batchStateUpdate(insert, {
-              argA: index,
-              argB: fillEmptyArray(value),
-          }, updatedFieldArrayValues);
-          registerFieldArray(insertValue, index);
-          focusNameRef.current = getFocusDetail(index, options);
-      };
-      const swap = (indexA, indexB) => {
-          const fieldValues = getCurrentFieldsValues();
-          swapArrayAt(fieldValues, indexA, indexB);
-          batchStateUpdate(swapArrayAt, {
-              argA: indexA,
-              argB: indexB,
-          }, fieldValues, false);
-          setFieldsAndNotify(fieldValues);
-      };
-      const move = (from, to) => {
-          const fieldValues = getCurrentFieldsValues();
-          moveArrayAt(fieldValues, from, to);
-          setFieldsAndNotify(fieldValues);
-          batchStateUpdate(moveArrayAt, {
-              argA: from,
-              argB: to,
-          }, fieldValues, false);
-      };
-      React__namespace.useEffect(() => {
-          if (isWatchAllRef.current) {
-              formStateSubjectRef.current.next({});
+                  onInvalid && (await onInvalid(formStateRef.current.errors, e));
+                  shouldFocusError &&
+                      focusFieldBy(fieldsRef.current, (key) => get(formStateRef.current.errors, key), fieldsNamesRef.current);
+              }
           }
-          else {
-              for (const watchField of watchFieldsRef.current) {
-                  if (name.startsWith(watchField)) {
-                      formStateSubjectRef.current.next({});
-                      break;
+          finally {
+              formStateRef.current.isSubmitted = true;
+              formStateSubjectRef.current.next({
+                  isSubmitted: true,
+                  isSubmitting: false,
+                  isSubmitSuccessful: isEmptyObject(formStateRef.current.errors),
+                  submitCount: formStateRef.current.submitCount + 1,
+                  errors: formStateRef.current.errors,
+              });
+          }
+      }, [shouldFocusError, isValidateAllFieldCriteria, criteriaMode]);
+      const resetFromState = React__namespace.useCallback(({ keepErrors, keepDirty, keepIsSubmitted, keepTouched, keepIsValid, keepSubmitCount, }) => {
+          if (!keepIsValid) {
+              validFieldsRef.current = {};
+              fieldsWithValidationRef.current = {};
+          }
+          watchFieldsRef.current = new Set();
+          isWatchAllRef.current = false;
+          formStateSubjectRef.current.next({
+              submitCount: keepSubmitCount ? formStateRef.current.submitCount : 0,
+              isDirty: keepDirty ? formStateRef.current.isDirty : false,
+              isSubmitted: keepIsSubmitted ? formStateRef.current.isSubmitted : false,
+              isValid: keepIsValid
+                  ? formStateRef.current.isValid
+                  : !validationMode.isOnSubmit,
+              dirtyFields: keepDirty ? formStateRef.current.dirtyFields : {},
+              touchedFields: keepTouched ? formStateRef.current.touchedFields : {},
+              errors: keepErrors ? formStateRef.current.errors : {},
+              isSubmitting: false,
+              isSubmitSuccessful: false,
+          });
+      }, []);
+      const reset = (values, keepStateOptions = {}) => {
+          const updatedValues = values || defaultValuesRef.current;
+          if (isWeb && !keepStateOptions.keepValues) {
+              for (const field of Object.values(fieldsRef.current)) {
+                  if (field && field._f) {
+                      const inputRef = Array.isArray(field._f.refs)
+                          ? field._f.refs[0]
+                          : field._f.ref;
+                      if (isHTMLElement(inputRef)) {
+                          try {
+                              inputRef.closest('form').reset();
+                              break;
+                          }
+                          catch (_a) { }
+                      }
                   }
               }
           }
-          watchSubjectRef.current.next({
-              name,
-              value: get(getFieldsValues(fieldsRef, defaultValuesRef), name, []),
-          });
-          focusNameRef.current &&
-              focusFieldBy(fieldsRef.current, (key) => key.startsWith(focusNameRef.current));
-          focusNameRef.current = '';
-          fieldArraySubjectRef.current.next({
-              name,
-              fields: omitKey([...fields]),
-          });
-      }, [fields, name]);
+          !keepStateOptions.keepDefaultValues &&
+              (defaultValuesRef.current = Object.assign({}, updatedValues));
+          if (!keepStateOptions.keepValues) {
+              fieldsRef.current = {};
+              controllerSubjectRef.current.next({
+                  values: Object.assign({}, updatedValues),
+              });
+              watchSubjectRef.current.next({
+                  value: Object.assign({}, updatedValues),
+              });
+              fieldArraySubjectRef.current.next({
+                  fields: Object.assign({}, updatedValues),
+                  isReset: true,
+              });
+          }
+          resetFromState(keepStateOptions);
+      };
       React__namespace.useEffect(() => {
-          const fieldArraySubscription = fieldArraySubjectRef.current.subscribe({
-              next({ name: inputFieldArrayName, fields, isReset }) {
-                  if (isReset) {
-                      unset(fieldsRef.current, inputFieldArrayName || name);
-                      inputFieldArrayName
-                          ? set(fieldArrayDefaultValuesRef.current, inputFieldArrayName, fields)
-                          : (fieldArrayDefaultValuesRef.current = fields);
-                      setFieldsAndNotify(get(fieldArrayDefaultValuesRef.current, name));
+          isMountedRef.current = true;
+          const formStateSubscription = formStateSubjectRef.current.subscribe({
+              next(formState = {}) {
+                  if (shouldRenderFormState(formState, readFormStateRef.current, true)) {
+                      formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), formState);
+                      setFormState(formStateRef.current);
                   }
               },
           });
-          !get(fieldsRef.current, name) && set(fieldsRef.current, name, []);
-          return () => {
-              fieldArrayDefaultValuesRef.current = getFieldsValues(fieldsRef);
-              fieldArraySubscription.unsubscribe();
-          };
-      }, []);
-      return {
-          swap: React__namespace.useCallback(swap, [name]),
-          move: React__namespace.useCallback(move, [name]),
-          prepend: React__namespace.useCallback(prepend$1, [name]),
-          append: React__namespace.useCallback(append$1, [name]),
-          remove: React__namespace.useCallback(remove, [name]),
-          insert: React__namespace.useCallback(insert$1, [name]),
-          fields: fields,
-      };
-  };
-
-  function useFormState({ control, } = {}) {
-      const methods = useFormContext();
-      const { formStateRef, formStateSubjectRef, readFormStateRef } = control || methods.control;
-      const [formState, updateFormState] = React__namespace.useState(formStateRef.current);
-      const readFormState = React__namespace.useRef({
-          isDirty: false,
-          dirtyFields: false,
-          touchedFields: false,
-          isValidating: false,
-          isValid: false,
-          errors: false,
-      });
-      React__namespace.useEffect(() => {
-          const formStateSubscription = formStateSubjectRef.current.subscribe({
-              next: (formState) => {
-                  shouldRenderFormState(formState, readFormState.current) &&
-                      updateFormState(Object.assign(Object.assign({}, formStateRef.current), formState));
+          const useFieldArraySubscription = fieldArraySubjectRef.current.subscribe({
+              next(state) {
+                  if (state.fields && state.name && readFormStateRef.current.isValid) {
+                      const values = getFieldsValues(fieldsRef);
+                      set(values, state.name, state.fields);
+                      updateIsValid(values);
+                  }
               },
           });
-          return () => formStateSubscription.unsubscribe();
+          resolverRef.current && readFormStateRef.current.isValid && updateIsValid();
+          return () => {
+              watchSubjectRef.current.unsubscribe();
+              formStateSubscription.unsubscribe();
+              useFieldArraySubscription.unsubscribe();
+          };
       }, []);
-      return getProxyFormState(isProxyEnabled, formState, readFormStateRef, readFormState, false);
-  }
-
-  var getControllerValue = (event) => isObject(event) && event.target
-      ? isCheckBoxInput(event.target)
-          ? event.target.checked
-          : event.target.value
-      : event;
-
-  var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
-
-  function useController({ name, rules, defaultValue, control, }) {
-      const methods = useFormContext();
-      const { defaultValuesRef, register, fieldsRef, fieldArrayNamesRef, controllerSubjectRef, } = control || methods.control;
-      const { onChange, onBlur, ref } = register(name, rules);
-      const [value, setInputStateValue] = React__namespace.useState(isUndefined(get(fieldsRef.current, name)._f.value) ||
-          isNameInFieldArray(fieldArrayNamesRef.current, name)
-          ? isUndefined(defaultValue)
-              ? get(defaultValuesRef.current, name)
-              : defaultValue
-          : get(fieldsRef.current, name)._f.value);
-      const formState = useFormState({
-          control: control || methods.control,
-      });
-      get(fieldsRef.current, name)._f.value = value;
-      React__namespace.useEffect(() => {
-          const controllerSubscription = controllerSubjectRef.current.subscribe({
-              next: (data) => (!data.name || name === data.name) &&
-                  setInputStateValue(get(data.values, name)),
-          });
-          return () => controllerSubscription.unsubscribe();
-      }, [name]);
       return {
-          field: {
-              onChange: (event) => {
-                  const value = getControllerValue(event);
-                  setInputStateValue(value);
-                  onChange({
-                      target: {
-                          value,
-                          name: name,
-                      },
-                      type: EVENTS.CHANGE,
-                  });
-              },
-              onBlur: () => {
-                  onBlur({
-                      target: {
-                          name: name,
-                      },
-                      type: EVENTS.BLUR,
-                  });
-              },
-              name,
-              value,
-              ref,
-          },
-          formState,
-          fieldState: Object.defineProperties({}, {
-              invalid: {
-                  get() {
-                      return !!get(formState.errors, name);
-                  },
-              },
-              isDirty: {
-                  get() {
-                      return !!get(formState.dirtyFields, name);
-                  },
-              },
-              isTouched: {
-                  get() {
-                      return !!get(formState.touchedFields, name);
-                  },
-              },
-              error: {
-                  get() {
-                      return get(formState.errors, name);
-                  },
-              },
-          }),
+          control: React__namespace.useMemo(() => ({
+              register,
+              isWatchAllRef,
+              watchFieldsRef,
+              getFormIsDirty,
+              formStateSubjectRef,
+              fieldArraySubjectRef,
+              controllerSubjectRef,
+              watchSubjectRef,
+              watchInternal,
+              fieldsRef,
+              validFieldsRef,
+              fieldsWithValidationRef,
+              fieldArrayNamesRef,
+              readFormStateRef,
+              formStateRef,
+              defaultValuesRef,
+              fieldArrayDefaultValuesRef,
+          }), []),
+          formState: getProxyFormState(isProxyEnabled, formState, readFormStateRef),
+          trigger,
+          register,
+          handleSubmit,
+          watch: React__namespace.useCallback(watch, []),
+          setValue: React__namespace.useCallback(setValue, [setInternalValues]),
+          getValues: React__namespace.useCallback(getValues, []),
+          reset: React__namespace.useCallback(reset, []),
+          clearErrors: React__namespace.useCallback(clearErrors, []),
+          unregister: React__namespace.useCallback(unregister, []),
+          setError: React__namespace.useCallback(setError, []),
       };
   }
 
@@ -1649,8 +1661,6 @@
       return value;
   }
 
-  const Controller = (props) => props.render(useController(props));
-
   exports.Controller = Controller;
   exports.FormProvider = FormProvider;
   exports.appendErrors = appendErrors;