@availity/mui-controlled-form 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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.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,
     {
@@ -191,11 +188,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,
     {
@@ -316,11 +310,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,
     {
@@ -479,14 +470,11 @@ 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],
+      error: !!getFieldState(name).error,
       required: !!required
     }), register(name, {
       required,
@@ -538,11 +526,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,
     {
@@ -624,11 +609,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,
     {
@@ -705,11 +687,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,
     {
@@ -769,14 +748,11 @@ 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],
+      error: !!getFieldState(name).error,
       required: !!required
     }), register(name, {
       required,
@@ -838,11 +814,8 @@ 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), {
@@ -863,7 +836,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,
     {
@@ -157,11 +154,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,
     {
@@ -282,11 +276,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,
     {
@@ -445,14 +436,11 @@ 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],
+      error: !!getFieldState(name).error,
       required: !!required
     }), register(name, {
       required,
@@ -504,11 +492,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,
     {
@@ -590,11 +575,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,
     {
@@ -671,11 +653,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,
     {
@@ -735,14 +714,11 @@ 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],
+      error: !!getFieldState(name).error,
       required: !!required
     }), register(name, {
       required,
@@ -804,11 +780,8 @@ 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), {
@@ -829,7 +802,7 @@ var ControlledTextField = (_a) => {
       shouldUnregister,
       deps
     })), {
-      error: !!errors[name],
+      error: !!getFieldState(name).error,
       helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
         errorMessage,
         /* @__PURE__ */ jsx12("br", {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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}

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}

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}

package/src/lib/Input.tsx

@@ -24,14 +24,11 @@ export const ControlledInput = ({
   deps,
   ...rest
 }: ControlledInputProps) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
+  const { register, getFieldState } = useFormContext();
   return (
     <Input
       {...rest}
-      error={!!errors[name]}
+      error={!!getFieldState(name).error}
       required={!!required}
       {...register(name, {
         required,

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}

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}

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}

package/src/lib/Select.tsx

@@ -24,15 +24,12 @@ export const ControlledSelect = ({
   deps,
   ...rest
 }: ControlledSelectProps) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
+  const { register, getFieldState } = useFormContext();
 
   return (
     <Select
       {...rest}
-      error={!!errors[name]}
+      error={!!getFieldState(name).error}
       required={!!required}
       {...register(name, {
         required,

package/src/lib/TextField.tsx

@@ -24,12 +24,9 @@ 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
@@ -51,7 +48,7 @@ export const ControlledTextField = ({
         shouldUnregister,
         deps,
       })}
-      error={!!errors[name]}
+      error={!!getFieldState(name).error}
       helperText={
         errorMessage && typeof errorMessage === 'string' ? (
           <>