@availity/mui-controlled-form 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.2](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.2.1...@availity/mui-controlled-form@1.2.2) (2025-04-08)
+
+### Dependency Updates
+
+* `mui-datepicker` updated to version `1.2.1`
+* `theme-provider` updated to version `1.2.1`
+## [1.2.1](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.2.0...@availity/mui-controlled-form@1.2.1) (2025-04-04)
+
+### Dependency Updates
+
+* `mui-autocomplete` updated to version `1.2.0`
+* `mui-datepicker` updated to version `1.2.0`
+* `mui-textfield` updated to version `1.2.0`
+
+### Bug Fixes
+
+* **mui-controlled-form:** allow defaultOptions on multiple AsyncAutocomplete ([4dcb5bc](https://github.com/Availity/element/commit/4dcb5bc4d1a02a54b5a2d0540e15d77a07aa7c02))
+
 ## [1.2.0](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.1.3...@availity/mui-controlled-form@1.2.0) (2025-03-31)
 
 ### Dependency Updates

package/dist/index.js

@@ -145,10 +145,10 @@ var ControlledAsyncAutocomplete = (_a) => {
           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, options[0]);
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
             }
             if (defaultToOnlyOption && offset === 0 && options.length === 1) {
-              setValue(name, options[0]);
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
             }
             return { options, hasMore, offset: returnedOffsetValue };
           })

package/dist/index.mjs

@@ -109,10 +109,10 @@ var ControlledAsyncAutocomplete = (_a) => {
           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, options[0]);
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
             }
             if (defaultToOnlyOption && offset === 0 && options.length === 1) {
-              setValue(name, options[0]);
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
             }
             return { options, hasMore, offset: returnedOffsetValue };
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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.9",
+    "@availity/mui-autocomplete": "^1.0.10",
     "@availity/mui-checkbox": "^1.0.1",
-    "@availity/mui-datepicker": "^1.0.6",
+    "@availity/mui-datepicker": "^1.0.8",
     "@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": {

package/src/lib/AsyncAutocomplete.stories.tsx

@@ -76,12 +76,14 @@ export const _ControlledAsyncAutoComplete: StoryObj<typeof ControlledAsyncAutoco
     limit: 10,
     queryKey: 'example',
     rules: { required: 'This is required.' },
+    defaultToFirstOption: true,
+    disableClearable: true,
   },
 };
 
-export const _ControlledAsyncAutoCompleteDefaultOption: StoryObj<typeof ControlledAsyncAutocomplete> = {
+export const _ControlledAsyncAutoCompleteMultiple: StoryObj<typeof ControlledAsyncAutocomplete> = {
   render: (args) => {
-    const methods = useForm();
+    const methods = useForm({ defaultValues: { controlledAsyncAutocomplete: [] } });
 
     return (
       <QueryClientProvider client={client}>
@@ -112,11 +114,56 @@ export const _ControlledAsyncAutoCompleteDefaultOption: StoryObj<typeof Controll
     name: 'controlledAsyncAutocomplete',
     FieldProps: { label: 'Async Select', helperText: 'Helper Text', fullWidth: false, required: true },
     getOptionLabel: (val: Option) => val.label,
+    isOptionEqualToValue: (option, value) => option.label === value.label,
     loadOptions,
-    limit: 10,
+    limit: 5,
     queryKey: 'example',
     rules: { required: 'This is required.' },
     defaultToFirstOption: true,
     disableClearable: true,
+    multiple: true,
+    filterSelectedOptions: 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,
   },
 };

package/src/lib/AsyncAutocomplete.tsx

@@ -71,11 +71,11 @@ export const ControlledAsyncAutocomplete = <
             const { options, hasMore, offset: returnedOffsetValue } = await rest.loadOptions(offset, limit, inputValue);
 
             if (defaultToFirstOption && offset === 0) {
-              setValue(name, options[0]);
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
             }
 
             if (defaultToOnlyOption && offset === 0 && options.length === 1) {
-              setValue(name, options[0]);
+              setValue(name, rest.multiple ? [options[0]] : options[0]);
             }
 
             return { options, hasMore, offset: returnedOffsetValue };