@bombillazo/rhf-plus 7.62.0-plus.2 → 7.62.0-plus.4

package/dist/index.esm.mjs

@@ -81,6 +81,21 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
+function mergeMissingKeysAsUndefined(oldObject, newObject) {
+    if (!newObject) {
+        return newObject;
+    }
+    const result = { ...newObject };
+    if (oldObject) {
+        for (const key in oldObject) {
+            if (!(key in result)) {
+                result[key] = undefined;
+            }
+        }
+    }
+    return result;
+}
+
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -109,6 +124,8 @@ var set = (object, path, value) => {
 const EVENTS = {
     BLUR: 'blur',
     FOCUS_OUT: 'focusout',
+    FOCUS: 'focus',
+    FOCUS_IN: 'focusin',
     CHANGE: 'change',
 };
 const VALIDATION_MODE = {
@@ -256,6 +273,7 @@ function useFormState(props) {
         isLoading: false,
         dirtyFields: false,
         touchedFields: false,
+        focusedField: false,
         validatingFields: false,
         isValidating: false,
         isValid: false,
@@ -427,11 +445,22 @@ function useController(props) {
         exact: true,
     });
     const _props = React.useRef(props);
+    const _previousRules = React.useRef(props.rules);
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    const mergedRules = React.useMemo(() => mergeMissingKeysAsUndefined(_previousRules.current, props.rules), [props.rules]);
+    // Update register props when rules change
+    React.useEffect(() => {
+        _registerProps.current = control.register(name, {
+            ...mergedRules,
+            value,
+            ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+        });
+        _previousRules.current = props.rules;
+    }, [mergedRules, props.rules, value, props.disabled, control, name]);
     _props.current = props;
     const fieldState = React.useMemo(() => Object.defineProperties({}, {
         invalid: {
@@ -446,6 +475,10 @@ function useController(props) {
             enumerable: true,
             get: () => !!get(formState.touchedFields, name),
         },
+        isFocused: {
+            enumerable: true,
+            get: () => formState.focusedField === name,
+        },
         isValidating: {
             enumerable: true,
             get: () => !!get(formState.validatingFields, name),
@@ -469,6 +502,13 @@ function useController(props) {
         },
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
+    const onFocus = React.useCallback(() => _registerProps.current.onFocus({
+        target: {
+            value: get(control._formValues, name),
+            name: name,
+        },
+        type: EVENTS.FOCUS,
+    }), [name, control._formValues]);
     const elementRef = React.useRef(null);
     const ref = React.useCallback((elm) => {
         elementRef.current = elm;
@@ -510,9 +550,19 @@ function useController(props) {
             ...(isBoolean(isFieldDisabled) ? { disabled: isFieldDisabled } : {}),
             onChange,
             onBlur,
+            onFocus,
             ref,
         };
-    }, [name, disabled, control._options.disabled, onChange, onBlur, ref, value]);
+    }, [
+        name,
+        disabled,
+        control._options.disabled,
+        onChange,
+        onBlur,
+        onFocus,
+        ref,
+        value,
+    ]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         control.register(name, {
@@ -1120,7 +1170,15 @@ var shouldSubscribeByName = (name, signalName, exact) => !name ||
             : currentName.startsWith(signalName) ||
                 signalName.startsWith(currentName)));
 
-var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
+var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode, 
+/**
+ * Need to keep this order of parameters for backward compatibility
+ */
+isFocusEvent) => {
+    // Focus events should always skip validation
+    if (isFocusEvent) {
+        return true;
+    }
     if (mode.isOnAll) {
         return false;
     }
@@ -1387,6 +1445,7 @@ function createFormControl(props = {}) {
         isValid: false,
         touchedFields: {},
         dirtyFields: {},
+        focusedField: undefined,
         validatingFields: {},
         errors: _options.errors || {},
         disabled: Array.isArray(_options.disabled)
@@ -1420,6 +1479,7 @@ function createFormControl(props = {}) {
         dirtyFields: false,
         validatingFields: false,
         touchedFields: false,
+        focusedField: false,
         isValidating: false,
         isValid: false,
         errors: false,
@@ -1531,7 +1591,7 @@ function createFormControl(props = {}) {
             _state.mount && _setValid();
         }
     };
-    const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
+    const updateTouchAndDirty = (name, fieldValue, isBlurEvent, isFocusEvent, shouldDirty, shouldRender) => {
         let shouldUpdateField = false;
         let isPreviousDirty = false;
         const output = {
@@ -1568,6 +1628,25 @@ function createFormControl(props = {}) {
                                 isPreviousFieldTouched !== isBlurEvent);
                 }
             }
+            // Handle focus state
+            if (isFocusEvent || isBlurEvent) {
+                const wasPreviouslyFocused = _formState.focusedField === name;
+                const shouldBeFocused = isFocusEvent && !isBlurEvent;
+                if (wasPreviouslyFocused !== shouldBeFocused) {
+                    if (shouldBeFocused) {
+                        _formState.focusedField = name;
+                    }
+                    else {
+                        _formState.focusedField = undefined;
+                    }
+                    output.focusedField = _formState.focusedField;
+                    shouldUpdateField =
+                        shouldUpdateField ||
+                            ((_proxyFormState.focusedField ||
+                                _proxySubscribeFormState.focusedField) &&
+                                wasPreviouslyFocused !== shouldBeFocused);
+                }
+            }
             shouldUpdateField && shouldRender && _subjects.state.next(output);
         }
         return shouldUpdateField ? output : {};
@@ -1733,7 +1812,8 @@ function createFormControl(props = {}) {
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch, false, // isFocusEvent - not applicable for setValue
+            options.shouldDirty, true);
         options.shouldValidate && trigger(name);
     };
     const setValues = (name, value, options) => {
@@ -1822,12 +1902,13 @@ function createFormControl(props = {}) {
                 ? getFieldValue(field._f)
                 : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
+            const isFocusEvent = event.type === EVENTS.FOCUS || event.type === EVENTS.FOCUS_IN;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
-                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
-            const watched = isWatched(name, _names, isBlurEvent);
+                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit, isFocusEvent);
+            const watched = isWatched(name, _names, isBlurEvent || isFocusEvent);
             set(_formValues, name, fieldValue);
             if (isBlurEvent) {
                 if (!target || !target.readOnly) {
@@ -1838,7 +1919,7 @@ function createFormControl(props = {}) {
             else if (field._f.onChange) {
                 field._f.onChange(event);
             }
-            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
+            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, isFocusEvent);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
                 _subjects.state.next({
@@ -1952,6 +2033,7 @@ function createFormControl(props = {}) {
         error: get((formState || _formState).errors, name),
         isValidating: !!get(_formState.validatingFields, name),
         isTouched: !!get((formState || _formState).touchedFields, name),
+        isFocused: (formState || _formState).focusedField === name,
     });
     const clearErrors = (name) => {
         name &&
@@ -2091,6 +2173,7 @@ function createFormControl(props = {}) {
             name,
             onChange,
             onBlur: onChange,
+            onFocus: onChange,
             ref: (ref) => {
                 if (ref) {
                     register(name, options);
@@ -2356,6 +2439,7 @@ function createFormControl(props = {}) {
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
+            focusedField: undefined, // Always reset focused field on form reset
             errors: keepStateOptions.keepErrors ? _formState.errors : {},
             isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful
                 ? _formState.isSubmitSuccessful
@@ -2872,6 +2956,7 @@ function useForm(props = {}) {
         submitCount: 0,
         dirtyFields: {},
         touchedFields: {},
+        focusedField: undefined,
         validatingFields: {},
         errors: props.errors || {},
         // If it's an array, set formState.disabled to false because when using array mode,