@availity/mui-controlled-form 1.1.3 → 1.2.1

package/dist/index.mjs

@@ -29,10 +29,30 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/lib/AsyncAutocomplete.tsx
 import { AsyncAutocomplete } from "@availity/mui-autocomplete";
-import { Controller } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ControlledAsyncAutocomplete = (_a) => {
   var _b = _a, {
@@ -42,7 +62,9 @@ var ControlledAsyncAutocomplete = (_a) => {
     rules = {},
     shouldUnregister,
     value,
-    FieldProps
+    FieldProps,
+    defaultToFirstOption,
+    defaultToOnlyOption
   } = _b, rest = __objRest(_b, [
     "name",
     "onBlur",
@@ -50,19 +72,17 @@ var ControlledAsyncAutocomplete = (_a) => {
     "rules",
     "shouldUnregister",
     "value",
-    "FieldProps"
+    "FieldProps",
+    "defaultToFirstOption",
+    "defaultToOnlyOption"
   ]);
+  const { setValue } = useFormContext();
   return /* @__PURE__ */ jsx(
     Controller,
     {
       name,
       defaultValue: rest.defaultValue,
-      rules: __spreadValues({
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value
-      }, rules),
+      rules: __spreadValues({ onBlur, onChange, shouldUnregister, value }, rules),
       shouldUnregister,
       render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2, ref }, fieldState: { error } }) => /* @__PURE__ */ jsx(
         AsyncAutocomplete,
@@ -85,7 +105,17 @@ var ControlledAsyncAutocomplete = (_a) => {
             onChange2(value3);
           },
           onBlur: onBlur2,
-          value: value2 || null
+          value: value2 || null,
+          loadOptions: (offset, limit, inputValue) => __async(void 0, null, function* () {
+            const { options, hasMore, offset: returnedOffsetValue } = yield rest.loadOptions(offset, limit, inputValue);
+            if (defaultToFirstOption && offset === 0) {
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
+            }
+            if (defaultToOnlyOption && offset === 0 && options.length === 1) {
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
+            }
+            return { options, hasMore, offset: returnedOffsetValue };
+          })
         })
       )
     }
@@ -207,9 +237,8 @@ var ControlledCheckbox = (_a) => {
 };
 
 // src/lib/CodesAutocomplete.tsx
-import { CodesAutocomplete } from "@availity/mui-autocomplete";
-import { Controller as Controller4 } from "react-hook-form";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { fetchCodes, handleGetCodesOptionLabel } from "@availity/mui-autocomplete";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ControlledCodesAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -219,7 +248,12 @@ var ControlledCodesAutocomplete = (_a) => {
     rules = {},
     shouldUnregister,
     value,
-    FieldProps
+    FieldProps,
+    apiConfig = {},
+    queryOptions,
+    queryKey = "codes-autocomplete",
+    list,
+    watchParams
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -228,52 +262,44 @@ var ControlledCodesAutocomplete = (_a) => {
     "rules",
     "shouldUnregister",
     "value",
-    "FieldProps"
+    "FieldProps",
+    "apiConfig",
+    "queryOptions",
+    "queryKey",
+    "list",
+    "watchParams"
   ]);
+  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+    const resp = yield fetchCodes(__spreadProps(__spreadValues({}, apiConfig), {
+      params: __spreadProps(__spreadValues({}, apiConfig.params), { list, offset, limit, q: inputValue })
+    }));
+    return resp;
+  });
   return /* @__PURE__ */ jsx4(
-    Controller4,
-    {
+    ControlledAsyncAutocomplete,
+    __spreadProps(__spreadValues({
       name,
       defaultValue,
-      rules: __spreadValues({
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value
-      }, rules),
+      onBlur,
+      onChange,
+      rules,
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2, ref }, fieldState: { error } }) => /* @__PURE__ */ jsx4(
-        CodesAutocomplete,
-        __spreadProps(__spreadValues({}, rest), {
-          FieldProps: __spreadProps(__spreadValues({
-            required: typeof rules.required === "object" ? rules.required.value : !!rules.required
-          }, FieldProps), {
-            error: !!error,
-            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-              error.message,
-              /* @__PURE__ */ jsx4("br", {}),
-              FieldProps == null ? void 0 : FieldProps.helperText
-            ] }) : FieldProps == null ? void 0 : FieldProps.helperText,
-            inputRef: ref
-          }),
-          onChange: (event, value3, reason) => {
-            if (reason === "clear") {
-              onChange2(null);
-            }
-            onChange2(value3);
-          },
-          onBlur: onBlur2,
-          value: value2 || null
-        })
-      )
-    }
+      value,
+      FieldProps,
+      getOptionLabel: handleGetCodesOptionLabel,
+      queryKey,
+      queryOptions: __spreadValues({ enabled: !!list }, queryOptions),
+      watchParams: __spreadValues({ list }, watchParams)
+    }, rest), {
+      loadOptions: handleLoadOptions
+    })
   );
 };
 
 // src/lib/Datepicker.tsx
 import { Datepicker } from "@availity/mui-datepicker";
