react-hook-form 7.43.1 → 7.44.0-next.1

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './controller';
+export * from './form';
 export * from './logic';
 export * from './types';
 export * from './useController';

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,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"}

package/dist/index.esm.mjs

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -60,7 +61,7 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-const HookFormContext = React.createContext(null);
+const HookFormContext = React__default.createContext(null);
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
  *
@@ -91,7 +92,7 @@ const HookFormContext = React.createContext(null);
  * }
  * ```
  */
-const useFormContext = () => React.useContext(HookFormContext);
+const useFormContext = () => React__default.useContext(HookFormContext);
 /**
  * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
  *
@@ -124,7 +125,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  */
 const FormProvider = (props) => {
     const { children, ...data } = props;
-    return (React.createElement(HookFormContext.Provider, { value: data }, children));
+    return (React__default.createElement(HookFormContext.Provider, { value: data }, children));
 };
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
@@ -169,9 +170,9 @@ var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
                 signalName.startsWith(currentName)));
 
 function useSubscribe(props) {
-    const _props = React.useRef(props);
+    const _props = React__default.useRef(props);
     _props.current = props;
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         const subscription = !props.disabled &&
             _props.current.subject.subscribe({
                 next: _props.current.next,
@@ -215,9 +216,9 @@ function useSubscribe(props) {
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React.useState(control._formState);
-    const _mounted = React.useRef(true);
-    const _localProxyFormState = React.useRef({
+    const [formState, updateFormState] = React__default.useState(control._formState);
+    const _mounted = React__default.useRef(true);
+    const _localProxyFormState = React__default.useRef({
         isDirty: false,
         isLoading: false,
         dirtyFields: false,
@@ -226,7 +227,7 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    const _name = React.useRef(name);
+    const _name = React__default.useRef(name);
     _name.current = name;
     useSubscribe({
         disabled,
@@ -239,7 +240,7 @@ function useFormState(props) {
             }),
         subject: control._subjects.state,
     });
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         _mounted.current = true;
         const isDirty = control._proxyFormState.isDirty && control._getDirty();
         if (isDirty !== control._formState.isDirty) {
@@ -324,7 +325,7 @@ function cloneObject(data) {
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const _name = React.useRef(name);
+    const _name = React__default.useRef(name);
     _name.current = name;
     useSubscribe({
         disabled,
@@ -335,8 +336,8 @@ function useWatch(props) {
             }
         },
     });
-    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
-    React.useEffect(() => control._removeUnmounted());
+    const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+    React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
 
@@ -378,11 +379,11 @@ function useController(props) {
         control,
         name,
     });
-    const _registerProps = React.useRef(control.register(name, {
+    const _registerProps = React__default.useRef(control.register(name, {
         ...props.rules,
         value,
     }));
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
             if (field) {
@@ -403,14 +404,14 @@ function useController(props) {
         field: {
             name,
             value,
-            onChange: React.useCallback((event) => _registerProps.current.onChange({
+            onChange: React__default.useCallback((event) => _registerProps.current.onChange({
                 target: {
                     value: getEventValue(event),
                     name: name,
                 },
                 type: EVENTS.CHANGE,
             }), [name]),
-            onBlur: React.useCallback(() => _registerProps.current.onBlur({
+            onBlur: React__default.useCallback(() => _registerProps.current.onBlur({
                 target: {
                     value: get(control._formValues, name),
                     name: name,
@@ -495,6 +496,103 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+const POST_REQUEST = 'post';
+/**
+ * Form component to manage submission.
+ *
+ * @param props - to setup submission detail. {@link FormProps}
+ *
+ * @returns form component or headless render prop.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control, formState: { errors } } = useForm();
+ *
+ *   return (
+ *     <Form action="/api" control={control}>
+ *       <input {...register("name")} />
+ *       <p>{errors?.root?.server && 'Server error'}</p>
+ *       <button>Submit</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+function Form(props) {
+    const methods = useFormContext();
+    const [mounted, setMounted] = React.useState(false);
+    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, fetcher, ...rest } = props;
+    const isPostRequest = method === POST_REQUEST;
+    const submit = async (event) => {
+        let serverError = false;
+        await control.handleSubmit(async (values) => {
+            onSubmit && onSubmit(values);
+            if (action) {
+                const formData = new FormData();
+                let shouldStringifySubmissionData = false;
+                if (headers) {
+                    shouldStringifySubmissionData =
+                        headers['Content-Type'].includes('json');
+                }
+                else {
+                    control._names.mount.forEach((name) => formData.append(name, get(values, name)));
+                }
+                if (!fetcher) {
+                    try {
+                        const response = await fetch(action, {
+                            method,
+                            headers: {
+                                ...headers,
+                                ...(encType ? { 'Content-Type': encType } : {}),
+                            },
+                            ...(isPostRequest
+                                ? {
+                                    body: shouldStringifySubmissionData
+                                        ? JSON.stringify(values)
+                                        : formData,
+                                }
+                                : {}),
+                        });
+                        if (response &&
+                            (validateStatus
+                                ? !validateStatus(response.status)
+                                : response.status < 200 || response.status >= 300)) {
+                            serverError = true;
+                            onError && onError({ response });
+                        }
+                        else {
+                            onSuccess && onSuccess({ response });
+                        }
+                    }
+                    catch (error) {
+                        serverError = true;
+                        onError && onError({ error });
+                    }
+                }
+                else {
+                    await fetcher(action, {
+                        method,
+                        values,
+                        event,
+                    });
+                }
+            }
+        })(event);
+        serverError &&
+            props.control &&
+            props.control._subjects.state.next({
+                isSubmitSuccessful: false,
+            });
+    };
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    return render ? (React.createElement(React.Fragment, null, render({
+        submit,
+    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+}
+
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? {
         ...errors[name],
@@ -603,7 +701,7 @@ var isHTMLElement = (value) => {
         (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
 };
 
-var isMessage = (value) => isString(value) || React.isValidElement(value);
+var isMessage = (value) => isString(value);
 
 var isRadioInput = (element) => element.type === 'radio';
 
@@ -972,11 +1070,11 @@ var updateAt = (fieldValues, index, value) => {
 function useFieldArray(props) {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
-    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);
+    const [fields, setFields] = React__default.useState(control._getFieldArray(name));
+    const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
+    const _fieldIds = React__default.useRef(fields);
+    const _name = React__default.useRef(name);
+    const _actioned = React__default.useRef(false);
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
@@ -994,7 +1092,7 @@ function useFieldArray(props) {
         },
         subject: control._subjects.array,
     });
-    const updateValues = React.useCallback((updatedFieldArrayValues) => {
+    const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._updateFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
@@ -1081,7 +1179,7 @@ function useFieldArray(props) {
         setFields([...updatedFieldArrayValues]);
         control._updateFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         control._stateFlags.action = false;
         isWatched(name, control._names) && control._subjects.state.next({});
         if (_actioned.current &&
@@ -1120,7 +1218,7 @@ function useFieldArray(props) {
         control._names.focus = '';
         control._updateValid();
     }, [fields, name, control]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         !get(control._formValues, name) && control._updateFieldArray(name);
         return () => {
             (control._options.shouldUnregister || shouldUnregister) &&
@@ -1128,15 +1226,15 @@ function useFieldArray(props) {
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        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) => ({
+        swap: React__default.useCallback(swap, [updateValues, name, control]),
+        move: React__default.useCallback(move, [updateValues, name, control]),
+        prepend: React__default.useCallback(prepend$1, [updateValues, name, control]),
+        append: React__default.useCallback(append$1, [updateValues, name, control]),
+        remove: React__default.useCallback(remove, [updateValues, name, control]),
+        insert: React__default.useCallback(insert$1, [updateValues, name, control]),
+        update: React__default.useCallback(update, [updateValues, name, control]),
+        replace: React__default.useCallback(replace, [updateValues, name, control]),
+        fields: React__default.useMemo(() => fields.map((field, index) => ({
             ...field,
             [keyName]: ids.current[index] || generateId(),
         })), [fields, keyName]),
@@ -1918,7 +2016,7 @@ function createFormControl(props = {}, flushRootRender) {
             : updateValidAndValue(name, true, options.value);
         return {
             ...(disabledIsDefined ? { disabled: options.disabled } : {}),
-            ...(_options.shouldUseNativeValidation
+            ...(_options.shouldUseNativeValidation || _options.progressive
                 ? {
                     required: !!options.required,
                     min: getRuleValue(options.min),
@@ -2161,6 +2259,8 @@ function createFormControl(props = {}, flushRootRender) {
             register,
             unregister,
             getFieldState,
+            handleSubmit,
+            setError,
             _executeSchema,
             _focusError,
             _getWatch,
@@ -2249,15 +2349,15 @@ function createFormControl(props = {}, flushRootRender) {
  *       <input defaultValue="test" {...register("example")} />
  *       <input {...register("exampleRequired", { required: true })} />
  *       {errors.exampleRequired && <span>This field is required</span>}
- *       <input type="submit" />
+ *       <button>Submit</button>
  *     </form>
  *   );
  * }
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef();
-    const [formState, updateFormState] = React.useState({
+    const _formControl = React__default.useRef();
+    const [formState, updateFormState] = React__default.useState({
         isDirty: false,
         isValidating: false,
         isLoading: true,
@@ -2289,7 +2389,7 @@ function useForm(props = {}) {
             }
         },
     });
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (!control._stateFlags.mount) {
             control._updateValid();
             control._stateFlags.mount = true;
@@ -2300,17 +2400,17 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (props.values && !deepEqual(props.values, control._defaultValues)) {
             control._reset(props.values, control._options.resetOptions);
         }
     }, [props.values, control]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         formState.submitCount && control._focusError();
     }, [control, formState.submitCount]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
 
-export { Controller, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, Form, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map