@availity/mui-controlled-form 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.5](https://github.com/Availity/element/compare/@availity/mui-controlled-form@0.2.4...@availity/mui-controlled-form@0.2.5) (2025-02-05)
+
+
+### Bug Fixes
+
+* **mui-controlled-form:** support required prop object ([6a2282c](https://github.com/Availity/element/commit/6a2282ca0328c7e1ed3d1ace974209123c38f673))
+
+## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-controlled-form@0.2.3...@availity/mui-controlled-form@0.2.4) (2025-02-05)
+
+
+### Bug Fixes
+
+* **mui-controlled-form:** support nested form properties ([5746baf](https://github.com/Availity/element/commit/5746bafdee011b6fcc7d6f712946fcb597ea48da))
+* **mui-controlled-form:** support nested form properties for ControlledAsyncAutocomplete ([9c97199](https://github.com/Availity/element/commit/9c97199bbee014ebcaef6fbbf3ab81b962e87c7b))
+
 ## [0.2.3](https://github.com/Availity/element/compare/@availity/mui-controlled-form@0.2.2...@availity/mui-controlled-form@0.2.3) (2025-02-05)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -39,7 +39,7 @@ type ControlledFormProps = {
 declare const ControlledForm: ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledDatepickerProps = DatepickerProps & Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> & Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
-declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, FieldProps, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledInputProps = Omit<InputProps, 'error' | 'name' | 'required'> & {
     name: string;

package/dist/index.d.ts

@@ -39,7 +39,7 @@ type ControlledFormProps = {
 declare const ControlledForm: ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledDatepickerProps = DatepickerProps & Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> & Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
-declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, FieldProps, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledInputProps = Omit<InputProps, 'error' | 'name' | 'required'> & {
     name: string;

package/dist/index.js

@@ -101,11 +101,8 @@ var ControlledAsyncAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = (0, import_react_hook_form.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = (0, import_react_hook_form.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_hook_form.Controller,
     {
@@ -131,6 +128,7 @@ var ControlledAsyncAutocomplete = (_a) => {
         import_mui_autocomplete.AsyncAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
               errorMessage,
@@ -191,11 +189,8 @@ var ControlledAutocomplete = (_a) => {
     "value"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = (0, import_react_hook_form2.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = (0, import_react_hook_form2.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_hook_form2.Controller,
     {
@@ -221,6 +216,7 @@ var ControlledAutocomplete = (_a) => {
         import_mui_autocomplete2.Autocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               errorMessage,
@@ -316,11 +312,8 @@ var ControlledCodesAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = (0, import_react_hook_form4.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = (0, import_react_hook_form4.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_react_hook_form4.Controller,
     {
@@ -344,6 +337,7 @@ var ControlledCodesAutocomplete = (_a) => {
         import_mui_autocomplete3.CodesAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
               errorMessage,
@@ -397,7 +391,8 @@ var ControlledDatepicker = (_a) => {
     required,
     shouldUnregister,
     validate,
-    value
+    value,
+    FieldProps
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -412,7 +407,8 @@ var ControlledDatepicker = (_a) => {
     "required",
     "shouldUnregister",
     "validate",
-    "value"
+    "value",
+    "FieldProps"
   ]);
   const { control } = (0, import_react_hook_form6.useFormContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -436,7 +432,22 @@ var ControlledDatepicker = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2 } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_datepicker.Datepicker, __spreadProps(__spreadValues({}, rest), { onChange: onChange2, value: value2 || null }))
+      render: ({ field: { onChange: onChange2, value: value2 }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_mui_datepicker.Datepicker,
+        __spreadProps(__spreadValues({}, rest), {
+          FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              error == null ? void 0 : error.message,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
+              FieldProps == null ? void 0 : FieldProps.helperText
+            ] }) : FieldProps == null ? void 0 : FieldProps.helperText
+          }),
+          onChange: onChange2,
+          value: value2 || null
+        })
+      )
     }
   );
 };
@@ -479,15 +490,12 @@ var ControlledInput = (_a) => {
     "shouldUnregister",
     "deps"
   ]);
-  const {
-    register,
-    formState: { errors }
-  } = (0, import_react_hook_form7.useFormContext)();
+  const { register, getFieldState } = (0, import_react_hook_form7.useFormContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_mui_form_utils.Input,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
-      error: !!errors[name],
-      required: !!required
+      error: !!getFieldState(name).error,
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -538,11 +546,8 @@ var ControlledOrganizationAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = (0, import_react_hook_form8.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = (0, import_react_hook_form8.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_hook_form8.Controller,
     {
@@ -564,6 +569,7 @@ var ControlledOrganizationAutocomplete = (_a) => {
         import_mui_autocomplete4.OrganizationAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
               errorMessage,
@@ -624,11 +630,8 @@ var ControlledProviderAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = (0, import_react_hook_form9.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = (0, import_react_hook_form9.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_react_hook_form9.Controller,
     {
@@ -654,6 +657,7 @@ var ControlledProviderAutocomplete = (_a) => {
         import_mui_autocomplete5.ProviderAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
               errorMessage,
@@ -705,11 +709,8 @@ var ControlledRadioGroup = (_a) => {
     "value"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = (0, import_react_hook_form10.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = (0, import_react_hook_form10.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_react_hook_form10.Controller,
     {
@@ -719,7 +720,7 @@ var ControlledRadioGroup = (_a) => {
       rules: { deps, onBlur, onChange, required, shouldUnregister, value },
       shouldUnregister,
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_form_utils3.FormControl, { error: !!errorMessage, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.FormLabel, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.FormLabel, { required: typeof required === "object" ? required.value : !!required, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils2.RadioGroup, __spreadValues(__spreadValues({}, field), rest)),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
           errorMessage,
@@ -769,15 +770,12 @@ var ControlledSelect = (_a) => {
     "shouldUnregister",
     "deps"
   ]);
-  const {
-    register,
-    formState: { errors }
-  } = (0, import_react_hook_form11.useFormContext)();
+  const { register, getFieldState } = (0, import_react_hook_form11.useFormContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_mui_form_utils4.Select,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
-      error: !!errors[name],
-      required: !!required
+      error: !!getFieldState(name).error,
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -838,15 +836,12 @@ var ControlledTextField = (_a) => {
     "deps"
   ]);
   var _a2;
-  const {
-    register,
-    formState: { errors }
-  } = (0, import_react_hook_form12.useFormContext)();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { register, getFieldState } = (0, import_react_hook_form12.useFormContext)();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_mui_textfield.TextField,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -863,7 +858,7 @@ var ControlledTextField = (_a) => {
       shouldUnregister,
       deps
     })), {
-      error: !!errors[name],
+      error: !!getFieldState(name).error,
       helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
         errorMessage,
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("br", {}),

package/dist/index.mjs

@@ -67,11 +67,8 @@ var ControlledAsyncAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx(
     Controller,
     {
@@ -97,6 +94,7 @@ var ControlledAsyncAutocomplete = (_a) => {
         AsyncAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
               errorMessage,
@@ -157,11 +155,8 @@ var ControlledAutocomplete = (_a) => {
     "value"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext2();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = useFormContext2();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx2(
     Controller2,
     {
@@ -187,6 +182,7 @@ var ControlledAutocomplete = (_a) => {
         Autocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
               errorMessage,
@@ -282,11 +278,8 @@ var ControlledCodesAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext4();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = useFormContext4();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx4(
     Controller3,
     {
@@ -310,6 +303,7 @@ var ControlledCodesAutocomplete = (_a) => {
         CodesAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
               errorMessage,
@@ -347,7 +341,7 @@ var ControlledForm = (_a) => {
 // src/lib/Datepicker.tsx
 import { Datepicker } from "@availity/mui-datepicker";
 import { useFormContext as useFormContext5, Controller as Controller4 } from "react-hook-form";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlledDatepicker = (_a) => {
   var _b = _a, {
     name,
@@ -363,7 +357,8 @@ var ControlledDatepicker = (_a) => {
     required,
     shouldUnregister,
     validate,
-    value
+    value,
+    FieldProps
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -378,7 +373,8 @@ var ControlledDatepicker = (_a) => {
     "required",
     "shouldUnregister",
     "validate",
-    "value"
+    "value",
+    "FieldProps"
   ]);
   const { control } = useFormContext5();
   return /* @__PURE__ */ jsx6(
@@ -402,7 +398,22 @@ var ControlledDatepicker = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2 } }) => /* @__PURE__ */ jsx6(Datepicker, __spreadProps(__spreadValues({}, rest), { onChange: onChange2, value: value2 || null }))
+      render: ({ field: { onChange: onChange2, value: value2 }, fieldState: { error } }) => /* @__PURE__ */ jsx6(
+        Datepicker,
+        __spreadProps(__spreadValues({}, rest), {
+          FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+              error == null ? void 0 : error.message,
+              /* @__PURE__ */ jsx6("br", {}),
+              FieldProps == null ? void 0 : FieldProps.helperText
+            ] }) : FieldProps == null ? void 0 : FieldProps.helperText
+          }),
+          onChange: onChange2,
+          value: value2 || null
+        })
+      )
     }
   );
 };
@@ -445,15 +456,12 @@ var ControlledInput = (_a) => {
     "shouldUnregister",
     "deps"
   ]);
-  const {
-    register,
-    formState: { errors }
-  } = useFormContext6();
+  const { register, getFieldState } = useFormContext6();
   return /* @__PURE__ */ jsx7(
     Input,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
-      error: !!errors[name],
-      required: !!required
+      error: !!getFieldState(name).error,
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -476,7 +484,7 @@ var ControlledInput = (_a) => {
 // src/lib/OrganizationAutocomplete.tsx
 import { OrganizationAutocomplete } from "@availity/mui-autocomplete";
 import { useFormContext as useFormContext7, Controller as Controller5 } from "react-hook-form";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ControlledOrganizationAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -504,11 +512,8 @@ var ControlledOrganizationAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext7();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = useFormContext7();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx8(
     Controller5,
     {
@@ -530,8 +535,9 @@ var ControlledOrganizationAutocomplete = (_a) => {
         OrganizationAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
               errorMessage,
               /* @__PURE__ */ jsx8("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
@@ -554,7 +560,7 @@ var ControlledOrganizationAutocomplete = (_a) => {
 // src/lib/ProviderAutocomplete.tsx
 import { ProviderAutocomplete } from "@availity/mui-autocomplete";
 import { useFormContext as useFormContext8, Controller as Controller6 } from "react-hook-form";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var ControlledProviderAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -590,11 +596,8 @@ var ControlledProviderAutocomplete = (_a) => {
     "FieldProps"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext8();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = useFormContext8();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx9(
     Controller6,
     {
@@ -620,8 +623,9 @@ var ControlledProviderAutocomplete = (_a) => {
         ProviderAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
               errorMessage,
               /* @__PURE__ */ jsx9("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
@@ -645,7 +649,7 @@ var ControlledProviderAutocomplete = (_a) => {
 import { RadioGroup } from "@availity/mui-form-utils";
 import { useFormContext as useFormContext9, Controller as Controller7 } from "react-hook-form";
 import { FormControl, FormLabel, FormHelperText } from "@availity/mui-form-utils";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var ControlledRadioGroup = (_a) => {
   var _b = _a, {
     name,
@@ -671,11 +675,8 @@ var ControlledRadioGroup = (_a) => {
     "value"
   ]);
   var _a2;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext9();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { control, getFieldState } = useFormContext9();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx10(
     Controller7,
     {
@@ -684,10 +685,10 @@ var ControlledRadioGroup = (_a) => {
       defaultValue,
       rules: { deps, onBlur, onChange, required, shouldUnregister, value },
       shouldUnregister,
-      render: ({ field }) => /* @__PURE__ */ jsxs6(FormControl, { error: !!errorMessage, children: [
-        /* @__PURE__ */ jsx10(FormLabel, { children: label }),
+      render: ({ field }) => /* @__PURE__ */ jsxs7(FormControl, { error: !!errorMessage, children: [
+        /* @__PURE__ */ jsx10(FormLabel, { required: typeof required === "object" ? required.value : !!required, children: label }),
         /* @__PURE__ */ jsx10(RadioGroup, __spreadValues(__spreadValues({}, field), rest)),
-        /* @__PURE__ */ jsx10(FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
+        /* @__PURE__ */ jsx10(FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
           errorMessage,
           /* @__PURE__ */ jsx10("br", {}),
           helperText
@@ -735,15 +736,12 @@ var ControlledSelect = (_a) => {
     "shouldUnregister",
     "deps"
   ]);
-  const {
-    register,
-    formState: { errors }
-  } = useFormContext10();
+  const { register, getFieldState } = useFormContext10();
   return /* @__PURE__ */ jsx11(
     Select,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
-      error: !!errors[name],
-      required: !!required
+      error: !!getFieldState(name).error,
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -766,7 +764,7 @@ var ControlledSelect = (_a) => {
 // src/lib/TextField.tsx
 import { TextField } from "@availity/mui-textfield";
 import { useFormContext as useFormContext11 } from "react-hook-form";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var ControlledTextField = (_a) => {
   var _b = _a, {
     name,
@@ -804,15 +802,12 @@ var ControlledTextField = (_a) => {
     "deps"
   ]);
   var _a2;
-  const {
-    register,
-    formState: { errors }
-  } = useFormContext11();
-  const errorMessage = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const { register, getFieldState } = useFormContext11();
+  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx12(
     TextField,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -829,8 +824,8 @@ var ControlledTextField = (_a) => {
       shouldUnregister,
       deps
     })), {
-      error: !!errors[name],
-      helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
+      error: !!getFieldState(name).error,
+      helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs8(Fragment8, { children: [
         errorMessage,
         /* @__PURE__ */ jsx12("br", {}),
         helperText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Availity MUI ControlledForm Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/AsyncAutocomplete.tsx

@@ -35,11 +35,8 @@ export const ControlledAsyncAutocomplete = <
   FieldProps,
   ...rest
 }: ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-  const errorMessage = errors[name]?.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
@@ -65,6 +62,7 @@ export const ControlledAsyncAutocomplete = <
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/Autocomplete.tsx

@@ -39,11 +39,8 @@ export const ControlledAutocomplete = <
   value,
   ...rest
 }: ControlledAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-  const errorMessage = errors[name]?.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       control={control}
@@ -69,6 +66,7 @@ export const ControlledAutocomplete = <
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/CodesAutocomplete.tsx

@@ -21,11 +21,8 @@ export const ControlledCodesAutocomplete = ({
   FieldProps,
   ...rest
 }: ControlledCodesAutocompleteProps) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-  const errorMessage = errors[name]?.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
@@ -49,6 +46,7 @@ export const ControlledCodesAutocomplete = ({
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/Datepicker.tsx

@@ -20,6 +20,7 @@ export const ControlledDatepicker = ({
   shouldUnregister,
   validate,
   value,
+  FieldProps,
   ...rest
 }: ControlledDatepickerProps) => {
   const { control } = useFormContext();
@@ -43,7 +44,27 @@ export const ControlledDatepicker = ({
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value } }) => <Datepicker {...rest} onChange={onChange} value={value || null} />}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <Datepicker
+          {...rest}
+          FieldProps={{
+            ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error?.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
+          }}
+          onChange={onChange}
+          value={value || null}
+        />
+      )}
     />
   );
 };

package/src/lib/Input.tsx

@@ -24,15 +24,12 @@ export const ControlledInput = ({
   deps,
   ...rest
 }: ControlledInputProps) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
+  const { register, getFieldState } = useFormContext();
   return (
     <Input
       {...rest}
-      error={!!errors[name]}
-      required={!!required}
+      error={!!getFieldState(name).error}
+      required={typeof required === 'object' ? required.value : !!required}
       {...register(name, {
         required,
         maxLength,

package/src/lib/OrganizationAutocomplete.tsx

@@ -22,11 +22,8 @@ export const ControlledOrganizationAutocomplete = ({
   FieldProps,
   ...rest
 }: ControlledOrgAutocompleteProps) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-  const errorMessage = errors[name]?.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
@@ -48,6 +45,7 @@ export const ControlledOrganizationAutocomplete = ({
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/ProviderAutocomplete.tsx

@@ -23,11 +23,8 @@ export const ControlledProviderAutocomplete = ({
   FieldProps,
   ...rest
 }: ControlledProviderAutocompleteProps) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-  const errorMessage = errors[name]?.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
@@ -53,6 +50,7 @@ export const ControlledProviderAutocomplete = ({
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/RadioGroup.tsx

@@ -34,11 +34,8 @@ export const ControlledRadioGroup = ({
   value,
   ...rest
 }: ControlledRadioGroupProps) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-  const errorMessage = errors[name]?.message;
+  const { control, getFieldState } = useFormContext();
+  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       control={control}
@@ -48,7 +45,7 @@ export const ControlledRadioGroup = ({
       shouldUnregister={shouldUnregister}
       render={({ field }) => (
         <FormControl error={!!errorMessage}>
-          <FormLabel>{label}</FormLabel>
+          <FormLabel required={typeof required === 'object' ? required.value : !!required}>{label}</FormLabel>
           <RadioGroup {...field} {...rest} />
           <FormHelperText>
             {errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/Select.tsx

@@ -24,16 +24,13 @@ export const ControlledSelect = ({
   deps,
   ...rest
 }: ControlledSelectProps) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
+  const { register, getFieldState } = useFormContext();
 
   return (
     <Select
       {...rest}
-      error={!!errors[name]}
-      required={!!required}
+      error={!!getFieldState(name).error}
+      required={typeof required === 'object' ? required.value : !!required}
       {...register(name, {
         required,
         maxLength,

package/src/lib/TextField.tsx

@@ -24,17 +24,14 @@ export const ControlledTextField = ({
   deps,
   ...rest
 }: ControlledTextFieldProps) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
+  const { register, getFieldState } = useFormContext();
 
-  const errorMessage = errors[name]?.message;
+  const errorMessage = getFieldState(name).error?.message;
 
   return (
     <TextField
       {...rest}
-      required={!!required}
+      required={typeof required === 'object' ? required.value : !!required}
       {...register(name, {
         required,
         maxLength,
@@ -51,7 +48,7 @@ export const ControlledTextField = ({
         shouldUnregister,
         deps,
       })}
-      error={!!errors[name]}
+      error={!!getFieldState(name).error}
       helperText={
         errorMessage && typeof errorMessage === 'string' ? (
           <>