\r\n *
\r\n *
{fieldState.isTouched && \"Touched\"}
\r\n *
{formState.isSubmitted ? \"submitted\" : \"\"}
\r\n *
\r\n * );\r\n * }\r\n * ```\r\n */\n\n\nfunction useController(props) {\n var methods = useFormContext();\n var name = props.name,\n _props$control = props.control,\n control = _props$control === void 0 ? methods.control : _props$control,\n shouldUnregister = props.shouldUnregister;\n var isArrayField = isNameInFieldArray(control._names.array, name);\n var value = useWatch({\n control: control,\n name: name,\n defaultValue: _get(control._formValues, name, _get(control._defaultValues, name, props.defaultValue)),\n exact: true\n });\n var formState = useFormState({\n control: control,\n name: name\n });\n\n var _registerProps = React.useRef(control.register(name, _objectSpread(_objectSpread({}, props.rules), {}, {\n value: value\n })));\n\n React.useEffect(function () {\n var updateMounted = function updateMounted(name, value) {\n var field = _get(control._fields, name);\n\n if (field) {\n field._f.mount = value;\n }\n };\n\n updateMounted(name, true);\n return function () {\n var _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;\n\n (isArrayField ? _shouldUnregisterField && !control._stateFlags.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);\n };\n }, [name, control, isArrayField, shouldUnregister]);\n return {\n field: {\n name: name,\n value: value,\n onChange: React.useCallback(function (event) {\n _registerProps.current.onChange({\n target: {\n value: getEventValue(event),\n name: name\n },\n type: EVENTS.CHANGE\n });\n }, [name]),\n onBlur: React.useCallback(function () {\n _registerProps.current.onBlur({\n target: {\n value: _get(control._formValues, name),\n name: name\n },\n type: EVENTS.BLUR\n });\n }, [name, control]),\n ref: React.useCallback(function (elm) {\n var field = _get(control._fields, name);\n\n if (elm && field && elm.focus) {\n field._f.ref = {\n focus: function focus() {\n return elm.focus();\n },\n setCustomValidity: function setCustomValidity(message) {\n return elm.setCustomValidity(message);\n },\n reportValidity: function reportValidity() {\n return elm.reportValidity();\n }\n };\n }\n }, [name, control._fields])\n },\n formState: formState,\n fieldState: Object.defineProperties({}, {\n invalid: {\n get: function get() {\n return !!_get(formState.errors, name);\n }\n },\n isDirty: {\n get: function get() {\n return !!_get(formState.dirtyFields, name);\n }\n },\n isTouched: {\n get: function get() {\n return !!_get(formState.touchedFields, name);\n }\n },\n error: {\n get: function get() {\n return _get(formState.errors, name);\n }\n }\n })\n };\n}\n/**\r\n * Component based on `useController` hook to work with controlled component.\r\n *\r\n * @remarks\r\n * [API](https://react-hook-form.com/api/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)\r\n *\r\n * @param props - the path name to the form field value, and validation rules.\r\n *\r\n * @returns provide field handler functions, field and form state.\r\n *\r\n * @example\r\n * ```tsx\r\n * function App() {\r\n * const { control } = useForm