@availity/mui-controlled-form 0.3.2 → 1.0.0

package/{introduction.stories.mdx → introduction.mdx}

@@ -1,7 +1,10 @@
 import { Markdown } from '@storybook/blocks';
 import { Meta } from '@storybook/addon-docs';
 import ReadMe from './README.md?raw';
+import CHANGELOG from './CHANGELOG.md?raw';
 
 <Meta title="Form Components/Controlled Form/Introduction" />
 
 <Markdown>{ReadMe}</Markdown>
+
+<Markdown>{CHANGELOG}</Markdown>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "0.3.2",
+  "version": "1.0.0",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,32 +40,32 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-autocomplete": "^0.10.1",
-    "@availity/mui-checkbox": "^0.3.0",
-    "@availity/mui-datepicker": "^0.6.2",
-    "@availity/mui-form-utils": "^0.17.1",
-    "@availity/mui-textfield": "^0.7.1",
-    "react-hook-form": "^7.51.3"
+    "@availity/mui-autocomplete": "^1.0.0",
+    "@availity/mui-checkbox": "^1.0.0",
+    "@availity/mui-datepicker": "^1.0.0",
+    "@availity/mui-form-utils": "^1.0.0",
+    "@availity/mui-textfield": "^1.0.0",
+    "react-hook-form": "^7.54.2"
   },
   "devDependencies": {
-    "@availity/api-axios": "^9.0.6",
-    "@availity/mui-button": "^0.7.0",
-    "@availity/mui-layout": "^0.3.0",
-    "@availity/mui-menu": "^0.3.0",
-    "@availity/mui-paper": "^0.2.0",
-    "@availity/mui-typography": "^0.3.0",
-    "@hookform/resolvers": "^3.10.0",
-    "@mui/material": "^5.15.15",
+    "@availity/api-axios": "^10.0.0",
+    "@availity/mui-button": "^1.0.0",
+    "@availity/mui-layout": "^1.0.0",
+    "@availity/mui-menu": "^1.0.0",
+    "@availity/mui-paper": "^1.0.0",
+    "@availity/mui-typography": "^1.0.0",
+    "@hookform/resolvers": "^4.0.0",
+    "@mui/material": "^6.4.5",
     "@tanstack/react-query": "^4.36.1",
     "dayjs": "^1.11.13",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "^5.4.5",
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },
   "publishConfig": {

package/src/index.ts

@@ -2,7 +2,6 @@ export * from './/lib/AsyncAutocomplete';
 export * from './lib/Autocomplete';
 export * from './lib/Checkbox';
 export * from './lib/CodesAutocomplete';
-export * from './lib/ControlledForm';
 export * from './lib/Datepicker';
 export * from './lib/Input';
 export * from './lib/OrganizationAutocomplete';

package/src/lib/AsyncAutocomplete.test.tsx

@@ -66,17 +66,17 @@ describe('ControlledAsyncAutocomplete', () => {
   });
 
   test('should loadOptions successfully', async () => {
-      const screen = render(
-        <QueryClientProvider client={client}>
-          <TestForm UseFormOptions={{values: { controlledAutocomplete: undefined }}} onSubmit={onSubmit}>
-            <ControlledAsyncAutocomplete
-              name="controlledAsyncAutocomplete"
-              FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
-              getOptionLabel={(val: Option) => val.label}
-              loadOptions={loadOptions}
-              limit={10}
-              queryKey="example"
-            />
+    const screen = render(
+      <QueryClientProvider client={client}>
+        <TestForm UseFormOptions={{ values: { controlledAutocomplete: undefined } }} onSubmit={onSubmit}>
+          <ControlledAsyncAutocomplete
+            name="controlledAsyncAutocomplete"
+            FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
+            getOptionLabel={(val: Option) => val.label}
+            loadOptions={loadOptions}
+            limit={10}
+            queryKey="example"
+          />
         </TestForm>
       </QueryClientProvider>
     );
@@ -91,7 +91,7 @@ describe('ControlledAsyncAutocomplete', () => {
   test('should set the value and submit the form data', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <TestForm UseFormOptions={{values: { controlledAutocomplete: undefined }}} onSubmit={onSubmit}>
+        <TestForm UseFormOptions={{ values: { controlledAutocomplete: undefined } }} onSubmit={onSubmit}>
           <ControlledAsyncAutocomplete
             name="controlledAsyncAutocomplete"
             FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
@@ -100,9 +100,9 @@ describe('ControlledAsyncAutocomplete', () => {
             limit={10}
             queryKey="example"
           />
-      </TestForm>
-    </QueryClientProvider>
-  );
+        </TestForm>
+      </QueryClientProvider>
+    );
 
     const dropdown = screen.getByRole('combobox');
     fireEvent.click(dropdown);
@@ -123,4 +123,68 @@ describe('ControlledAsyncAutocomplete', () => {
       expect(controlledAsyncAutocompleteValue.id).toBeDefined(); // This is a unique id
     });
   });
-});
+
+  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: undefined } }} onSubmit={onSubmit}>
+              <ControlledAsyncAutocomplete
+                name="controlledAsyncAutocomplete"
+                FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
+                getOptionLabel={(val: Option) => val.label}
+                loadOptions={loadOptions}
+                limit={10}
+                queryKey="example"
+                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: undefined } }} onSubmit={onSubmit}>
+              <ControlledAsyncAutocomplete
+                name="controlledAsyncAutocomplete"
+                FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
+                getOptionLabel={(val: Option) => val.label}
+                loadOptions={loadOptions}
+                limit={10}
+                queryKey="example"
+                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: undefined } }} onSubmit={onSubmit}>
+              <ControlledAsyncAutocomplete
+                name="controlledAsyncAutocomplete"
+                FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
+                getOptionLabel={(val: Option) => val.label}
+                loadOptions={loadOptions}
+                limit={10}
+                queryKey="example"
+                rules={{ required: { value: false, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </QueryClientProvider>
+        );
+
+        expect(screen.queryByText('*')).toBeNull();
+      });
+    });
+  });
+});

