react-hook-form
Version:
Performant, flexible and extensible forms library for React Hooks
1 lines • 272 kB
Source Map (JSON)
{"version":3,"file":"index.esm.mjs","sources":["../src/utils/isCheckBoxInput.ts","../src/utils/isFileInput.ts","../src/utils/isDateObject.ts","../src/utils/isNullOrUndefined.ts","../src/utils/isObject.ts","../src/logic/getEventValue.ts","../src/logic/isNameInFieldArray.ts","../src/utils/isPlainObject.ts","../src/utils/isWeb.ts","../src/utils/cloneObject.ts","../src/constants.ts","../src/utils/isKey.ts","../src/utils/isUndefined.ts","../src/utils/stringToPath.ts","../src/utils/get.ts","../src/utils/isBoolean.ts","../src/utils/isFunction.ts","../src/utils/set.ts","../src/useFormControlContext.ts","../src/logic/getProxyFormState.ts","../src/useIsomorphicLayoutEffect.ts","../src/useFormState.ts","../src/utils/isString.ts","../src/logic/generateWatchOutput.ts","../src/utils/isPrimitive.ts","../src/utils/deepEqual.ts","../src/useWatch.ts","../src/useController.ts","../src/controller.tsx","../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/isEmptyObject.ts","../src/utils/isHTMLElement.ts","../src/utils/isRadioInput.ts","../src/utils/isRegex.ts","../src/logic/appendErrors.ts","../src/logic/getCheckboxValue.ts","../src/logic/getRadioValue.ts","../src/logic/getValidateError.ts","../src/logic/getValueAndMessage.ts","../src/logic/validateField.ts","../src/utils/convertToArrayPayload.ts","../src/utils/append.ts","../src/utils/fillEmptyArray.ts","../src/utils/insert.ts","../src/utils/move.ts","../src/utils/prepend.ts","../src/utils/compact.ts","../src/utils/remove.ts","../src/utils/swap.ts","../src/utils/unset.ts","../src/utils/update.ts","../src/useFieldArray.ts","../src/fieldArray.tsx","../src/utils/flatten.ts","../src/useFormContext.tsx","../src/form.tsx","../src/formStateSubscribe.tsx","../src/utils/createSubject.ts","../src/utils/extractFormValues.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/hasPromiseValidation.ts","../src/logic/hasValidation.ts","../src/logic/schemaErrorLookup.ts","../src/logic/shouldRenderFormState.ts","../src/logic/shouldSubscribeByName.ts","../src/logic/skipValidation.ts","../src/logic/unsetEmptyArray.ts","../src/logic/createFormControl.ts","../src/useForm.ts","../src/watch.tsx"],"sourcesContent":["import type { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'checkbox';\n","import type { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'file';\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 isFileInput from '../utils/isFileInput';\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 : isFileInput((event as Event).target)\n ? (event as Event).target.files\n : (event as Event).target.value\n : event;\n","import type { InternalFieldName } from '../types';\n\nexport default (names: Set<InternalFieldName>, name: InternalFieldName) =>\n name\n .split('.')\n .some(\n (part, index, arr) =>\n !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')),\n );\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 if (data instanceof Date) {\n return new Date(data) as any;\n }\n\n const isFileListInstance =\n typeof FileList !== 'undefined' && data instanceof FileList;\n\n if (isWeb && (data instanceof Blob || isFileListInstance)) {\n return data;\n }\n\n const isArray = Array.isArray(data);\n\n if (!isArray && !(isObject(data) && isPlainObject(data))) {\n return data;\n }\n\n const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));\n\n for (const key in data) {\n if (Object.prototype.hasOwnProperty.call(data, key)) {\n copy[key] = cloneObject(data[key]);\n }\n }\n\n return copy;\n}\n","export const EVENTS = {\n BLUR: 'blur',\n FOCUS_OUT: 'focusout',\n CHANGE: 'change',\n SUBMIT: 'submit',\n TRIGGER: 'trigger',\n VALID: 'valid',\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\nexport const ROOT_ERROR_TYPE = 'root';\n\nexport const PROTOTYPE_KEYWORDS = ['__proto__', 'constructor', 'prototype'];\n","const IS_KEY_RE = /^\\w*$/;\n\nexport default (value: string) => IS_KEY_RE.test(value);\n","export default (val: unknown): val is undefined => val === undefined;\n","const FIELD_PATH_RE = /[.[\\]'\"]/;\n\nexport default (input: string): string[] =>\n input.split(FIELD_PATH_RE).filter(Boolean);\n","import { PROTOTYPE_KEYWORDS } from '../constants';\n\nimport isKey from './isKey';\nimport isNullOrUndefined from './isNullOrUndefined';\nimport isObject from './isObject';\nimport isUndefined from './isUndefined';\nimport stringToPath from './stringToPath';\n\nexport default <T>(\n object: T,\n path?: string | null,\n defaultValue?: unknown,\n): any => {\n if (!path || !isObject(object)) {\n return defaultValue;\n }\n\n const paths = isKey(path) ? [path] : stringToPath(path);\n if (paths.some((key) => PROTOTYPE_KEYWORDS.includes(key))) {\n return defaultValue;\n }\n\n const result = paths.reduce<any>((result, key) => {\n return isNullOrUndefined(result) ? undefined : result[key];\n }, object);\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: unknown): value is Function =>\n typeof value === 'function';\n","import { PROTOTYPE_KEYWORDS } from '../constants';\nimport type { FieldPath, FieldValues } from '../types';\n\nimport isKey from './isKey';\nimport isObject from './isObject';\nimport stringToPath from './stringToPath';\n\nexport default (\n object: FieldValues,\n path: FieldPath<FieldValues>,\n value?: unknown,\n) => {\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 (PROTOTYPE_KEYWORDS.includes(key)) {\n return;\n }\n\n object[key] = newValue;\n object = object[key];\n }\n};\n","import React from 'react';\n\nimport type { Control, FieldValues } from './types';\n\n/**\n * Separate context for `control` to prevent unnecessary rerenders.\n * Internal hooks that only need control use this instead of full form context.\n */\nexport const HookFormControlContext = React.createContext<Control | null>(null);\nHookFormControlContext.displayName = 'HookFormControlContext';\n\n/**\n * @internal Internal hook to access only control from context.\n */\nexport const useFormControlContext = <\n TFieldValues extends FieldValues,\n TContext = any,\n TTransformedValues = TFieldValues,\n>(): Control<TFieldValues, TContext, TTransformedValues> =>\n React.useContext(HookFormControlContext) as Control<\n TFieldValues,\n TContext,\n TTransformedValues\n >;\n","import { VALIDATION_MODE } from '../constants';\nimport type { Control, FieldValues, FormState, ReadFormState } from '../types';\n\nexport default <\n TFieldValues extends FieldValues,\n TContext = any,\n TTransformedValues = TFieldValues,\n>(\n formState: FormState<TFieldValues>,\n control: Control<TFieldValues, TContext, TTransformedValues>,\n localProxyFormState?: ReadFormState,\n isRoot = true,\n) => {\n const result = {} 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 React from 'react';\n\nimport isWeb from './utils/isWeb';\n\nexport const useIsomorphicLayoutEffect = isWeb\n ? React.useLayoutEffect\n : React.useEffect;\n","import React from 'react';\n\nimport getProxyFormState from './logic/getProxyFormState';\nimport type {\n FieldValues,\n FormState,\n UseFormStateProps,\n UseFormStateReturn,\n} from './types';\nimport { useFormControlContext } from './useFormControlContext';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n * Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.\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 to specify fields to subscribe to. {@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 */\nexport function useFormState<\n TFieldValues extends FieldValues = FieldValues,\n TTransformedValues = TFieldValues,\n>(\n props?: UseFormStateProps<TFieldValues, TTransformedValues>,\n): UseFormStateReturn<TFieldValues> {\n const formControl = useFormControlContext<\n TFieldValues,\n any,\n TTransformedValues\n >();\n const { control = formControl, disabled, name, exact } = props || {};\n const [formState, updateFormState] = React.useState<FormState<TFieldValues>>(\n () => ({\n ...control._formState,\n defaultValues:\n control._defaultValues as FormState<TFieldValues>['defaultValues'],\n }),\n );\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\n useIsomorphicLayoutEffect(\n () =>\n control._subscribe({\n name,\n formState: _localProxyFormState.current,\n exact,\n callback: (formState) => {\n !disabled &&\n updateFormState({\n ...control._formState,\n ...formState,\n defaultValues:\n control._defaultValues as FormState<TFieldValues>['defaultValues'],\n });\n },\n }),\n [name, disabled, exact],\n );\n\n React.useEffect(() => {\n _localProxyFormState.current.isValid && control._setValid(true);\n }, [control]);\n\n return React.useMemo(\n () =>\n getProxyFormState(\n formState,\n control,\n _localProxyFormState.current,\n false,\n ),\n [formState, control],\n );\n}\n","export default (value: unknown): value is string => typeof value === 'string';\n","import type { 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),\n get(formValues, fieldName)\n ),\n );\n }\n\n isGlobal && (_names.watchAll = true);\n\n return formValues;\n};\n","import type { Primitive } from '../types';\n\nimport isNullOrUndefined from './isNullOrUndefined';\nimport { isObjectType } from './isObject';\n\nexport default (value: unknown): value is Primitive =>\n isNullOrUndefined(value) || !isObjectType(value);\n","import isDateObject from './isDateObject';\nimport isObject from './isObject';\nimport isPlainObject from './isPlainObject';\nimport isPrimitive from './isPrimitive';\n\nconst isEmptyObjectWithCustomPrototype = (object: object, keys: string[]) =>\n keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);\n\nexport default function deepEqual(\n object1: any,\n object2: any,\n visited = new WeakMap<object, WeakSet<object>>(),\n) {\n if (object1 === object2) {\n return true;\n }\n\n if (isPrimitive(object1) || isPrimitive(object2)) {\n return Object.is(object1, object2);\n }\n\n if (isDateObject(object1) && isDateObject(object2)) {\n return Object.is(object1.getTime(), object2.getTime());\n }\n\n const keys1 = Object.keys(object1);\n const keys2 = Object.keys(object2);\n\n if (keys1.length !== keys2.length) {\n return false;\n }\n\n if (\n isEmptyObjectWithCustomPrototype(object1, keys1) ||\n isEmptyObjectWithCustomPrototype(object2, keys2)\n ) {\n return Object.is(object1, object2);\n }\n\n if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {\n return false;\n }\n\n const visitedPairs = visited.get(object1);\n\n if (visitedPairs && visitedPairs.has(object2)) {\n return true;\n }\n\n if (visitedPairs) {\n visitedPairs.add(object2);\n } else {\n const ws = new WeakSet();\n ws.add(object2);\n visited.set(object1, ws);\n }\n\n for (const key of keys1) {\n const val1 = object1[key];\n\n if (!(key in object2)) {\n return false;\n }\n\n if (key !== 'ref') {\n const val2 = object2[key];\n\n if (\n (isDateObject(val1) && isDateObject(val2)) ||\n ((isObject(val1) || Array.isArray(val1)) &&\n (isObject(val2) || Array.isArray(val2)))\n ? !deepEqual(val1, val2, visited)\n : !Object.is(val1, val2)\n ) {\n return false;\n }\n }\n }\n\n return true;\n}\n","import React from 'react';\n\nimport generateWatchOutput from './logic/generateWatchOutput';\nimport deepEqual from './utils/deepEqual';\nimport type {\n Control,\n DeepPartialSkipArrayKey,\n FieldPath,\n FieldPathValue,\n FieldPathValues,\n FieldValues,\n InternalFieldName,\n UseWatchProps,\n} from './types';\nimport { useFormControlContext } from './useFormControlContext';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n * Subscribes to all form value changes and re-renders 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, disabled subscription, and exact name matching.\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 TTransformedValues = TFieldValues,\n>(props: {\n name?: undefined;\n defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;\n control?: Control<TFieldValues, any, TTransformedValues>;\n disabled?: boolean;\n exact?: boolean;\n compute?: undefined;\n}): DeepPartialSkipArrayKey<TFieldValues>;\n/**\n * Custom hook to subscribe to field changes 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, disabled subscription, and exact name matching.\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 TTransformedValues = TFieldValues,\n>(props: {\n name: TFieldName;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n control?: Control<TFieldValues, any, TTransformedValues>;\n disabled?: boolean;\n exact?: boolean;\n compute?: undefined;\n}): FieldPathValue<TFieldValues, TFieldName>;\n/**\n * Custom hook to subscribe to field changes and use a compute function to produce state updates.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch)\n *\n * @param props - DefaultValue, disabled subscription, and exact name matching.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * compute: (formValues) => formValues.fieldA\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TTransformedValues = TFieldValues,\n TComputeValue = unknown,\n>(props: {\n name?: undefined;\n defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;\n control?: Control<TFieldValues, any, TTransformedValues>;\n disabled?: boolean;\n exact?: boolean;\n compute: (formValues: TFieldValues) => TComputeValue;\n}): TComputeValue;\n/**\n * Custom hook to subscribe to field changes and use a compute function to produce state updates.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch)\n *\n * @param props - DefaultValue, disabled subscription, and exact name matching.\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 * compute: (fieldValue) => fieldValue === \"data\" ? fieldValue : null,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n TComputeValue = unknown,\n>(props: {\n name: TFieldName;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n control?: Control<TFieldValues, any, TTransformedValues>;\n disabled?: boolean;\n exact?: boolean;\n compute: (\n fieldValue: FieldPathValue<TFieldValues, TFieldName>,\n ) => TComputeValue;\n}): TComputeValue;\n/**\n * Custom hook to subscribe to field changes 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, disabled subscription, and exact name matching.\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>[] =\n readonly FieldPath<TFieldValues>[],\n TTransformedValues = TFieldValues,\n>(props: {\n name: readonly [...TFieldNames];\n defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;\n control?: Control<TFieldValues, any, TTransformedValues>;\n disabled?: boolean;\n exact?: boolean;\n compute?: undefined;\n}): FieldPathValues<TFieldValues, TFieldNames>;\n/**\n * Custom hook to subscribe to field changes and use a compute function to produce state updates.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch)\n *\n * @param props - DefaultValue, disabled subscription, and exact name matching.\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: 0\n * },\n * compute: ([fieldAValue, fieldBValue]) => fieldB === 2 ? fieldA : null,\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TFieldNames extends readonly FieldPath<TFieldValues>[] =\n readonly FieldPath<TFieldValues>[],\n TTransformedValues = TFieldValues,\n TComputeValue = unknown,\n>(props: {\n name: readonly [...TFieldNames];\n defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;\n control?: Control<TFieldValues, any, TTransformedValues>;\n disabled?: boolean;\n exact?: boolean;\n compute: (\n fieldValue: FieldPathValues<TFieldValues, TFieldNames>,\n ) => TComputeValue;\n}): TComputeValue;\n/**\n * Custom hook to subscribe to field changes 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 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 changes 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 formControl = useFormControlContext<TFieldValues>();\n const {\n control = formControl,\n name,\n defaultValue,\n disabled,\n exact,\n compute,\n } = props || {};\n const _defaultValue = React.useRef(defaultValue);\n const _compute = React.useRef(compute);\n const _computeFormValues = React.useRef<undefined | unknown>(undefined);\n\n const _prevControl = React.useRef(control);\n const _prevName = React.useRef(name);\n\n _compute.current = compute;\n\n const [value, updateValue] = React.useState(() => {\n const defaultValue = control._getWatch(\n name as InternalFieldName,\n _defaultValue.current as DeepPartialSkipArrayKey<TFieldValues>,\n );\n\n return _compute.current ? _compute.current(defaultValue) : defaultValue;\n });\n\n const getCurrentOutput = React.useCallback(\n (values?: TFieldValues) => {\n const formValues = generateWatchOutput(\n name as InternalFieldName | InternalFieldName[],\n control._names,\n values || control._formValues,\n false,\n _defaultValue.current,\n );\n\n return _compute.current ? _compute.current(formValues) : formValues;\n },\n [control._formValues, control._names, name],\n );\n\n const refreshValue = React.useCallback(\n (values?: TFieldValues) => {\n if (!disabled) {\n const formValues = generateWatchOutput(\n name as InternalFieldName | InternalFieldName[],\n control._names,\n values || control._formValues,\n false,\n _defaultValue.current,\n );\n\n if (_compute.current) {\n const computedFormValues = _compute.current(formValues);\n\n if (!deepEqual(computedFormValues, _computeFormValues.current)) {\n updateValue(computedFormValues);\n _computeFormValues.current = computedFormValues;\n }\n } else {\n updateValue(formValues);\n }\n }\n },\n [control._formValues, control._names, disabled, name],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (\n _prevControl.current !== control ||\n !deepEqual(_prevName.current, name)\n ) {\n _prevControl.current = control;\n _prevName.current = name;\n refreshValue();\n }\n\n return control._subscribe({\n name,\n formState: {\n values: true,\n },\n exact,\n callback: (formState) => {\n refreshValue(formState.values);\n },\n });\n }, [control, exact, name, refreshValue]);\n\n React.useEffect(() => control._removeUnmounted());\n\n // If name or control changed for this render, synchronously reflect the\n // latest value so callers (like useController) see the correct value\n // immediately on the same render.\n\n // Optimize: Check control reference first before expensive deepEqual\n const controlChanged = _prevControl.current !== control;\n const prevName = _prevName.current;\n\n // Cache the computed output to avoid duplicate calls within the same render\n // We include shouldReturnImmediate in deps to ensure proper recomputation\n const computedOutput = React.useMemo(() => {\n if (disabled) {\n return null;\n }\n\n const nameChanged = !controlChanged && !deepEqual(prevName, name);\n const shouldReturnImmediate = controlChanged || nameChanged;\n\n return shouldReturnImmediate ? getCurrentOutput() : null;\n }, [disabled, controlChanged, name, prevName, getCurrentOutput]);\n\n return computedOutput !== null ? computedOutput : 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 isFunction from './utils/isFunction';\nimport isUndefined from './utils/isUndefined';\nimport set from './utils/set';\nimport { EVENTS } from './constants';\nimport type {\n ControllerFieldState,\n Field,\n FieldPath,\n FieldPathValue,\n FieldValues,\n InternalFieldName,\n UseControllerProps,\n UseControllerReturn,\n} from './types';\nimport { useFormControlContext } from './useFormControlContext';\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 TTransformedValues = TFieldValues,\n>(\n props: UseControllerProps<TFieldValues, TName, TTransformedValues>,\n): UseControllerReturn<TFieldValues, TName> {\n const formControl = useFormControlContext<\n TFieldValues,\n any,\n TTransformedValues\n >();\n const {\n name,\n disabled,\n control = formControl,\n shouldUnregister,\n defaultValue,\n exact = true,\n } = props;\n const isArrayField = isNameInFieldArray(control._names.array, name);\n\n const defaultValueMemo = React.useMemo(\n () =>\n get(\n control._formValues,\n name,\n get(control._defaultValues, name, defaultValue),\n ),\n [control, name, defaultValue],\n );\n\n const value = useWatch({\n control,\n name,\n defaultValue: defaultValueMemo,\n exact,\n }) as FieldPathValue<TFieldValues, TName>;\n\n const formState = useFormState({\n control,\n name,\n exact,\n });\n\n const _props = React.useRef(props);\n const _proxyRef = React.useRef<any>(null);\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 _props.current = props;\n\n const fieldState = React.useMemo(\n () =>\n 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 [formState, name],\n );\n\n const onChange = React.useCallback(\n (event: any) => {\n const value = getEventValue(event);\n\n if (!get(control._fields, name)) {\n _registerProps.current = control.register(name, {\n ..._props.current.rules,\n value,\n });\n }\n\n return _registerProps.current.onChange({\n target: {\n value: getEventValue(event),\n name: name as InternalFieldName,\n },\n type: EVENTS.CHANGE,\n });\n },\n [name, control],\n );\n\n const 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._formValues],\n );\n\n const ref = React.useCallback(\n (elm: any) => {\n if (elm) {\n _proxyRef.current = {\n focus: () => isFunction(elm.focus) && elm.focus(),\n select: () => isFunction(elm.select) && elm.select(),\n setCustomValidity: (message: string) =>\n isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),\n reportValidity: () =>\n isFunction(elm.reportValidity) && elm.reportValidity(),\n };\n }\n\n const field = get(control._fields, name);\n\n if (field && field._f && elm) {\n field._f.ref = _proxyRef.current;\n }\n },\n [control._fields, name],\n );\n\n const field = React.useMemo(\n () => ({\n name,\n value,\n ...(isBoolean(disabled) || formState.disabled\n ? { disabled: formState.disabled || disabled }\n : {}),\n onChange,\n onBlur,\n ref,\n }),\n [name, disabled, formState.disabled, onChange, onBlur, ref, value],\n );\n\n React.useEffect(() => {\n const _shouldUnregisterField =\n control._options.shouldUnregister || shouldUnregister;\n\n _registerProps.current = control.register(name, {\n ..._props.current.rules,\n ...(isBoolean(_props.current.disabled)\n ? { disabled: _props.current.disabled }\n : {}),\n });\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(\n get(\n shouldUnregister\n ? control._defaultValues\n : control._options.values || control._defaultValues,\n name,\n get(\n control._options.defaultValues,\n name,\n _props.current.defaultValue,\n ),\n ),\n );\n set(control._defaultValues, name, value);\n if (isUndefined(get(control._formValues, name))) {\n set(control._formValues, name, value);\n }\n }\n\n !isArrayField && control.register(name);\n\n if (_proxyRef.current) {\n const field: Field = get(control._fields, name);\n if (field && field._f) {\n field._f.ref = _proxyRef.current;\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 control._setDisabledField({\n disabled,\n name,\n });\n }, [disabled, name, control]);\n\n return React.useMemo(\n () => ({\n field,\n formState,\n fieldState,\n }),\n [field, formState, fieldState],\n );\n}\n","import type { 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 TTransformedValues = TFieldValues,\n>(\n props: ControllerProps<TFieldValues, TName, TTransformedValues>,\n) =>\n props.render(useController<TFieldValues, TName, TTransformedValues>(props));\n\nexport { Controller };\n","export default () => {\n if (typeof crypto !== 'undefined' && crypto.randomUUID) {\n return crypto.randomUUID();\n }\n\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 type { 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 type { 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 type { InternalFieldName, Names } from '../types';\n\nexport default (\n name: InternalFieldName,\n _names: Names,\n isBlurEvent?: boolean,\n) => {\n if (isBlurEvent) return false;\n if (_names.watchAll || _names.watch.has(name)) return true;\n for (const watchName of _names.watch) {\n if (name.startsWith(watchName) && name.charAt(watchName.length) === '.')\n return true;\n }\n return false;\n};\n","import type { 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 return true;\n } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {\n return true;\n } else {\n if (iterateFieldsByAction(currentField, action)) {\n break;\n }\n }\n } else if (isObject(currentField)) {\n if (iterateFieldsByAction(currentField as FieldRefs, action)) {\n break;\n }\n }\n }\n }\n return;\n};\nexport default iterateFieldsByAction;\n","import { ROOT_ERROR_TYPE } from '../constants';\nimport type {\n FieldError,\n FieldErrors,\n FieldValues,\n InternalFieldName,\n} from '../types';\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 existingErrors = get(errors, name);\n const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];\n set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);\n set(errors, name, fieldArrayErrors);\n return errors;\n};\n","import type { 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 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 type { 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 type {\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","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 type { FieldError, Ref, ValidateResult } from '../types';\nimport isBoolean from '../utils/isBoolean';\nimport isString from '../utils/isString';\n\nexport default function getValidateError(\n result: ValidateResult,\n ref: Ref,\n type = 'validate',\n): FieldError | void {\n if (\n isString(result) ||\n (Array.isArray(result) && result.every(isString)) ||\n (isBoolean(result) && !result)\n ) {\n return {\n type,\n message: isString(result) ? result : '',\n ref,\n };\n }\n}\n","import type { 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 type {\n Field,\n FieldError,\n FieldValues,\n InternalFieldErrors,\n InternalNameSet,\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 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 disabledFieldNames: InternalNameSet,\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 } = field._f;\n const inputValue: NativeFieldValue = get(formValues, name);\n if (!mount || disabledFieldNames.has(name)) {\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 const validityMessage = isBoolean(message) ? '' : message || '';\n if (refs) {\n refs.forEach((ref) => ref.setCustomValidity(validityMessage));\n } else {\n inputRef.setCustomValidity(validityMessage);\n }\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 } = isString(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