react-hook-form 7.25.3 → 8.0.0-alpha.0

package/dist/index.esm.mjs

@@ -227,7 +227,7 @@ function useController(props) {
         control,
         name,
     });
-    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value })));
+    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value: value })));
     React.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -247,7 +247,7 @@ function useController(props) {
     }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
-            name,
+            name: name,
             value,
             onChange: React.useCallback((event) => {
                 _registerProps.current.onChange({
@@ -288,6 +288,37 @@ const Controller = (props) => props.render(useController(props));
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
 
+/**
+ * Function for joining two paths / path strings to a {@link TypedFieldPath}.
+ * @param path      - base path
+ * @param childPath - the path which should be appended to the base path
+ * @example
+ * ```
+ * type Baz = { baz: string }
+ * type FooBarBaz = { foo: { bar: Baz }}
+ *
+ * const path: TypedFieldPath<FooBarBaz, Baz> = of('foo.bar')
+ * const joinedPath: TypedFieldPath<FooBar, string> = join(path, 'baz')
+ * ```
+ */
+function join(path, childPath) {
+    return `${path}.${childPath}`;
+}
+
+/**
+ * Function for creating a {@link TypedFieldPath} from a path string.
+ * @param path - path string
+ * @example
+ * ```
+ * type FooBar = { foo: { bar: string }}
+ *
+ * const path: TypedFieldPath<FooBar, string> = of('foo.bar')
+ * ```
+ */
+function of(path) {
+    return path;
+}
+
 var isKey = (value) => /^\w*$/.test(value);
 
 var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
@@ -434,7 +465,7 @@ var updateAt = (fieldValues, index, value) => {
 
 const useFieldArray = (props) => {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
+    const { control = methods.control, name, shouldUnregister } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -569,7 +600,7 @@ const useFieldArray = (props) => {
             (control._options.shouldUnregister || shouldUnregister) &&
                 control.unregister(name);
         };
-    }, [name, control, keyName, shouldUnregister]);
+    }, [name, control, shouldUnregister]);
     return {
         swap: React.useCallback(swap, [updateValues, name, control]),
         move: React.useCallback(move, [updateValues, name, control]),
@@ -579,7 +610,7 @@ const useFieldArray = (props) => {
         insert: React.useCallback(insert$1, [updateValues, name, control]),
         update: React.useCallback(update, [updateValues, name, control]),
         replace: React.useCallback(replace, [updateValues, name, control]),
-        fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { [keyName]: ids.current[index] || generateId() }))), [fields, keyName]),
+        fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { id: ids.current[index] || generateId() }))), [fields]),
     };
 };
 
@@ -970,8 +1001,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         const maxOutput = getValueAndMessage(max);
         const minOutput = getValueAndMessage(min);
         if (!isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber ||
-                parseFloat(inputValue);
+            const valueNumber = ref.valueAsNumber || +inputValue;
             if (!isNullOrUndefined(maxOutput.value)) {
                 exceedMax = valueNumber > maxOutput.value;
             }
@@ -1549,7 +1579,7 @@ function createFormControl(props = {}) {
         }
         _subjects.watch.next({});
         _subjects.state.next(Object.assign(Object.assign({}, _formState), (!options.keepDirty ? {} : { isDirty: _getDirty() })));
-        !options.keepIsValid && _updateValid();
+        _proxyFormState.isValid && _updateValid();
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
@@ -1733,8 +1763,7 @@ function createFormControl(props = {}) {
             watchAll: false,
             focus: '',
         };
-        _stateFlags.mount =
-            !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
+        _stateFlags.mount = !_proxyFormState.isValid;
         _stateFlags.watch = !!props.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
@@ -1877,5 +1906,5 @@ function useForm(props = {}) {
     return _formControl.current;
 }
 
-export { Controller, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, FormProvider, appendErrors, get, join, of, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map