@availity/mui-controlled-form 1.1.2 → 1.2.0

package/src/lib/AsyncAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { AsyncAutocomplete, AsyncAutocompleteProps } from '@availity/mui-autocomplete';
-import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, useFormContext } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
 import { ControllerProps } from './Types';
 
@@ -9,7 +9,7 @@ export type ControlledAsyncAutocompleteProps<
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
-> = Omit<
+> = { defaultToFirstOption?: boolean; defaultToOnlyOption?: boolean } & Omit<
   AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>,
   'onBlur' | 'onChange' | 'value' | 'name'
 > &
@@ -30,19 +30,16 @@ export const ControlledAsyncAutocomplete = <
   shouldUnregister,
   value,
   FieldProps,
+  defaultToFirstOption,
+  defaultToOnlyOption,
   ...rest
 }: ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
+  const { setValue } = useFormContext();
   return (
     <Controller
       name={name}
       defaultValue={rest.defaultValue}
-      rules={{
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value,
-        ...rules,
-      }}
+      rules={{ onBlur, onChange, shouldUnregister, value, ...rules }}
       shouldUnregister={shouldUnregister}
       render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
         <AsyncAutocomplete
@@ -70,6 +67,19 @@ export const ControlledAsyncAutocomplete = <
           }}
           onBlur={onBlur}
           value={value || null}
+          loadOptions={async (offset, limit, inputValue) => {
+            const { options, hasMore, offset: returnedOffsetValue } = await rest.loadOptions(offset, limit, inputValue);
+
+            if (defaultToFirstOption && offset === 0) {
+              setValue(name, options[0]);
+            }
+
+            if (defaultToOnlyOption && offset === 0 && options.length === 1) {
+              setValue(name, options[0]);
+            }
+
+            return { options, hasMore, offset: returnedOffsetValue };
+          }}
         />
       )}
     />

package/src/lib/CodesAutocomplete.tsx

@@ -1,10 +1,25 @@
-import { CodesAutocomplete, CodesAutocompleteProps } from '@availity/mui-autocomplete';
-import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import type { Code } from '@availity/mui-autocomplete';
+import { fetchCodes, handleGetCodesOptionLabel } from '@availity/mui-autocomplete';
+import { ApiConfig } from '@availity/api-axios';
+import { ChipTypeMap } from '@mui/material/Chip';
+import type { Optional } from './utils';
+import { ControlledAsyncAutocomplete, ControlledAsyncAutocompleteProps } from './AsyncAutocomplete';
 
-export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
-  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+export interface ControlledCodesAutocompleteProps<
+  Option = Code,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> extends Omit<
+    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    'loadOptions'
+  > {
+  /** The code list id. */
+  list: string;
+  /** Config passed to the AvCodesApi.query function */
+  apiConfig?: ApiConfig;
+}
 
 export const ControlledCodesAutocomplete = ({
   name,
@@ -15,48 +30,38 @@ export const ControlledCodesAutocomplete = ({
   shouldUnregister,
   value,
   FieldProps,
+  apiConfig = {},
+  queryOptions,
+  queryKey = 'codes-autocomplete',
+  list,
+  watchParams,
   ...rest
 }: ControlledCodesAutocompleteProps) => {
+  const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
+    const resp = await fetchCodes({
+      ...apiConfig,
+      params: { ...apiConfig.params, list, offset, limit, q: inputValue },
+    });
+
+    return resp;
+  };
+
   return (
-    <Controller
+    <ControlledAsyncAutocomplete
       name={name}
       defaultValue={defaultValue}
-      rules={{
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value,
-        ...rules,
-      }}
+      onBlur={onBlur}
+      onChange={onChange}
+      rules={rules}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
-        <CodesAutocomplete
-          {...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,
-          }}
-          onChange={(event, value, reason) => {
-            if (reason === 'clear') {
-              onChange(null);
-            }
-            onChange(value);
-          }}
-          onBlur={onBlur}
-          value={value || null}
-        />
-      )}
+      value={value}
+      FieldProps={FieldProps}
+      getOptionLabel={handleGetCodesOptionLabel}
+      queryKey={queryKey}
+      queryOptions={{ enabled: !!list, ...queryOptions }}
+      watchParams={{ list, ...watchParams }}
+      {...rest}
+      loadOptions={handleLoadOptions}
     />
   );
 };

package/src/lib/OrganizationAutocomplete.tsx