-import { Controller as Controller5 } from "react-hook-form";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Controller as Controller4 } from "react-hook-form";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var ControlledDatepicker = (_a) => {
   var _b = _a, {
     name,
@@ -295,7 +321,7 @@ var ControlledDatepicker = (_a) => {
     "FieldProps"
   ]);
   return /* @__PURE__ */ jsx5(
-    Controller5,
+    Controller4,
     {
       name,
       defaultValue,
@@ -313,7 +339,7 @@ var ControlledDatepicker = (_a) => {
             required: typeof rules.required === "object" ? rules.required.value : !!rules.required
           }, FieldProps), {
             error: !!error,
-            helperText: error ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+            helperText: error ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
               error.message,
               /* @__PURE__ */ jsx5("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
@@ -333,7 +359,7 @@ var ControlledDatepicker = (_a) => {
 
 // src/lib/Input.tsx
 import { Input } from "@availity/mui-form-utils";
-import { Controller as Controller6 } from "react-hook-form";
+import { Controller as Controller5 } from "react-hook-form";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ControlledInput = (_a) => {
   var _b = _a, {
@@ -356,7 +382,7 @@ var ControlledInput = (_a) => {
     "value"
   ]);
   return /* @__PURE__ */ jsx6(
-    Controller6,
+    Controller5,
     {
       name,
       defaultValue,
@@ -381,9 +407,8 @@ var ControlledInput = (_a) => {
 };
 
 // src/lib/OrganizationAutocomplete.tsx
-import { OrganizationAutocomplete } from "@availity/mui-autocomplete";
-import { Controller as Controller7 } from "react-hook-form";
-import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { handleGetOrgOptionLabel, fetchOrgs } from "@availity/mui-autocomplete";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ControlledOrganizationAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -393,7 +418,9 @@ var ControlledOrganizationAutocomplete = (_a) => {
     rules = {},
     shouldUnregister,
     value,
-    FieldProps
+    FieldProps,
+    queryKey = "org-autocomplete",
+    apiConfig = {}
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -402,52 +429,36 @@ var ControlledOrganizationAutocomplete = (_a) => {
     "rules",
     "shouldUnregister",
     "value",
-    "FieldProps"
+    "FieldProps",
+    "queryKey",
+    "apiConfig"
   ]);
+  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
+    const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
+    return resp;
+  });
   return /* @__PURE__ */ jsx7(
-    Controller7,
-    {
+    ControlledAsyncAutocomplete,
+    __spreadProps(__spreadValues({
       name,
       defaultValue,
-      rules: __spreadValues({
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value
-      }, rules),
+      onBlur,
+      onChange,
+      rules,
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2, ref }, fieldState: { error } }) => /* @__PURE__ */ jsx7(
-        OrganizationAutocomplete,
-        __spreadProps(__spreadValues({}, rest), {
-          FieldProps: __spreadProps(__spreadValues({
-            required: typeof rules.required === "object" ? rules.required.value : !!rules.required
-          }, FieldProps), {
-            error: !!error,
-            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
-              error.message,
-              /* @__PURE__ */ jsx7("br", {}),
-              FieldProps == null ? void 0 : FieldProps.helperText
-            ] }) : FieldProps == null ? void 0 : FieldProps.helperText,
-            inputRef: ref
-          }),
-          onChange: (event, value3, reason) => {
-            if (reason === "clear") {
-              onChange2(null);
-            }
-            onChange2(value3);
-          },
-          onBlur: onBlur2,
-          value: value2 || null
-        })
-      )
-    }
+      value,
+      FieldProps,
+      getOptionLabel: handleGetOrgOptionLabel,
+      queryKey
+    }, rest), {
+      loadOptions: handleLoadOptions
+    })
   );
 };
 
 // src/lib/ProviderAutocomplete.tsx
-import { ProviderAutocomplete } from "@availity/mui-autocomplete";
-import { Controller as Controller8 } from "react-hook-form";
-import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { handleGetProviderOptionLabel, fetchProviders } from "@availity/mui-autocomplete";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var ControlledProviderAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -457,7 +468,10 @@ var ControlledProviderAutocomplete = (_a) => {
     rules = {},
     shouldUnregister,
     value,
-    FieldProps
+    FieldProps,
+    apiConfig = {},
+    customerId,
+    queryKey = "prov-autocomplete"
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -466,52 +480,43 @@ var ControlledProviderAutocomplete = (_a) => {
     "rules",
     "shouldUnregister",
     "value",
-    "FieldProps"
+    "FieldProps",
+    "apiConfig",
+    "customerId",
+    "queryKey"
   ]);
