@bombillazo/rhf-plus 7.64.0-plus.1 → 7.65.0-plus.0

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export * from './useFormContext';
 export * from './useFormState';
 export * from './useWatch';
 export * from './utils';
+export * from './watch';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.esm.mjs

@@ -976,7 +976,7 @@ function markFieldsDirty(data, fields = {}) {
             fields[key] = Array.isArray(data[key]) ? [] : {};
             markFieldsDirty(data[key], fields[key]);
         }
-        else if (!isNullOrUndefined(data[key])) {
+        else if (!isUndefined(data[key])) {
             fields[key] = true;
         }
     }
@@ -1258,25 +1258,13 @@ var updateFieldArrayRootError = (errors, error, name) => {
     return errors;
 };
 
-var isMessage = (value) => {
-    // Support strings (existing functionality)
-    if (isString(value)) {
-        return true;
-    }
-    // Support React elements only (not primitives like null, undefined, numbers)
-    if (React.isValidElement(value)) {
-        return true;
-    }
-    return false;
-};
-
 function getValidateError(result, ref, type = 'validate') {
-    if (isMessage(result) ||
-        (Array.isArray(result) && result.every(isMessage)) ||
+    if (isString(result) ||
+        (Array.isArray(result) && result.every(isString)) ||
         (isBoolean(result) && !result)) {
         return {
             type,
-            message: isMessage(result) ? result : '',
+            message: isString(result) ? result : '',
             ref,
         };
     }
@@ -1298,16 +1286,7 @@ var validateField = async (field, skippedFieldNames, formValues, validateAllFiel
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
-            if (isBoolean(message)) {
-                inputRef.setCustomValidity('');
-            }
-            else if (typeof message === 'string') {
-                inputRef.setCustomValidity(message || '');
-            }
-            else {
-                // For ReactNode messages, convert to string or use empty string for native validation
-                inputRef.setCustomValidity('');
-            }
+            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
             inputRef.reportValidity();
         }
     };
@@ -1338,7 +1317,7 @@ var validateField = async (field, skippedFieldNames, formValues, validateAllFiel
                 (isBoolean(inputValue) && !inputValue) ||
                 (isCheckBox && !getCheckboxValue(refs).isValid) ||
                 (isRadio && !getRadioValue(refs).isValid))) {
-        const { value, message } = isMessage(required)
+        const { value, message } = isString(required)
             ? { value: !!required, message: required }
             : getValueAndMessage(required);
         if (value) {
@@ -2913,7 +2892,8 @@ function useFieldArray(props) {
     const _actioned = React.useRef(false);
     control._names.array.add(name);
     React.useMemo(() => rules &&
-        control.register(name, rules), [control, rules, name]);
+        fields.length >= 0 &&
+        control.register(name, rules), [control, name, fields.length, rules]);
     useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === name || !fieldArrayName) {
@@ -3276,5 +3256,29 @@ function useForm(props = {}) {
     return _formControl.current;
 }
 
-export { Controller, Form, FormProvider, appendErrors, createFormControl, get, set, submitForm as submit, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+/**
+ * Watch component that subscribes to form field changes and re-renders when watched fields update.
+ *
+ * @param control - The form control object from useForm
+ * @param names - Array of field names to watch for changes
+ * @param render - The function that receives watched values and returns ReactNode
+ * @returns The result of calling render function with watched values
+ *
+ * @example
+ * The `Watch` component only re-render when the values of `foo`, `bar`, and `baz.qux` change.
+ * The types of `foo`, `bar`, and `baz.qux` are precisely inferred.
+ *
+ * ```tsx
+ * const { control } = useForm();
+ *
+ * <Watch
+ *   control={control}
+ *   names={['foo', 'bar', 'baz.qux']}
+ *   render={([foo, bar, baz_qux]) => <div>{foo}{bar}{baz_qux}</div>}
+ * />
+ * ```
+ */
+const Watch = ({ control, names, render, }) => render(useWatch({ control, name: names }));
+
+export { Controller, Form, FormProvider, Watch, appendErrors, createFormControl, get, set, submitForm as submit, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map