@@ -1,10 +1,23 @@
-import { OrganizationAutocomplete, OrgAutocompleteProps } from '@availity/mui-autocomplete';
-import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import type { Organization } from '@availity/mui-autocomplete';
+import { handleGetOrgOptionLabel, fetchOrgs } from '@availity/mui-autocomplete';
+import type { ChipTypeMap } from '@mui/material/Chip';
+import type { ApiConfig } from '@availity/api-axios';
+import type { Optional } from './utils';
+import { ControlledAsyncAutocomplete, ControlledAsyncAutocompleteProps } from './AsyncAutocomplete';
 
-export type ControlledOrgAutocompleteProps = Omit<OrgAutocompleteProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
-  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+export interface ControlledOrgAutocompleteProps<
+  Option = Organization,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> extends Omit<
+    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    'loadOptions'
+  > {
+  /** Axios ApiConfig */
+  apiConfig?: ApiConfig;
+}
 
 export const ControlledOrganizationAutocomplete = ({
   name,
@@ -15,48 +28,29 @@ export const ControlledOrganizationAutocomplete = ({
   shouldUnregister,
   value,
   FieldProps,
+  queryKey = 'org-autocomplete',
+  apiConfig = {},
   ...rest
 }: ControlledOrgAutocompleteProps) => {
+  const handleLoadOptions = async (offset: number, limit: number) => {
+    const resp = await fetchOrgs({ ...apiConfig, params: { dropdown: true, ...apiConfig.params, offset, limit } });
+
+    return resp;
+  };
   return (
-    <Controller
+    <ControlledAsyncAutocomplete
       name={name}
       defaultValue={defaultValue}
-      rules={{
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value,
-        ...rules,
-      }}
+      onBlur={onBlur}
+      onChange={onChange}
+      rules={rules}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
-        <OrganizationAutocomplete
-          {...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,
-          }}
-          onChange={(event, value, reason) => {
-            if (reason === 'clear') {
-              onChange(null);
-            }
-            onChange(value);
-          }}
-          onBlur={onBlur}
-          value={value || null}
-        />
-      )}
+      value={value}
+      FieldProps={FieldProps}
+      getOptionLabel={handleGetOrgOptionLabel}
+      queryKey={queryKey}
+      {...rest}
+      loadOptions={handleLoadOptions}
     />
   );
 };

package/src/lib/ProviderAutocomplete.tsx

@@ -1,13 +1,25 @@
-import { ProviderAutocomplete, ProviderAutocompleteProps } from '@availity/mui-autocomplete';
-import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import type { Provider } from '@availity/mui-autocomplete';
+import { handleGetProviderOptionLabel, fetchProviders } from '@availity/mui-autocomplete';
+import type { ChipTypeMap } from '@mui/material/Chip';
+import type { Optional } from './utils';
+import type { ApiConfig } from '@availity/api-axios';
+import { ControlledAsyncAutocomplete, type ControlledAsyncAutocompleteProps } from './AsyncAutocomplete';
 
-export type ControlledProviderAutocompleteProps = Omit<
-  ProviderAutocompleteProps,
-  'onBlur' | 'onChange' | 'value' | 'name'
-> &
-  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+export interface ControlledProviderAutocompleteProps<
+  Option = Provider,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> extends Omit<
+    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    'loadOptions'
+  > {
+  /** Customer ID of the Organization you are requesting the providers for */
+  customerId: string;
+  /** Config passed to the AvProvidersApi.getProviders function */
+  apiConfig?: ApiConfig;
+}
 
 export const ControlledProviderAutocomplete = ({
   name,
@@ -18,47 +30,35 @@ export const ControlledProviderAutocomplete = ({
   shouldUnregister,
   value,
   FieldProps,
+  apiConfig = {},
+  customerId,
+  queryKey = 'prov-autocomplete',
   ...rest
 }: ControlledProviderAutocompleteProps) => {
+  const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
+    const resp = await fetchProviders(customerId, {
+      ...apiConfig,
+      params: { ...apiConfig.params, offset, limit, q: inputValue },
+    });
+
+    return resp;
+  };
   return (
-    <Controller
+    <ControlledAsyncAutocomplete
       name={name}
       defaultValue={defaultValue}
-      rules={{
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value,
-        ...rules,
-      }}
+      onBlur={onBlur}
+      onChange={onChange}
+      rules={rules}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
-        <ProviderAutocomplete
-          {...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
-            ),
-          }}
-          onChange={(event, value, reason) => {
-            if (reason === 'clear') {
-              onChange(null);
-            }
-            onChange(value);
-          }}
-          onBlur={onBlur}
-          value={value || null}
-        />
-      )}
+      value={value}
+      FieldProps={FieldProps}
+      getOptionLabel={handleGetProviderOptionLabel}
+      queryOptions={{ enabled: !!customerId }}
+      queryKey={queryKey}
+      watchParams={{ customerId }}
+      {...rest}
+      loadOptions={handleLoadOptions}
     />
   );
 };