+  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+    const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), {
+      params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit, q: inputValue })
+    }));
+    return resp;
+  });
   return /* @__PURE__ */ jsx8(
-    Controller8,
-    {
+    ControlledAsyncAutocomplete,
+    __spreadProps(__spreadValues({
       name,
       defaultValue,
-      rules: __spreadValues({
-        onBlur,
-        onChange,
-        shouldUnregister,
-        value
-      }, rules),
+      onBlur,
+      onChange,
+      rules,
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 }, fieldState: { error } }) => /* @__PURE__ */ jsx8(
-        ProviderAutocomplete,
-        __spreadProps(__spreadValues({}, rest), {
-          FieldProps: __spreadProps(__spreadValues({
-            required: typeof rules.required === "object" ? rules.required.value : !!rules.required
-          }, FieldProps), {
-            error: !!error,
-            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
-              error.message,
-              /* @__PURE__ */ jsx8("br", {}),
-              FieldProps == null ? void 0 : FieldProps.helperText
-            ] }) : FieldProps == null ? void 0 : FieldProps.helperText
-          }),
-          onChange: (event, value3, reason) => {
-            if (reason === "clear") {
-              onChange2(null);
-            }
-            onChange2(value3);
-          },
-          onBlur: onBlur2,
-          value: value2 || null
-        })
-      )
-    }
+      value,
+      FieldProps,
+      getOptionLabel: handleGetProviderOptionLabel,
+      queryOptions: { enabled: !!customerId },
+      queryKey,
+      watchParams: { customerId }
+    }, rest), {
+      loadOptions: handleLoadOptions
+    })
   );
 };
 
 // src/lib/RadioGroup.tsx
 import { RadioGroup } from "@availity/mui-form-utils";
-import { Controller as Controller9 } from "react-hook-form";
+import { Controller as Controller6 } from "react-hook-form";
 import { FormControl, FormLabel, FormHelperText } from "@availity/mui-form-utils";
