@octanejs/hook-form 0.1.0

package/src/types/form.ts

@@ -0,0 +1,961 @@
+// Vendored from react-hook-form@7.81.0 src/types/form.ts.
+// octane: structural stand-ins for the React types upstream references.
+// Events are NATIVE DOM events in octane (no synthetic layer): a native Event
+// structurally satisfies BaseSyntheticEvent below (persist is React-only and
+// optional — upstream itself guards `event.persist && event.persist()`).
+// Renderables (upstream's ReactNode) are `unknown`.
+type BaseSyntheticEvent = {
+	type?: unknown;
+	target?: any;
+	preventDefault?: () => void;
+	persist?: () => void;
+};
+// Upstream: React.FormHTMLAttributes<HTMLFormElement>. Octane has no attribute
+// prop types — native <form> attributes pass through untyped.
+type FormHTMLAttributes = Record<string, unknown>;
+
+import type { VALIDATION_MODE } from '../constants';
+import type { Subject, Subscription } from '../utils/createSubject';
+
+import type { ErrorOption, FieldError, FieldErrors } from './errors';
+import type { EventType } from './events';
+import type { FieldArray } from './fieldArray';
+import type { FieldName, FieldRefs, FieldValue, FieldValues, InternalFieldName } from './fields';
+import type { FieldArrayPath, FieldPath, FieldPathValue, FieldPathValues } from './path';
+import type { Resolver } from './resolvers';
+import type { DeepMap, DeepPartial, DeepPartialSkipArrayKey, Noop } from './utils';
+import type { RegisterOptions, ValidateForm } from './validator';
+
+declare const $NestedValue: unique symbol;
+
+/**
+ * @deprecated to be removed in the next major version
+ */
+export type NestedValue<TValue extends object = object> = {
+	[$NestedValue]: never;
+} & TValue;
+
+export type DefaultValues<TFieldValues> =
+	TFieldValues extends AsyncDefaultValues<TFieldValues>
+		? DeepPartial<Awaited<TFieldValues>>
+		: DeepPartial<TFieldValues>;
+
+export type InternalNameSet = Set<InternalFieldName>;
+
+export type ValidationMode = typeof VALIDATION_MODE;
+
+export type Mode = keyof ValidationMode;
+
+export type ValidationModeFlags = {
+	isOnSubmit: boolean;
+	isOnBlur: boolean;
+	isOnChange: boolean;
+	isOnAll: boolean;
+	isOnTouch: boolean;
+};
+
+export type CriteriaMode = 'firstError' | 'all';
+
+export type SubmitHandler<T> = (data: T, event?: BaseSyntheticEvent) => unknown | Promise<unknown>;
+
+export type FormSubmitHandler<TTransformedValues> = (payload: {
+	data: TTransformedValues;
+	event?: BaseSyntheticEvent;
+	formData: FormData;
+	formDataJson: string;
+	method?: 'post' | 'put' | 'delete';
+}) => unknown | Promise<unknown>;
+
+export type SubmitErrorHandler<TFieldValues extends FieldValues> = (
+	errors: FieldErrors<TFieldValues>,
+	event?: BaseSyntheticEvent,
+) => unknown | Promise<unknown>;
+
+export type SetValueConfig = Partial<{
+	shouldValidate: boolean;
+	shouldDirty: boolean;
+	shouldTouch: boolean;
+}>;
+
+export type TriggerConfig = Partial<{
+	shouldFocus: boolean;
+}>;
+
+export type ResetFieldConfig<
+	TFieldValues extends FieldValues,
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Partial<{
+	keepDirty: boolean;
+	keepTouched: boolean;
+	keepError: boolean;
+	defaultValue: FieldPathValue<TFieldValues, TFieldName>;
+}>;
+
+export type ChangeHandler = (event: { target: any; type?: any }) => Promise<void | boolean>;
+
+export type DelayCallback = (wait: number) => void;
+
+type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
+
+export type UseFormProps<
+	TFieldValues extends FieldValues = FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+> = Partial<{
+	mode: Mode;
+	disabled: boolean;
+	reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
+	defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
+	values: TFieldValues;
+	errors: FieldErrors<TFieldValues>;
+	resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
+	resolver: Resolver<TFieldValues, TContext, TTransformedValues>;
+	context: TContext;
+	shouldFocusError: boolean;
+	shouldUnregister: boolean;
+	shouldUseNativeValidation: boolean;
+	progressive: boolean;
+	criteriaMode: CriteriaMode;
+	delayError: number;
+	formControl?: Omit<UseFormReturn<TFieldValues, TContext, TTransformedValues>, 'formState'>;
+	validate: ValidateForm<TFieldValues>;
+}>;
+
+export type FieldNamesMarkedBoolean<TFieldValues extends FieldValues> = DeepMap<
+	DeepPartial<TFieldValues>,
+	boolean
+>;
+
+export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
+	isDirty: boolean;
+	isValidating: boolean;
+	dirtyFields: FieldNamesMarkedBoolean<TFieldValues>;
+	touchedFields: FieldNamesMarkedBoolean<TFieldValues>;
+	validatingFields: FieldNamesMarkedBoolean<TFieldValues>;
+	errors: boolean;
+	isValid: boolean;
+};
+
+export type ReadFormState = { [K in keyof FormStateProxy]: boolean | 'all' } & {
+	values?: boolean;
+	defaultValues?: boolean | 'all';
+	isSubmitted?: boolean | 'all';
+	submitCount?: boolean | 'all';
+};
+
+export type FormState<TFieldValues extends FieldValues> = {
+	isDirty: boolean;
+	isLoading: boolean;
+	isSubmitted: boolean;
+	isSubmitSuccessful: boolean;
+	isSubmitting: boolean;
+	isValidating: boolean;
+	isValid: boolean;
+	disabled: boolean;
+	submitCount: number;
+	defaultValues?: undefined | Readonly<DeepPartial<TFieldValues>>;
+	dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
+	touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
+	validatingFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
+	errors: FieldErrors<TFieldValues>;
+	isReady: boolean;
+};
+
+export type KeepStateOptions = Partial<{
+	keepDirtyValues: boolean;
+	keepErrors: boolean;
+	keepDirty: boolean;
+	keepValues: boolean;
+	keepDefaultValues: boolean;
+	keepIsSubmitted: boolean;
+	keepIsSubmitSuccessful: boolean;
+	keepTouched: boolean;
+	keepIsValidating: boolean;
+	keepIsValid: boolean;
+	keepSubmitCount: boolean;
+	keepFieldsRef: boolean;
+}>;
+
+export type SetFieldValue<TFieldValues extends FieldValues> = FieldValue<TFieldValues>;
+
+export type RefCallBack = (instance: any) => void;
+
+export type UseFormRegisterReturn<TFieldName extends InternalFieldName = InternalFieldName> = {
+	// octane: upstream's `onChange` — native events make `input` the
+	// per-keystroke event, so the handler is exposed under `onInput`.
+	onInput: ChangeHandler;
+	onBlur: ChangeHandler;
+	ref: RefCallBack;
+	name: TFieldName;
+	min?: string | number;
+	max?: string | number;
+	maxLength?: number;
+	minLength?: number;
+	pattern?: string;
+	required?: boolean;
+	disabled?: boolean;
+};
+
+/**
+ * Register field into hook form with or without the actual DOM ref. You can invoke register anywhere in the component including at `useEffect`.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/register) • [Demo](https://codesandbox.io/s/react-hook-form-register-ts-ip2j3) • [Video](https://www.youtube.com/watch?v=JFIpCoajYkA)
+ *
+ * @param name - the path name to the form field value, name is required and unique
+ * @param options - register options include validation, disabled, unregister, value as and dependent validation
+ *
+ * @returns onInput, onBlur, name, ref, and native HTML validation attributes if browser validation is enabled.
+ *
+ * @example
+ * ```tsx
+ * // Register HTML native input
+ * <input {...register("input")} />
+ * <select {...register("select")} />
+ *
+ * // Register options
+ * <textarea {...register("textarea", { required: "This is required.", maxLength: 20 })} />
+ * <input type="number" {...register("name2", { valueAsNumber: true })} />
+ * <input {...register("name3", { deps: ["name2"] })} />
+ *
+ * // Register custom field at useEffect
+ * useEffect(() => {
+ *   register("name4");
+ *   register("name5", { value: "hiddenValue" });
+ * }, [register])
+ *
+ * // Register without ref
+ * const { onChange, onBlur, name } = register("name6")
+ * <input onChange={onChange} onBlur={onBlur} name={name} />
+ * ```
+ */
+export type UseFormRegister<TFieldValues extends FieldValues> = <
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+	name: TFieldName,
+	options?: RegisterOptions<TFieldValues, TFieldName>,
+) => UseFormRegisterReturn<TFieldName>;
+
+export type SetFocusOptions = Partial<{
+	shouldSelect: boolean;
+}>;
+
+/**
+ * Set focus on a registered field. You can start to invoke this method after all fields are mounted to the DOM.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/setfocus) • [Demo](https://codesandbox.io/s/setfocus-rolus)
+ *
+ * @param name - the path name to the form field value.
+ * @param options - input focus behavior options
+ *
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   setFocus("name");
+ * }, [setFocus])
+ * // shouldSelect allows to select input's content on focus
+ * <button onClick={() => setFocus("name", { shouldSelect: true })}>Focus</button>
+ * ```
+ */
+export type UseFormSetFocus<TFieldValues extends FieldValues> = <
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+	name: TFieldName,
+	options?: SetFocusOptions,
+) => void;
+
+type EitherOption<T> = {
+	[K in keyof T]: {
+		[P in K]: T[P];
+	} & Partial<Record<Exclude<keyof T, K>, never>>;
+}[keyof T];
+
+export type GetValuesConfig = EitherOption<{
+	dirtyFields: boolean;
+	touchedFields: boolean;
+}>;
+
+export type UseFormGetValues<TFieldValues extends FieldValues> = {
+	/**
+	 * Get the entire form values when no argument is supplied to this function.
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
+	 *
+	 * @returns form values
+	 *
+	 * @example
+	 * ```tsx
+	 * <button onClick={() => getValues()}>getValues</button>
+	 *
+	 * <input {...register("name", {
+	 *   validate: (value, formValues) => formValues.otherField === value;
+	 * })} />
+	 * ```
+	 */
+	(name?: undefined, config?: GetValuesConfig): TFieldValues;
+	/**
+	 * Get a single field value.
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
+	 *
+	 * @param name - the path name to the form field value.
+	 * @param config - return touched or dirty fields
+	 *
+	 * @returns the single field value
+	 *
+	 * @example
+	 * ```tsx
+	 * <button onClick={() => getValues("name")}>getValues</button>
+	 *
+	 * <input {...register("name", {
+	 *   validate: () => getValues('otherField') === "test";
+	 * })} />
+	 * ```
+	 */
+	<TFieldName extends FieldPath<TFieldValues>>(
+		name: TFieldName,
+		config?: GetValuesConfig,
+	): FieldPathValue<TFieldValues, TFieldName>;
+	/**
+	 * Get an array of field values.
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
+	 *
+	 * @param names - an array of field names
+	 * @param config - return touched or dirty fields
+	 *
+	 * @returns An array of field values
+	 *
+	 * @example
+	 * ```tsx
+	 * <button onClick={() => getValues(["name", "name1"])}>getValues</button>
+	 *
+	 * <input {...register("name", {
+	 *   validate: () => getValues(["fieldA", "fieldB"]).includes("test");
+	 * })} />
+	 * ```
+	 */
+	<TFieldNames extends FieldPath<TFieldValues>[]>(
+		names: readonly [...TFieldNames],
+		config?: GetValuesConfig,
+	): [...FieldPathValues<TFieldValues, TFieldNames>];
+};
+
+/**
+ * This method will return individual field states. It will be useful when you are trying to retrieve the nested value field state in a typesafe approach.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/getfieldstate) • [Demo](https://codesandbox.io/s/getfieldstate-jvekk)
+ *
+ * @param name - the path name to the form field value.
+ *
+ * @returns invalid, isDirty, isTouched, isValidating, and error object
+ *
+ * @example
+ * ```tsx
+ * // those formState has to be subscribed
+ * const { formState: { dirtyFields, errors, touchedFields } } = formState();
+ * getFieldState('name')
+ * // Get field state when form state is not subscribed yet
+ * getFieldState('name', formState)
+ *
+ * // It's ok to combine with useFormState
+ * const formState = useFormState();
+ * getFieldState('name')
+ * getFieldState('name', formState)
+ * ```
+ */
+export type UseFormGetFieldState<TFieldValues extends FieldValues> = <
+	TFieldName extends FieldPath<TFieldValues>,
+>(
+	name: TFieldName,
+	formState?: FormState<TFieldValues>,
+) => {
+	invalid: boolean;
+	isDirty: boolean;
+	isTouched: boolean;
+	isValidating: boolean;
+	error?: FieldError;
+};
+
+/**
+ * This method will allow you to subscribe to formState without component render
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/subscribe) • [Demo](https://codesandbox.io/s/subscribe)
+ *
+ * @param options - subscription options on which formState subscribe to
+ *
+ * @example
+ * ```tsx
+const { subscribe } = useForm()
+
+useEffect(() => {
+ subscribe({
+   formState: { isDirty: true },
+   callback: () => {}
+ })
+})
+ * ```
+ */
+export type UseFormSubscribe<TFieldValues extends FieldValues> = <
+	TFieldNames extends readonly FieldPath<TFieldValues>[],
+>(payload: {
+	name?: readonly [...TFieldNames] | TFieldNames[number];
+	formState?: Partial<ReadFormState>;
+	callback: (
+		data: Partial<FormState<TFieldValues>> & {
+			values: TFieldValues;
+			name?: InternalFieldName;
+			type?: EventType;
+		},
+	) => void;
+	exact?: boolean;
+}) => () => void;
+
+export type UseFormWatch<TFieldValues extends FieldValues> = {
+	/**
+	 * Watch and subscribe to the entire form update/change based on onChange and re-render at the useForm.
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
+	 *
+	 * @returns the entire form values
+	 *
+	 * @example
+	 * ```tsx
+	 * const formValues = watch();
+	 * ```
+	 */
+	(): TFieldValues;
+	/**
+	 * Watch and subscribe to an array of fields used outside of render.
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
+	 *
+	 * @param names - an array of field names
+	 * @param defaultValue - defaultValues for the entire form
+	 *
+	 * @returns an array of field values
+	 *
+	 * @example
+	 * ```tsx
+	 * const [name, name1] = watch(["name", "name1"]);
+	 * ```
+	 */
+	<TFieldNames extends readonly FieldPath<TFieldValues>[]>(
+		names: readonly [...TFieldNames],
+		defaultValue?: DeepPartial<TFieldValues>,
+	): FieldPathValues<TFieldValues, TFieldNames>;
+	/**
+	 * Watch and subscribe to a single field used outside of render.
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
+	 *
+	 * @param name - the path name to the form field value.
+	 * @param defaultValue - defaultValues for the entire form
+	 *
+	 * @returns the single field value
+	 *
+	 * @example
+	 * ```tsx
+	 * const name = watch("name");
+	 * ```
+	 */
+	<TFieldName extends FieldPath<TFieldValues>>(
+		name: TFieldName,
+		defaultValue?: FieldPathValue<TFieldValues, TFieldName>,
+	): FieldPathValue<TFieldValues, TFieldName>;
+	/**
+	 * Subscribe to field update/change without trigger re-render
+	 *
+	 * @remarks
+	 * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
+	 *
+	 * @param callback - call back function to subscribe all fields change and return unsubscribe function
+	 * @param defaultValues - defaultValues for the entire form
+	 *
+	 * @returns unsubscribe function
+	 *
+	 * @example
+	 * ```tsx
+	 * useEffect(() => {
+	 *   const { unsubscribe } = watch((value) => {
+	 *     console.log(value);
+	 *   });
+	 *   return () => unsubscribe();
+	 * }, [watch])
+	 * ```
+	 */
+	(callback: WatchObserver<TFieldValues>, defaultValues?: DeepPartial<TFieldValues>): Subscription;
+};
+
+/**
+ * Trigger field or form validation
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/trigger) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-xs7hl) • [Video](https://www.youtube.com/watch?v=-bcyJCDjksE)
+ *
+ * @param name - provide empty argument will trigger the entire form validation, an array of field names will validate an array of fields, and a single field name will only trigger that field's validation.
+ * @param options - should focus on the error field
+ *
+ * @returns validation result
+ *
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   trigger();
+ * }, [trigger])
+ *
+ * <button onClick={async () => {
+ *   const result = await trigger(); // result will be a boolean value
+ * }}>
+ *  trigger
+ *  </button>
+ * ```
+ */
+export type UseFormTrigger<TFieldValues extends FieldValues> = (
+	name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[],
+	options?: TriggerConfig,
+) => Promise<boolean>;
+
+/**
+ * Clear the entire form errors.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/clearerrors) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)
+ *
+ * @param name - the path name to the form field value.
+ *
+ * @example
+ * Clear all errors
+ * ```tsx
+ * clearErrors(); // clear the entire form error
+ * clearErrors(["name", "name1"]) // clear an array of fields' error
+ * clearErrors("name2"); // clear a single field error
+ * ```
+ */
+export type UseFormClearErrors<TFieldValues extends FieldValues> = (
+	name?:
+		| FieldPath<TFieldValues>
+		| FieldPath<TFieldValues>[]
+		| readonly FieldPath<TFieldValues>[]
+		| `root.${string}`
+		| 'root'
+		| 'form'
+		| `form.${string}`,
+) => void;
+
+/**
+ * Set a single field value, or a group of fields value.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
+ *
+ * @param name - the path name to the form field value.
+ * @param value - field value
+ * @param options - should validate or update form state
+ *
+ * @example
+ * ```tsx
+ * // Update a single field
+ * setValue('name', 'value', {
+ *   shouldValidate: true, // trigger validation
+ *   shouldTouch: true, // update touched fields form state
+ *   shouldDirty: true, // update dirty and dirty fields form state
+ * });
+ *
+ * // Update a group fields
+ * setValue('root', {
+ *   a: 'test', // setValue('root.a', 'data')
+ *   b: 'test1', // setValue('root.b', 'data')
+ * });
+ *
+ * // Update a nested object field
+ * setValue('select', { label: 'test', value: 'Test' });
+ * ```
+ */
+export type UseFormSetValue<TFieldValues extends FieldValues> = <
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+	name: TFieldName,
+	value: FieldPathValue<TFieldValues, TFieldName>,
+	options?: SetValueConfig,
+) => void;
+
+export type UseFormSetValues<TFieldValues extends FieldValues> = (
+	value: Partial<TFieldValues> | ResetAction<TFieldValues>,
+	options?: SetValueConfig,
+) => void;
+
+/**
+ * Set an error for the field. When set an error which is not associated to a field then manual `clearErrors` invoke is required.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/seterror) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu) • [Video](https://www.youtube.com/watch?v=raMqvE0YyIY)
+ *
+ * @param name - the path name to the form field value.
+ * @param error - an error object which contains type and optional message
+ * @param options - whether or not to focus on the field
+ *
+ * @example
+ * ```tsx
+ * // when the error is not associated with any fields, `clearError` will need to invoke to clear the error
+ * const onSubmit = () => setError("serverError", { type: "server", message: "Error occurred"})
+ *
+ * <button onClick={() => setError("name", { type: "min" })} />
+ *
+ * // focus on the input after setting the error
+ * <button onClick={() => setError("name", { type: "max" }, { shouldFocus: true })} />
+ * ```
+ */
+export type UseFormSetError<TFieldValues extends FieldValues> = (
+	name: FieldPath<TFieldValues> | `root.${string}` | 'root' | 'form' | `form.${string}`,
+	error: ErrorOption,
+	options?: {
+		shouldFocus: boolean;
+	},
+) => void;
+
+/**
+ * Unregister a field reference and remove its value.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/unregister) • [Demo](https://codesandbox.io/s/react-hook-form-unregister-4k2ey) • [Video](https://www.youtube.com/watch?v=TM99g_NW5Gk&feature=emb_imp_woyt)
+ *
+ * @param name - the path name to the form field value.
+ * @param options - keep form state options
+ *
+ * @example
+ * ```tsx
+ * register("name", { required: true })
+ *
+ * <button onClick={() => unregister("name")} />
+ * // there are various keep options to retain formState
+ * <button onClick={() => unregister("name", { keepErrors: true })} />
+ * ```
+ */
+export type UseFormUnregister<TFieldValues extends FieldValues> = (
+	name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[],
+	options?: Omit<
+		KeepStateOptions,
+		'keepIsSubmitted' | 'keepSubmitCount' | 'keepValues' | 'keepDefaultValues' | 'keepErrors'
+	> & { keepValue?: boolean; keepDefaultValue?: boolean; keepError?: boolean },
+) => void;
+
+/**
+ * Validate the entire form. Handle submit and error callback.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/handlesubmit) • [Demo](https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu) • [Video](https://www.youtube.com/watch?v=KzcPKB9SOEk)
+ *
+ * @param onValid - callback function invoked after form pass validation
+ * @param onInvalid - callback function invoked when form failed validation
+ *
+ * @returns callback - return callback function
+ *
+ * @example
+ * ```tsx
+ * const onSubmit = (data) => console.log(data);
+ * const onError = (error) => console.log(error);
+ *
+ * <form onSubmit={handleSubmit(onSubmit, onError)} />
+ * ```
+ */
+export type UseFormHandleSubmit<
+	TFieldValues extends FieldValues,
+	TTransformedValues = TFieldValues,
+> = (
+	onValid: SubmitHandler<TTransformedValues>,
+	onInvalid?: SubmitErrorHandler<TFieldValues>,
+) => (e?: BaseSyntheticEvent) => Promise<void>;
+
+/**
+ * Reset a field state and reference.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/resetfield) • [Demo](https://codesandbox.io/s/priceless-firefly-d0kuv) • [Video](https://www.youtube.com/watch?v=IdLFcNaEFEo)
+ *
+ * @param name - the path name to the form field value.
+ * @param options - keep form state options
+ *
+ * @example
+ * ```tsx
+ * <input {...register("firstName", { required: true })} />
+ * <button type="button" onClick={() => resetField("firstName"))}>Reset</button>
+ * ```
+ */
+export type UseFormResetField<TFieldValues extends FieldValues> = <
+	TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+	name: TFieldName,
+	options?: ResetFieldConfig<TFieldValues, TFieldName>,
+) => void;
+
+type ResetAction<TFieldValues> = (formValues: TFieldValues) => TFieldValues;
+
+/**
+ * Reset at the entire form state.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/reset) • [Demo](https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901) • [Video](https://www.youtube.com/watch?v=qmCLBjyPwVk)
+ *
+ * @param values - the entire form values to be reset
+ * @param keepStateOptions - keep form state options
+ *
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   // reset the entire form after component mount or form defaultValues is ready
+ *   reset({
+ *     fieldA: "test"
+ *     fieldB: "test"
+ *   });
+ * }, [reset])
+ *
+ * // reset by combine with existing form values
+ * reset({
+ *   ...getValues(),
+ *  fieldB: "test"
+ *});
+ *
+ * // reset and keep form state
+ * reset({
+ *   ...getValues(),
+ *}, {
+ *   keepErrors: true,
+ *   keepDirty: true
+ *});
+ * ```
+ */
+export type UseFormReset<TFieldValues extends FieldValues> = (
+	values?: DefaultValues<TFieldValues> | TFieldValues | ResetAction<TFieldValues>,
+	keepStateOptions?: KeepStateOptions,
+) => void;
+
+/**
+ * Reset the default values of the form and recompute `dirtyFields`/`isDirty` without changing user values.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useform/resetdefaultvalues)
+ *
+ * @param values - the new default values
+ * @param options - options to keep dirty or isValid state
+ *
+ * @example
+ * ```tsx
+ * // After a successful submission, update defaults to the submitted values
+ * // so that dirtyFields/isDirty reflect changes made after that point.
+ * const onSuccess = () => {
+ *   resetDefaultValues(submittedValues);
+ * };
+ * ```
+ */
+export type UseFormResetDefaultValues<TFieldValues extends FieldValues> = (
+	values: DefaultValues<TFieldValues> | TFieldValues,
+	options?: Partial<Pick<KeepStateOptions, 'keepDirty' | 'keepIsValid'>>,
+) => void;
+
+export type WatchInternal<TFieldValues> = (
+	fieldNames?: InternalFieldName | InternalFieldName[],
+	defaultValue?: DeepPartial<TFieldValues>,
+	isMounted?: boolean,
+	isGlobal?: boolean,
+) =>
+	| FieldPathValue<FieldValues, InternalFieldName>
+	| FieldPathValues<FieldValues, InternalFieldName[]>;
+
+export type GetIsDirty = <TName extends InternalFieldName, TData>(
+	name?: TName,
+	data?: TData,
+) => boolean;
+
+export type FormStateSubjectRef<TFieldValues extends FieldValues> = Subject<
+	Partial<FormState<TFieldValues>> & {
+		name?: InternalFieldName;
+		values?: TFieldValues;
+		type?: EventType;
+	}
+>;
+
+export type Subjects<TFieldValues extends FieldValues = FieldValues> = {
+	array: Subject<{
+		name?: InternalFieldName;
+		values?: FieldValues;
+	}>;
+	state: FormStateSubjectRef<TFieldValues>;
+};
+
+export type Names = {
+	mount: InternalNameSet;
+	unMount: InternalNameSet;
+	disabled: InternalNameSet;
+	array: InternalNameSet;
+	watch: InternalNameSet;
+	registerName: InternalNameSet;
+	focus?: InternalFieldName;
+	watchAll?: boolean;
+};
+
+export type BatchFieldArrayUpdate = <
+	T extends Function,
+	TFieldValues extends FieldValues,
+	TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
+>(
+	name: InternalFieldName,
+	updatedFieldArrayValues?: Partial<FieldArray<TFieldValues, TFieldArrayName>>[],
+	method?: T,
+	args?: Partial<{
+		argA: unknown;
+		argB: unknown;
+	}>,
+	shouldSetValue?: boolean,
+	shouldUpdateFieldsAndErrors?: boolean,
+) => void;
+
+export type FromSubscribe<TFieldValues extends FieldValues> = <
+	TFieldNames extends readonly FieldPath<TFieldValues>[],
+>(payload: {
+	name?: readonly [...TFieldNames] | TFieldNames[number];
+	formState?: Partial<ReadFormState>;
+	callback: (
+		data: Partial<FormState<TFieldValues>> & {
+			values: TFieldValues;
+			name?: InternalFieldName;
+		},
+	) => void;
+	exact?: boolean;
+	reRenderRoot?: boolean;
+}) => () => void;
+
+export type Control<
+	TFieldValues extends FieldValues = FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+> = {
+	_subjects: Subjects<TFieldValues>;
+	_removeUnmounted: Noop;
+	_names: Names;
+	_state: {
+		mount: boolean;
+		action: boolean;
+		watch: boolean;
+	};
+	_reset: UseFormReset<TFieldValues>;
+	_options: UseFormProps<TFieldValues, TContext, TTransformedValues>;
+	_getDirty: GetIsDirty;
+	_resetDefaultValues: Noop;
+	_formState: FormState<TFieldValues>;
+	_setValid: (shouldUpdateValid?: boolean) => void;
+	_fields: FieldRefs;
+	_formValues: FieldValues;
+	_proxyFormState: ReadFormState;
+	_defaultValues: Partial<DefaultValues<TFieldValues>>;
+	_getWatch: WatchInternal<TFieldValues>;
+	_setFieldArray: BatchFieldArrayUpdate;
+	_getFieldArray: <TFieldArrayValues>(name: InternalFieldName) => Partial<TFieldArrayValues>[];
+	_setErrors: (errors: FieldErrors<TFieldValues>) => void;
+	_setDisabledField: (props: { disabled?: boolean; name: FieldName<any> }) => void;
+	_runSchema: (names: InternalFieldName[]) => Promise<{ errors: FieldErrors }>;
+	_updateIsValidating: (names?: InternalFieldName[], isValidating?: boolean) => void;
+	_focusError: () => boolean | undefined;
+	_disableForm: (disabled?: boolean) => void;
+	_subscribe: FromSubscribe<TFieldValues>;
+	register: UseFormRegister<TFieldValues>;
+	handleSubmit: UseFormHandleSubmit<TFieldValues, TTransformedValues>;
+	unregister: UseFormUnregister<TFieldValues>;
+	getFieldState: UseFormGetFieldState<TFieldValues>;
+	setError: UseFormSetError<TFieldValues>;
+};
+
+export type WatchObserver<TFieldValues extends FieldValues> = (
+	value: DeepPartialSkipArrayKey<TFieldValues>,
+	info: {
+		name?: FieldPath<TFieldValues>;
+		type?: EventType;
+		values?: unknown;
+	},
+) => void;
+
+export type UseFormReturn<
+	TFieldValues extends FieldValues = FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+> = {
+	watch: UseFormWatch<TFieldValues>;
+	getValues: UseFormGetValues<TFieldValues>;
+	getFieldState: UseFormGetFieldState<TFieldValues>;
+	setError: UseFormSetError<TFieldValues>;
+	clearErrors: UseFormClearErrors<TFieldValues>;
+	setValue: UseFormSetValue<TFieldValues>;
+	setValues: UseFormSetValues<TFieldValues>;
+	trigger: UseFormTrigger<TFieldValues>;
+	formState: FormState<TFieldValues>;
+	resetField: UseFormResetField<TFieldValues>;
+	reset: UseFormReset<TFieldValues>;
+	resetDefaultValues: UseFormResetDefaultValues<TFieldValues>;
+	handleSubmit: UseFormHandleSubmit<TFieldValues, TTransformedValues>;
+	unregister: UseFormUnregister<TFieldValues>;
+	control: Control<TFieldValues, TContext, TTransformedValues>;
+	register: UseFormRegister<TFieldValues>;
+	setFocus: UseFormSetFocus<TFieldValues>;
+	subscribe: UseFormSubscribe<TFieldValues>;
+};
+
+export type UseFormStateProps<
+	TFieldValues extends FieldValues,
+	TTransformedValues = TFieldValues,
+> = Partial<{
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[];
+	exact?: boolean;
+}>;
+
+export type UseFormStateReturn<TFieldValues extends FieldValues> = FormState<TFieldValues>;
+
+export type FormProviderProps<
+	TFieldValues extends FieldValues = FieldValues,
+	TContext = any,
+	TTransformedValues = TFieldValues,
+> = {
+	children: unknown;
+} & UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+
+export type FormProps<TFieldValues extends FieldValues, TTransformedValues = TFieldValues> = Omit<
+	FormHTMLAttributes,
+	'onError' | 'onSubmit'
+> &
+	Partial<{
+		control: Control<TFieldValues, any, TTransformedValues>;
+		headers: Record<string, string>;
+		validateStatus: (status: number) => boolean;
+		onError: ({
+			response,
+			error,
+		}:
+			| {
+					response: Response;
+					error?: undefined;
+			  }
+			| {
+					response?: undefined;
+					error: unknown;
+			  }) => void;
+		onSuccess: ({ response }: { response: Response }) => void;
+		onSubmit: FormSubmitHandler<TTransformedValues>;
+		method: 'post' | 'put' | 'delete';
+		children: unknown;
+		render: (props: { submit: (e?: Event) => void }) => unknown;
+		encType:
+			| 'application/x-www-form-urlencoded'
+			| 'multipart/form-data'
+			| 'text/plain'
+			| 'application/json';
+	}>;