@availity/mui-controlled-form 1.1.3 → 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/Types.tsx

@@ -242,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' } },
@@ -297,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' } },
@@ -400,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' } },
@@ -455,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>;