-import { Fragment as Fragment7, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlledRadioGroup = (_a) => {
   var _b = _a, {
     name,
@@ -537,7 +542,7 @@ var ControlledRadioGroup = (_a) => {
     "value"
   ]);
   return /* @__PURE__ */ jsx9(
-    Controller9,
+    Controller6,
     {
       name,
       defaultValue,
@@ -545,7 +550,7 @@ var ControlledRadioGroup = (_a) => {
       shouldUnregister,
       render: (_a2) => {
         var _b2 = _a2, { field: _c } = _b2, _d = _c, { disabled } = _d, field = __objRest(_d, ["disabled"]), { fieldState: { error } } = _b2;
-        return /* @__PURE__ */ jsxs7(
+        return /* @__PURE__ */ jsxs4(
           FormControl,
           {
             error: !!error,
@@ -554,7 +559,7 @@ var ControlledRadioGroup = (_a) => {
             children: [
               /* @__PURE__ */ jsx9(FormLabel, { children: label }),
               /* @__PURE__ */ jsx9(RadioGroup, __spreadValues(__spreadValues({}, field), rest)),
-              /* @__PURE__ */ jsx9(FormHelperText, { children: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
+              /* @__PURE__ */ jsx9(FormHelperText, { children: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
                 error.message,
                 /* @__PURE__ */ jsx9("br", {}),
                 helperText
@@ -569,7 +574,7 @@ var ControlledRadioGroup = (_a) => {
 
 // src/lib/Select.tsx
 import { Select } from "@availity/mui-form-utils";
-import { Controller as Controller10 } from "react-hook-form";
+import { Controller as Controller7 } from "react-hook-form";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ControlledSelect = (_a) => {
   var _b = _a, {
@@ -592,7 +597,7 @@ var ControlledSelect = (_a) => {
     "value"
   ]);
   return /* @__PURE__ */ jsx10(
-    Controller10,
+    Controller7,
     {
       name,
       defaultValue,
@@ -618,8 +623,8 @@ var ControlledSelect = (_a) => {
 
 // src/lib/TextField.tsx
 import { TextField } from "@availity/mui-textfield";
-import { Controller as Controller11 } from "react-hook-form";
-import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Controller as Controller8 } from "react-hook-form";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var ControlledTextField = (_a) => {
   var _b = _a, {
     name,
@@ -643,7 +648,7 @@ var ControlledTextField = (_a) => {
     "value"
   ]);
   return /* @__PURE__ */ jsx11(
-    Controller11,
+    Controller8,
     {
       name,
       defaultValue,
@@ -670,7 +675,7 @@ var ControlledTextField = (_a) => {
             }),
             inputRef: ref,
             error: !!error,
-            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs8(Fragment8, { children: [
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
               error.message,
               /* @__PURE__ */ jsx11("br", {}),
               helperText
@@ -686,7 +691,7 @@ var ControlledTextField = (_a) => {
 import {
   FormProvider,
   useForm,
-  useFormContext
+  useFormContext as useFormContext2
 } from "react-hook-form";
 export {
   ControlledAsyncAutocomplete,
@@ -702,5 +707,5 @@ export {
   ControlledTextField,
   FormProvider,
   useForm,
-  useFormContext
+  useFormContext2 as useFormContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,11 +40,11 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-autocomplete": "^1.0.8",
+    "@availity/mui-autocomplete": "^1.0.10",
     "@availity/mui-checkbox": "^1.0.1",
-    "@availity/mui-datepicker": "^1.0.6",
+    "@availity/mui-datepicker": "^1.0.7",
     "@availity/mui-form-utils": "^1.1.0",
-    "@availity/mui-textfield": "^1.1.1",
+    "@availity/mui-textfield": "^1.1.2",
     "react-hook-form": "^7.54.2"
   },
   "devDependencies": {
@@ -65,6 +65,7 @@
     "yup": "^1.6.1"
   },
   "peerDependencies": {
+    "@availity/api-axios": "^8.0.7",
     "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },

package/src/lib/AsyncAutocomplete.stories.tsx

@@ -13,54 +13,31 @@ const meta: Meta<typeof ControlledAsyncAutocomplete> = {
   title: 'Form Components/Controlled Form/Autocomplete/ControlledAsyncAutocomplete',
   component: ControlledAsyncAutocomplete,
   tags: ['autodocs'],
-  argTypes: {...AllControllerPropertiesCategorized, ...AsyncAutocompletePropsCategorized}
+  argTypes: { ...AllControllerPropertiesCategorized, ...AsyncAutocompletePropsCategorized },
 };
 
 export default meta;
 
 const api = new AvApi({ name: 'example' } as ApiConfig);
 
-type Option = {
-  label: string;
-  value: number;
-};
+type Option = { label: string; value: number };
 
-type ExampleResponse = {
-  totalCount: number;
-  options: Option[];
-  count: number;
-};
+type ExampleResponse = { totalCount: number; options: Option[]; count: number };
 
 const getResults = async (offset: number, limit: number) => {
   // const offset = page * limit;
   const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
 
-  return {
-    totalCount: resp.data.totalCount,
-    offset,
-    limit,
-    options: resp.data.options,
-    count: resp.data.count,
-  };
+  return { totalCount: resp.data.totalCount, offset, limit, options: resp.data.options, count: resp.data.count };
 };
 
 const loadOptions = async (offset: number, limit: number) => {
   const { options, totalCount } = await getResults(offset, limit);
 
-  return {
-    options,
-    hasMore: offset + limit < totalCount,
-    offset,
-  };
+  return { options, hasMore: offset + limit < totalCount, offset };
 };
 
-const client = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-    },
-  },
-});
+const client = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
 
 export const _ControlledAsyncAutoComplete: StoryObj<typeof ControlledAsyncAutocomplete> = {
   render: (args) => {
@@ -72,15 +49,20 @@ export const _ControlledAsyncAutoComplete: StoryObj<typeof ControlledAsyncAutoco
           <form onSubmit={methods.handleSubmit((data) => data)}>
             <ControlledAsyncAutocomplete {...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>
       </QueryClientProvider>
@@ -93,6 +75,50 @@ export const _ControlledAsyncAutoComplete: StoryObj<typeof ControlledAsyncAutoco
     loadOptions,
     limit: 10,
     queryKey: 'example',
-    rules: { required:'This is required.' },
+    rules: { required: 'This is required.' },
+    defaultToFirstOption: true,
+    disableClearable: true,
+  },
+};
+
+export const _ControlledAsyncAutoCompleteDefaultToOnlyOption: StoryObj<typeof ControlledAsyncAutocomplete> = {
+  render: (args) => {
+    const methods = useForm();
+
+    return (
+      <QueryClientProvider client={client}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit((data) => data)}>
+            <ControlledAsyncAutocomplete {...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>
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    name: 'controlledAsyncAutocomplete',
+    FieldProps: { label: 'Async Select', helperText: 'Helper Text', fullWidth: false, required: true },
+    getOptionLabel: (val: Option) => val.label,
+    loadOptions,
+    limit: 1,
+    queryKey: 'example2',
+    rules: { required: 'This is required.' },
+    defaultToOnlyOption: true,
+    disableClearable: true,
   },
 };