package/src/lib/AsyncAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { AsyncAutocomplete, AsyncAutocompleteProps } from '@availity/mui-autocomplete';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
 export type ControlledAsyncAutocompleteProps<
   Option,
@@ -9,13 +9,12 @@ export type ControlledAsyncAutocompleteProps<
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
-> = Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& DeprecatedRulesProps;
+> = Omit<
+  AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledAsyncAutocomplete = <
   Option,
@@ -25,18 +24,10 @@ export const ControlledAsyncAutocomplete = <
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 >({
   name,
-  deps,
-  max,
-  maxLength,
-  min,
-  minLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   rules = {},
   shouldUnregister,
-  validate,
   value,
   FieldProps,
   ...rest
@@ -46,17 +37,9 @@ export const ControlledAsyncAutocomplete = <
       name={name}
       defaultValue={rest.defaultValue}
       rules={{
-        deps,
-        max,
-        maxLength,
-        min,
-        minLength,
         onBlur,
         onChange,
-        pattern,
-        required,
         shouldUnregister,
-        validate,
         value,
         ...rules,
       }}
@@ -65,6 +48,7 @@ export const ControlledAsyncAutocomplete = <
         <AsyncAutocomplete
           {...rest}
           FieldProps={{
+            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
             error: !!error,
             helperText: error?.message ? (
@@ -76,7 +60,7 @@ export const ControlledAsyncAutocomplete = <
             ) : (
               FieldProps?.helperText
             ),
-            inputRef:ref
+            inputRef: ref,
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/Autocomplete.test.tsx

@@ -13,11 +13,8 @@ describe('ControlledAsyncAutocomplete', () => {
 
   test('should set the value and submit the form', async () => {
     const screen = render(
-      <TestForm UseFormOptions={{values: { controlledAutocomplete: null}}} onSubmit={onSubmit}>
-        <ControlledAutocomplete
-          name="controlledAutocomplete"
-          options={['Option 1', 'Option 2']}
-        />
+      <TestForm UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+        <ControlledAutocomplete name="controlledAutocomplete" options={['Option 1', 'Option 2']} />
       </TestForm>
     );
 
@@ -37,4 +34,53 @@ describe('ControlledAsyncAutocomplete', () => {
       expect(controlledAutocompleteValue).toBe('Option 1');
     });
   });
-});
+
+  describe('when using rules', () => {
+    describe('when required', () => {
+      test('should indicate it is required when passing a string', async () => {
+        const screen = render(
+          <TestForm UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+            <ControlledAutocomplete
+              FieldProps={{ label: 'Autocomplete Label' }}
+              name="controlledAutocomplete"
+              options={['Option 1', 'Option 2']}
+              rules={{ required: 'This field is required' }}
+            />
+          </TestForm>
+        );
+
+        expect(screen.getByText('*')).toBeDefined();
+      });
+
+      test('should indicate it is required when passing an object with true', async () => {
+        const screen = render(
+          <TestForm UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+            <ControlledAutocomplete
+              FieldProps={{ label: 'Autocomplete Label' }}
+              name="controlledAutocomplete"
+              options={['Option 1', 'Option 2']}
+              rules={{ required: { value: true, message: 'This field is required' } }}
+            />
+          </TestForm>
+        );
+
+        expect(screen.getByText('*')).toBeDefined();
+      });
+
+      test('should not indicate it is required when passing an object with false', async () => {
+        const screen = render(
+          <TestForm UseFormOptions={{ values: { controlledAutocomplete: null } }} onSubmit={onSubmit}>
+            <ControlledAutocomplete
+              FieldProps={{ label: 'Autocomplete Label' }}
+              name="controlledAutocomplete"
+              options={['Option 1', 'Option 2']}
+              rules={{ required: { value: false, message: 'This field is required' } }}
+            />
+          </TestForm>
+        );
+
+        expect(screen.queryByText('*')).toBeNull();
+      });
+    });
+  });
+});

package/src/lib/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { Autocomplete, AutocompleteProps } from '@availity/mui-autocomplete';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
 export type ControlledAutocompleteProps<
   T,
@@ -10,13 +10,11 @@ export type ControlledAutocompleteProps<
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > = Omit<
-AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& DeprecatedRulesProps;
+  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledAutocomplete = <
   T,
@@ -29,17 +27,9 @@ export const ControlledAutocomplete = <
   FieldProps,
   defaultValue,
   rules = {},
-  deps,
-  max,
-  maxLength,
-  min,
-  minLength,
   onBlur,
   onChange,
-  pattern,
-  required,
   shouldUnregister,
-  validate,
   value,
   ...rest
 }: ControlledAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
@@ -48,17 +38,9 @@ export const ControlledAutocomplete = <
       name={name}
       defaultValue={defaultValue}
       rules={{
-        deps,
-        max,
-        maxLength,
-        min,
-        minLength,
         onBlur,
         onChange,
-        pattern,
-        required,
         shouldUnregister,
-        validate,
         value,
         ...rules,
       }}
@@ -67,18 +49,19 @@ export const ControlledAutocomplete = <
         <Autocomplete
           {...rest}
           FieldProps={{
+            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
             error: !!error,
             helperText: error?.message ? (
-                <>
-                  {error.message}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
-            inputRef: ref
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
+            inputRef: ref,
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/Checkbox.tsx

@@ -1,20 +1,10 @@
 import { Checkbox, CheckboxProps } from '@availity/mui-checkbox';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps, DeprecatedRulesProps } from './Types';
+import { ControllerProps } from './Types';
 
-export type ControlledCheckboxProps = Omit<CheckboxProps,
-  'disabled' | 'onBlur' | 'onChange' | 'value' | 'name'
-> & Pick<RegisterOptions<FieldValues, string>,
-  'disabled' | 'onBlur' | 'onChange' | 'value'
-> & ControllerProps
-//TODO v1 - remove deprecated props
-& Omit<DeprecatedRulesProps,
-| 'required'
-| 'max'
-| 'maxLength'
-| 'min'
-| 'minLength'
-| 'pattern'>;
+export type ControlledCheckboxProps = Omit<CheckboxProps, 'disabled' | 'onBlur' | 'onChange' | 'value' | 'name'> &
+  Pick<RegisterOptions<FieldValues, string>, 'disabled' | 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps;
 
 export const ControlledCheckbox = ({
   name,
@@ -25,8 +15,6 @@ export const ControlledCheckbox = ({
   defaultValue = false,
   rules = {},
   shouldUnregister,
-  deps,
-  validate,
   ...rest
 }: ControlledCheckboxProps) => {
   return (
@@ -39,13 +27,17 @@ export const ControlledCheckbox = ({
         onBlur,
         value,
         shouldUnregister,
-        deps,
-        validate,
         ...rules,
       }}
       shouldUnregister={shouldUnregister}
       render={({ field }) => (
-        <Checkbox {...rest} {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />
+        <Checkbox
+          required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
+          {...rest}
+          {...field}
+          checked={field.value}
+          onChange={(e) => field.onChange(e.target.checked)}
+        />
       )}
     />
   );

package/src/lib/CodesAutocomplete.test.tsx

@@ -43,9 +43,9 @@ describe('ControlledAsyncAutocomplete', () => {
             }}
             limit={15}
           />
-      </TestForm>
-    </QueryClientProvider>
-  );
+        </TestForm>
+      </QueryClientProvider>
+    );
 
     const dropdown = screen.getByRole('combobox');
     fireEvent.click(dropdown);
@@ -55,20 +55,20 @@ describe('ControlledAsyncAutocomplete', () => {
   });
 
   test('should set the value and submit the form data', async () => {
-      const screen = render(
-        <QueryClientProvider client={client}>
-          <TestForm onSubmit={onSubmit}>
-            <ControlledCodesAutocomplete
-              name="controlledCodesAutocomplete"
-              list="ABC"
-              FieldProps={{
-                label: 'Code Select',
-                helperText: 'Select a code from the list',
-                placeholder: 'Select...',
-                fullWidth: false,
-              }}
-              limit={15}
-            />
+    const screen = render(
+      <QueryClientProvider client={client}>
+        <TestForm onSubmit={onSubmit}>
+          <ControlledCodesAutocomplete
+            name="controlledCodesAutocomplete"
+            list="ABC"
+            FieldProps={{
+              label: 'Code Select',
+              helperText: 'Select a code from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+            limit={15}
+          />
         </TestForm>
       </QueryClientProvider>
     );
@@ -91,4 +91,77 @@ describe('ControlledAsyncAutocomplete', () => {
       expect(controlledCodesAutocompleteValue.value).toBe('Acupuncturist');
     });
   });
+
+  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}>
+              <ControlledCodesAutocomplete
+                name="controlledCodesAutocomplete"
+                list="ABC"
+                FieldProps={{
+                  label: 'Code Select',
+                  helperText: 'Select a code from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                limit={15}
+                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}>
+              <ControlledCodesAutocomplete
+                name="controlledCodesAutocomplete"
+                list="ABC"
+                FieldProps={{
+                  label: 'Code Select',
+                  helperText: 'Select a code from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                limit={15}
+                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}>
+              <ControlledCodesAutocomplete
+                name="controlledCodesAutocomplete"
+                list="ABC"
+                FieldProps={{
+                  label: 'Code Select',
+                  helperText: 'Select a code from the list',
+                  placeholder: 'Select...',
+                  fullWidth: false,
+                }}
+                limit={15}
+                rules={{ required: { value: false, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </QueryClientProvider>
+        );
+
+        expect(screen.queryByText('*')).toBeNull();
+      });
+    });
+  });
 });