@availity/mui-controlled-form 0.2.5 → 0.3.0

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 { useFormContext, 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,17 +22,16 @@ export const ControlledDatepicker = ({
   onChange,
   pattern,
   required,
+  rules = {},
   shouldUnregister,
   validate,
   value,
   FieldProps,
   ...rest
 }: ControlledDatepickerProps) => {
-  const { control } = useFormContext();
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={defaultValue}
       rules={{
         deps,
@@ -42,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}

package/src/lib/Input.stories.tsx

@@ -1,60 +1,59 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledInput, ControlledInputProps } from './Input';
-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, InputPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledInput> = {
   title: 'Form Components/Controlled Form/ControlledInput',
   component: ControlledInput,
   tags: ['autodocs'],
+  argTypes: {...AllControllerPropertiesCategorized, ...InputPropsCategorized},
+  parameters: {
+    controls: {
+      exclude: [
+        'className',
+        'defaultChecked',
+        'onError',
+        'ref',
+        'style',
+        'tabIndex'
+      ]
+    }
+  }
 };
 
 export default meta;
 
 export const _ControlledInput: StoryObj<typeof ControlledInput> = {
   render: (args: ControlledInputProps) => {
-    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}>
-        <ControlledInput {...args} />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledInput {...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: {
     name: 'controlledInput',
     required: true,
-    maxLength: { value: 10, message: 'Too long' },
+    rules: { required:'This is required.', maxLength: { value: 10, message: 'Too long' }},
     inputProps: { 'aria-label': 'Input Label' },
   },
 };

package/src/lib/Input.test.tsx

@@ -1,11 +1,12 @@
 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 { ControlledForm } from './ControlledForm';
 import { ControlledInput } from './Input';
+import { useFormContext } from '..';
+import { ControlledForm } from './ControlledForm';
+import { TestForm } from './UtilComponents';
 
 const SubmittedValues = () => {
   const {
@@ -33,11 +34,12 @@ const Actions = () => {
 };
 
 const onSubmit = jest.fn();
+const onSubmitDeprecated = jest.fn();
 
 describe('ControlledInput', () => {
-  test('should render the error styling if an error is returned', async () => {
+  test('Deprecation Check: should render the error styling if an error is returned', async () => {
     const screen = render(
-      <ControlledForm values={{ controlledInput: undefined }} onSubmit={(data) => data}>
+      <ControlledForm values={{ controlledInput: undefined }} onSubmit={onSubmitDeprecated}>
         <ControlledInput
           data-testid="controlledInputWrapper"
           name="controlledInput"
@@ -58,16 +60,16 @@ describe('ControlledInput', () => {
 
     fireEvent.click(screen.getByText('Submit'));
 
-    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+    await waitFor(() => expect(onSubmitDeprecated).toHaveBeenCalledTimes(0));
 
     const muiInputBase = screen.getByTestId('controlledInputWrapper');
 
     await waitFor(() => expect(muiInputBase.classList).toContain('Mui-error'));
   });
 
-  test('should render the error styling if an error is returned', async () => {
+  test('DeprecatedCheck: should not render the error styling if no error is returned', async () => {
     const screen = render(
-      <ControlledForm values={{ controlledInput: undefined }} onSubmit={onSubmit}>
+      <ControlledForm values={{ controlledInput: undefined }} onSubmit={onSubmitDeprecated}>
         <ControlledInput
           name="controlledInput"
           required="This field is required."
@@ -87,6 +89,68 @@ describe('ControlledInput', () => {
 
     fireEvent.click(screen.getByText('Submit'));
 
+    await waitFor(() => expect(onSubmitDeprecated).toHaveBeenCalledTimes(1));
+
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const formValues = JSON.parse(result.innerHTML).controlledInput;
+      expect(formValues).toBe('Input Text');
+    });
+  });
+
+  test('should render the error styling if an error is returned', async () => {
+      const screen = render(
+        <TestForm UseFormOptions={{values: { controlledInput: undefined }}} onSubmit={onSubmit}>
+          <ControlledInput
+            data-testid="controlledInputWrapper"
+            name="controlledInput"
+            rules={{
+              required: "This field is required.",
+              maxLength:{ value: 10, message: 'Too long' }
+            }}
+            inputProps={{
+              'data-testid': 'testInput',
+            }}
+          />
+      </TestForm>
+    );
+
+    const input = screen.getByTestId('testInput');
+
+    fireEvent.change(input, { target: { value: 'This is way too much text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+
+    const muiInputBase = screen.getByTestId('controlledInputWrapper');
+
+    await waitFor(() => expect(muiInputBase.classList).toContain('Mui-error'));
+  });
+
+  test('should not render the error styling if no error is returned', async () => {
+      const screen = render(
+        <TestForm UseFormOptions={{values: { controlledInput: undefined }}} onSubmit={onSubmit}>
+          <ControlledInput
+            data-testid="controlledInputWrapper"
+            name="controlledInput"
+            rules={{
+              required: "This field is required.",
+              maxLength:{ value: 10, message: 'Too long' }
+            }}
+            inputProps={{
+              'data-testid': 'testInput',
+            }}
+          />
+      </TestForm>
+    );
+
+    const input = screen.getByTestId('testInput');
+
+    fireEvent.change(input, { target: { value: 'Input Text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
     await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
 
     const result = screen.getByTestId('result');

package/src/lib/Input.tsx

@@ -1,51 +1,71 @@
 import { Input, InputProps } from '@availity/mui-form-utils';
-import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledInputProps = Omit<InputProps, 'error' | 'name' | 'required'> & { name: string } & RegisterOptions<
-    FieldValues,
-    string
-  >;
+export type ControlledInputProps = Omit<InputProps,
+'onBlur' | 'onChange' | 'value' | 'name' | 'required'
+> & Pick<RegisterOptions<FieldValues, string>,
+'onBlur' | 'onChange' | 'value'
+> & ControllerProps
+//TODO v1 - remove deprecated props
+& Omit<DeprecatedRulesProps, 'required'> & {
+  /** If `true`, will add `aria-required` to `input`.
+   *
+   * @deprecated There has been a collision of properties. The boolean value
+   * to mark the input as required will remain in future versions, but the
+   * required object for `react-hook-form` has been moved to the `rules` prop.
+   */
+  required?: boolean | RegisterOptions['required'];
+};
 
 export const ControlledInput = ({
   name,
-  required,
-  maxLength,
-  minLength,
+  defaultValue,
+  deps,
+  disabled,
   max,
+  maxLength,
   min,
+  minLength,
+  onBlur,
+  onChange,
   pattern,
+  required,
+  rules = {},
+  shouldUnregister,
   validate,
-  setValueAs,
-  disabled,
-  onChange,
-  onBlur,
   value,
-  shouldUnregister,
-  deps,
   ...rest
 }: ControlledInputProps) => {
-  const { register, getFieldState } = useFormContext();
   return (
-    <Input
-      {...rest}
-      error={!!getFieldState(name).error}
-      required={typeof required === 'object' ? required.value : !!required}
-      {...register(name, {
-        required,
+    <Controller
+      name={name}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      rules={{
+        required: typeof required === 'boolean' ? undefined : required,
         maxLength,
         minLength,
         max,
         min,
         pattern,
         validate,
-        setValueAs,
-        disabled,
         onChange,
         onBlur,
         value,
         shouldUnregister,
         deps,
-      })}
+        ...rules,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field, fieldState: { error } }) => (
+        <Input
+          {...rest}
+          {...field}
+          error={!!error}
+          required={!!required}
+        />
+      )}
     />
   );
 };

package/src/lib/OrganizationAutocomplete.stories.tsx

@@ -1,19 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledOrganizationAutocomplete } from './OrganizationAutocomplete';
-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, OrganizationAutocompletePropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledOrganizationAutocomplete> = {
   title: 'Form Components/Controlled Form/Autocomplete/ControlledOrganizationAutocomplete',
   component: ControlledOrganizationAutocomplete,
   tags: ['autodocs'],
-  argTypes: missingRHFprops,
+  argTypes: {...AllControllerPropertiesCategorized, ...OrganizationAutocompletePropsCategorized},
+  parameters: {
+    controls: {
+      exclude: [
+        'max',
+        'maxLength',
+        'min',
+        'minLength'
+      ]
+    }
+  }
 };
 
 export default meta;
@@ -28,45 +37,31 @@ const client = new QueryClient({
 
 export const _ControlledOrganizationAutoComplete: StoryObj<typeof ControlledOrganizationAutocomplete> = {
   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}>
-          <ControlledOrganizationAutocomplete {...args} />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit((data) => data)}>
+            <ControlledOrganizationAutocomplete {...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>
     );
   },
   args: {
     name: 'controlledOrganizationAutocomplete',
-    required: 'This is required.',
+    rules: { required:'This is required.' },
     FieldProps: {
       label: 'Organization Select',
       helperText: 'Select an Organization from the list',

package/src/lib/OrganizationAutocomplete.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 { ControlledOrganizationAutocomplete } from './OrganizationAutocomplete';
-
-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,19 +31,17 @@ describe('ControlledOrganizationAutocomplete', () => {
   test('should loadOptions successfully', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={onSubmit}>
-          <ControlledOrganizationAutocomplete
-            name="controlledOrganizationAutocomplete"
-            FieldProps={{
-              label: 'Organization Select',
-              helperText: 'Select an Organization from the list',
-              placeholder: 'Select...',
-              fullWidth: false,
-            }}
-          />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        <TestForm onSubmit={onSubmit}>
+            <ControlledOrganizationAutocomplete
+              name="controlledOrganizationAutocomplete"
+              FieldProps={{
+                label: 'Organization Select',
+                helperText: 'Select an Organization from the list',
+                placeholder: 'Select...',
+                fullWidth: false,
+              }}
+            />
+        </TestForm>
       </QueryClientProvider>
     );
 
@@ -87,19 +55,17 @@ describe('ControlledOrganizationAutocomplete', () => {
   test('should set the value and submit the form data', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={onSubmit}>
-          <ControlledOrganizationAutocomplete
-            name="controlledOrganizationAutocomplete"
-            FieldProps={{
-              label: 'Organization Select',
-              helperText: 'Select an Organization from the list',
-              placeholder: 'Select...',
-              fullWidth: false,
-            }}
-          />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        <TestForm onSubmit={onSubmit}>
+            <ControlledOrganizationAutocomplete
+              name="controlledOrganizationAutocomplete"
+              FieldProps={{
+                label: 'Organization Select',
+                helperText: 'Select an Organization from the list',
+                placeholder: 'Select...',
+                fullWidth: false,
+              }}
+            />
+        </TestForm>
       </QueryClientProvider>
     );