@availity/mui-controlled-form 0.2.4 → 0.2.6

package/src/lib/Select.tsx

@@ -1,10 +1,9 @@
 import { Select, SelectProps } from '@availity/mui-form-utils';
-import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
 
-export type ControlledSelectProps = Omit<SelectProps, 'error' | 'required'> & { name: string } & RegisterOptions<
-    FieldValues,
-    string
-  >;
+export type ControlledSelectProps = Omit<SelectProps, 'error' | 'required'> &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
 
 export const ControlledSelect = ({
   name,
@@ -15,23 +14,21 @@ export const ControlledSelect = ({
   min,
   pattern,
   validate,
-  setValueAs,
   disabled,
   onChange,
   onBlur,
   value,
+  defaultValue,
   shouldUnregister,
   deps,
   ...rest
 }: ControlledSelectProps) => {
-  const { register, getFieldState } = useFormContext();
-
   return (
-    <Select
-      {...rest}
-      error={!!getFieldState(name).error}
-      required={!!required}
-      {...register(name, {
+    <Controller
+      name={name}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      rules={{
         required,
         maxLength,
         minLength,
@@ -39,14 +36,21 @@ export const ControlledSelect = ({
         min,
         pattern,
         validate,
-        setValueAs,
-        disabled,
         onChange,
         onBlur,
         value,
         shouldUnregister,
         deps,
-      })}
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field, fieldState: { error } }) => (
+        <Select
+          {...rest}
+          {...field}
+          error={!!error}
+          required={typeof required === 'object' ? required.value : !!required}
+        />
+      )}
     />
   );
 };

package/src/lib/TextField.stories.tsx

@@ -43,13 +43,18 @@ export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
       } = useFormContext();
       return (
         <Grid container direction="row" justifyContent="space-between" marginTop={1}>
-          <Button disabled={!isSubmitSuccessful} children="Reset" color="secondary" onClick={() => reset()} />
+          <Button
+            disabled={!isSubmitSuccessful}
+            children="Reset"
+            color="secondary"
+            onClick={() => reset({ [args.name]: '' })}
+          />
           <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
         </Grid>
       );
     };
     return (
-      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={(data) => data}>
+      <ControlledForm values={{ [args.name]: '' }} onSubmit={(data) => data}>
         <ControlledTextField {...args} />
         <Actions />
         <SubmittedValues />

package/src/lib/TextField.tsx

@@ -1,9 +1,9 @@
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
-import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
 
-export type ControlledTextFieldProps = Omit<TextFieldProps, 'required'> & {
-  name: string;
-} & RegisterOptions<FieldValues, string>;
+export type ControlledTextFieldProps = Omit<TextFieldProps, 'required'> &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
 
 export const ControlledTextField = ({
   name,
@@ -15,8 +15,8 @@ export const ControlledTextField = ({
   min,
   pattern,
   validate,
-  setValueAs,
   disabled,
+  defaultValue,
   onChange,
   onBlur,
   value,
@@ -24,15 +24,12 @@ export const ControlledTextField = ({
   deps,
   ...rest
 }: ControlledTextFieldProps) => {
-  const { register, getFieldState } = useFormContext();
-
-  const errorMessage = getFieldState(name).error?.message;
-
   return (
-    <TextField
-      {...rest}
-      required={!!required}
-      {...register(name, {
+    <Controller
+      name={name}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      rules={{
         required,
         maxLength,
         minLength,
@@ -40,26 +37,32 @@ export const ControlledTextField = ({
         min,
         pattern,
         validate,
-        setValueAs,
-        disabled,
         onChange,
         onBlur,
         value,
         shouldUnregister,
         deps,
-      })}
-      error={!!getFieldState(name).error}
-      helperText={
-        errorMessage && typeof errorMessage === 'string' ? (
-          <>
-            {errorMessage}
-            <br />
-            {helperText}
-          </>
-        ) : (
-          helperText
-        )
-      }
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...rest}
+          {...field}
+          required={typeof required === 'object' ? required.value : !!required}
+          error={!!error}
+          helperText={
+            error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {helperText}
+              </>
+            ) : (
+              helperText
+            )
+          }
+        />
+      )}
     />
   );
 };