@availity/mui-controlled-form 0.3.2 → 1.0.0

package/src/lib/ProviderAutocomplete.test.tsx

@@ -31,18 +31,18 @@ describe('ControlledProviderAutocomplete', () => {
   test('should loadOptions successfully', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <TestForm UseFormOptions={{values: { controlledAutocomplete: null }}} onSubmit={onSubmit}>
-            <ControlledProviderAutocomplete
-              name="controlledProviderAutocomplete"
-              FieldProps={{
-                label: 'Provider Select',
-                helperText: 'Select a Provider from the list',
-                placeholder: 'Select...',
-                fullWidth: false,
-              }}
-              limit={10}
-              customerId="1234"
-            />
+        <TestForm UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+          <ControlledProviderAutocomplete
+            name="controlledProviderAutocomplete"
+            FieldProps={{
+              label: 'Provider Select',
+              helperText: 'Select a Provider from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+            limit={10}
+            customerId="1234"
+          />
         </TestForm>
       </QueryClientProvider>
     );
@@ -55,20 +55,20 @@ describe('ControlledProviderAutocomplete', () => {
   });
 
   test('should set the value and submit the form data', async () => {
-      const screen = render(
-        <QueryClientProvider client={client}>
-          <TestForm UseFormOptions={{values: { controlledAutocomplete: null }}} onSubmit={onSubmit}>
-            <ControlledProviderAutocomplete
-              name="controlledProviderAutocomplete"
-              FieldProps={{
-                label: 'Provider Select',
-                helperText: 'Select a Provider from the list',
-                placeholder: 'Select...',
-                fullWidth: false,
-              }}
-              limit={10}
-              customerId="1234"
-            />
+    const screen = render(
+      <QueryClientProvider client={client}>
+        <TestForm UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+          <ControlledProviderAutocomplete
+            name="controlledProviderAutocomplete"
+            FieldProps={{
+              label: 'Provider Select',
+              helperText: 'Select a Provider from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+            limit={10}
+            customerId="1234"
+          />
         </TestForm>
       </QueryClientProvider>
     );
@@ -91,4 +91,77 @@ describe('ControlledProviderAutocomplete', () => {
       expect(controlledProviderAutocompleteValue.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 UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+              <ControlledProviderAutocomplete
+                name="controlledProviderAutocomplete"
+                FieldProps={{
+                  label: 'Provider Select',
+                  helperText: 'Select a Provider from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                limit={10}
+                customerId="1234"
+                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 UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+              <ControlledProviderAutocomplete
+                name="controlledProviderAutocomplete"
+                FieldProps={{
+                  label: 'Provider Select',
+                  helperText: 'Select a Provider from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                limit={10}
+                customerId="1234"
+                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 UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+              <ControlledProviderAutocomplete
+                name="controlledProviderAutocomplete"
+                FieldProps={{
+                  label: 'Provider Select',
+                  helperText: 'Select a Provider from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                limit={10}
+                customerId="1234"
+                rules={{ required: { value: false, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </QueryClientProvider>
+        );
+
+        expect(screen.queryByText('*')).toBeNull();
+      });
+    });
+  });
 });

package/src/lib/ProviderAutocomplete.tsx

@@ -1,30 +1,21 @@
 import { ProviderAutocomplete, ProviderAutocompleteProps } from '@availity/mui-autocomplete';
 import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-export type ControlledProviderAutocompleteProps = Omit<ProviderAutocompleteProps,
-'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& DeprecatedRulesProps;
+export type ControlledProviderAutocompleteProps = Omit<
+  ProviderAutocompleteProps,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledProviderAutocomplete = ({
   name,
   defaultValue,
-  deps,
-  max,
-  maxLength,
-  min,
-  minLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   FieldProps,
   ...rest
@@ -34,17 +25,9 @@ export const ControlledProviderAutocomplete = ({
       name={name}
       defaultValue={defaultValue}
       rules={{
-        deps,
-        max,
-        maxLength,
-        min,
-        minLength,
         onBlur,
         onChange,
-        pattern,
-        required,
         shouldUnregister,
-        validate,
         value,
         ...rules,
       }}
@@ -53,6 +36,7 @@ export const ControlledProviderAutocomplete = ({
         <ProviderAutocomplete
           {...rest}
           FieldProps={{
+            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
             error: !!error,
             helperText: error?.message ? (

package/src/lib/RadioGroup.tsx

@@ -1,42 +1,22 @@
-import { RadioGroup, RadioGroupProps } from '@availity/mui-form-utils';
+import { FormControlProps, RadioGroup, RadioGroupProps } from '@availity/mui-form-utils';
 import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
 import { FormControl, FormLabel, FormHelperText } from '@availity/mui-form-utils';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
 export type ControlledRadioGroupProps = {
   name: string;
   label: string;
   helperText?: string;
-} & Omit <RadioGroupProps,
-'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& Omit<DeprecatedRulesProps,
-  'max'
-  | 'maxLength'
-  | 'min'
-  | 'minLength'
-  | 'pattern'
-  | 'required'
-  | 'validate'
-> & {
-  /** 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'];
-};
+} & Omit<RadioGroupProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps &
+  Pick<FormControlProps, 'required'>;
 
 export const ControlledRadioGroup = ({
   name,
   helperText,
   label,
   defaultValue,
-  deps,
   onBlur,
   onChange,
   required,
@@ -49,10 +29,14 @@ export const ControlledRadioGroup = ({
     <Controller
       name={name}
       defaultValue={defaultValue}
-      rules={{ deps, onBlur, onChange, required: typeof required === 'boolean' ? undefined : required, shouldUnregister, value, ...rules }}
+      rules={{ onBlur, onChange, shouldUnregister, value, ...rules }}
       shouldUnregister={shouldUnregister}
-      render={({ field: {disabled, ...field}, fieldState: { error } }) => (
-        <FormControl error={!!error} disabled={disabled} required={!!required}>
+      render={({ field: { disabled, ...field }, fieldState: { error } }) => (
+        <FormControl
+          error={!!error}
+          disabled={disabled}
+          required={!!required || (typeof rules.required === 'object' ? rules.required.value : !!rules.required)}
+        >
           <FormLabel>{label}</FormLabel>
           <RadioGroup {...field} {...rest} />
           <FormHelperText>

package/src/lib/Select.tsx

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

package/src/lib/TextField.test.tsx

@@ -1,104 +1,10 @@
 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 { ControlledTextField } from './TextField';
 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('ControlledTextField', () => {
-  test('Deprecated Check: should render the error styling if an error is returned', async () => {
-    const screen = render(
-      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={onSubmitDeprecated}>
-        <ControlledTextField
-          name="controlledTextField"
-          helperText="This is some helper text"
-          placeholder="Name"
-          required="This field is required."
-          maxLength={{ value: 10, message: 'Too long' }}
-          inputProps={{
-            'data-testid': 'testTextField',
-          }}
-        />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
-    );
-
-    const input = screen.getByTestId('testTextField');
-
-    fireEvent.change(input, { target: { value: 'This is way too much text' } });
-
-    fireEvent.click(screen.getByText('Submit'));
-
-    await waitFor(() => expect(onSubmitDeprecated).toHaveBeenCalledTimes(0));
-
-    await waitFor(() => expect(screen.findByText('Too long')).toBeDefined());
-  });
-
-  test('Deprecated Check: should render the error styling if an error is returned', async () => {
-    const screen = render(
-      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={onSubmitDeprecated}>
-        <ControlledTextField
-          name="controlledTextField"
-          helperText="This is some helper text"
-          placeholder="Name"
-          required="This field is required."
-          maxLength={{ value: 10, message: 'Too long' }}
-          inputProps={{
-            'data-testid': 'testTextField',
-          }}
-        />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
-    );
-
-    const input = screen.getByTestId('testTextField');
-
-    fireEvent.change(input, { target: { value: 'Some 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).controlledTextField;
-      expect(formValues).toBe('Some Text');
-    });
-  });
-
   test('should render the error styling if an error is returned', async () => {
     const screen = render(
       <TestForm UseFormOptions={{values: { controlledTextField: undefined }}} onSubmit={onSubmit}>

package/src/lib/TextField.tsx

@@ -1,40 +1,20 @@
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-export type ControlledTextFieldProps = Omit<TextFieldProps,
-'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 required asterisk to `label` and `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 ControlledTextFieldProps = Omit<TextFieldProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledTextField = ({
   name,
   defaultValue,
-  deps,
   disabled,
   helperText,
-  max,
-  maxLength,
-  min,
-  minLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   ...rest
 }: ControlledTextFieldProps) => {
@@ -44,27 +24,19 @@ export const ControlledTextField = ({
       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 : {ref, ...field}, fieldState: { error } }) => (
+      render={({ field: { ref, ...field }, fieldState: { error } }) => (
         <TextField
+          required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...field}
           {...rest}
           inputRef={ref}
-          required={!!required}
           error={!!error}
           helperText={
             error?.message ? (