UNPKG

react-hook-form

Version:

Performant, flexible and extensible forms library for React Hooks

1 lines 174 kB
{"version":3,"file":"index.umd.js","sources":["../src/utils/isCheckBoxInput.ts","../src/utils/isDateObject.ts","../src/utils/isNullOrUndefined.ts","../src/utils/isObject.ts","../src/logic/getEventValue.ts","../src/logic/isNameInFieldArray.ts","../src/logic/getNodeParentName.ts","../src/utils/isPlainObject.ts","../src/utils/isWeb.ts","../src/utils/cloneObject.ts","../src/utils/compact.ts","../src/utils/isUndefined.ts","../src/utils/get.ts","../src/utils/isBoolean.ts","../src/utils/isKey.ts","../src/utils/stringToPath.ts","../src/utils/set.ts","../src/constants.ts","../src/useFormContext.tsx","../src/logic/getProxyFormState.ts","../src/utils/isEmptyObject.ts","../src/logic/shouldRenderFormState.ts","../src/utils/convertToArrayPayload.ts","../src/logic/shouldSubscribeByName.ts","../src/useSubscribe.ts","../src/useFormState.ts","../src/utils/isString.ts","../src/logic/generateWatchOutput.ts","../src/useWatch.ts","../src/useController.ts","../src/controller.tsx","../src/form.tsx","../src/logic/appendErrors.ts","../src/logic/generateId.ts","../src/logic/getFocusFieldName.ts","../src/logic/getValidationModes.ts","../src/logic/isWatched.ts","../src/logic/iterateFieldsByAction.ts","../src/logic/updateFieldArrayRootError.ts","../src/utils/isFileInput.ts","../src/utils/isFunction.ts","../src/utils/isHTMLElement.ts","../src/utils/isMessage.ts","../src/utils/isRadioInput.ts","../src/utils/isRegex.ts","../src/logic/getCheckboxValue.ts","../src/logic/getRadioValue.ts","../src/logic/getValidateError.ts","../src/logic/getValueAndMessage.ts","../src/logic/validateField.ts","../src/utils/append.ts","../src/utils/fillEmptyArray.ts","../src/utils/insert.ts","../src/utils/move.ts","../src/utils/prepend.ts","../src/utils/remove.ts","../src/utils/swap.ts","../src/utils/unset.ts","../src/utils/update.ts","../src/utils/createSubject.ts","../src/utils/isPrimitive.ts","../src/utils/deepEqual.ts","../src/utils/isMultipleSelect.ts","../src/utils/isRadioOrCheckbox.ts","../src/utils/live.ts","../src/utils/objectHasFunction.ts","../src/logic/getDirtyFields.ts","../src/logic/getFieldValueAs.ts","../src/logic/getFieldValue.ts","../src/logic/getResolverOptions.ts","../src/logic/getRuleValue.ts","../src/logic/hasValidation.ts","../src/logic/schemaErrorLookup.ts","../src/logic/skipValidation.ts","../src/logic/unsetEmptyArray.ts","../src/logic/createFormControl.ts","../src/useFieldArray.ts","../src/useForm.ts"],"sourcesContent":["import { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'checkbox';\n","export default (value: unknown): value is Date => value instanceof Date;\n","export default (value: unknown): value is null | undefined => value == null;\n","import isDateObject from './isDateObject';\nimport isNullOrUndefined from './isNullOrUndefined';\n\nexport const isObjectType = (value: unknown): value is object =>\n typeof value === 'object';\n\nexport default <T extends object>(value: unknown): value is T =>\n !isNullOrUndefined(value) &&\n !Array.isArray(value) &&\n isObjectType(value) &&\n !isDateObject(value);\n","import isCheckBoxInput from '../utils/isCheckBoxInput';\nimport isObject from '../utils/isObject';\n\ntype Event = { target: any };\n\nexport default (event: unknown) =>\n isObject(event) && (event as Event).target\n ? isCheckBoxInput((event as Event).target)\n ? (event as Event).target.checked\n : (event as Event).target.value\n : event;\n","import { InternalFieldName } from '../types';\n\nimport getNodeParentName from './getNodeParentName';\n\nexport default (names: Set<InternalFieldName>, name: InternalFieldName) =>\n names.has(getNodeParentName(name));\n","export default (name: string) =>\n name.substring(0, name.search(/\\.\\d+(\\.|$)/)) || name;\n","import isObject from './isObject';\n\nexport default (tempObject: object) => {\n const prototypeCopy =\n tempObject.constructor && tempObject.constructor.prototype;\n\n return (\n isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf')\n );\n};\n","export default typeof window !== 'undefined' &&\n typeof window.HTMLElement !== 'undefined' &&\n typeof document !== 'undefined';\n","import isObject from './isObject';\nimport isPlainObject from './isPlainObject';\nimport isWeb from './isWeb';\n\nexport default function cloneObject<T>(data: T): T {\n let copy: any;\n const isArray = Array.isArray(data);\n\n if (data instanceof Date) {\n copy = new Date(data);\n } else if (data instanceof Set) {\n copy = new Set(data);\n } else if (\n !(isWeb && (data instanceof Blob || data instanceof FileList)) &&\n (isArray || isObject(data))\n ) {\n copy = isArray ? [] : {};\n\n if (!isArray && !isPlainObject(data)) {\n copy = data;\n } else {\n for (const key in data) {\n if (data.hasOwnProperty(key)) {\n copy[key] = cloneObject(data[key]);\n }\n }\n }\n } else {\n return data;\n }\n\n return copy;\n}\n","export default <TValue>(value: TValue[]) =>\n Array.isArray(value) ? value.filter(Boolean) : [];\n","export default (val: unknown): val is undefined => val === undefined;\n","import compact from './compact';\nimport isNullOrUndefined from './isNullOrUndefined';\nimport isObject from './isObject';\nimport isUndefined from './isUndefined';\n\nexport default <T>(object: T, path?: string, defaultValue?: unknown): any => {\n if (!path || !isObject(object)) {\n return defaultValue;\n }\n\n const result = compact(path.split(/[,[\\].]+?/)).reduce(\n (result, key) =>\n isNullOrUndefined(result) ? result : result[key as keyof {}],\n object,\n );\n\n return isUndefined(result) || result === object\n ? isUndefined(object[path as keyof T])\n ? defaultValue\n : object[path as keyof T]\n : result;\n};\n","export default (value: unknown): value is boolean => typeof value === 'boolean';\n","export default (value: string) => /^\\w*$/.test(value);\n","import compact from './compact';\n\nexport default (input: string): string[] =>\n compact(input.replace(/[\"|']|\\]/g, '').split(/\\.|\\[/));\n","import { FieldValues } from '../types';\n\nimport isKey from './isKey';\nimport isObject from './isObject';\nimport stringToPath from './stringToPath';\n\nexport default (object: FieldValues, path: string, value?: unknown) => {\n let index = -1;\n const tempPath = isKey(path) ? [path] : stringToPath(path);\n const length = tempPath.length;\n const lastIndex = length - 1;\n\n while (++index < length) {\n const key = tempPath[index];\n let newValue = value;\n\n if (index !== lastIndex) {\n const objValue = object[key];\n newValue =\n isObject(objValue) || Array.isArray(objValue)\n ? objValue\n : !isNaN(+tempPath[index + 1])\n ? []\n : {};\n }\n\n if (key === '__proto__') {\n return;\n }\n\n object[key] = newValue;\n object = object[key];\n }\n return object;\n};\n","export const EVENTS = {\n BLUR: 'blur',\n FOCUS_OUT: 'focusout',\n CHANGE: 'change',\n} as const;\n\nexport const VALIDATION_MODE = {\n onBlur: 'onBlur',\n onChange: 'onChange',\n onSubmit: 'onSubmit',\n onTouched: 'onTouched',\n all: 'all',\n} as const;\n\nexport const INPUT_VALIDATION_RULES = {\n max: 'max',\n min: 'min',\n maxLength: 'maxLength',\n minLength: 'minLength',\n pattern: 'pattern',\n required: 'required',\n validate: 'validate',\n} as const;\n","import React from 'react';\n\nimport { FieldValues, FormProviderProps, UseFormReturn } from './types';\n\nconst HookFormContext = React.createContext<UseFormReturn | null>(null);\n\n/**\n * 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}.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)\n *\n * @returns return all useForm methods\n *\n * @example\n * ```tsx\n * function App() {\n * const methods = useForm();\n * const onSubmit = data => console.log(data);\n *\n * return (\n * <FormProvider {...methods} >\n * <form onSubmit={methods.handleSubmit(onSubmit)}>\n * <NestedInput />\n * <input type=\"submit\" />\n * </form>\n * </FormProvider>\n * );\n * }\n *\n * function NestedInput() {\n * const { register } = useFormContext(); // retrieve all hook methods\n * return <input {...register(\"test\")} />;\n * }\n * ```\n */\nexport const useFormContext = <\n TFieldValues extends FieldValues,\n TContext = any,\n TransformedValues extends FieldValues | undefined = undefined,\n>(): UseFormReturn<TFieldValues, TContext, TransformedValues> =>\n React.useContext(HookFormContext) as UseFormReturn<\n TFieldValues,\n TContext,\n TransformedValues\n >;\n\n/**\n * 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}.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)\n *\n * @param props - all useForm methods\n *\n * @example\n * ```tsx\n * function App() {\n * const methods = useForm();\n * const onSubmit = data => console.log(data);\n *\n * return (\n * <FormProvider {...methods} >\n * <form onSubmit={methods.handleSubmit(onSubmit)}>\n * <NestedInput />\n * <input type=\"submit\" />\n * </form>\n * </FormProvider>\n * );\n * }\n *\n * function NestedInput() {\n * const { register } = useFormContext(); // retrieve all hook methods\n * return <input {...register(\"test\")} />;\n * }\n * ```\n */\nexport const FormProvider = <\n TFieldValues extends FieldValues,\n TContext = any,\n TTransformedValues extends FieldValues | undefined = undefined,\n>(\n props: FormProviderProps<TFieldValues, TContext, TTransformedValues>,\n) => {\n const { children, ...data } = props;\n return (\n <HookFormContext.Provider value={data as unknown as UseFormReturn}>\n {children}\n </HookFormContext.Provider>\n );\n};\n","import { VALIDATION_MODE } from '../constants';\nimport { Control, FieldValues, FormState, ReadFormState } from '../types';\n\nexport default <TFieldValues extends FieldValues, TContext = any>(\n formState: FormState<TFieldValues>,\n control: Control<TFieldValues, TContext>,\n localProxyFormState?: ReadFormState,\n isRoot = true,\n) => {\n const result = {\n defaultValues: control._defaultValues,\n } as typeof formState;\n\n for (const key in formState) {\n Object.defineProperty(result, key, {\n get: () => {\n const _key = key as keyof FormState<TFieldValues> & keyof ReadFormState;\n\n if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {\n control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;\n }\n\n localProxyFormState && (localProxyFormState[_key] = true);\n return formState[_key];\n },\n });\n }\n\n return result;\n};\n","import { EmptyObject } from '../types';\n\nimport isObject from './isObject';\n\nexport default (value: unknown): value is EmptyObject =>\n isObject(value) && !Object.keys(value).length;\n","import { VALIDATION_MODE } from '../constants';\nimport {\n Control,\n FieldValues,\n FormState,\n InternalFieldName,\n ReadFormState,\n} from '../types';\nimport isEmptyObject from '../utils/isEmptyObject';\n\nexport default <T extends FieldValues, K extends ReadFormState>(\n formStateData: Partial<FormState<T>> & { name?: InternalFieldName },\n _proxyFormState: K,\n updateFormState: Control<T>['_updateFormState'],\n isRoot?: boolean,\n) => {\n updateFormState(formStateData);\n const { name, ...formState } = formStateData;\n\n return (\n isEmptyObject(formState) ||\n Object.keys(formState).length >= Object.keys(_proxyFormState).length ||\n Object.keys(formState).find(\n (key) =>\n _proxyFormState[key as keyof ReadFormState] ===\n (!isRoot || VALIDATION_MODE.all),\n )\n );\n};\n","export default <T>(value: T) => (Array.isArray(value) ? value : [value]);\n","import convertToArrayPayload from '../utils/convertToArrayPayload';\n\nexport default <T extends string | string[] | undefined>(\n name?: T,\n signalName?: string,\n exact?: boolean,\n) =>\n !name ||\n !signalName ||\n name === signalName ||\n convertToArrayPayload(name).some(\n (currentName) =>\n currentName &&\n (exact\n ? currentName === signalName\n : currentName.startsWith(signalName) ||\n signalName.startsWith(currentName)),\n );\n","import React from 'react';\n\nimport { Subject } from './utils/createSubject';\n\ntype Props<T> = {\n disabled?: boolean;\n subject: Subject<T>;\n next: (value: T) => void;\n};\n\nexport function useSubscribe<T>(props: Props<T>) {\n const _props = React.useRef(props);\n _props.current = props;\n\n React.useEffect(() => {\n const subscription =\n !props.disabled &&\n _props.current.subject &&\n _props.current.subject.subscribe({\n next: _props.current.next,\n });\n\n return () => {\n subscription && subscription.unsubscribe();\n };\n }, [props.disabled]);\n}\n","import React from 'react';\n\nimport getProxyFormState from './logic/getProxyFormState';\nimport shouldRenderFormState from './logic/shouldRenderFormState';\nimport shouldSubscribeByName from './logic/shouldSubscribeByName';\nimport {\n FieldValues,\n FormState,\n InternalFieldName,\n UseFormStateProps,\n UseFormStateReturn,\n} from './types';\nimport { useFormContext } from './useFormContext';\nimport { useSubscribe } from './useSubscribe';\n\n/**\n * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)\n *\n * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}\n *\n * @example\n * ```tsx\n * function App() {\n * const { register, handleSubmit, control } = useForm({\n * defaultValues: {\n * firstName: \"firstName\"\n * }});\n * const { dirtyFields } = useFormState({\n * control\n * });\n * const onSubmit = (data) => console.log(data);\n *\n * return (\n * <form onSubmit={handleSubmit(onSubmit)}>\n * <input {...register(\"firstName\")} placeholder=\"First Name\" />\n * {dirtyFields.firstName && <p>Field is dirty.</p>}\n * <input type=\"submit\" />\n * </form>\n * );\n * }\n * ```\n */\nfunction useFormState<TFieldValues extends FieldValues = FieldValues>(\n props?: UseFormStateProps<TFieldValues>,\n): UseFormStateReturn<TFieldValues> {\n const methods = useFormContext<TFieldValues>();\n const { control = methods.control, disabled, name, exact } = props || {};\n const [formState, updateFormState] = React.useState(control._formState);\n const _mounted = React.useRef(true);\n const _localProxyFormState = React.useRef({\n isDirty: false,\n isLoading: false,\n dirtyFields: false,\n touchedFields: false,\n validatingFields: false,\n isValidating: false,\n isValid: false,\n errors: false,\n });\n const _name = React.useRef(name);\n\n _name.current = name;\n\n useSubscribe({\n disabled,\n next: (\n value: Partial<FormState<TFieldValues>> & { name?: InternalFieldName },\n ) =>\n _mounted.current &&\n shouldSubscribeByName(\n _name.current as InternalFieldName,\n value.name,\n exact,\n ) &&\n shouldRenderFormState(\n value,\n _localProxyFormState.current,\n control._updateFormState,\n ) &&\n updateFormState({\n ...control._formState,\n ...value,\n }),\n subject: control._subjects.state,\n });\n\n React.useEffect(() => {\n _mounted.current = true;\n _localProxyFormState.current.isValid && control._updateValid(true);\n\n return () => {\n _mounted.current = false;\n };\n }, [control]);\n\n return getProxyFormState(\n formState,\n control,\n _localProxyFormState.current,\n false,\n );\n}\n\nexport { useFormState };\n","export default (value: unknown): value is string => typeof value === 'string';\n","import { DeepPartial, FieldValues, Names } from '../types';\nimport get from '../utils/get';\nimport isString from '../utils/isString';\n\nexport default <T>(\n names: string | string[] | undefined,\n _names: Names,\n formValues?: FieldValues,\n isGlobal?: boolean,\n defaultValue?: DeepPartial<T> | unknown,\n) => {\n if (isString(names)) {\n isGlobal && _names.watch.add(names);\n return get(formValues, names, defaultValue);\n }\n\n if (Array.isArray(names)) {\n return names.map(\n (fieldName) => (\n isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)\n ),\n );\n }\n\n isGlobal && (_names.watchAll = true);\n\n return formValues;\n};\n","import React from 'react';\n\nimport generateWatchOutput from './logic/generateWatchOutput';\nimport shouldSubscribeByName from './logic/shouldSubscribeByName';\nimport cloneObject from './utils/cloneObject';\nimport {\n Control,\n DeepPartialSkipArrayKey,\n FieldPath,\n FieldPathValue,\n FieldPathValues,\n FieldValues,\n InternalFieldName,\n UseWatchProps,\n} from './types';\nimport { useFormContext } from './useFormContext';\nimport { useSubscribe } from './useSubscribe';\n\n/**\n * Subscribe to the entire form values change and re-render at the hook level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @param props - defaultValue, disable subscription and match exact name.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * defaultValue: {\n * name: \"data\"\n * },\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n>(props: {\n defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;\n control?: Control<TFieldValues>;\n disabled?: boolean;\n exact?: boolean;\n}): DeepPartialSkipArrayKey<TFieldValues>;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @param props - defaultValue, disable subscription and match exact name.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * name: \"fieldA\",\n * defaultValue: \"default value\",\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: {\n name: TFieldName;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n control?: Control<TFieldValues>;\n disabled?: boolean;\n exact?: boolean;\n}): FieldPathValue<TFieldValues, TFieldName>;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @param props - defaultValue, disable subscription and match exact name.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * name: [\"fieldA\", \"fieldB\"],\n * defaultValue: {\n * fieldA: \"data\",\n * fieldB: \"data\"\n * },\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],\n>(props: {\n name: readonly [...TFieldNames];\n defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;\n control?: Control<TFieldValues>;\n disabled?: boolean;\n exact?: boolean;\n}): FieldPathValues<TFieldValues, TFieldNames>;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @example\n * ```tsx\n * // can skip passing down the control into useWatch if the form is wrapped with the FormProvider\n * const values = useWatch()\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n>(): DeepPartialSkipArrayKey<TFieldValues>;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * name: \"fieldName\"\n * control,\n * })\n * ```\n */\nexport function useWatch<TFieldValues extends FieldValues>(\n props?: UseWatchProps<TFieldValues>,\n) {\n const methods = useFormContext();\n const {\n control = methods.control,\n name,\n defaultValue,\n disabled,\n exact,\n } = props || {};\n const _name = React.useRef(name);\n\n _name.current = name;\n\n useSubscribe({\n disabled,\n subject: control._subjects.values,\n next: (formState: { name?: InternalFieldName; values?: FieldValues }) => {\n if (\n shouldSubscribeByName(\n _name.current as InternalFieldName,\n formState.name,\n exact,\n )\n ) {\n updateValue(\n cloneObject(\n generateWatchOutput(\n _name.current as InternalFieldName | InternalFieldName[],\n control._names,\n formState.values || control._formValues,\n false,\n defaultValue,\n ),\n ),\n );\n }\n },\n });\n\n const [value, updateValue] = React.useState(\n control._getWatch(\n name as InternalFieldName,\n defaultValue as DeepPartialSkipArrayKey<TFieldValues>,\n ),\n );\n\n React.useEffect(() => control._removeUnmounted());\n\n return value;\n}\n","import React from 'react';\n\nimport getEventValue from './logic/getEventValue';\nimport isNameInFieldArray from './logic/isNameInFieldArray';\nimport cloneObject from './utils/cloneObject';\nimport get from './utils/get';\nimport isBoolean from './utils/isBoolean';\nimport isUndefined from './utils/isUndefined';\nimport set from './utils/set';\nimport { EVENTS } from './constants';\nimport {\n ControllerFieldState,\n Field,\n FieldPath,\n FieldPathValue,\n FieldValues,\n InternalFieldName,\n UseControllerProps,\n UseControllerReturn,\n} from './types';\nimport { useFormContext } from './useFormContext';\nimport { useFormState } from './useFormState';\nimport { useWatch } from './useWatch';\n\n/**\n * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns field properties, field and form state. {@link UseControllerReturn}\n *\n * @example\n * ```tsx\n * function Input(props) {\n * const { field, fieldState, formState } = useController(props);\n * return (\n * <div>\n * <input {...field} placeholder={props.name} />\n * <p>{fieldState.isTouched && \"Touched\"}</p>\n * <p>{formState.isSubmitted ? \"submitted\" : \"\"}</p>\n * </div>\n * );\n * }\n * ```\n */\nexport function useController<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(\n props: UseControllerProps<TFieldValues, TName>,\n): UseControllerReturn<TFieldValues, TName> {\n const methods = useFormContext<TFieldValues>();\n const { name, disabled, control = methods.control, shouldUnregister } = props;\n const isArrayField = isNameInFieldArray(control._names.array, name);\n const value = useWatch({\n control,\n name,\n defaultValue: get(\n control._formValues,\n name,\n get(control._defaultValues, name, props.defaultValue),\n ),\n exact: true,\n }) as FieldPathValue<TFieldValues, TName>;\n const formState = useFormState({\n control,\n name,\n });\n\n const _registerProps = React.useRef(\n control.register(name, {\n ...props.rules,\n value,\n ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),\n }),\n );\n\n React.useEffect(() => {\n const _shouldUnregisterField =\n control._options.shouldUnregister || shouldUnregister;\n\n const updateMounted = (name: InternalFieldName, value: boolean) => {\n const field: Field = get(control._fields, name);\n\n if (field && field._f) {\n field._f.mount = value;\n }\n };\n\n updateMounted(name, true);\n\n if (_shouldUnregisterField) {\n const value = cloneObject(get(control._options.defaultValues, name));\n set(control._defaultValues, name, value);\n if (isUndefined(get(control._formValues, name))) {\n set(control._formValues, name, value);\n }\n }\n\n return () => {\n (\n isArrayField\n ? _shouldUnregisterField && !control._state.action\n : _shouldUnregisterField\n )\n ? control.unregister(name)\n : updateMounted(name, false);\n };\n }, [name, control, isArrayField, shouldUnregister]);\n\n React.useEffect(() => {\n if (get(control._fields, name)) {\n control._updateDisabledField({\n disabled,\n fields: control._fields,\n name,\n value: get(control._fields, name)._f.value,\n });\n }\n }, [disabled, name, control]);\n\n return {\n field: {\n name,\n value,\n ...(isBoolean(disabled) || formState.disabled\n ? { disabled: formState.disabled || disabled }\n : {}),\n onChange: React.useCallback(\n (event) =>\n _registerProps.current.onChange({\n target: {\n value: getEventValue(event),\n name: name as InternalFieldName,\n },\n type: EVENTS.CHANGE,\n }),\n [name],\n ),\n onBlur: React.useCallback(\n () =>\n _registerProps.current.onBlur({\n target: {\n value: get(control._formValues, name),\n name: name as InternalFieldName,\n },\n type: EVENTS.BLUR,\n }),\n [name, control],\n ),\n ref: (elm) => {\n const field = get(control._fields, name);\n\n if (field && elm) {\n field._f.ref = {\n focus: () => elm.focus(),\n select: () => elm.select(),\n setCustomValidity: (message: string) =>\n elm.setCustomValidity(message),\n reportValidity: () => elm.reportValidity(),\n };\n }\n },\n },\n formState,\n fieldState: Object.defineProperties(\n {},\n {\n invalid: {\n enumerable: true,\n get: () => !!get(formState.errors, name),\n },\n isDirty: {\n enumerable: true,\n get: () => !!get(formState.dirtyFields, name),\n },\n isTouched: {\n enumerable: true,\n get: () => !!get(formState.touchedFields, name),\n },\n isValidating: {\n enumerable: true,\n get: () => !!get(formState.validatingFields, name),\n },\n error: {\n enumerable: true,\n get: () => get(formState.errors, name),\n },\n },\n ) as ControllerFieldState,\n };\n}\n","import { ControllerProps, FieldPath, FieldValues } from './types';\nimport { useController } from './useController';\n\n/**\n * Component based on `useController` hook to work with controlled component.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns provide field handler functions, field and form state.\n *\n * @example\n * ```tsx\n * function App() {\n * const { control } = useForm<FormValues>({\n * defaultValues: {\n * test: \"\"\n * }\n * });\n *\n * return (\n * <form>\n * <Controller\n * control={control}\n * name=\"test\"\n * render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (\n * <>\n * <input\n * onChange={onChange} // send value to hook form\n * onBlur={onBlur} // notify when input is touched\n * value={value} // return updated value\n * ref={ref} // set ref for focus management\n * />\n * <p>{formState.isSubmitted ? \"submitted\" : \"\"}</p>\n * <p>{fieldState.isTouched ? \"touched\" : \"\"}</p>\n * </>\n * )}\n * />\n * </form>\n * );\n * }\n * ```\n */\nconst Controller = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(\n props: ControllerProps<TFieldValues, TName>,\n) => props.render(useController<TFieldValues, TName>(props));\n\nexport { Controller };\n","import React from 'react';\n\nimport get from './utils/get';\nimport { FieldValues, FormProps } from './types';\nimport { useFormContext } from './useFormContext';\n\nconst POST_REQUEST = 'post';\n\n/**\n * Form component to manage submission.\n *\n * @param props - to setup submission detail. {@link FormProps}\n *\n * @returns form component or headless render prop.\n *\n * @example\n * ```tsx\n * function App() {\n * const { control, formState: { errors } } = useForm();\n *\n * return (\n * <Form action=\"/api\" control={control}>\n * <input {...register(\"name\")} />\n * <p>{errors?.root?.server && 'Server error'}</p>\n * <button>Submit</button>\n * </Form>\n * );\n * }\n * ```\n */\nfunction Form<\n T extends FieldValues,\n U extends FieldValues | undefined = undefined,\n>(props: FormProps<T, U>) {\n const methods = useFormContext<T>();\n const [mounted, setMounted] = React.useState(false);\n const {\n control = methods.control,\n onSubmit,\n children,\n action,\n method = POST_REQUEST,\n headers,\n encType,\n onError,\n render,\n onSuccess,\n validateStatus,\n ...rest\n } = props;\n\n const submit = async (event?: React.BaseSyntheticEvent) => {\n let hasError = false;\n let type = '';\n\n await control.handleSubmit(async (data) => {\n const formData = new FormData();\n let formDataJson = '';\n\n try {\n formDataJson = JSON.stringify(data);\n } catch {}\n\n for (const name of control._names.mount) {\n formData.append(name, get(data, name));\n }\n\n if (onSubmit) {\n await onSubmit({\n data,\n event,\n method,\n formData,\n formDataJson,\n });\n }\n\n if (action) {\n try {\n const shouldStringifySubmissionData = [\n headers && headers['Content-Type'],\n encType,\n ].some((value) => value && value.includes('json'));\n\n const response = await fetch(action, {\n method,\n headers: {\n ...headers,\n ...(encType ? { 'Content-Type': encType } : {}),\n },\n body: shouldStringifySubmissionData ? formDataJson : formData,\n });\n\n if (\n response &&\n (validateStatus\n ? !validateStatus(response.status)\n : response.status < 200 || response.status >= 300)\n ) {\n hasError = true;\n onError && onError({ response });\n type = String(response.status);\n } else {\n onSuccess && onSuccess({ response });\n }\n } catch (error: unknown) {\n hasError = true;\n onError && onError({ error });\n }\n }\n })(event);\n\n if (hasError && props.control) {\n props.control._subjects.state.next({\n isSubmitSuccessful: false,\n });\n props.control.setError('root.server', {\n type,\n });\n }\n };\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n return render ? (\n <>\n {render({\n submit,\n })}\n </>\n ) : (\n <form\n noValidate={mounted}\n action={action}\n method={method}\n encType={encType}\n onSubmit={submit}\n {...rest}\n >\n {children}\n </form>\n );\n}\n\nexport { Form };\n","import {\n InternalFieldErrors,\n InternalFieldName,\n ValidateResult,\n} from '../types';\n\nexport default (\n name: InternalFieldName,\n validateAllFieldCriteria: boolean,\n errors: InternalFieldErrors,\n type: string,\n message: ValidateResult,\n) =>\n validateAllFieldCriteria\n ? {\n ...errors[name],\n types: {\n ...(errors[name] && errors[name]!.types ? errors[name]!.types : {}),\n [type]: message || true,\n },\n }\n : {};\n","export default () => {\n const d =\n typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;\n\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n const r = (Math.random() * 16 + d) % 16 | 0;\n\n return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);\n });\n};\n","import { FieldArrayMethodProps, InternalFieldName } from '../types';\nimport isUndefined from '../utils/isUndefined';\n\nexport default (\n name: InternalFieldName,\n index: number,\n options: FieldArrayMethodProps = {},\n): string =>\n options.shouldFocus || isUndefined(options.shouldFocus)\n ? options.focusName ||\n `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`\n : '';\n","import { VALIDATION_MODE } from '../constants';\nimport { Mode, ValidationModeFlags } from '../types';\n\nexport default (mode?: Mode): ValidationModeFlags => ({\n isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,\n isOnBlur: mode === VALIDATION_MODE.onBlur,\n isOnChange: mode === VALIDATION_MODE.onChange,\n isOnAll: mode === VALIDATION_MODE.all,\n isOnTouch: mode === VALIDATION_MODE.onTouched,\n});\n","import { InternalFieldName, Names } from '../types';\n\nexport default (\n name: InternalFieldName,\n _names: Names,\n isBlurEvent?: boolean,\n) =>\n !isBlurEvent &&\n (_names.watchAll ||\n _names.watch.has(name) ||\n [..._names.watch].some(\n (watchName) =>\n name.startsWith(watchName) &&\n /^\\.\\w+/.test(name.slice(watchName.length)),\n ));\n","import { FieldRefs, InternalFieldName, Ref } from '../types';\nimport { get } from '../utils';\nimport isObject from '../utils/isObject';\n\nconst iterateFieldsByAction = (\n fields: FieldRefs,\n action: (ref: Ref, name: string) => 1 | undefined | void,\n fieldsNames?: Set<InternalFieldName> | InternalFieldName[] | 0,\n abortEarly?: boolean,\n) => {\n for (const key of fieldsNames || Object.keys(fields)) {\n const field = get(fields, key);\n\n if (field) {\n const { _f, ...currentField } = field;\n\n if (_f) {\n if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {\n break;\n } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {\n break;\n } else {\n iterateFieldsByAction(currentField, action);\n }\n } else if (isObject(currentField)) {\n iterateFieldsByAction(currentField, action);\n }\n }\n }\n};\n\nexport default iterateFieldsByAction;\n","import {\n FieldError,\n FieldErrors,\n FieldValues,\n InternalFieldName,\n} from '../types';\nimport convertToArrayPayload from '../utils/convertToArrayPayload';\nimport get from '../utils/get';\nimport set from '../utils/set';\n\nexport default <T extends FieldValues = FieldValues>(\n errors: FieldErrors<T>,\n error: Partial<Record<string, FieldError>>,\n name: InternalFieldName,\n): FieldErrors<T> => {\n const fieldArrayErrors = convertToArrayPayload(get(errors, name));\n set(fieldArrayErrors, 'root', error[name]);\n set(errors, name, fieldArrayErrors);\n return errors;\n};\n","import { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'file';\n","export default (value: unknown): value is Function =>\n typeof value === 'function';\n","import isWeb from './isWeb';\n\nexport default (value: unknown): value is HTMLElement => {\n if (!isWeb) {\n return false;\n }\n\n const owner = value ? ((value as HTMLElement).ownerDocument as Document) : 0;\n return (\n value instanceof\n (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement)\n );\n};\n","import { Message } from '../types';\nimport isString from '../utils/isString';\n\nexport default (value: unknown): value is Message => isString(value);\n","import { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'radio';\n","export default (value: unknown): value is RegExp => value instanceof RegExp;\n","import isUndefined from '../utils/isUndefined';\n\ntype CheckboxFieldResult = {\n isValid: boolean;\n value: string | string[] | boolean | undefined;\n};\n\nconst defaultResult: CheckboxFieldResult = {\n value: false,\n isValid: false,\n};\n\nconst validResult = { value: true, isValid: true };\n\nexport default (options?: HTMLInputElement[]): CheckboxFieldResult => {\n if (Array.isArray(options)) {\n if (options.length > 1) {\n const values = options\n .filter((option) => option && option.checked && !option.disabled)\n .map((option) => option.value);\n return { value: values, isValid: !!values.length };\n }\n\n return options[0].checked && !options[0].disabled\n ? // @ts-expect-error expected to work in the browser\n options[0].attributes && !isUndefined(options[0].attributes.value)\n ? isUndefined(options[0].value) || options[0].value === ''\n ? validResult\n : { value: options[0].value, isValid: true }\n : validResult\n : defaultResult;\n }\n\n return defaultResult;\n};\n","type RadioFieldResult = {\n isValid: boolean;\n value: number | string | null;\n};\n\nconst defaultReturn: RadioFieldResult = {\n isValid: false,\n value: null,\n};\n\nexport default (options?: HTMLInputElement[]): RadioFieldResult =>\n Array.isArray(options)\n ? options.reduce(\n (previous, option): RadioFieldResult =>\n option && option.checked && !option.disabled\n ? {\n isValid: true,\n value: option.value,\n }\n : previous,\n defaultReturn,\n )\n : defaultReturn;\n","import { FieldError, Ref, ValidateResult } from '../types';\nimport isBoolean from '../utils/isBoolean';\nimport isMessage from '../utils/isMessage';\n\nexport default function getValidateError(\n result: ValidateResult,\n ref: Ref,\n type = 'validate',\n): FieldError | void {\n if (\n isMessage(result) ||\n (Array.isArray(result) && result.every(isMessage)) ||\n (isBoolean(result) && !result)\n ) {\n return {\n type,\n message: isMessage(result) ? result : '',\n ref,\n };\n }\n}\n","import { ValidationRule } from '../types';\nimport isObject from '../utils/isObject';\nimport isRegex from '../utils/isRegex';\n\nexport default (validationData?: ValidationRule) =>\n isObject(validationData) && !isRegex(validationData)\n ? validationData\n : {\n value: validationData,\n message: '',\n };\n","import { INPUT_VALIDATION_RULES } from '../constants';\nimport {\n Field,\n FieldError,\n FieldValues,\n InternalFieldErrors,\n MaxType,\n Message,\n MinType,\n NativeFieldValue,\n} from '../types';\nimport get from '../utils/get';\nimport isBoolean from '../utils/isBoolean';\nimport isCheckBoxInput from '../utils/isCheckBoxInput';\nimport isEmptyObject from '../utils/isEmptyObject';\nimport isFileInput from '../utils/isFileInput';\nimport isFunction from '../utils/isFunction';\nimport isHTMLElement from '../utils/isHTMLElement';\nimport isMessage from '../utils/isMessage';\nimport isNullOrUndefined from '../utils/isNullOrUndefined';\nimport isObject from '../utils/isObject';\nimport isRadioInput from '../utils/isRadioInput';\nimport isRegex from '../utils/isRegex';\nimport isString from '../utils/isString';\nimport isUndefined from '../utils/isUndefined';\n\nimport appendErrors from './appendErrors';\nimport getCheckboxValue from './getCheckboxValue';\nimport getRadioValue from './getRadioValue';\nimport getValidateError from './getValidateError';\nimport getValueAndMessage from './getValueAndMessage';\n\nexport default async <T extends FieldValues>(\n field: Field,\n formValues: T,\n validateAllFieldCriteria: boolean,\n shouldUseNativeValidation?: boolean,\n isFieldArray?: boolean,\n): Promise<InternalFieldErrors> => {\n const {\n ref,\n refs,\n required,\n maxLength,\n minLength,\n min,\n max,\n pattern,\n validate,\n name,\n valueAsNumber,\n mount,\n disabled,\n } = field._f;\n const inputValue: NativeFieldValue = get(formValues, name);\n if (!mount || disabled) {\n return {};\n }\n const inputRef: HTMLInputElement = refs ? refs[0] : (ref as HTMLInputElement);\n const setCustomValidity = (message?: string | boolean) => {\n if (shouldUseNativeValidation && inputRef.reportValidity) {\n inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');\n inputRef.reportValidity();\n }\n };\n const error: InternalFieldErrors = {};\n const isRadio = isRadioInput(ref);\n const isCheckBox = isCheckBoxInput(ref);\n const isRadioOrCheckbox = isRadio || isCheckBox;\n const isEmpty =\n ((valueAsNumber || isFileInput(ref)) &&\n isUndefined(ref.value) &&\n isUndefined(inputValue)) ||\n (isHTMLElement(ref) && ref.value === '') ||\n inputValue === '' ||\n (Array.isArray(inputValue) && !inputValue.length);\n const appendErrorsCurry = appendErrors.bind(\n null,\n name,\n validateAllFieldCriteria,\n error,\n );\n const getMinMaxMessage = (\n exceedMax: boolean,\n maxLengthMessage: Message,\n minLengthMessage: Message,\n maxType: MaxType = INPUT_VALIDATION_RULES.maxLength,\n minType: MinType = INPUT_VALIDATION_RULES.minLength,\n ) => {\n const message = exceedMax ? maxLengthMessage : minLengthMessage;\n error[name] = {\n type: exceedMax ? maxType : minType,\n message,\n ref,\n ...appendErrorsCurry(exceedMax ? maxType : minType, message),\n };\n };\n\n if (\n isFieldArray\n ? !Array.isArray(inputValue) || !inputValue.length\n : required &&\n ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||\n (isBoolean(inputValue) && !inputValue) ||\n (isCheckBox && !getCheckboxValue(refs).isValid) ||\n (isRadio && !getRadioValue(refs).isValid))\n ) {\n const { value, message } = isMessage(required)\n ? { value: !!required, message: required }\n : getValueAndMessage(required);\n\n if (value) {\n error[name] = {\n type: INPUT_VALIDATION_RULES.required,\n message,\n ref: inputRef,\n ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),\n };\n if (!validateAllFieldCriteria) {\n setCustomValidity(message);\n return error;\n }\n }\n }\n\n if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {\n let exceedMax;\n let exceedMin;\n const maxOutput = getValueAndMessage(max);\n const minOutput = getValueAndMessage(min);\n\n if (!isNullOrUndefined(inputValue) && !isNaN(inputValue as number)) {\n const valueNumber =\n (ref as HTMLInputElement).valueAsNumber ||\n (inputValue ? +inputValue : inputValue);\n if (!isNullOrUndefined(maxOutput.value)) {\n exceedMax = valueNumber > maxOutput.value;\n }\n if (!isNullOrUndefined(minOutput.value)) {\n exceedMin = valueNumber < minOutput.value;\n }\n } else {\n const valueDate =\n (ref as HTMLInputElement).valueAsDate || new Date(inputValue as string);\n const convertTimeToDate = (time: unknown) =>\n new Date(new Date().toDateString() + ' ' + time);\n const isTime = ref.type == 'time';\n const isWeek = ref.type == 'week';\n\n if (isString(maxOutput.value) && inputValue) {\n exceedMax = isTime\n ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)\n : isWeek\n ? inputValue > maxOutput.value\n : valueDate > new Date(maxOutput.value);\n }\n\n if (isString(minOutput.value) && inputValue) {\n exceedMin = isTime\n ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)\n : isWeek\n ? inputValue < minOutput.value\n : valueDate < new Date(minOutput.value);\n }\n }\n\n if (exceedMax || exceedMin) {\n getMinMaxMessage(\n !!exceedMax,\n maxOutput.message,\n minOutput.message,\n INPUT_VALIDATION_RULES.max,\n INPUT_VALIDATION_RULES.min,\n );\n if (!validateAllFieldCriteria) {\n setCustomValidity(error[name]!.message);\n return error;\n }\n }\n }\n\n if (\n (maxLength || minLength) &&\n !isEmpty &&\n (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))\n ) {\n const maxLengthOutput = getValueAndMessage(maxLength);\n const minLengthOutput = getValueAndMessage(minLength);\n const exceedMax =\n !isNullOrUndefined(maxLengthOutput.value) &&\n inputValue.length > +maxLengthOutput.value;\n const exceedMin =\n !isNullOrUndefined(minLengthOutput.value) &&\n inputValue.length < +minLengthOutput.value;\n\n if (exceedMax || exceedMin) {\n getMinMaxMessage(\n exceedMax,\n maxLengthOutput.message,\n minLengthOutput.message,\n );\n if (!validateAllFieldCriteria) {\n setCustomValidity(error[name]!.message);\n return error;\n }\n }\n }\n\n if (pattern && !isEmpty && isString(inputValue)) {\n const { value: patternValue, message } = getValueAndMessage(pattern);\n\n if (isRegex(patternValue) && !inputValue.match(patternValue)) {\n error[name] = {\n type: INPUT_VALIDATION_RULES.pattern,\n message,\n ref,\n ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),\n };\n if (!validateAllFieldCriteria) {\n setCustomValidity(message);\n return error;\n }\n }\n }\n\n if (validate) {\n if (isFunction(validate)) {\n const result = await validate(inputValue, formValues);\n const validateError = getValidateError(result, inputRef);\n\n if (validateError) {\n error[name] = {\n ...validateError,\n ...appendErrorsCurry(\n INPUT_VALIDATION_RULES.validate,\n validateError.message,\n ),\n };\n if (!validateAllFieldCriteria) {\n setCustomValidity(validateError.message);\n return error;\n }\n }\n } else if (isObject(validate)) {\n let validationResult = {} as FieldError;\n\n for (const key in validate) {\n if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {\n break;\n }\n\n const validateError = getValidateError(\n await validate[key](inputValue, formValues),\n inputRef,\n key,\n );\n\n if (validateError) {\n validationResult = {\n ...validateError,\n ...appendErrorsCurry(key, validateError.message),\n };\n\n setCustomValidity(validateError.message);\n\n if (validateAllFieldCriteria) {\n error[name] = validationResult;\n }\n }\n }\n\n if (!isEmptyObject(validationResult)) {\n error[name] = {\n ref: inputRef,\n ...validationResult,\n };\n if (!validateAllFieldCriteria) {\n return error;\n }\n }\n }\n }\n\n setCustomValidity(true);\n return error;\n};\n","import convertToArrayPayload from './convertToArrayPayload';\n\nexport default <T>(data: T[], value: T | T[]): T[] => [\n ...data,\n ...convertToArrayPayload(value),\n];\n","export default <T>(value: T | T[]): undefined[] | undefined =>\n Array.isArray(value) ? value.map(() => undefined) : undefined;\n","import convertToArrayPayload from './convertToArrayPayload';\n\nexport default function insert<T>(data: T[], index: number): (T | undefined)