@availity/mui-controlled-form 0.3.2 → 1.0.0

package/src/lib/CodesAutocomplete.tsx

@@ -1,28 +1,18 @@
 import { CodesAutocomplete, CodesAutocompleteProps } from '@availity/mui-autocomplete';
 import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps,
-'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& DeprecatedRulesProps;
+export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledCodesAutocomplete = ({
   name,
   defaultValue,
-  deps,
-  max,
-  maxLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   FieldProps,
   ...rest
@@ -32,15 +22,9 @@ export const ControlledCodesAutocomplete = ({
       name={name}
       defaultValue={defaultValue}
       rules={{
-        deps,
-        max,
-        maxLength,
         onBlur,
         onChange,
-        pattern,
-        required,
         shouldUnregister,
-        validate,
         value,
         ...rules,
       }}
@@ -49,6 +33,7 @@ export const ControlledCodesAutocomplete = ({
         <CodesAutocomplete
           {...rest}
           FieldProps={{
+            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
             error: !!error,
             helperText: error?.message ? (
@@ -60,7 +45,7 @@ export const ControlledCodesAutocomplete = ({
             ) : (
               FieldProps?.helperText
             ),
-            inputRef:ref
+            inputRef: ref,
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/Datepicker.test.tsx

@@ -10,7 +10,7 @@ describe('Datepicker', () => {
   test('should render successfully and submit selection', async () => {
     const screen = render(
       <ThemeProvider>
-        <TestForm UseFormOptions={{values: { controlledDatepicker: null}}} onSubmit={onSubmit}>
+        <TestForm UseFormOptions={{ values: { controlledDatepicker: null } }} onSubmit={onSubmit}>
           <ControlledDatepicker
             name="controlledDatepicker"
             FieldProps={{
@@ -38,4 +38,71 @@ describe('Datepicker', () => {
       expect(dayjs(controlledDatepickerValue).isValid()).toBeTruthy();
     });
   }, 10000);
+
+  describe('when using rules', () => {
+    describe('when required', () => {
+      test('should indicate it is required when passing a string', async () => {
+        const screen = render(
+          <ThemeProvider>
+            <TestForm UseFormOptions={{ values: { controlledDatepicker: null } }} onSubmit={onSubmit}>
+              <ControlledDatepicker
+                name="controlledDatepicker"
+                FieldProps={{
+                  fullWidth: false,
+                  helperText: 'Help text for the field',
+                  helpTopicId: '1234',
+                  label: 'Date',
+                }}
+                rules={{ required: 'This field is required' }}
+              />
+            </TestForm>
+          </ThemeProvider>
+        );
+
+        expect(screen.getByText('*')).toBeDefined();
+      });
+
+      test('should indicate it is required when passing an object with true', async () => {
+        const screen = render(
+          <ThemeProvider>
+            <TestForm UseFormOptions={{ values: { controlledDatepicker: null } }} onSubmit={onSubmit}>
+              <ControlledDatepicker
+                name="controlledDatepicker"
+                FieldProps={{
+                  fullWidth: false,
+                  helperText: 'Help text for the field',
+                  helpTopicId: '1234',
+                  label: 'Date',
+                }}
+                rules={{ required: { value: true, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </ThemeProvider>
+        );
+
+        expect(screen.getByText('*')).toBeDefined();
+      });
+
+      test('should not indicate it is required when passing an object with false', async () => {
+        const screen = render(
+          <ThemeProvider>
+            <TestForm UseFormOptions={{ values: { controlledDatepicker: null } }} onSubmit={onSubmit}>
+              <ControlledDatepicker
+                name="controlledDatepicker"
+                FieldProps={{
+                  fullWidth: false,
+                  helperText: 'Help text for the field',
+                  helpTopicId: '1234',
+                  label: 'Date',
+                }}
+                rules={{ required: { value: false, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </ThemeProvider>
+        );
+
+        expect(screen.queryByText('*')).toBeNull();
+      });
+    });
+  });
 });

package/src/lib/Datepicker.tsx

@@ -1,30 +1,18 @@
 import { Datepicker, DatepickerProps } from '@availity/mui-datepicker';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-export type ControlledDatepickerProps = Omit<DatepickerProps,
-  'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-  'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& DeprecatedRulesProps;
+export type ControlledDatepickerProps = Omit<DatepickerProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledDatepicker = ({
   name,
   defaultValue,
-  deps,
-  max,
-  maxLength,
-  min,
-  minLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   FieldProps,
   ...rest
@@ -34,17 +22,9 @@ export const ControlledDatepicker = ({
       name={name}
       defaultValue={defaultValue}
       rules={{
-        deps,
-        max,
-        maxLength,
-        min,
-        minLength,
         onBlur,
         onChange,
-        pattern,
-        required,
         shouldUnregister,
-        validate,
         value,
         ...rules,
       }}
@@ -53,6 +33,7 @@ export const ControlledDatepicker = ({
         <Datepicker
           {...rest}
           FieldProps={{
+            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
             error: !!error,
             helperText: error ? (
@@ -66,7 +47,7 @@ export const ControlledDatepicker = ({
             ),
             inputRef: ref,
             inputProps: {
-              onBlur: onBlur
+              onBlur: onBlur,
             },
           }}
           onChange={onChange}

package/src/lib/Input.test.tsx

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

package/src/lib/Input.tsx

@@ -1,39 +1,19 @@
 import { Input, InputProps } from '@availity/mui-form-utils';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-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 type ControlledInputProps = Omit<InputProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledInput = ({
   name,
   defaultValue,
-  deps,
   disabled,
-  max,
-  maxLength,
-  min,
-  minLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   ...rest
 }: ControlledInputProps) => {
@@ -43,27 +23,19 @@ export const ControlledInput = ({
       defaultValue={defaultValue}
       disabled={disabled}
       rules={{
-        required: typeof required === 'boolean' ? undefined : required,
-        maxLength,
-        minLength,
-        max,
-        min,
-        pattern,
-        validate,
         onChange,
         onBlur,
         value,
         shouldUnregister,
-        deps,
         ...rules,
       }}
       shouldUnregister={shouldUnregister}
       render={({ field, fieldState: { error } }) => (
         <Input
+          required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...rest}
           {...field}
           error={!!error}
-          required={!!required}
         />
       )}
     />

package/src/lib/OrganizationAutocomplete.test.tsx

@@ -32,15 +32,15 @@ describe('ControlledOrganizationAutocomplete', () => {
     const screen = render(
       <QueryClientProvider client={client}>
         <TestForm onSubmit={onSubmit}>
-            <ControlledOrganizationAutocomplete
-              name="controlledOrganizationAutocomplete"
-              FieldProps={{
-                label: 'Organization Select',
-                helperText: 'Select an Organization from the list',
-                placeholder: 'Select...',
-                fullWidth: false,
-              }}
-            />
+          <ControlledOrganizationAutocomplete
+            name="controlledOrganizationAutocomplete"
+            FieldProps={{
+              label: 'Organization Select',
+              helperText: 'Select an Organization from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+          />
         </TestForm>
       </QueryClientProvider>
     );
@@ -56,15 +56,15 @@ describe('ControlledOrganizationAutocomplete', () => {
     const screen = render(
       <QueryClientProvider client={client}>
         <TestForm onSubmit={onSubmit}>
-            <ControlledOrganizationAutocomplete
-              name="controlledOrganizationAutocomplete"
-              FieldProps={{
-                label: 'Organization Select',
-                helperText: 'Select an Organization from the list',
-                placeholder: 'Select...',
-                fullWidth: false,
-              }}
-            />
+          <ControlledOrganizationAutocomplete
+            name="controlledOrganizationAutocomplete"
+            FieldProps={{
+              label: 'Organization Select',
+              helperText: 'Select an Organization from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+          />
         </TestForm>
       </QueryClientProvider>
     );
@@ -88,4 +88,71 @@ describe('ControlledOrganizationAutocomplete', () => {
       expect(controlledCodesAutocompleteValue.id).toBeDefined();
     });
   });
+
+  describe('when using rules', () => {
+    describe('when required', () => {
+      test('should indicate it is required when passing a string', async () => {
+        const screen = render(
+          <QueryClientProvider client={client}>
+            <TestForm onSubmit={onSubmit}>
+              <ControlledOrganizationAutocomplete
+                name="controlledOrganizationAutocomplete"
+                FieldProps={{
+                  label: 'Organization Select',
+                  helperText: 'Select an Organization from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                rules={{ required: 'This field is required' }}
+              />
+            </TestForm>
+          </QueryClientProvider>
+        );
+
+        expect(screen.getByText('*')).toBeDefined();
+      });
+
+      test('should indicate it is required when passing an object with true', async () => {
+        const screen = render(
+          <QueryClientProvider client={client}>
+            <TestForm onSubmit={onSubmit}>
+              <ControlledOrganizationAutocomplete
+                name="controlledOrganizationAutocomplete"
+                FieldProps={{
+                  label: 'Organization Select',
+                  helperText: 'Select an Organization from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                rules={{ required: { value: true, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </QueryClientProvider>
+        );
+
+        expect(screen.getByText('*')).toBeDefined();
+      });
+
+      test('should not indicate it is required when passing an object with false', async () => {
+        const screen = render(
+          <QueryClientProvider client={client}>
+            <TestForm onSubmit={onSubmit}>
+              <ControlledOrganizationAutocomplete
+                name="controlledOrganizationAutocomplete"
+                FieldProps={{
+                  label: 'Organization Select',
+                  helperText: 'Select an Organization from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                rules={{ required: { value: false, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </QueryClientProvider>
+        );
+
+        expect(screen.queryByText('*')).toBeNull();
+      });
+    });
+  });
 });

package/src/lib/OrganizationAutocomplete.tsx

@@ -1,27 +1,18 @@
 import { OrganizationAutocomplete, OrgAutocompleteProps } from '@availity/mui-autocomplete';
 import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-export type ControlledOrgAutocompleteProps = Omit<OrgAutocompleteProps,
-'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& Omit<DeprecatedRulesProps, 'max' | 'maxLength' | 'min' | 'minLength'
->;
+export type ControlledOrgAutocompleteProps = Omit<OrgAutocompleteProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledOrganizationAutocomplete = ({
   name,
   defaultValue,
-  deps,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   FieldProps,
   ...rest
@@ -31,13 +22,9 @@ export const ControlledOrganizationAutocomplete = ({
       name={name}
       defaultValue={defaultValue}
       rules={{
-        deps,
         onBlur,
         onChange,
-        pattern,
-        required,
         shouldUnregister,
-        validate,
         value,
         ...rules,
       }}
@@ -46,6 +33,7 @@ export const ControlledOrganizationAutocomplete = ({
         <OrganizationAutocomplete
           {...rest}
           FieldProps={{
+            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
             error: !!error,
             helperText: error?.message ? (
@@ -57,7 +45,7 @@ export const ControlledOrganizationAutocomplete = ({
             ) : (
               FieldProps?.helperText
             ),
-            inputRef:ref
+            inputRef: ref,
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {