@availity/mui-controlled-form 0.2.6 → 0.3.0

package/src/lib/ProviderAutocomplete.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 { ControlledProviderAutocomplete } from './ProviderAutocomplete';
-
-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,21 +31,19 @@ describe('ControlledProviderAutocomplete', () => {
   test('should loadOptions successfully', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <ControlledForm values={{ controlledAutocomplete: undefined }} onSubmit={(data) => data}>
-          <ControlledProviderAutocomplete
-            name="controlledProviderAutocomplete"
-            FieldProps={{
-              label: 'Provider Select',
-              helperText: 'Select a Provider from the list',
-              placeholder: 'Select...',
-              fullWidth: false,
-            }}
-            limit={10}
-            customerId="1234"
-          />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        <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>
     );
 
@@ -87,23 +55,21 @@ describe('ControlledProviderAutocomplete', () => {
   });
 
   test('should set the value and submit the form data', async () => {
-    const screen = render(
-      <QueryClientProvider client={client}>
-        <ControlledForm values={{ controlledAutocomplete: undefined }} onSubmit={onSubmit}>
-          <ControlledProviderAutocomplete
-            name="controlledProviderAutocomplete"
-            FieldProps={{
-              label: 'Provider Select',
-              helperText: 'Select a Provider from the list',
-              placeholder: 'Select...',
-              fullWidth: false,
-            }}
-            limit={10}
-            customerId="1234"
-          />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+      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>
     );
 

package/src/lib/ProviderAutocomplete.tsx

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

package/src/lib/RadioGroup.stories.tsx

@@ -1,59 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledRadioGroup, ControlledRadioGroupProps } from './RadioGroup';
-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 { FormControlLabel, Radio } from '@availity/mui-form-utils';
 import { Grid } from '@availity/mui-layout';
+import { AllControllerPropertiesCategorized, RadioGroupPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledRadioGroup> = {
   title: 'Form Components/Controlled Form/ControlledRadioGroup',
   component: ControlledRadioGroup,
   tags: ['autodocs'],
+  argTypes: {
+    ...AllControllerPropertiesCategorized,
+    ...RadioGroupPropsCategorized,
+    required: {
+      table: { category: 'Input Props'}
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'max',
+        'maxLength',
+        'min',
+        'minLength',
+        'pattern',
+        'validate'
+      ]
+    }
+  }
 };
 
 export default meta;
 
 export const _ControlledRadioGroup: StoryObj<typeof ControlledRadioGroup> = {
   render: (args: ControlledRadioGroupProps) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
-
-      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 methods = useForm();
 
-    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 onSubmit={(data) => data} values={{ controlledRadioGroup: 'N/A' }}>
-        <ControlledRadioGroup {...args}>
-          <FormControlLabel control={<Radio />} label="N/A" value="N/A" />
-          <FormControlLabel control={<Radio />} label="Yes" value="Yes" />
-          <FormControlLabel control={<Radio />} label="No" value="No" />
-        </ControlledRadioGroup>
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledRadioGroup {...args}>
+            <FormControlLabel control={<Radio />} label="N/A" value="N/A" />
+            <FormControlLabel control={<Radio />} label="Yes" value="Yes" />
+            <FormControlLabel control={<Radio />} label="No" value="No" />
+          </ControlledRadioGroup>
+          <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/RadioGroup.test.tsx

@@ -1,52 +1,20 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { FormControlLabel, Radio } 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 { ControlledRadioGroup } from './RadioGroup';
-
-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('ControlledRadioGroup', () => {
   test('should set the value and submit the form data', async () => {
     const screen = render(
-      <ControlledForm onSubmit={onSubmit} values={{ controlledRadioGroup: undefined }}>
+      <TestForm UseFormOptions={{values: { controlledRadioGroup: undefined }}} onSubmit={onSubmit}>
         <ControlledRadioGroup name="controlledRadioGroup" label="Radio Group" value="N/A">
           <FormControlLabel control={<Radio />} label="N/A" value="N/A" />
           <FormControlLabel control={<Radio />} label="Yes" value="Yes" />
           <FormControlLabel control={<Radio />} label="No" value="No" />
         </ControlledRadioGroup>
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      </TestForm>
     );
 
     const option1 = screen.getByDisplayValue('Yes');

package/src/lib/RadioGroup.tsx

@@ -1,25 +1,35 @@
 import { RadioGroup, RadioGroupProps } from '@availity/mui-form-utils';
-import { ControllerProps, Controller, RegisterOptions, FieldValues } from 'react-hook-form';
+import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
 import { FormControl, FormLabel, FormHelperText } from '@availity/mui-form-utils';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledRadioGroupProps = RadioGroupProps & {
+export type ControlledRadioGroupProps = {
   name: string;
   label: string;
   helperText?: string;
-} & Omit<
-    RegisterOptions<FieldValues, string>,
-    | 'disabled'
-    | 'valueAsNumber'
-    | 'valueAsDate'
-    | 'setValueAs'
-    | 'max'
-    | 'maxLength'
-    | 'min'
-    | 'minLength'
-    | 'pattern'
-    | 'validate'
-  > &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+} & 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'];
+};
 
 export const ControlledRadioGroup = ({
   name,
@@ -30,6 +40,7 @@ export const ControlledRadioGroup = ({
   onBlur,
   onChange,
   required,
+  rules = {},
   shouldUnregister,
   value,
   ...rest
@@ -38,11 +49,11 @@ export const ControlledRadioGroup = ({
     <Controller
       name={name}
       defaultValue={defaultValue}
-      rules={{ deps, onBlur, onChange, required, shouldUnregister, value }}
+      rules={{ deps, onBlur, onChange, required: typeof required === 'boolean' ? undefined : required, shouldUnregister, value, ...rules }}
       shouldUnregister={shouldUnregister}
-      render={({ field, fieldState: { error } }) => (
-        <FormControl error={!!error}>
-          <FormLabel required={typeof required === 'object' ? required.value : !!required}>{label}</FormLabel>
+      render={({ field: {disabled, ...field}, fieldState: { error } }) => (
+        <FormControl error={!!error} disabled={disabled} required={!!required}>
+          <FormLabel>{label}</FormLabel>
           <RadioGroup {...field} {...rest} />
           <FormHelperText>
             {error?.message ? (

package/src/lib/Select.stories.tsx

@@ -1,133 +1,106 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledSelect } from './Select';
-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 { MenuItem } from '@availity/mui-menu';
 import { FormControl, FormLabel } from '@availity/mui-form-utils';
+import { AllControllerPropertiesCategorized, SelectPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledSelect> = {
   title: 'Form Components/Controlled Form/ControlledSelect',
   component: ControlledSelect,
   tags: ['autodocs'],
+  argTypes: {...AllControllerPropertiesCategorized, ...SelectPropsCategorized},
+  parameters: {
+    controls: {
+      exclude: [
+        'className',
+        'defaultChecked',
+        'onError',
+        'ref',
+        'style',
+        'tabIndex'
+      ]
+    }
+  }
 };
 
 export default meta;
 
 export const _ControlledSelect: StoryObj<typeof ControlledSelect> = {
   render: (args) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
-
-      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>
-      );
-    };
+    const methods = useForm();
 
     return (
-      <ControlledForm values={{ [args.name]: '' }} onSubmit={(data) => data} noValidate>
-        <FormControl>
-          <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
-          <ControlledSelect {...args} labelId={`${args.id}-label`}>
-            <MenuItem value={1}>Option 1</MenuItem>
-            <MenuItem value={2}>Option 2</MenuItem>
-            <MenuItem value={3}>Option 3</MenuItem>
-          </ControlledSelect>
-          <Actions />
-          <SubmittedValues />
-        </FormControl>
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <FormControl>
+            <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
+            <ControlledSelect {...args} labelId={`${args.id}-label`}>
+              <MenuItem value={1}>Option 1</MenuItem>
+              <MenuItem value={2}>Option 2</MenuItem>
+              <MenuItem value={3}>Option 3</MenuItem>
+            </ControlledSelect>
+          </FormControl>
+          <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: 'controlledSelect',
-    required: 'This is required.',
+    required: true,
+    rules: { required:'This is required.' },
     label: 'Select Label',
   },
 };
 
 export const _ControlledMultiSelect: StoryObj<typeof ControlledSelect> = {
   render: (args) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
-
-      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>
-      );
-    };
+    const methods = useForm({values:{ [args.name]: [] }});
 
     return (
-      <ControlledForm values={{ [args.name]: [] }} onSubmit={(data) => data} noValidate>
-        <FormControl>
-          <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
-          <ControlledSelect {...args} labelId={`${args.id}-label`}>
-            <MenuItem value={1}>Option 1</MenuItem>
-            <MenuItem value={2}>Option 2</MenuItem>
-            <MenuItem value={3}>Option 3</MenuItem>
-            <MenuItem value={4}>Option 4</MenuItem>
-            <MenuItem value={5}>Option 5</MenuItem>
-            <MenuItem value={6}>Option 6</MenuItem>
-          </ControlledSelect>
-          <Actions />
-          <SubmittedValues />
-        </FormControl>
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <FormControl>
+            <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
+            <ControlledSelect {...args} labelId={`${args.id}-label`}>
+              <MenuItem value={1}>Option 1</MenuItem>
+              <MenuItem value={2}>Option 2</MenuItem>
+              <MenuItem value={3}>Option 3</MenuItem>
+              <MenuItem value={4}>Option 4</MenuItem>
+              <MenuItem value={5}>Option 5</MenuItem>
+              <MenuItem value={6}>Option 6</MenuItem>
+            </ControlledSelect>
+          </FormControl>
+          <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>
+          <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+            <Typography variant="h2">Submitted Values</Typography>
+            <pre>{JSON.stringify(methods.getValues(), null, 2)}</pre>
+          </Paper>
+        </form>
+      </FormProvider>
     );
   },
   args: {
     name: 'controlledMutliSelect',
-    required: 'This is required.',
+    required: true,
+    rules: { required:'This is required.' },
     label: 'Select Label',
     multiple: true,
   },

package/src/lib/Select.test.tsx

@@ -1,52 +1,24 @@
 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 { ControlledSelect } from './Select';
 import { MenuItem } from '@availity/mui-menu';
-
-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('ControlledSelect', () => {
   test('should render the error styling if an error is returned', async () => {
     const screen = render(
-      <ControlledForm values={{ controlledSelect: undefined }} onSubmit={onSubmit}>
-        <ControlledSelect name="controlledSelect">
-          <MenuItem value={1}>Option 1</MenuItem>
-          <MenuItem value={2}>Option 2</MenuItem>
-          <MenuItem value={3}>Option 3</MenuItem>
-        </ControlledSelect>
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <TestForm UseFormOptions={{values: { controlledSelect: undefined }}} onSubmit={onSubmit}>
+          <ControlledSelect name="controlledSelect">
+            <MenuItem value={1}>Option 1</MenuItem>
+            <MenuItem value={2}>Option 2</MenuItem>
+            <MenuItem value={3}>Option 3</MenuItem>
+          </ControlledSelect>
+      </TestForm>
     );
 
     const dropdown = screen.getByRole('combobox');