react-hook-form 7.23.0-next.0 → 7.23.0-next.1

package/dist/index.esm.mjs

@@ -2,7 +2,7 @@ import React from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
-var isDateObject = (data) => data instanceof Date;
+var isDateObject = (value) => value instanceof Date;
 
 var isNullOrUndefined = (value) => value == null;
 
@@ -22,20 +22,20 @@ var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
 
 var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
 
-var compact = (value) => (value || []).filter(Boolean);
+var compact = (value) => value.filter(Boolean);
 
 var isUndefined = (val) => val === undefined;
 
 var get = (obj, path, defaultValue) => {
-    if (isObject(obj) && path) {
-        const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
-        return isUndefined(result) || result === obj
-            ? isUndefined(obj[path])
-                ? defaultValue
-                : obj[path]
-            : result;
+    if (!path || !isObject(obj)) {
+        return defaultValue;
     }
-    return undefined;
+    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);
+    return isUndefined(result) || result === obj
+        ? isUndefined(obj[path])
+            ? defaultValue
+            : obj[path]
+        : result;
 };
 
 const EVENTS = {
@@ -343,6 +343,14 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
+var generateId = () => {
+    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16 + d) % 16 | 0;
+        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    });
+};
+
 var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
     ? options.focusName ||
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
@@ -354,20 +362,8 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
-var generateId = () => {
-    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16 + d) % 16 | 0;
-        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
-    });
-};
-
-var mapCurrentIds = (values, keyName, _fieldIds) => values.map((value, index) => (Object.assign(Object.assign({}, value), { [keyName]: _fieldIds && _fieldIds.current[index]
-        ? _fieldIds.current[index][keyName]
-        : value[keyName] || generateId() })));
-
 function append(data, value) {
-    return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
+    return [...data, ...convertToArrayPayload(value)];
 }
 
 function cloneObject(data) {
@@ -416,8 +412,6 @@ var moveArrayAt = (data, from, to) => {
     return [];
 };
 
-var omitKeys = (fields, keyName) => fields.map((field = {}) => omit(field, keyName));
-
 function prepend(data, value) {
     return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
 }
@@ -447,8 +441,8 @@ var updateAt = (fieldValues, index, value) => {
 const useFieldArray = (props) => {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
-    const _shouldKeepKeyName = React.useRef(get(control._getFieldArray(name)[0], keyName));
-    const [fields, setFields] = React.useState(mapCurrentIds(control._getFieldArray(name), keyName));
+    const [fields, setFields] = React.useState(control._getFieldArray(name));
+    const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
     const _name = React.useRef(name);
     const _actioned = React.useRef(false);
@@ -457,98 +451,100 @@ const useFieldArray = (props) => {
     control._names.array.add(name);
     const callback = React.useCallback(({ values, name: fieldArrayName }) => {
         if (fieldArrayName === _name.current || !fieldArrayName) {
-            setFields(mapCurrentIds(get(values, _name.current, []), keyName));
+            const fieldValues = get(values, _name.current, []);
+            setFields(fieldValues);
+            ids.current = fieldValues.map(generateId);
         }
-    }, [keyName]);
+    }, []);
     useSubscribe({
         callback,
         subject: control._subjects.array,
     });
-    const updateValues = React.useCallback((updatedFieldArrayValuesWithKey, hasKey = _shouldKeepKeyName.current) => {
-        const updatedFieldArrayValues = hasKey
-            ? updatedFieldArrayValuesWithKey
-            : omitKeys(updatedFieldArrayValuesWithKey, keyName);
-        hasKey && (_shouldKeepKeyName.current = true);
+    const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
-        return updatedFieldArrayValues;
-    }, [control, name, keyName]);
+    }, [control, name]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), mapCurrentIds(appendValue, keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, appendValue[0][keyName]);
-        control._names.focus = getFocusFieldName(name, fieldArrayValues.length - 1, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
+        control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+        ids.current = append(ids.current, appendValue.map(generateId));
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const prepend$1 = (value, options) => {
         const prependValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), mapCurrentIds(prependValue, keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, prependValue[0][keyName]);
+        const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        ids.current = prepend(ids.current, prependValue.map(generateId));
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const remove = (index) => {
-        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), index);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+        ids.current = removeArrayAt(ids.current, index);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const insert$1 = (index, value, options) => {
         const insertValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), index, mapCurrentIds(insertValue, keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, insertValue[0][keyName]);
+        const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+        updateValues(updatedFieldArrayValues);
         control._names.focus = getFocusFieldName(name, index, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        ids.current = insert(ids.current, index, insertValue.map(generateId));
+        setFields(updatedFieldArrayValues);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const swap = (indexA, indexB) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds);
-        swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+        swapArrayAt(ids.current, indexA, indexB);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
-        }, fieldArrayValues, false);
+        }, updatedFieldArrayValues, false);
     };
     const move = (from, to) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds);
-        moveArrayAt(updatedFieldArrayValuesWithKey, from, to);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        moveArrayAt(updatedFieldArrayValues, from, to);
+        moveArrayAt(ids.current, from, to);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, moveArrayAt, {
             argA: from,
             argB: to,
-        }, fieldArrayValues, false);
+        }, updatedFieldArrayValues, false);
     };
     const update = (index, value) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds);
