@availity/mui-controlled-form 0.2.6 → 0.3.0

package/src/lib/Select.tsx

@@ -1,26 +1,40 @@
 import { Select, SelectProps } from '@availity/mui-form-utils';
-import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledSelectProps = Omit<SelectProps, 'error' | 'required'> &
-  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+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 const ControlledSelect = ({
   name,
-  required,
-  maxLength,
-  minLength,
+  defaultValue,
+  deps,
+  disabled,
   max,
+  maxLength,
   min,
+  minLength,
+  onBlur,
+  onChange,
   pattern,
+  required,
+  rules = {},
+  shouldUnregister,
   validate,
-  disabled,
-  onChange,
-  onBlur,
   value,
-  defaultValue,
-  shouldUnregister,
-  deps,
   ...rest
 }: ControlledSelectProps) => {
   return (
@@ -29,7 +43,7 @@ export const ControlledSelect = ({
       defaultValue={defaultValue}
       disabled={disabled}
       rules={{
-        required,
+        required: typeof required === 'boolean' ? undefined : required,
         maxLength,
         minLength,
         max,
@@ -41,6 +55,7 @@ export const ControlledSelect = ({
         value,
         shouldUnregister,
         deps,
+        ...rules,
       }}
       shouldUnregister={shouldUnregister}
       render={({ field, fieldState: { error } }) => (
@@ -48,7 +63,7 @@ export const ControlledSelect = ({
           {...rest}
           {...field}
           error={!!error}
-          required={typeof required === 'object' ? required.value : !!required}
+          required={!!required}
         />
       )}
     />

package/src/lib/TextField.stories.tsx

@@ -1,19 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledTextField, ControlledTextFieldProps } from './TextField';
-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, TextFieldPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledTextField> = {
   title: 'Form Components/Controlled Form/ControlledTextField',
   component: ControlledTextField,
   tags: ['autodocs'],
   argTypes: {
+    ...AllControllerPropertiesCategorized,
+    ...TextFieldPropsCategorized,
     helperText: {
       type: 'string',
+      table: { category: 'Input Props' }
     },
   },
 };
@@ -22,51 +25,35 @@ export default meta;
 
 export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
   render: (args: ControlledTextFieldProps) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
+    const methods = useForm({values:{ [args.name]: '' }});
 
-      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}>
-        <ControlledTextField {...args} />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledTextField {...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: 'controlledTextField',
     helperText: 'This is some helper text',
     placeholder: 'Name',
-    required: 'This field is required.',
-    maxLength: { value: 10, message: 'Too long' },
+    required: true,
+    rules: {
+      required: 'This field is required.',
+      maxLength: { value: 10, message: 'Too long' }
+    },
     label: 'TextField Label',
   },
 };

package/src/lib/TextField.test.tsx

@@ -6,6 +6,7 @@ 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 {
@@ -33,11 +34,12 @@ const Actions = () => {
 };
 
 const onSubmit = jest.fn();
+const onSubmitDeprecated = jest.fn();
 
 describe('ControlledTextField', () => {
-  test('should render the error styling if an error is returned', async () => {
+  test('Deprecated Check: should render the error styling if an error is returned', async () => {
     const screen = render(
-      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={(data) => data}>
+      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={onSubmitDeprecated}>
         <ControlledTextField
           name="controlledTextField"
           helperText="This is some helper text"
@@ -59,14 +61,14 @@ describe('ControlledTextField', () => {
 
     fireEvent.click(screen.getByText('Submit'));
 
-    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+    await waitFor(() => expect(onSubmitDeprecated).toHaveBeenCalledTimes(0));
 
     await waitFor(() => expect(screen.findByText('Too long')).toBeDefined());
   });
 
-  test('should render the error styling if an error is returned', async () => {
+  test('Deprecated Check: should render the error styling if an error is returned', async () => {
     const screen = render(
-      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={onSubmit}>
+      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={onSubmitDeprecated}>
         <ControlledTextField
           name="controlledTextField"
           helperText="This is some helper text"
@@ -88,6 +90,70 @@ describe('ControlledTextField', () => {
 
     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}>
+        <ControlledTextField
+          name="controlledTextField"
+          helperText="This is some helper text"
+          placeholder="Name"
+          rules= {{
+            required:"This field is required.",
+            maxLength:{ value: 10, message: 'Too long' }
+
+          }}
+          inputProps={{
+            'data-testid': 'testTextField',
+          }}
+        />
+      </TestForm>
+    );
+
+    const input = screen.getByTestId('testTextField');
+
+    fireEvent.change(input, { target: { value: 'This is way too much text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+
+    await waitFor(() => expect(screen.findByText('Too long')).toBeDefined());
+  });
+
+  test('should not render the error styling if no error is returned', async () => {
+    const screen = render(
+      <TestForm UseFormOptions={{values: { controlledTextField: undefined }}} onSubmit={onSubmit}>
+        <ControlledTextField
+          name="controlledTextField"
+          helperText="This is some helper text"
+          placeholder="Name"
+          rules= {{
+            required:"This field is required.",
+            maxLength:{ value: 10, message: 'Too long' }
+
+          }}
+          inputProps={{
+            'data-testid': 'testTextField',
+          }}
+        />
+      </TestForm>
+    );
+
+    const input = screen.getByTestId('testTextField');
+
+    fireEvent.change(input, { target: { value: 'Some Text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
     await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
 
     const result = screen.getByTestId('result');

package/src/lib/TextField.tsx

@@ -1,27 +1,41 @@
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
-import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledTextFieldProps = Omit<TextFieldProps, 'required'> &
-  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+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 const ControlledTextField = ({
   name,
+  defaultValue,
+  deps,
+  disabled,
   helperText,
-  required,
-  maxLength,
-  minLength,
   max,
+  maxLength,
   min,
+  minLength,
+  onBlur,
+  onChange,
   pattern,
+  required,
+  rules = {},
+  shouldUnregister,
   validate,
-  disabled,
-  defaultValue,
-  onChange,
-  onBlur,
   value,
-  shouldUnregister,
-  deps,
   ...rest
 }: ControlledTextFieldProps) => {
   return (
@@ -30,7 +44,7 @@ export const ControlledTextField = ({
       defaultValue={defaultValue}
       disabled={disabled}
       rules={{
-        required,
+        required: typeof required === 'boolean' ? undefined : required,
         maxLength,
         minLength,
         max,
@@ -42,13 +56,14 @@ export const ControlledTextField = ({
         value,
         shouldUnregister,
         deps,
+        ...rules,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field, fieldState: { error } }) => (
+      render={({ field : {ref, ...field}, fieldState: { error } }) => (
         <TextField
-          {...rest}
           {...field}
-          required={typeof required === 'object' ? required.value : !!required}
+          {...rest}
+          inputRef={ref}
           error={!!error}
           helperText={
             error?.message ? (