@availity/mui-controlled-form 0.2.6 → 0.3.0

package/src/lib/Checkbox.test.tsx

@@ -1,57 +1,25 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { FormControl, FormLabel, FormControlLabel, FormGroup } from '@availity/mui-form-utils';
-import { useFormContext } from 'react-hook-form';
-import { Paper } from '@availity/mui-paper';
-import { Typography } from '@availity/mui-typography';
-import { Grid } from '@availity/mui-layout';
-import { Button } from '@availity/mui-button';
-import { ControlledForm } from './ControlledForm';
 import { ControlledCheckbox } from './Checkbox';
-
-const SubmittedValues = () => {
-  const {
-    getValues,
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-
-  return isSubmitSuccessful ? (
-    <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-      <Typography variant="h2">Submitted Values</Typography>
-      <pre data-testid="result">{JSON.stringify(getValues(), null, 2)}</pre>
-    </Paper>
-  ) : null;
-};
-
-const Actions = () => {
-  const {
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-  return (
-    <Grid container direction="row" justifyContent="space-between">
-      <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-    </Grid>
-  );
-};
+import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
 describe('ControlledCheckbox', () => {
   test('should set the value and submit the form data', async () => {
-    const screen = render(
-      <ControlledForm onSubmit={onSubmit} values={{ controlledCheckbox: undefined }}>
-        <FormControl>
-          <FormLabel id="radio-group" component="div">
-            Radio Group
-          </FormLabel>
-          <FormGroup>
-            <FormControlLabel label="Option 1" control={<ControlledCheckbox name="option1" />} />
-            <FormControlLabel label="Option 2" control={<ControlledCheckbox name="option2" />} />
-            <FormControlLabel label="Option 3" control={<ControlledCheckbox name="option3" />} />
-          </FormGroup>
-        </FormControl>
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      const screen = render(
+        <TestForm onSubmit={onSubmit} UseFormOptions={{values: { option1: undefined, option2: undefined, option3: undefined }}}>
+          <FormControl>
+            <FormLabel id="radio-group" component="div">
+              Radio Group
+            </FormLabel>
+            <FormGroup>
+              <FormControlLabel label="Option 1" control={<ControlledCheckbox name="option1" />} />
+              <FormControlLabel label="Option 2" control={<ControlledCheckbox name="option2" />} />
+              <FormControlLabel label="Option 3" control={<ControlledCheckbox name="option3" />} />
+            </FormGroup>
+          </FormControl>
+      </TestForm>
     );
 
     const option1 = screen.getByText('Option 1');

package/src/lib/Checkbox.tsx

@@ -1,21 +1,20 @@
 import { Checkbox, CheckboxProps } from '@availity/mui-checkbox';
-import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledCheckboxProps = CheckboxProps &
-  Omit<
-    RegisterOptions<FieldValues, string>,
-    | 'required'
-    | 'disabled'
-    | 'valueAsNumber'
-    | 'valueAsDate'
-    | 'setValueAs'
-    | 'max'
-    | 'maxLength'
-    | 'min'
-    | 'minLength'
-    | 'pattern'
-  > &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+export type ControlledCheckboxProps = Omit<CheckboxProps,
+  'disabled' | 'onBlur' | 'onChange' | 'value' | 'name'
+> & Pick<RegisterOptions<FieldValues, string>,
+  'disabled' | 'onBlur' | 'onChange' | 'value'
+> & ControllerProps
+//TODO v1 - remove deprecated props
+& Omit<DeprecatedRulesProps,
+| 'required'
+| 'max'
+| 'maxLength'
+| 'min'
+| 'minLength'
+| 'pattern'>;
 
 export const ControlledCheckbox = ({
   name,
@@ -24,8 +23,10 @@ export const ControlledCheckbox = ({
   onBlur,
   value,
   defaultValue = false,
+  rules = {},
   shouldUnregister,
   deps,
+  validate,
   ...rest
 }: ControlledCheckboxProps) => {
   return (
@@ -39,6 +40,8 @@ export const ControlledCheckbox = ({
         value,
         shouldUnregister,
         deps,
+        validate,
+        ...rules,
       }}
       shouldUnregister={shouldUnregister}
       render={({ field }) => (

package/src/lib/CodesAutocomplete.stories.tsx

@@ -1,19 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledCodesAutocomplete } from './CodesAutocomplete';
-import { ControlledForm } from './ControlledForm';
 import { Button } from '@availity/mui-button';
-import { useFormContext } from 'react-hook-form';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { Grid } from '@availity/mui-layout';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { missingRHFprops } from '../../docs/propDefinitions';
+import { AllControllerPropertiesCategorized, CodesAutocompletePropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledCodesAutocomplete> = {
   title: 'Form Components/Controlled Form/Autocomplete/ControlledCodesAutocomplete',
   component: ControlledCodesAutocomplete,
   tags: ['autodocs'],
-  argTypes: missingRHFprops,
+  argTypes: {...AllControllerPropertiesCategorized, ...CodesAutocompletePropsCategorized}
 };
 
 export default meta;
@@ -28,39 +27,25 @@ const client = new QueryClient({
 
 export const _ControlledCodesAutoComplete: StoryObj<typeof ControlledCodesAutocomplete> = {
   render: (args) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
+    const methods = useForm();
 
-      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()} />
-          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-        </Grid>
-      );
-    };
     return (
       <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={(data) => data}>
-          <ControlledCodesAutocomplete {...args} />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit((data) => data)}>
+            <ControlledCodesAutocomplete {...args} />
+            <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+              <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+              <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+            </Grid>
+            { methods?.formState?.isSubmitSuccessful ? (
+              <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+                <Typography variant="h2">Submitted Values</Typography>
+                <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+              </Paper>
+            ) : null }
+          </form>
+        </FormProvider>
       </QueryClientProvider>
     );
   },
@@ -72,8 +57,9 @@ export const _ControlledCodesAutoComplete: StoryObj<typeof ControlledCodesAutoco
       helperText: 'Select a code from the list',
       placeholder: 'Select...',
       fullWidth: false,
+      required: true
     },
     limit: 15,
-    required: 'This is required.',
+    rules: { required:'This is required.' },
   },
 };

package/src/lib/CodesAutocomplete.test.tsx

@@ -1,39 +1,9 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Paper } from '@availity/mui-paper';
-import { Typography } from '@availity/mui-typography';
-import { useFormContext } from 'react-hook-form';
-import { Grid } from '@availity/mui-layout';
-import { Button } from '@availity/mui-button';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { server } from '@availity/mock/src/lib/server';
-import { ControlledForm } from './ControlledForm';
 import { ControlledCodesAutocomplete } from './CodesAutocomplete';
-
-const SubmittedValues = () => {
-  const {
-    getValues,
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-
-  return isSubmitSuccessful ? (
-    <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-      <Typography variant="h2">Submitted Values</Typography>
-      <pre data-testid="result">{JSON.stringify(getValues(), null, 2)}</pre>
-    </Paper>
-  ) : null;
-};
-
-const Actions = () => {
-  const {
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-  return (
-    <Grid container direction="row" justifyContent="space-between">
-      <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-    </Grid>
-  );
-};
+import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
@@ -61,7 +31,7 @@ describe('ControlledAsyncAutocomplete', () => {
   test('should loadOptions successfully', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={onSubmit}>
+        <TestForm onSubmit={onSubmit}>
           <ControlledCodesAutocomplete
             name="controlledCodesAutocomplete"
             list="ABC"
@@ -73,11 +43,9 @@ describe('ControlledAsyncAutocomplete', () => {
             }}
             limit={15}
           />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
-      </QueryClientProvider>
-    );
+      </TestForm>
+    </QueryClientProvider>
+  );
 
     const dropdown = screen.getByRole('combobox');
     fireEvent.click(dropdown);
@@ -87,23 +55,21 @@ describe('ControlledAsyncAutocomplete', () => {
   });
 
   test('should set the value and submit the form data', async () => {
-    const screen = render(
-      <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={onSubmit}>
-          <ControlledCodesAutocomplete
-            name="controlledCodesAutocomplete"
-            list="ABC"
-            FieldProps={{
-              label: 'Code Select',
-              helperText: 'Select a code from the list',
-              placeholder: 'Select...',
-              fullWidth: false,
-            }}
-            limit={15}
-          />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+      const screen = render(
+        <QueryClientProvider client={client}>
+          <TestForm onSubmit={onSubmit}>
+            <ControlledCodesAutocomplete
+              name="controlledCodesAutocomplete"
+              list="ABC"
+              FieldProps={{
+                label: 'Code Select',
+                helperText: 'Select a code from the list',
+                placeholder: 'Select...',
+                fullWidth: false,
+              }}
+              limit={15}
+            />
+        </TestForm>
       </QueryClientProvider>
     );
 

package/src/lib/CodesAutocomplete.tsx

@@ -1,9 +1,14 @@
 import { CodesAutocomplete, CodesAutocompleteProps } from '@availity/mui-autocomplete';
-import { Controller, RegisterOptions, ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps, 'name'> &
-  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps,
+'onBlur' | 'onChange' | 'value' | 'name'
+> & Pick<RegisterOptions<FieldValues, string>,
+'onBlur' | 'onChange' | 'value'
+> & ControllerProps
+//TODO v1 - remove deprecated props
+& DeprecatedRulesProps;
 
 export const ControlledCodesAutocomplete = ({
   name,
@@ -15,6 +20,7 @@ export const ControlledCodesAutocomplete = ({
   onChange,
   pattern,
   required,
+  rules = {},
   shouldUnregister,
   validate,
   value,
@@ -36,14 +42,14 @@ export const ControlledCodesAutocomplete = ({
         shouldUnregister,
         validate,
         value,
+        ...rules,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
+      render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
         <CodesAutocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
-            required: typeof required === 'object' ? required.value : !!required,
             error: !!error,
             helperText: error?.message ? (
               <>
@@ -54,6 +60,7 @@ export const ControlledCodesAutocomplete = ({
             ) : (
               FieldProps?.helperText
             ),
+            inputRef:ref
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/ControlledForm.stories.tsx

@@ -11,6 +11,7 @@ import { ControlledTextField } from './TextField';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
+/** Deprecated. Use `FormProvider` and `useForm` directly. */
 const meta: Meta<typeof ControlledForm> = {
   title: 'Form Components/Controlled Form/ControlledForm',
   component: ControlledForm,

package/src/lib/ControlledForm.tsx

@@ -1,6 +1,7 @@
 import { FormHTMLAttributes } from 'react';
-import { useForm, SubmitHandler, FormProvider, Resolver } from 'react-hook-form';
+import { useForm, SubmitHandler, FormProvider, Resolver, UseFormProps } from 'react-hook-form';
 
+/** @deprecated Use `UseFormProps` directly with `useForm` and `FormProvider` */
 export type ControlledFormProps = {
   /** This function will receive the form data if form validation is successful. */
   onSubmit: SubmitHandler<any>;
@@ -13,6 +14,8 @@ export type ControlledFormProps = {
    * found here: https://github.com/react-hook-form/resolvers#quickstart
    */
   validationResolver?: (schema: unknown) => Resolver;
+  /** Additional react-hook-form `useForm` options, like `defaultValues` and validation `mode`. For more information see the [react-hook-form useForm docs](https://react-hook-form.com/docs/useform) */
+  additionalUseFormOptions?: Omit<UseFormProps, 'values' | 'resolver'>;
 } & FormHTMLAttributes<HTMLFormElement>;
 
 type UseFormOptions = {
@@ -20,8 +23,9 @@ type UseFormOptions = {
   resolver?: Resolver;
 };
 
-export const ControlledForm = ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => {
-  const useFormOptions: UseFormOptions = { values };
+/** @deprecated Use `FormProvider` and `useForm` directly. */
+export const ControlledForm = ({ onSubmit, values, schema, validationResolver, additionalUseFormOptions = {mode: 'onBlur'}, ...rest }: ControlledFormProps) => {
+  const useFormOptions: UseFormOptions = { values, ...additionalUseFormOptions };
   if (schema && validationResolver) {
     useFormOptions.resolver = validationResolver(schema);
   }

package/src/lib/Datepicker.stories.tsx

@@ -1,54 +1,41 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledDatepicker, ControlledDatepickerProps } from './Datepicker';
-import { ControlledForm } from './ControlledForm';
 import { Button } from '@availity/mui-button';
-import { useFormContext } from 'react-hook-form';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { Grid } from '@availity/mui-layout';
+import { AllControllerPropertiesCategorized, DatepickerPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledDatepicker> = {
   title: 'Form Components/Controlled Form/ControlledDatepicker',
   component: ControlledDatepicker,
   tags: ['autodocs'],
+  argTypes: {...AllControllerPropertiesCategorized, ...DatepickerPropsCategorized}
 };
 
 export default meta;
 
 export const _ControlledInput: StoryObj<typeof ControlledDatepicker> = {
   render: (args: ControlledDatepickerProps) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
+    const methods = useForm();
 
-      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()} />
-          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-        </Grid>
-      );
-    };
     return (
-      <ControlledForm values={{ controlledInput: undefined }} onSubmit={(data) => data}>
-        <ControlledDatepicker {...args} />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledDatepicker {...args} />
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          { methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null }
+        </form>
+      </FormProvider>
     );
   },
   args: {

package/src/lib/Datepicker.test.tsx

@@ -1,38 +1,8 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import { useFormContext } from 'react-hook-form';
-import { Paper } from '@availity/mui-paper';
-import { Typography } from '@availity/mui-typography';
-import { Grid } from '@availity/mui-layout';
-import { Button } from '@availity/mui-button';
 import { ThemeProvider } from '@availity/theme-provider';
 import dayjs from 'dayjs';
-import { ControlledForm } from './ControlledForm';
 import { ControlledDatepicker } from './Datepicker';
-
-const SubmittedValues = () => {
-  const {
-    getValues,
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-
-  return isSubmitSuccessful ? (
-    <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-      <Typography variant="h2">Submitted Values</Typography>
-      <pre data-testid="result">{JSON.stringify(getValues(), null, 2)}</pre>
-    </Paper>
-  ) : null;
-};
-
-const Actions = () => {
-  const {
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-  return (
-    <Grid container direction="row" justifyContent="space-between">
-      <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-    </Grid>
-  );
-};
+import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
@@ -40,7 +10,7 @@ describe('Datepicker', () => {
   test('should render successfully and submit selection', async () => {
     const screen = render(
       <ThemeProvider>
-        <ControlledForm values={{ controlledDatepicker: undefined }} onSubmit={onSubmit}>
+        <TestForm UseFormOptions={{values: { controlledDatepicker: null}}} onSubmit={onSubmit}>
           <ControlledDatepicker
             name="controlledDatepicker"
             FieldProps={{
@@ -50,9 +20,7 @@ describe('Datepicker', () => {
               label: 'Date',
             }}
           />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        </TestForm>
       </ThemeProvider>
     );
     expect(screen.getAllByText('Date')).toBeTruthy();

package/src/lib/Datepicker.tsx

@@ -1,9 +1,14 @@
 import { Datepicker, DatepickerProps } from '@availity/mui-datepicker';
-import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledDatepickerProps = DatepickerProps &
-  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+export type ControlledDatepickerProps = Omit<DatepickerProps,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> & Pick<RegisterOptions<FieldValues, string>,
+  'onBlur' | 'onChange' | 'value'
+> & ControllerProps
+//TODO v1 - remove deprecated props
+& DeprecatedRulesProps;
 
 export const ControlledDatepicker = ({
   name,
@@ -17,6 +22,7 @@ export const ControlledDatepicker = ({
   onChange,
   pattern,
   required,
+  rules = {},
   shouldUnregister,
   validate,
   value,
@@ -40,24 +46,28 @@ export const ControlledDatepicker = ({
         shouldUnregister,
         validate,
         value,
+        ...rules,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value }, fieldState: { error } }) => (
+      render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
         <Datepicker
           {...rest}
           FieldProps={{
             ...FieldProps,
-            required: typeof required === 'object' ? required.value : !!required,
             error: !!error,
-            helperText: error?.message ? (
+            helperText: error ? (
               <>
-                {error?.message}
+                {error.message}
                 <br />
                 {FieldProps?.helperText}
               </>
             ) : (
               FieldProps?.helperText
             ),
+            inputRef: ref,
+            inputProps: {
+              onBlur: onBlur
+            },
           }}
           onChange={onChange}
           value={value || null}