@availity/mui-controlled-form 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/package.json +7 -7
- package/src/lib/AsyncAutocomplete.stories.tsx +45 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [1.2.3](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.2.2...@availity/mui-controlled-form@1.2.3) (2025-04-08)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-button` updated to version `1.2.2`
|
|
10
|
+
* `mui-menu` updated to version `1.2.2`
|
|
11
|
+
* `mui-autocomplete` updated to version `1.2.2`
|
|
12
|
+
* `mui-datepicker` updated to version `1.2.2`
|
|
13
|
+
* `mui-form-utils` updated to version `1.2.2`
|
|
14
|
+
* `mui-textfield` updated to version `1.2.2`
|
|
15
|
+
* `theme-provider` updated to version `1.2.2`
|
|
16
|
+
## [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)
|
|
17
|
+
|
|
18
|
+
### Dependency Updates
|
|
19
|
+
|
|
20
|
+
* `mui-datepicker` updated to version `1.2.1`
|
|
21
|
+
* `theme-provider` updated to version `1.2.1`
|
|
5
22
|
## [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)
|
|
6
23
|
|
|
7
24
|
### Dependency Updates
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-controlled-form",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -40,18 +40,18 @@
|
|
|
40
40
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@availity/mui-autocomplete": "^1.0.
|
|
43
|
+
"@availity/mui-autocomplete": "^1.0.11",
|
|
44
44
|
"@availity/mui-checkbox": "^1.0.1",
|
|
45
|
-
"@availity/mui-datepicker": "^1.0.
|
|
46
|
-
"@availity/mui-form-utils": "^1.1.
|
|
47
|
-
"@availity/mui-textfield": "^1.1.
|
|
45
|
+
"@availity/mui-datepicker": "^1.0.9",
|
|
46
|
+
"@availity/mui-form-utils": "^1.1.1",
|
|
47
|
+
"@availity/mui-textfield": "^1.1.3",
|
|
48
48
|
"react-hook-form": "^7.54.2"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@availity/api-axios": "^10.0.0",
|
|
52
|
-
"@availity/mui-button": "^1.0
|
|
52
|
+
"@availity/mui-button": "^1.1.0",
|
|
53
53
|
"@availity/mui-layout": "^1.0.1",
|
|
54
|
-
"@availity/mui-menu": "^1.0.
|
|
54
|
+
"@availity/mui-menu": "^1.0.2",
|
|
55
55
|
"@availity/mui-paper": "^1.0.1",
|
|
56
56
|
"@availity/mui-typography": "^1.0.1",
|
|
57
57
|
"@hookform/resolvers": "^4.0.0",
|
|
@@ -81,6 +81,51 @@ export const _ControlledAsyncAutoComplete: StoryObj<typeof ControlledAsyncAutoco
|
|
|
81
81
|
},
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
+
export const _ControlledAsyncAutoCompleteMultiple: StoryObj<typeof ControlledAsyncAutocomplete> = {
|
|
85
|
+
render: (args) => {
|
|
86
|
+
const methods = useForm({ defaultValues: { controlledAsyncAutocomplete: [] } });
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<QueryClientProvider client={client}>
|
|
90
|
+
<FormProvider {...methods}>
|
|
91
|
+
<form onSubmit={methods.handleSubmit((data) => data)}>
|
|
92
|
+
<ControlledAsyncAutocomplete {...args} />
|
|
93
|
+
<Grid container direction="row" justifyContent="space-between" marginTop={1}>
|
|
94
|
+
<Button
|
|
95
|
+
disabled={!methods?.formState?.isSubmitSuccessful}
|
|
96
|
+
children="Reset"
|
|
97
|
+
color="secondary"
|
|
98
|
+
onClick={() => methods.reset()}
|
|
99
|
+
/>
|
|
100
|
+
<Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
|
|
101
|
+
</Grid>
|
|
102
|
+
{methods?.formState?.isSubmitSuccessful ? (
|
|
103
|
+
<Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
|
|
104
|
+
<Typography variant="h2">Submitted Values</Typography>
|
|
105
|
+
<pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
|
|
106
|
+
</Paper>
|
|
107
|
+
) : null}
|
|
108
|
+
</form>
|
|
109
|
+
</FormProvider>
|
|
110
|
+
</QueryClientProvider>
|
|
111
|
+
);
|
|
112
|
+
},
|
|
113
|
+
args: {
|
|
114
|
+
name: 'controlledAsyncAutocomplete',
|
|
115
|
+
FieldProps: { label: 'Async Select', helperText: 'Helper Text', fullWidth: false, required: true },
|
|
116
|
+
getOptionLabel: (val: Option) => val.label,
|
|
117
|
+
isOptionEqualToValue: (option, value) => option.label === value.label,
|
|
118
|
+
loadOptions,
|
|
119
|
+
limit: 5,
|
|
120
|
+
queryKey: 'example',
|
|
121
|
+
rules: { required: 'This is required.' },
|
|
122
|
+
defaultToFirstOption: true,
|
|
123
|
+
disableClearable: true,
|
|
124
|
+
multiple: true,
|
|
125
|
+
filterSelectedOptions: true,
|
|
126
|
+
},
|
|
127
|
+
};
|
|
128
|
+
|
|
84
129
|
export const _ControlledAsyncAutoCompleteDefaultToOnlyOption: StoryObj<typeof ControlledAsyncAutocomplete> = {
|
|
85
130
|
render: (args) => {
|
|
86
131
|
const methods = useForm();
|