package/src/lib/TextField.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof ControlledTextField> = {
     ...TextFieldPropsCategorized,
     helperText: {
       type: 'string',
-      table: { category: 'Input Props' }
+      table: { category: 'Input Props' },
     },
   },
 };
@@ -25,22 +25,67 @@ export default meta;
 
 export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
   render: (args: ControlledTextFieldProps) => {
-    const methods = useForm({values:{ [args.name]: '' }});
+    const methods = useForm({ values: { [args.name]: '' } });
 
     return (
       <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
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
             <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
           </Grid>
-          { methods?.formState?.isSubmitSuccessful ? (
+          {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 }
+          ) : null}
+        </form>
+      </FormProvider>
+    );
+  },
+  args: {
+    name: 'controlledTextField',
+    placeholder: 'Name',
+    required: true,
+    rules: {
+      required: 'This field is required.',
+      maxLength: { value: 10, message: 'Too long' },
+    },
+    label: 'TextField Label',
+    showCharacterCount: true,
+  },
+};
+
+export const _ControlledTextFieldDisplayOverflow: StoryObj<typeof ControlledTextField> = {
+  render: (args: ControlledTextFieldProps) => {
+    const methods = useForm({ values: { [args.name]: '' } });
+
+    return (
+      <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>
     );
@@ -52,8 +97,10 @@ export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
     required: true,
     rules: {
       required: 'This field is required.',
-      maxLength: { value: 10, message: 'Too long' }
+      maxLength: { value: 10, message: 'Too long' },
     },
     label: 'TextField Label',
+    displayOverflowMaxLength: true,
+    showCharacterCount: true,
   },
 };

package/src/lib/TextField.test.tsx

@@ -80,12 +80,14 @@ describe('ControlledTextField', () => {
         </TestForm>
       );
 
-      expect(getByText('0/20')).toBeTruthy();
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       const input = getByTestId('testTextField');
       fireEvent.change(input, { target: { value: 'Some Text' } });
 
-      expect(getByText('9/20')).toBeTruthy();
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
 
@@ -103,12 +105,14 @@ describe('ControlledTextField', () => {
           />
         </TestForm>
       );
-      expect(getByText('0/20')).toBeTruthy();
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       const input = getByTestId('testTextField');
       fireEvent.change(input, { target: { value: 'Some Text' } });
 
-      expect(getByText('9/20')).toBeTruthy();
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
 

package/src/lib/TextField.tsx

@@ -39,7 +39,7 @@ export const ControlledTextField = ({
           slotProps={{
             ...rest.slotProps,
             htmlInput: {
-              maxLength: rules.maxLength,
+              maxLength: typeof rules.maxLength === 'object' ? rules.maxLength.value : rules.maxLength,
               ...rest.slotProps?.htmlInput,
             },
           }}

package/src/lib/Types.tsx

@@ -188,6 +188,7 @@ export const AllControllerPropertiesCategorized: CategorizedControllerPropsObjec
 };
 
 export const TextFieldPropsCategorized: TextFieldPropsObject = {
+  displayOverflowMaxLength: { table: { category: 'Input Props' } },
   slotProps: { table: { category: 'Input Props' } },
   className: { table: { category: 'Input Props' } },
   style: { table: { category: 'Input Props' } },
@@ -241,6 +242,8 @@ export const RadioGroupPropsCategorized: RadioGroupPropsObject = {
 
 export const ProviderAutocompletePropsCategorized: ProviderAutocompletePropsObject = {
   classes: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
   id: { table: { category: 'Input Props' } },
   onKeyDown: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
@@ -296,6 +299,8 @@ export const ProviderAutocompletePropsCategorized: ProviderAutocompletePropsObje
 
 export const OrganizationAutocompletePropsCategorized: OrganizationAutocompletePropsObject = {
   classes: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
   id: { table: { category: 'Input Props' } },
   onKeyDown: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
@@ -399,6 +404,8 @@ export const DatepickerPropsCategorized: DatepickerPropsObject = {
 
 export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
   classes: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
   id: { table: { category: 'Input Props' } },
   onKeyDown: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
@@ -454,6 +461,8 @@ export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
 
 export const AsyncAutocompletePropsCategorized: AsyncAutocompletePropsObject = {
   classes: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
   id: { table: { category: 'Input Props' } },
   onKeyDown: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },

package/src/lib/utils.tsx

@@ -0,0 +1 @@
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;