-        const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
-        _fieldIds.current = mapCurrentIds(updatedFieldArrayValues, keyName);
-        const fieldArrayValues = updateValues(_fieldIds.current, get(value, keyName));
-        setFields(_fieldIds.current);
+        const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
+        ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
+        setFields([...updatedFieldArrayValues]);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
-        }, fieldArrayValues, true, false, false);
+        }, updatedFieldArrayValues, true, false, false);
     };
     const replace = (value) => {
-        const updateValue = convertToArrayPayload(value);
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(updateValue, keyName);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, updateValue[0][keyName]);
-        setFields(updatedFieldArrayValuesWithKey);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, fieldArrayValues, true, false, false);
+        const updatedFieldArrayValues = convertToArrayPayload(value);
+        ids.current = updatedFieldArrayValues.map(generateId);
+        updateValues([...updatedFieldArrayValues]);
+        setFields([...updatedFieldArrayValues]);
+        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -572,25 +568,24 @@ const useFieldArray = (props) => {
             focusFieldBy(control._fields, (key) => key.startsWith(control._names.focus));
         control._names.focus = '';
         control._proxyFormState.isValid && control._updateValid();
-    }, [fields, name, control, keyName]);
+    }, [fields, name, control]);
     React.useEffect(() => {
         !get(control._formValues, name) && set(control._formValues, name, []);
         return () => {
-            if (control._options.shouldUnregister || shouldUnregister) {
+            (control._options.shouldUnregister || shouldUnregister) &&
                 control.unregister(name);
-            }
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        swap: React.useCallback(swap, [updateValues, name, control, keyName]),
-        move: React.useCallback(move, [updateValues, name, control, keyName]),
-        prepend: React.useCallback(prepend$1, [updateValues, name, control, keyName]),
-        append: React.useCallback(append$1, [updateValues, name, control, keyName]),
-        remove: React.useCallback(remove, [updateValues, name, control, keyName]),
-        insert: React.useCallback(insert$1, [updateValues, name, control, keyName]),
-        update: React.useCallback(update, [updateValues, name, control, keyName]),
-        replace: React.useCallback(replace, [updateValues, name, control, keyName]),
-        fields: fields,
+        swap: React.useCallback(swap, [updateValues, name, control]),
+        move: React.useCallback(move, [updateValues, name, control]),
+        prepend: React.useCallback(prepend$1, [updateValues, name, control]),
+        append: React.useCallback(append$1, [updateValues, name, control]),
+        remove: React.useCallback(remove, [updateValues, name, control]),
+        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]),
     };
 };
 
@@ -679,7 +674,7 @@ var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
-var live = (ref) => isHTMLElement(ref) && document.contains(ref);
+var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
 function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
@@ -1176,10 +1171,10 @@ function createFormControl(props = {}) {
         _subjects.state.next({
             errors: _formState.errors,
         }));
-    const updateValidAndValue = (name, shouldSkipSetValueAs, ref) => {
+    const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
-            const defaultValue = get(_formValues, name, get(_defaultValues, name));
+            const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
             isUndefined(defaultValue) ||
                 (ref && ref.defaultChecked) ||
                 shouldSkipSetValueAs
@@ -1342,7 +1337,8 @@ function createFormControl(props = {}) {
                             ? fieldReference.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
                                 ? !!fieldValue.find((data) => data === checkboxRef.value)
                                 : fieldValue === checkboxRef.value))
-                            : (fieldReference.refs[0].checked = !!fieldValue);
+                            : fieldReference.refs[0] &&
+                                (fieldReference.refs[0].checked = !!fieldValue);
                     }
                     else {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
@@ -1549,20 +1545,18 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
+        const disabledIsDefined = isBoolean(options.disabled);
         set(_fields, name, {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
         _names.mount.add(name);
-        !isUndefined(options.value) &&
-            !options.disabled &&
-            set(_formValues, name, get(_formValues, name, options.value));
         field
-            ? isBoolean(options.disabled) &&
+            ? disabledIsDefined &&
                 set(_formValues, name, options.disabled
                     ? undefined
                     : get(_formValues, name, getFieldValue(field._f)))
-            : updateValidAndValue(name, true);
-        return Object.assign(Object.assign(Object.assign({}, (isBoolean(options.disabled) ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
+            : updateValidAndValue(name, true, options.value);
+        return Object.assign(Object.assign(Object.assign({}, (disabledIsDefined ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
             ? {
                 required: !!options.required,
                 min: getRuleValue(options.min),
@@ -1582,16 +1576,21 @@ function createFormControl(props = {}) {
                             : ref
                         : ref;
                     const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
-                    if (fieldRef === field._f.ref ||
-                        (radioOrCheckbox &&
-                            compact(field._f.refs).find((option) => option === fieldRef))) {
+                    const refs = field._f.refs || [];
+                    if (radioOrCheckbox
+                        ? refs.find((option) => option === fieldRef)
+                        : fieldRef === field._f.ref) {
                         return;
                     }
                     set(_fields, name, {
-                        _f: radioOrCheckbox
-                            ? Object.assign(Object.assign({}, field._f), { refs: [...compact(field._f.refs).filter(live), fieldRef], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
+                        _f: Object.assign(Object.assign({}, field._f), (radioOrCheckbox
+                            ? {
+                                refs: refs.concat(fieldRef).filter(live),
+                                ref: { type: fieldRef.type, name },
+                            }
+                            : { ref: fieldRef })),
                     });
-                    updateValidAndValue(name, false, fieldRef);
+                    updateValidAndValue(name, false, undefined, fieldRef);
                 }
                 else {
                     field = get(_fields, name, {});