@availity/mui-controlled-form 0.2.5 → 0.2.6

package/src/lib/Autocomplete.tsx

@@ -1,5 +1,5 @@
 import { Autocomplete, AutocompleteProps } from '@availity/mui-autocomplete';
-import { useFormContext, RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
 
 export type ControlledAutocompleteProps<
@@ -39,11 +39,8 @@ export const ControlledAutocomplete = <
   value,
   ...rest
 }: ControlledAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
-      control={control}
       name={name}
       defaultValue={defaultValue}
       rules={{
@@ -61,23 +58,22 @@ export const ControlledAutocomplete = <
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur } }) => (
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
         <Autocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
             required: typeof required === 'object' ? required.value : !!required,
-            error: !!errorMessage,
-            helperText:
-              errorMessage && typeof errorMessage === 'string' ? (
-                <>
-                  {errorMessage}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/Checkbox.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ControlledCheckbox } from './Checkbox';
+import { ControlledCheckbox, ControlledCheckboxProps } from './Checkbox';
 import { ControlledForm } from './ControlledForm';
 import { Button } from '@availity/mui-button';
 import { useFormContext } from 'react-hook-form';
@@ -17,7 +17,7 @@ const meta: Meta<typeof ControlledCheckbox> = {
 export default meta;
 
 export const _ControlledCheckbox: StoryObj<typeof ControlledCheckbox> = {
-  render: () => {
+  render: (args: ControlledCheckboxProps) => {
     const SubmittedValues = () => {
       const {
         getValues,
@@ -39,19 +39,24 @@ export const _ControlledCheckbox: StoryObj<typeof ControlledCheckbox> = {
       } = 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]: false })}
+          />
           <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
         </Grid>
       );
     };
     return (
-      <ControlledForm onSubmit={(data) => data} values={{ controlledCheckbox: undefined }}>
+      <ControlledForm onSubmit={(data) => data} values={{ [args.name]: false }} noValidate>
         <FormControl>
           <FormLabel id="radio-group" component="div">
             Radio Group
           </FormLabel>
           <FormGroup>
-            <FormControlLabel label="Option 1" control={<ControlledCheckbox name="Option 1" />} />
+            <FormControlLabel label="Option 1" control={<ControlledCheckbox {...args} />} />
             <FormControlLabel label="Option 2" control={<ControlledCheckbox name="Option 2" />} />
             <FormControlLabel label="Option 3" control={<ControlledCheckbox name="Option 3" />} />
           </FormGroup>

package/src/lib/Checkbox.tsx

@@ -1,37 +1,49 @@
 import { Checkbox, CheckboxProps } from '@availity/mui-checkbox';
-import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
 
-export type ControlledCheckboxProps = CheckboxProps & {
-  name: string;
-} & Omit<
+export type ControlledCheckboxProps = CheckboxProps &
+  Omit<
     RegisterOptions<FieldValues, string>,
-    'required' | 'max' | 'maxLength' | 'min' | 'minLength' | 'pattern' | 'validate'
-  >;
+    | 'required'
+    | 'disabled'
+    | 'valueAsNumber'
+    | 'valueAsDate'
+    | 'setValueAs'
+    | 'max'
+    | 'maxLength'
+    | 'min'
+    | 'minLength'
+    | 'pattern'
+  > &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
 
 export const ControlledCheckbox = ({
   name,
-  setValueAs,
   disabled,
   onChange,
   onBlur,
   value,
+  defaultValue = false,
   shouldUnregister,
   deps,
   ...rest
 }: ControlledCheckboxProps) => {
-  const { register } = useFormContext();
   return (
-    <Checkbox
-      {...rest}
-      {...register(name, {
-        setValueAs,
-        disabled,
+    <Controller
+      name={name}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      rules={{
         onChange,
         onBlur,
         value,
         shouldUnregister,
         deps,
-      })}
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field }) => (
+        <Checkbox {...rest} {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />
+      )}
     />
   );
 };

package/src/lib/CodesAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { CodesAutocomplete, CodesAutocompleteProps } from '@availity/mui-autocomplete';
-import { useFormContext, Controller, RegisterOptions, ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller, RegisterOptions, ControllerProps, FieldValues } from 'react-hook-form';
 
 export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps, 'name'> &
   Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
@@ -21,12 +21,9 @@ export const ControlledCodesAutocomplete = ({
   FieldProps,
   ...rest
 }: ControlledCodesAutocompleteProps) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={defaultValue}
       rules={{
         deps,
@@ -41,23 +38,22 @@ export const ControlledCodesAutocomplete = ({
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur } }) => (
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
         <CodesAutocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
             required: typeof required === 'object' ? required.value : !!required,
-            error: !!errorMessage,
-            helperText:
-              errorMessage && typeof errorMessage === 'string' ? (
-                <>
-                  {errorMessage}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/ControlledForm.tsx

@@ -29,7 +29,7 @@ export const ControlledForm = ({ onSubmit, values, schema, validationResolver, .
 
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} {...rest} />
+      <form onSubmit={methods.handleSubmit(onSubmit)} noValidate {...rest} />
     </FormProvider>
   );
 };

package/src/lib/Datepicker.tsx

@@ -1,5 +1,5 @@
 import { Datepicker, DatepickerProps } from '@availity/mui-datepicker';
-import { useFormContext, RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
 
 export type ControlledDatepickerProps = DatepickerProps &
   Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
@@ -23,11 +23,9 @@ export const ControlledDatepicker = ({
   FieldProps,
   ...rest
 }: ControlledDatepickerProps) => {
-  const { control } = useFormContext();
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={defaultValue}
       rules={{
         deps,

package/src/lib/Input.stories.tsx

@@ -38,13 +38,18 @@ export const _ControlledInput: StoryObj<typeof ControlledInput> = {
       } = 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={{ controlledInput: undefined }} onSubmit={(data) => data}>
+      <ControlledForm values={{ [args.name]: '' }} onSubmit={(data) => data}>
         <ControlledInput {...args} />
         <Actions />
         <SubmittedValues />

package/src/lib/Input.tsx

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

package/src/lib/OrganizationAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { OrganizationAutocomplete, OrgAutocompleteProps } from '@availity/mui-autocomplete';
-import { useFormContext, Controller, RegisterOptions, FieldValues, ControllerProps } from 'react-hook-form';
+import { Controller, RegisterOptions, FieldValues, ControllerProps } from 'react-hook-form';
 
 export type ControlledOrgAutocompleteProps = Omit<OrgAutocompleteProps, 'name'> &
   Omit<
@@ -22,12 +22,9 @@ export const ControlledOrganizationAutocomplete = ({
   FieldProps,
   ...rest
 }: ControlledOrgAutocompleteProps) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={defaultValue}
       rules={{
         deps,
@@ -40,23 +37,22 @@ export const ControlledOrganizationAutocomplete = ({
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur } }) => (
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
         <OrganizationAutocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
             required: typeof required === 'object' ? required.value : !!required,
-            error: !!errorMessage,
-            helperText:
-              errorMessage && typeof errorMessage === 'string' ? (
-                <>
-                  {errorMessage}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/ProviderAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { ProviderAutocomplete, ProviderAutocompleteProps } from '@availity/mui-autocomplete';
-import { useFormContext, Controller, RegisterOptions, FieldValues, ControllerProps } from 'react-hook-form';
+import { Controller, RegisterOptions, FieldValues, ControllerProps } from 'react-hook-form';
 
 export type ControlledProviderAutocompleteProps = Omit<ProviderAutocompleteProps, 'name'> &
   Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
@@ -23,12 +23,9 @@ export const ControlledProviderAutocomplete = ({
   FieldProps,
   ...rest
 }: ControlledProviderAutocompleteProps) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={defaultValue}
       rules={{
         deps,
@@ -45,23 +42,22 @@ export const ControlledProviderAutocomplete = ({
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur } }) => (
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
         <ProviderAutocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
             required: typeof required === 'object' ? required.value : !!required,
-            error: !!errorMessage,
-            helperText:
-              errorMessage && typeof errorMessage === 'string' ? (
-                <>
-                  {errorMessage}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import { RadioGroup, RadioGroupProps } from '@availity/mui-form-utils';
-import { useFormContext, ControllerProps, Controller, RegisterOptions, FieldValues } from 'react-hook-form';
+import { ControllerProps, Controller, RegisterOptions, FieldValues } from 'react-hook-form';
 import { FormControl, FormLabel, FormHelperText } from '@availity/mui-form-utils';
 
 export type ControlledRadioGroupProps = RadioGroupProps & {
@@ -34,23 +34,20 @@ export const ControlledRadioGroup = ({
   value,
   ...rest
 }: ControlledRadioGroupProps) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
-      control={control}
       name={name}
       defaultValue={defaultValue}
       rules={{ deps, onBlur, onChange, required, shouldUnregister, value }}
       shouldUnregister={shouldUnregister}
-      render={({ field }) => (
-        <FormControl error={!!errorMessage}>
+      render={({ field, fieldState: { error } }) => (
+        <FormControl error={!!error}>
           <FormLabel required={typeof required === 'object' ? required.value : !!required}>{label}</FormLabel>
           <RadioGroup {...field} {...rest} />
           <FormHelperText>
-            {errorMessage && typeof errorMessage === 'string' ? (
+            {error?.message ? (
               <>
-                {errorMessage}
+                {error.message}
                 <br />
                 {helperText}
               </>

package/src/lib/Select.stories.tsx

@@ -44,7 +44,7 @@ export const _ControlledSelect: StoryObj<typeof ControlledSelect> = {
             disabled={!isSubmitSuccessful}
             children="Reset"
             color="secondary"
-            onClick={() => reset({ controlledSelect: undefined })}
+            onClick={() => reset({ [args.name]: '' })}
           />
           <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
         </Grid>
@@ -52,7 +52,7 @@ export const _ControlledSelect: StoryObj<typeof ControlledSelect> = {
     };
 
     return (
-      <ControlledForm values={{ controlledSelect: undefined }} onSubmit={(data) => data}>
+      <ControlledForm values={{ [args.name]: '' }} onSubmit={(data) => data} noValidate>
         <FormControl>
           <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
           <ControlledSelect {...args} labelId={`${args.id}-label`}>
@@ -72,3 +72,63 @@ export const _ControlledSelect: StoryObj<typeof ControlledSelect> = {
     label: 'Select Label',
   },
 };
+
+export const _ControlledMultiSelect: StoryObj<typeof ControlledSelect> = {
+  render: (args) => {
+    const SubmittedValues = () => {
+      const {
+        getValues,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+
+      return isSubmitSuccessful ? (
+        <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+          <Typography variant="h2">Submitted Values</Typography>
+          <pre>{JSON.stringify(getValues(), null, 2)}</pre>
+        </Paper>
+      ) : null;
+    };
+
+    const Actions = () => {
+      const {
+        reset,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+      return (
+        <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+          <Button
+            disabled={!isSubmitSuccessful}
+            children="Reset"
+            color="secondary"
+            onClick={() => reset({ [args.name]: [] })}
+          />
+          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
+        </Grid>
+      );
+    };
+
+    return (
+      <ControlledForm values={{ [args.name]: [] }} onSubmit={(data) => data} noValidate>
+        <FormControl>
+          <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
+          <ControlledSelect {...args} labelId={`${args.id}-label`}>
+            <MenuItem value={1}>Option 1</MenuItem>
+            <MenuItem value={2}>Option 2</MenuItem>
+            <MenuItem value={3}>Option 3</MenuItem>
+            <MenuItem value={4}>Option 4</MenuItem>
+            <MenuItem value={5}>Option 5</MenuItem>
+            <MenuItem value={6}>Option 6</MenuItem>
+          </ControlledSelect>
+          <Actions />
+          <SubmittedValues />
+        </FormControl>
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledMutliSelect',
+    required: 'This is required.',
+    label: 'Select Label',
+    multiple: true,
+  },
+};

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={typeof required === 'object' ? required.value : !!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 />