tp-react-elements-dev 1.10.5 → 1.10.6

package/dist/index.js

@@ -57,13 +57,14 @@ var isWeb = typeof window !== 'undefined' &&
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
+    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     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)) &&
+    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
         (isArray || isObject$1(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject$1(data)) {
@@ -122,13 +123,12 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__') {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
             return;
         }
         object[key] = newValue;
         object = object[key];
     }
-    return object;
 };
 
 const EVENTS = {
@@ -205,43 +205,6 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-var isEmptyObject = (value) => isObject$1(value) && !Object.keys(value).length;
-
-var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
-    updateFormState(formStateData);
-    const { name, ...formState } = formStateData;
-    return (isEmptyObject(formState) ||
-        Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
-        Object.keys(formState).find((key) => _proxyFormState[key] ===
-            (!isRoot || VALIDATION_MODE.all)));
-};
-
-var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
-
-var shouldSubscribeByName = (name, signalName, exact) => !name ||
-    !signalName ||
-    name === signalName ||
-    convertToArrayPayload(name).some((currentName) => currentName &&
-        (exact
-            ? currentName === signalName
-            : currentName.startsWith(signalName) ||
-                signalName.startsWith(currentName)));
-
-function useSubscribe(props) {
-    const _props = React$1.useRef(props);
-    _props.current = props;
-    React$1.useEffect(() => {
-        const subscription = !props.disabled &&
-            _props.current.subject &&
-            _props.current.subject.subscribe({
-                next: _props.current.next,
-            });
-        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.
  *
@@ -276,7 +239,6 @@ function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React$1.useState(control._formState);
-    const _mounted = React$1.useRef(true);
     const _localProxyFormState = React$1.useRef({
         isDirty: false,
         isLoading: false,
@@ -289,25 +251,22 @@ function useFormState(props) {
     });
     const _name = React$1.useRef(name);
     _name.current = name;
-    useSubscribe({
-        disabled,
-        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$1.useEffect(() => control._subscribe({
+        name: _name.current,
+        formState: _localProxyFormState.current,
+        exact,
+        callback: (formState) => {
+            !disabled &&
+                updateFormState({
+                    ...control._formState,
+                    ...formState,
+                });
+        },
+    }), [control, disabled, exact]);
     React$1.useEffect(() => {
-        _mounted.current = true;
-        _localProxyFormState.current.isValid && control._updateValid(true);
-        return () => {
-            _mounted.current = false;
-        };
+        _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
-    return getProxyFormState(formState, control, _localProxyFormState.current, false);
+    return React$1.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -344,16 +303,17 @@ function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React$1.useRef(name);
+    const _defaultValue = React$1.useRef(defaultValue);
     _name.current = name;
-    useSubscribe({
-        disabled,
-        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)));
-            }
+    React$1.useEffect(() => control._subscribe({
+        name: _name.current,
+        formState: {
+            values: true,
         },
-    });
+        exact,
+        callback: (formState) => !disabled &&
+            updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current)),
+    }), [control, disabled, exact]);
     const [value, updateValue] = React$1.useState(control._getWatch(name, defaultValue));
     React$1.useEffect(() => control._removeUnmounted());
     return value;
@@ -396,17 +356,82 @@ function useController(props) {
     const formState = useFormState({
         control,
         name,
+        exact: true,
     });
+    const _props = React$1.useRef(props);
     const _registerProps = React$1.useRef(control.register(name, {
         ...props.rules,
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    const fieldState = React$1.useMemo(() => 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),
+        },
+    }), [formState, name]);
+    const onChange = React$1.useCallback((event) => _registerProps.current.onChange({
+        target: {
+            value: getEventValue(event),
+            name: name,
+        },
+        type: EVENTS.CHANGE,
+    }), [name]);
+    const onBlur = React$1.useCallback(() => _registerProps.current.onBlur({
+        target: {
+            value: get(control._formValues, name),
+            name: name,
+        },
+        type: EVENTS.BLUR,
+    }), [name, control._formValues]);
+    const ref = React$1.useCallback((elm) => {
+        const field = get(control._fields, name);
+        if (field && elm) {
+            field._f.ref = {
+                focus: () => elm.focus(),
+                select: () => elm.select(),
+                setCustomValidity: (message) => elm.setCustomValidity(message),
+                reportValidity: () => elm.reportValidity(),
+            };
+        }
+    }, [control._fields, name]);
+    const field = React$1.useMemo(() => ({
+        name,
+        value,
+        ...(isBoolean(disabled) || formState.disabled
+            ? { disabled: formState.disabled || disabled }
+            : {}),
+        onChange,
+        onBlur,
+        ref,
+    }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React$1.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+        control.register(name, {
+            ..._props.current.rules,
+            ...(isBoolean(_props.current.disabled)
+                ? { disabled: _props.current.disabled }
+                : {}),
+        });
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
-            if (field) {
+            if (field && field._f) {
                 field._f.mount = value;
             }
         };
@@ -418,6 +443,7 @@ function useController(props) {
                 set(control._formValues, name, value);
             }
         }
+        !isArrayField && control.register(name);
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -427,72 +453,16 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React$1.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: {
+        control._setDisabledField({
+            disabled,
             name,
-            value,
-            ...(isBoolean(disabled) || formState.disabled
-                ? { disabled: formState.disabled || disabled }
-                : {}),
-            onChange: React$1.useCallback((event) => _registerProps.current.onChange({
-                target: {
-                    value: getEventValue(event),
-                    name: name,
-                },
-                type: EVENTS.CHANGE,
-            }), [name]),
-            onBlur: React$1.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 (field && elm) {
-                    field._f.ref = {
-                        focus: () => elm.focus(),
-                        select: () => elm.select(),
-                        setCustomValidity: (message) => elm.setCustomValidity(message),
-                        reportValidity: () => elm.reportValidity(),
-                    };
-                }
-            },
-        },
+        });
+    }, [disabled, name, control]);
+    return React$1.useMemo(() => ({
+        field,
         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),
-            },
-        }),
-    };
+        fieldState,
+    }), [field, formState, fieldState]);
 }
 
 /**
@@ -549,340 +519,7 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
-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 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 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) {
-                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
-                    break;
-                }
-                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
-                    break;
-                }
-                else {
-                    iterateFieldsByAction(currentField, action);
-                }
-            }
-            else if (isObject$1(currentField)) {
-                iterateFieldsByAction(currentField, action);
-            }
-        }
-    }
-};
-
-var updateFieldArrayRootError = (errors, error, name) => {
-    const fieldArrayErrors = compact(get(errors, name));
-    set(fieldArrayErrors, 'root', error[name]);
-    set(errors, name, fieldArrayErrors);
-    return errors;
-};
-
-var isFileInput = (element) => element.type === 'file';
-
-var isFunction = (value) => typeof value === 'function';
-
-var isHTMLElement$2 = (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';
-
-var isRegex = (value) => value instanceof RegExp;
-
-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 defaultResult;
-};
-
-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;
-
-function getValidateError(result, ref, type = 'validate') {
-    if (isMessage(result) ||
-        (Array.isArray(result) && result.every(isMessage)) ||
-        (isBoolean(result) && !result)) {
-        return {
-            type,
-            message: isMessage(result) ? result : '',
-            ref,
-        };
-    }
-}
-
-var getValueAndMessage = (validationData) => isObject$1(validationData) && !isRegex(validationData)
-    ? validationData
-    : {
-        value: validationData,
-        message: '',
-    };
-
-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.reportValidity();
-        }
-    };
-    const error = {};
-    const isRadio = isRadioInput(ref);
-    const isCheckBox = isCheckBoxInput(ref);
-    const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
-        isUndefined(ref.value) &&
-        isUndefined(inputValue)) ||
-        (isHTMLElement$2(ref) && ref.value === '') ||
-        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] = {
-            type: exceedMax ? maxType : minType,
-            message,
-            ref,
-            ...appendErrorsCurry(exceedMax ? maxType : minType, message),
-        };
-    };
-    if (isFieldArray
-        ? !Array.isArray(inputValue) || !inputValue.length
-        : required &&
-            ((!isRadioOrCheckbox && (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] = {
-                type: INPUT_VALIDATION_RULES.required,
-                message,
-                ref: inputRef,
-                ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
-            };
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(message);
-                return error;
-            }
-        }
-    }
-    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
-        let exceedMax;
-        let exceedMin;
-        const maxOutput = getValueAndMessage(max);
-        const minOutput = getValueAndMessage(min);
-        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber ||
-                (inputValue ? +inputValue : 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);
-            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) {
-            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(error[name].message);
-                return error;
-            }
-        }
-    }
-    if ((maxLength || minLength) &&
-        !isEmpty &&
-        (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
-        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) {
-                setCustomValidity(error[name].message);
-                return error;
-            }
-        }
-    }
-    if (pattern && !isEmpty && isString(inputValue)) {
-        const { value: patternValue, message } = getValueAndMessage(pattern);
-        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
-            error[name] = {
-                type: INPUT_VALIDATION_RULES.pattern,
-                message,
-                ref,
-                ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
-            };
-            if (!validateAllFieldCriteria) {
-                setCustomValidity(message);
-                return error;
-            }
-        }
-    }
-    if (validate) {
-        if (isFunction(validate)) {
-            const result = await validate(inputValue, formValues);
-            const validateError = getValidateError(result, inputRef);
-            if (validateError) {
-                error[name] = {
-                    ...validateError,
-                    ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
-                };
-                if (!validateAllFieldCriteria) {
-                    setCustomValidity(validateError.message);
-                    return error;
-                }
-            }
-        }
-        else if (isObject$1(validate)) {
-            let validationResult = {};
-            for (const key in validate) {
-                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
-                    break;
-                }
-                const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
-                if (validateError) {
-                    validationResult = {
-                        ...validateError,
-                        ...appendErrorsCurry(key, validateError.message),
-                    };
-                    setCustomValidity(validateError.message);
-                    if (validateAllFieldCriteria) {
-                        error[name] = validationResult;
-                    }
-                }
-            }
-            if (!isEmptyObject(validationResult)) {
-                error[name] = {
-                    ref: inputRef,
-                    ...validationResult,
-                };
-                if (!validateAllFieldCriteria) {
-                    return error;
-                }
-            }
-        }
-    }
-    setCustomValidity(true);
-    return error;
-};
-
-function baseGet(object, updatePath) {
-    const length = updatePath.slice(0, -1).length;
-    let index = 0;
-    while (index < length) {
-        object = isUndefined(object) ? index++ : object[updatePath[index++]];
-    }
-    return object;
-}
-function isEmptyArray(obj) {
-    for (const key in obj) {
-        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
-            return false;
-        }
-    }
-    return true;
-}
-function unset(object, path) {
-    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];
-    }
-    if (index !== 0 &&
-        ((isObject$1(childObject) && isEmptyObject(childObject)) ||
-            (Array.isArray(childObject) && isEmptyArray(childObject)))) {
-        unset(object, paths.slice(0, -1));
-    }
-    return object;
-}
+var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
 var createSubject = () => {
     let _observers = [];
@@ -945,12 +582,65 @@ function deepEqual(object1, object2) {
     return true;
 }
 
+var isEmptyObject = (value) => isObject$1(value) && !Object.keys(value).length;
+
+var isFileInput = (element) => element.type === 'file';
+
+var isFunction = (value) => typeof value === 'function';
+
+var isHTMLElement$2 = (value) => {
+    if (!isWeb) {
+        return false;
+    }
+    const owner = value ? value.ownerDocument : 0;
+    return (value instanceof
+        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
+};
+
 var isMultipleSelect = (element) => element.type === `select-multiple`;
 
+var isRadioInput = (element) => element.type === 'radio';
+
 var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var live = (ref) => isHTMLElement$2(ref) && ref.isConnected;
 
+function baseGet(object, updatePath) {
+    const length = updatePath.slice(0, -1).length;
+    let index = 0;
+    while (index < length) {
+        object = isUndefined(object) ? index++ : object[updatePath[index++]];
+    }
+    return object;
+}
+function isEmptyArray(obj) {
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+function unset(object, path) {
+    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];
+    }
+    if (index !== 0 &&
+        ((isObject$1(childObject) && isEmptyObject(childObject)) ||
+            (Array.isArray(childObject) && isEmptyArray(childObject)))) {
+        unset(object, paths.slice(0, -1));
+    }
+    return object;
+}
+
 var objectHasFunction = (data) => {
     for (const key in data) {
         if (isFunction(data[key])) {
@@ -1001,6 +691,31 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
 }
 var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
 
+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 defaultResult;
+};
+
 var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
     ? value
     : valueAsNumber
@@ -1015,11 +730,21 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
                 ? setValueAs(value)
                 : value;
 
+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;
+
 function getFieldValue(_f) {
     const ref = _f.ref;
-    if (_f.refs ? _f.refs.every((ref) => ref.disabled) : ref.disabled) {
-        return;
-    }
     if (isFileInput(ref)) {
         return ref.files;
     }
@@ -1049,6 +774,8 @@ var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeVal
     };
 };
 
+var isRegex = (value) => value instanceof RegExp;
+
 var getRuleValue = (rule) => isUndefined(rule)
     ? rule
     : isRegex(rule)
@@ -1059,6 +786,22 @@ var getRuleValue = (rule) => isUndefined(rule)
                 : rule.value
             : rule;
 
+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,
+});
+
+const ASYNC_FUNCTION = 'AsyncFunction';
+var hasPromiseValidation = (fieldReference) => !!fieldReference &&
+    !!fieldReference.validate &&
+    !!((isFunction(fieldReference.validate) &&
+        fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
+        (isObject$1(fieldReference.validate) &&
+            Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION)));
+
 var hasValidation = (options) => options.mount &&
     (options.required ||
         options.min ||
@@ -1068,6 +811,40 @@ var hasValidation = (options) => options.mount &&
         options.pattern ||
         options.validate);
 
+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 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) {
+                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
+                    return true;
+                }
+                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
+                    return true;
+                }
+                else {
+                    if (iterateFieldsByAction(currentField, action)) {
+                        break;
+                    }
+                }
+            }
+            else if (isObject$1(currentField)) {
+                if (iterateFieldsByAction(currentField, action)) {
+                    break;
+                }
+            }
+        }
+    }
+    return;
+};
+
 function schemaErrorLookup(errors, _fields, name) {
     const error = get(errors, name);
     if (error || isKey(name)) {
@@ -1097,6 +874,24 @@ function schemaErrorLookup(errors, _fields, name) {
     };
 }
 
+var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
+    updateFormState(formStateData);
+    const { name, ...formState } = formStateData;
+    return (isEmptyObject(formState) ||
+        Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
+        Object.keys(formState).find((key) => _proxyFormState[key] ===
+            (!isRoot || VALIDATION_MODE.all)));
+};
+
+var shouldSubscribeByName = (name, signalName, exact) => !name ||
+    !signalName ||
+    name === signalName ||
+    convertToArrayPayload(name).some((currentName) => currentName &&
+        (exact
+            ? currentName === signalName
+            : currentName.startsWith(signalName) ||
+                signalName.startsWith(currentName)));
+
 var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
     if (mode.isOnAll) {
         return false;
@@ -1115,6 +910,213 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
 
 var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
 
+var updateFieldArrayRootError = (errors, error, name) => {
+    const fieldArrayErrors = convertToArrayPayload(get(errors, name));
+    set(fieldArrayErrors, 'root', error[name]);
+    set(errors, name, fieldArrayErrors);
+    return errors;
+};
+
+var isMessage = (value) => isString(value);
+
+function getValidateError(result, ref, type = 'validate') {
+    if (isMessage(result) ||
+        (Array.isArray(result) && result.every(isMessage)) ||
+        (isBoolean(result) && !result)) {
+        return {
+            type,
+            message: isMessage(result) ? result : '',
+            ref,
+        };
+    }
+}
+
+var getValueAndMessage = (validationData) => isObject$1(validationData) && !isRegex(validationData)
+    ? validationData
+    : {
+        value: validationData,
+        message: '',
+    };
+
+var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
+    const inputValue = get(formValues, name);
+    if (!mount || disabledFieldNames.has(name)) {
+        return {};
+    }
+    const inputRef = refs ? refs[0] : ref;
+    const setCustomValidity = (message) => {
+        if (shouldUseNativeValidation && inputRef.reportValidity) {
+            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
+            inputRef.reportValidity();
+        }
+    };
+    const error = {};
+    const isRadio = isRadioInput(ref);
+    const isCheckBox = isCheckBoxInput(ref);
+    const isRadioOrCheckbox = isRadio || isCheckBox;
+    const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
+        isUndefined(ref.value) &&
+        isUndefined(inputValue)) ||
+        (isHTMLElement$2(ref) && ref.value === '') ||
+        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] = {
+            type: exceedMax ? maxType : minType,
+            message,
+            ref,
+            ...appendErrorsCurry(exceedMax ? maxType : minType, message),
+        };
+    };
+    if (isFieldArray
+        ? !Array.isArray(inputValue) || !inputValue.length
+        : required &&
+            ((!isRadioOrCheckbox && (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] = {
+                type: INPUT_VALIDATION_RULES.required,
+                message,
+                ref: inputRef,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
+            };
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(message);
+                return error;
+            }
+        }
+    }
+    if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
+        let exceedMax;
+        let exceedMin;
+        const maxOutput = getValueAndMessage(max);
+        const minOutput = getValueAndMessage(min);
+        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
+            const valueNumber = ref.valueAsNumber ||
+                (inputValue ? +inputValue : 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);
+            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) {
+            getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(error[name].message);
+                return error;
+            }
+        }
+    }
+    if ((maxLength || minLength) &&
+        !isEmpty &&
+        (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
+        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) {
+                setCustomValidity(error[name].message);
+                return error;
+            }
+        }
+    }
+    if (pattern && !isEmpty && isString(inputValue)) {
+        const { value: patternValue, message } = getValueAndMessage(pattern);
+        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
+            error[name] = {
+                type: INPUT_VALIDATION_RULES.pattern,
+                message,
+                ref,
+                ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
+            };
+            if (!validateAllFieldCriteria) {
+                setCustomValidity(message);
+                return error;
+            }
+        }
+    }
+    if (validate) {
+        if (isFunction(validate)) {
+            const result = await validate(inputValue, formValues);
+            const validateError = getValidateError(result, inputRef);
+            if (validateError) {
+                error[name] = {
+                    ...validateError,
+                    ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
+                };
+                if (!validateAllFieldCriteria) {
+                    setCustomValidity(validateError.message);
+                    return error;
+                }
+            }
+        }
+        else if (isObject$1(validate)) {
+            let validationResult = {};
+            for (const key in validate) {
+                if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+                    break;
+                }
+                const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
+                if (validateError) {
+                    validationResult = {
+                        ...validateError,
+                        ...appendErrorsCurry(key, validateError.message),
+                    };
+                    setCustomValidity(validateError.message);
+                    if (validateAllFieldCriteria) {
+                        error[name] = validationResult;
+                    }
+                }
+            }
+            if (!isEmptyObject(validationResult)) {
+                error[name] = {
+                    ref: inputRef,
+                    ...validationResult,
+                };
+                if (!validateAllFieldCriteria) {
+                    return error;
+                }
+            }
+        }
+    }
+    setCustomValidity(true);
+    return error;
+};
+
 const defaultOptions$2 = {
     mode: VALIDATION_MODE.onSubmit,
     reValidateMode: VALIDATION_MODE.onChange,
@@ -1140,9 +1142,9 @@ function createFormControl(props = {}) {
         errors: _options.errors || {},
         disabled: _options.disabled || false,
     };
-    let _fields = {};
+    const _fields = {};
     let _defaultValues = isObject$1(_options.defaultValues) || isObject$1(_options.values)
-        ? cloneObject(_options.defaultValues || _options.values) || {}
+        ? cloneObject(_options.values || _options.defaultValues) || {}
         : {};
     let _formValues = _options.shouldUnregister
         ? {}
@@ -1154,6 +1156,7 @@ function createFormControl(props = {}) {
     };
     let _names = {
         mount: new Set(),
+        disabled: new Set(),
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
@@ -1169,8 +1172,10 @@ function createFormControl(props = {}) {
         isValid: false,
         errors: false,
     };
+    let _proxySubscribeFormState = {
+        ..._proxyFormState,
+    };
     const _subjects = {
-        values: createSubject(),
         array: createSubject(),
         state: createSubject(),
     };
@@ -1181,10 +1186,13 @@ function createFormControl(props = {}) {
         clearTimeout(timer);
         timer = setTimeout(callback, wait);
     };
-    const _updateValid = async (shouldUpdateValid) => {
-        if (_proxyFormState.isValid || shouldUpdateValid) {
+    const _setValid = async (shouldUpdateValid) => {
+        if (!_options.disabled &&
+            (_proxyFormState.isValid ||
+                _proxySubscribeFormState.isValid ||
+                shouldUpdateValid)) {
             const isValid = _options.resolver
-                ? isEmptyObject((await _executeSchema()).errors)
+                ? isEmptyObject((await _runSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
             if (isValid !== _formState.isValid) {
                 _subjects.state.next({
@@ -1194,7 +1202,11 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (_proxyFormState.isValidating || _proxyFormState.validatingFields) {
+        if (!_options.disabled &&
+            (_proxyFormState.isValidating ||
+                _proxyFormState.validatingFields ||
+                _proxySubscribeFormState.isValidating ||
+                _proxySubscribeFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
                     isValidating
@@ -1208,8 +1220,8 @@ function createFormControl(props = {}) {
             });
         }
     };
-    const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method) {
+    const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
+        if (args && method && !_options.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
@@ -1221,13 +1233,14 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.errors, name, errors);
                 unsetEmptyArray(_formState.errors, name);
             }
-            if (_proxyFormState.touchedFields &&
+            if ((_proxyFormState.touchedFields ||
+                _proxySubscribeFormState.touchedFields) &&
                 shouldUpdateFieldsAndState &&
                 Array.isArray(get(_formState.touchedFields, name))) {
                 const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
-            if (_proxyFormState.dirtyFields) {
+            if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
                 _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
             }
             _subjects.state.next({
@@ -1264,7 +1277,7 @@ function createFormControl(props = {}) {
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
-            _state.mount && _updateValid();
+            _state.mount && _setValid();
         }
     };
     const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -1273,46 +1286,49 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        const disabledField = !!(get(_fields, name) && 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;
-            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;
+        if (!_options.disabled) {
+            if (!isBlurEvent || shouldDirty) {
+                if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
+                    isPreviousDirty = _formState.isDirty;
+                    _formState.isDirty = output.isDirty = _getDirty();
+                    shouldUpdateField = isPreviousDirty !== output.isDirty;
+                }
+                const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+                isPreviousDirty = !!get(_formState.dirtyFields, name);
+                isCurrentFieldPristine
+                    ? unset(_formState.dirtyFields, name)
+                    : set(_formState.dirtyFields, name, true);
+                output.dirtyFields = _formState.dirtyFields;
                 shouldUpdateField =
                     shouldUpdateField ||
-                        (_proxyFormState.touchedFields &&
-                            isPreviousFieldTouched !== isBlurEvent);
+                        ((_proxyFormState.dirtyFields ||
+                            _proxySubscribeFormState.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 ||
+                                _proxySubscribeFormState.touchedFields) &&
+                                isPreviousFieldTouched !== isBlurEvent);
+                }
+            }
+            shouldUpdateField && shouldRender && _subjects.state.next(output);
         }
-        shouldUpdateField && shouldRender && _subjects.state.next(output);
         return shouldUpdateField ? output : {};
     };
     const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
-        const shouldUpdateValid = _proxyFormState.isValid &&
+        const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (props.delayError && error) {
+        if (_options.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(props.delayError);
+            delayErrorCallback(_options.delayError);
         }
         else {
             clearTimeout(timer);
@@ -1337,14 +1353,14 @@ function createFormControl(props = {}) {
             _subjects.state.next(updatedFormState);
         }
     };
-    const _executeSchema = async (name) => {
+    const _runSchema = 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(names);
+        const { errors } = await _runSchema(names);
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
@@ -1367,9 +1383,14 @@ function createFormControl(props = {}) {
                 const { _f, ...fieldValue } = field;
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
-                    _updateIsValidating([name], true);
-                    const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
-                    _updateIsValidating([name]);
+                    const isPromiseFunction = field._f && hasPromiseValidation(field._f);
+                    if (isPromiseFunction && _proxyFormState.validatingFields) {
+                        _updateIsValidating([name], true);
+                    }
+                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+                    if (isPromiseFunction && _proxyFormState.validatingFields) {
+                        _updateIsValidating([name]);
+                    }
                     if (fieldError[_f.name]) {
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
@@ -1383,7 +1404,7 @@ function createFormControl(props = {}) {
                                 : set(_formState.errors, _f.name, fieldError[_f.name])
                             : unset(_formState.errors, _f.name));
                 }
-                fieldValue &&
+                !isEmptyObject(fieldValue) &&
                     (await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context));
             }
         }
@@ -1400,8 +1421,9 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
-        !deepEqual(getValues(), _defaultValues));
+    const _getDirty = (name, data) => !_options.disabled &&
+        (name && data && set(_formValues, name, data),
+            !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
         ...(_state.mount
             ? _formValues
@@ -1411,7 +1433,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);
         let fieldValue = value;
@@ -1447,9 +1469,9 @@ function createFormControl(props = {}) {
                 else {
                     fieldReference.ref.value = fieldValue;
                     if (!fieldReference.ref.type) {
-                        _subjects.values.next({
+                        _subjects.state.next({
                             name,
-                            values: { ..._formValues },
+                            values: cloneObject(_formValues),
                         });
                     }
                 }
@@ -1465,7 +1487,7 @@ function createFormControl(props = {}) {
             const fieldName = `${name}.${fieldKey}`;
             const field = get(_fields, fieldName);
             (_names.array.has(name) ||
-                !isPrimitive(fieldValue) ||
+                isObject$1(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
                 ? setValues(fieldName, fieldValue, options)
@@ -1480,9 +1502,12 @@ function createFormControl(props = {}) {
         if (isFieldArray) {
             _subjects.array.next({
                 name,
-                values: { ..._formValues },
+                values: cloneObject(_formValues),
             });
-            if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
+            if ((_proxyFormState.isDirty ||
+                _proxyFormState.dirtyFields ||
+                _proxySubscribeFormState.isDirty ||
+                _proxySubscribeFormState.dirtyFields) &&
                 options.shouldDirty) {
                 _subjects.state.next({
                     name,
@@ -1497,9 +1522,9 @@ function createFormControl(props = {}) {
                 : setFieldValue(name, cloneValue, options);
         }
         isWatched(name, _names) && _subjects.state.next({ ..._formState });
-        _subjects.values.next({
+        _subjects.state.next({
             name: _state.mount ? name : undefined,
-            values: { ..._formValues },
+            values: cloneObject(_formValues),
         });
     };
     const onChange = async (event) => {
@@ -1508,16 +1533,18 @@ function createFormControl(props = {}) {
         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);
+                    (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
+                    deepEqual(fieldValue, get(_formValues, name, fieldValue));
         };
         if (field) {
             let error;
             let isValid;
-            const fieldValue = getCurrentFieldValue();
+            const fieldValue = target.type
+                ? getFieldValue(field._f)
+                : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
@@ -1533,22 +1560,31 @@ function createFormControl(props = {}) {
             else if (field._f.onChange) {
                 field._f.onChange(event);
             }
-            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
+            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
-                _subjects.values.next({
+                _subjects.state.next({
                     name,
                     type: event.type,
-                    values: { ..._formValues },
+                    values: cloneObject(_formValues),
                 });
             if (shouldSkipValidation) {
-                _proxyFormState.isValid && _updateValid();
+                if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
+                    if (_options.mode === 'onBlur') {
+                        if (isBlurEvent) {
+                            _setValid();
+                        }
+                    }
+                    else if (!isBlurEvent) {
+                        _setValid();
+                    }
+                }
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             if (_options.resolver) {
-                const { errors } = await _executeSchema([name]);
+                const { errors } = await _runSchema([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
                     const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -1560,14 +1596,15 @@ function createFormControl(props = {}) {
             }
             else {
                 _updateIsValidating([name], true);
-                error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
                 _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
                     if (error) {
                         isValid = false;
                     }
-                    else if (_proxyFormState.isValid) {
+                    else if (_proxyFormState.isValid ||
+                        _proxySubscribeFormState.isValid) {
                         isValid = await executeBuiltInValidation(_fields, true);
                     }
                 }
@@ -1602,14 +1639,15 @@ function createFormControl(props = {}) {
                 const field = get(_fields, fieldName);
                 return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
             }))).every(Boolean);
-            !(!validationResult && !_formState.isValid) && _updateValid();
+            !(!validationResult && !_formState.isValid) && _setValid();
         }
         else {
             validationResult = isValid = await executeBuiltInValidation(_fields);
         }
         _subjects.state.next({
             ...(!isString(name) ||
-                (_proxyFormState.isValid && isValid !== _formState.isValid)
+                ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
+                    isValid !== _formState.isValid)
                 ? {}
                 : { name }),
             ...(_options.resolver || !name ? { isValid } : {}),
@@ -1633,9 +1671,9 @@ function createFormControl(props = {}) {
     const getFieldState = (name, formState) => ({
         invalid: !!get((formState || _formState).errors, name),
         isDirty: !!get((formState || _formState).dirtyFields, name),
-        isTouched: !!get((formState || _formState).touchedFields, name),
-        isValidating: !!get((formState || _formState).validatingFields, name),
         error: get((formState || _formState).errors, name),
+        isValidating: !!get(_formState.validatingFields, name),
+        isTouched: !!get((formState || _formState).touchedFields, name),
     });
     const clearErrors = (name) => {
         name &&
@@ -1662,10 +1700,33 @@ function createFormControl(props = {}) {
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
     const watch = (name, defaultValue) => isFunction(name)
-        ? _subjects.values.subscribe({
+        ? _subjects.state.subscribe({
             next: (payload) => name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
+    const _subscribe = (props) => _subjects.state.subscribe({
+        next: (formState) => {
+            if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
+                shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
+                props.callback({
+                    values: { ..._formValues },
+                    ..._formState,
+                    ...formState,
+                });
+            }
+        },
+    }).unsubscribe;
+    const subscribe = (props) => {
+        _state.mount = true;
+        _proxySubscribeFormState = {
+            ..._proxySubscribeFormState,
+            ...props.formState,
+        };
+        return _subscribe({
+            ...props,
+            formState: _proxySubscribeFormState,
+        });
+    };
     const unregister = (name, options = {}) => {
         for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
             _names.mount.delete(fieldName);
@@ -1683,29 +1744,25 @@ function createFormControl(props = {}) {
                 !options.keepDefaultValue &&
                 unset(_defaultValues, fieldName);
         }
-        _subjects.values.next({
-            values: { ..._formValues },
+        _subjects.state.next({
+            values: cloneObject(_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);
+        !options.keepIsValid && _setValid();
+    };
+    const _setDisabledField = ({ disabled, name, }) => {
+        if ((isBoolean(disabled) && _state.mount) ||
+            !!disabled ||
+            _names.disabled.has(name)) {
+            disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
         }
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -1717,18 +1774,20 @@ function createFormControl(props = {}) {
         });
         _names.mount.add(name);
         if (field) {
-            _updateDisabledField({
-                field,
-                disabled: options.disabled,
+            _setDisabledField({
+                disabled: isBoolean(options.disabled)
+                    ? options.disabled
+                    : _options.disabled,
                 name,
-                value: options.value,
             });
         }
         else {
             updateValidAndValue(name, true, options.value);
         }
         return {
-            ...(disabledIsDefined ? { disabled: options.disabled } : {}),
+            ...(disabledIsDefined
+                ? { disabled: options.disabled || _options.disabled }
+                : {}),
             ...(_options.progressive
                 ? {
                     required: !!options.required,
@@ -1809,20 +1868,26 @@ function createFormControl(props = {}) {
         let onValidError = undefined;
         if (e) {
             e.preventDefault && e.preventDefault();
-            e.persist && e.persist();
+            e.persist &&
+                e.persist();
         }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
         });
         if (_options.resolver) {
-            const { errors, values } = await _executeSchema();
+            const { errors, values } = await _runSchema();
             _formState.errors = errors;
             fieldValues = values;
         }
         else {
             await executeBuiltInValidation(_fields);
         }
+        if (_names.disabled.size) {
+            for (const name of _names.disabled) {
+                set(fieldValues, name, undefined);
+            }
+        }
         unset(_formState.errors, 'root');
         if (isEmptyObject(_formState.errors)) {
             _subjects.state.next({
@@ -1873,7 +1938,7 @@ function createFormControl(props = {}) {
             }
             if (!options.keepError) {
                 unset(_formState.errors, name);
-                _proxyFormState.isValid && _updateValid();
+                _proxyFormState.isValid && _setValid();
             }
             _subjects.state.next({ ..._formState });
         }
@@ -1888,7 +1953,11 @@ function createFormControl(props = {}) {
         }
         if (!keepStateOptions.keepValues) {
             if (keepStateOptions.keepDirtyValues) {
-                for (const fieldName of _names.mount) {
+                const fieldsToCheck = new Set([
+                    ..._names.mount,
+                    ...Object.keys(getDirtyFields(_defaultValues, _formValues)),
+                ]);
+                for (const fieldName of Array.from(fieldsToCheck)) {
                     get(_formState.dirtyFields, fieldName)
                         ? set(values, fieldName, get(_formValues, fieldName))
                         : setValue(fieldName, get(values, fieldName));
@@ -1912,17 +1981,15 @@ function createFormControl(props = {}) {
                         }
                     }
                 }
-                _fields = {};
+                for (const fieldName of _names.mount) {
+                    setValue(fieldName, get(values, fieldName));
+                }
             }
-            _formValues = props.shouldUnregister
-                ? keepStateOptions.keepDefaultValues
-                    ? cloneObject(_defaultValues)
-                    : {}
-                : cloneObject(values);
+            _formValues = cloneObject(values);
             _subjects.array.next({
                 values: { ...values },
             });
-            _subjects.values.next({
+            _subjects.state.next({
                 values: { ...values },
             });
         }
@@ -1930,6 +1997,7 @@ function createFormControl(props = {}) {
             mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
             unMount: new Set(),
             array: new Set(),
+            disabled: new Set(),
             watch: new Set(),
             watchAll: false,
             focus: '',
@@ -1938,7 +2006,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!props.shouldUnregister;
+        _state.watch = !!_options.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -1953,14 +2021,16 @@ function createFormControl(props = {}) {
                 ? _formState.isSubmitted
                 : false,
             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
                 : {},
@@ -1983,11 +2053,13 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect && fieldRef.select();
+                options.shouldSelect &&
+                    isFunction(fieldRef.select) &&
+                    fieldRef.select();
             }
         }
     };
-    const _updateFormState = (updatedFormState) => {
+    const _setFormState = (updatedFormState) => {
         _formState = {
             ..._formState,
             ...updatedFormState,
@@ -2000,28 +2072,28 @@ function createFormControl(props = {}) {
                 isLoading: false,
             });
         });
-    return {
+    const methods = {
         control: {
             register,
             unregister,
             getFieldState,
             handleSubmit,
             setError,
-            _executeSchema,
+            _subscribe,
+            _runSchema,
             _getWatch,
             _getDirty,
-            _updateValid,
-            _removeUnmounted,
-            _updateFieldArray,
-            _updateDisabledField,
+            _setValid,
+            _setFieldArray,
+            _setDisabledField,
+            _setErrors,
             _getFieldArray,
             _reset,
             _resetDefaultValues,
-            _updateFormState,
+            _removeUnmounted,
             _disableForm,
             _subjects,
             _proxyFormState,
-            _setErrors,
             get _fields() {
                 return _fields;
             },
@@ -2046,9 +2118,6 @@ function createFormControl(props = {}) {
             get _formState() {
                 return _formState;
             },
-            set _formState(value) {
-                _formState = value;
-            },
             get _options() {
                 return _options;
             },
@@ -2059,6 +2128,7 @@ function createFormControl(props = {}) {
                 };
             },
         },
+        subscribe,
         trigger,
         register,
         handleSubmit,
@@ -2073,6 +2143,10 @@ function createFormControl(props = {}) {
         setFocus,
         getFieldState,
     };
+    return {
+        ...methods,
+        formControl: methods,
+    };
 }
 
 /**
@@ -2105,8 +2179,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React$1.useRef();
-    const _values = React$1.useRef();
+    const _formControl = React$1.useRef(undefined);
+    const _values = React$1.useRef(undefined);
     const [formState, updateFormState] = React$1.useState({
         isDirty: false,
         isValidating: false,
@@ -2127,20 +2201,22 @@ function useForm(props = {}) {
     });
     if (!_formControl.current) {
         _formControl.current = {
-            ...createFormControl(props),
+            ...(props.formControl ? props.formControl : createFormControl(props)),
             formState,
         };
+        if (props.formControl &&
+            props.defaultValues &&
+            !isFunction(props.defaultValues)) {
+            props.formControl.reset(props.defaultValues, props.resetOptions);
+        }
     }
     const control = _formControl.current.control;
     control._options = props;
-    useSubscribe({
-        subject: control._subjects.state,
-        next: (value) => {
-            if (shouldRenderFormState(value, control._proxyFormState, control._updateFormState, true)) {
-                updateFormState({ ...control._formState });
-            }
-        },
-    });
+    React$1.useLayoutEffect(() => control._subscribe({
+        formState: control._proxyFormState,
+        callback: () => updateFormState({ ...control._formState }),
+        reRenderRoot: true,
+    }), [control]);
     React$1.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
     React$1.useEffect(() => {
         if (control._proxyFormState.isDirty) {
@@ -2163,13 +2239,13 @@ function useForm(props = {}) {
         }
     }, [props.values, control]);
     React$1.useEffect(() => {
-        if (props.errors) {
+        if (props.errors && !isEmptyObject(props.errors)) {
             control._setErrors(props.errors);
         }
     }, [props.errors, control]);
     React$1.useEffect(() => {
         if (!control._state.mount) {
-            control._updateValid();
+            control._setValid();
             control._state.mount = true;
         }
         if (control._state.watch) {
@@ -2180,7 +2256,7 @@ function useForm(props = {}) {
     });
     React$1.useEffect(() => {
         props.shouldUnregister &&
-            control._subjects.values.next({
+            control._subjects.state.next({
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
@@ -2188,6 +2264,10 @@ function useForm(props = {}) {
     return _formControl.current;
 }
 
+var t=function(t,n,e){if(t&&"reportValidity"in t){var i=get(e,n);t.setCustomValidity(i&&i.message||""),t.reportValidity();}},n=function(r,n){var e=function(e){var i=n.fields[e];i&&i.ref&&"reportValidity"in i.ref?t(i.ref,e,r):i.refs&&i.refs.forEach(function(n){return t(n,e,r)});};for(var i in n.fields)e(i);},e=function(r){return r instanceof Date},i=function(r){return null==r},a=function(r){return "object"==typeof r},o$1=function(r){return !i(r)&&!Array.isArray(r)&&a(r)&&!e(r)},f=function(r){return /^\w*$/.test(r)},s$1=function(r,t,n){for(var e=-1,i=f(t)?[t]:function(r){return t=r.replace(/["|']|\]/g,"").split(/\.|\[/),Array.isArray(t)?t.filter(Boolean):[];var t;}(t),a=i.length,s=a-1;++e<a;){var u=i[e],c=n;if(e!==s){var l=r[u];c=o$1(l)||Array.isArray(l)?l:isNaN(+i[e+1])?{}:[];}r[u]=c,r=r[u];}return r},u=function(t,e){e.shouldUseNativeValidation&&n(t,e);var i={};for(var a in t){var o=get(e.fields,a),f=Object.assign(t[a]||{},{ref:o&&o.ref});if(c(e.names||Object.keys(t),a)){var u=Object.assign({},get(i,a));s$1(u,"root",f),s$1(i,a,u);}else s$1(i,a,f);}return i},c=function(r,t){return r.some(function(r){return r.startsWith(t+".")})};
+
+function o(o,n$1,a){return void 0===n$1&&(n$1={}),void 0===a&&(a={}),function(s,i,c){try{return Promise.resolve(function(t,r){try{var u=(n$1.context&&"development"===process.env.NODE_ENV&&console.warn("You should not used the yup options context. Please, use the 'useForm' context object instead"),Promise.resolve(o["sync"===a.mode?"validateSync":"validate"](s,Object.assign({abortEarly:!1},n$1,{context:i}))).then(function(t){return c.shouldUseNativeValidation&&n({},c),{values:a.raw?s:t,errors:{}}}));}catch(e){return r(e)}return u&&u.then?u.then(void 0,r):u}(0,function(e){if(!e.inner)throw e;return {values:{},errors:u((o=e,n=!c.shouldUseNativeValidation&&"all"===c.criteriaMode,(o.inner||[]).reduce(function(e,t){if(e[t.path]||(e[t.path]={message:t.message,type:t.type}),n){var o=e[t.path].types,a=o&&o[t.type];e[t.path]=appendErrors(t.path,n,e,t.type,a?[].concat(a,t.message):t.message);}return e},{})),c)};var o,n;}))}catch(e){return Promise.reject(e)}}}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -63193,4 +63273,5 @@ exports.useTheme = useTheme$2;
 exports.useThemeProps = useThemeProps$1;
 exports.withStyles = withStyles;
 exports.withTheme = withTheme;
+exports.yupResolverTP = o;
 //# sourceMappingURL=index.js.map