@availity/mui-controlled-form 1.4.4 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.0.0](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.4.4...@availity/mui-controlled-form@2.0.0) (2025-11-17)
+
+### Dependency Updates
+
+* `mui-button` updated to version `1.4.4`
+* `mui-layout` updated to version `1.4.4`
+* `mui-menu` updated to version `1.4.4`
+* `mui-paper` updated to version `1.4.4`
+* `mui-typography` updated to version `1.4.4`
+* `mui-autocomplete` updated to version `1.4.4`
+* `mui-checkbox` updated to version `1.4.4`
+* `mui-datepicker` updated to version `1.4.4`
+* `mui-form-utils` updated to version `1.4.4`
+* `mui-textfield` updated to version `1.4.4`
+* `theme-provider` updated to version `1.4.4`
+
+### ⚠ BREAKING CHANGES
+
+* @mui/material upgraded to v7
+* @mui/x-* upgraded to v8
+* react upgraded to v19
+
+### Features
+
+* upgrade material and react dependencies ([51602a4](https://github.com/Availity/element/commit/51602a48c5304db6f61e2c7e772c9a3a4aa3f65c))
+
 ## [1.4.4](https://github.com/Availity/element/compare/@availity/mui-controlled-form@1.4.3...@availity/mui-controlled-form@1.4.4) (2025-10-31)
 
 ### Dependency Updates

package/dist/index.js

@@ -371,9 +371,8 @@ var ControlledDatepicker = (_a) => {
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_mui_datepicker.Datepicker,
           __spreadProps(__spreadValues({}, rest), {
-            FieldProps: __spreadProps(__spreadValues({
-              required: typeof rules.required === "object" ? rules.required.value : !!rules.required
-            }, FieldProps), {
+            FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+              required: (typeof rules.required === "object" ? rules.required.value : !!rules.required) || (FieldProps == null ? void 0 : FieldProps.required),
               error: !!error,
               helperText: error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
                 error.message,

package/dist/index.mjs

@@ -335,9 +335,8 @@ var ControlledDatepicker = (_a) => {
         return /* @__PURE__ */ jsx5(
           Datepicker,
           __spreadProps(__spreadValues({}, rest), {
-            FieldProps: __spreadProps(__spreadValues({
-              required: typeof rules.required === "object" ? rules.required.value : !!rules.required
-            }, FieldProps), {
+            FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+              required: (typeof rules.required === "object" ? rules.required.value : !!rules.required) || (FieldProps == null ? void 0 : FieldProps.required),
               error: !!error,
               helperText: error ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
                 error.message,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "1.4.4",
+  "version": "2.0.0",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,34 +40,34 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-autocomplete": "^1.2.7",
-    "@availity/mui-checkbox": "^1.0.4",
-    "@availity/mui-datepicker": "^1.2.2",
-    "@availity/mui-form-utils": "^1.3.3",
-    "@availity/mui-textfield": "^1.3.2",
+    "@availity/mui-autocomplete": "^2.0.0",
+    "@availity/mui-checkbox": "^2.0.0",
+    "@availity/mui-datepicker": "^2.0.0",
+    "@availity/mui-form-utils": "^2.0.0",
+    "@availity/mui-textfield": "^2.0.0",
     "react-hook-form": "^7.55.0"
   },
   "devDependencies": {
     "@availity/api-axios": "^11.0.0",
-    "@availity/mui-button": "^1.1.5",
-    "@availity/mui-layout": "^1.0.3",
-    "@availity/mui-menu": "^1.0.7",
-    "@availity/mui-paper": "^1.0.3",
-    "@availity/mui-typography": "^1.0.3",
+    "@availity/mui-button": "^2.0.0",
+    "@availity/mui-layout": "^2.0.0",
+    "@availity/mui-menu": "^2.0.0",
+    "@availity/mui-paper": "^2.0.0",
+    "@availity/mui-typography": "^2.0.0",
     "@hookform/resolvers": "^4.1.3",
-    "@mui/material": "^6.4.5",
+    "@mui/material": "^7.3.4",
     "@tanstack/react-query": "^4.36.1",
     "dayjs": "^1.11.13",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.5",
     "yup": "^1.6.1"
   },
   "peerDependencies": {
     "@availity/api-axios": "^8.0.7",
-    "@mui/material": "^6.4.5",
-    "react": ">=16.3.0"
+    "@mui/material": "^7.0.0",
+    "react": ">=17.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/lib/AsyncAutocomplete.test.tsx

@@ -57,6 +57,9 @@ describe('ControlledAsyncAutocomplete', () => {
     jest.restoreAllMocks();
   });
 
+  // terminate the server
+  afterAll(() => server.close());
+
   const client = new QueryClient({
     defaultOptions: {
       queries: {

package/src/lib/Autocomplete.test.tsx

@@ -4,7 +4,7 @@ import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
-describe('ControlledAsyncAutocomplete', () => {
+describe('ControlledAutocomplete', () => {
   afterEach(() => {
     // Remove any handlers you may have added
     // in individual tests (runtime handlers).

package/src/lib/CodesAutocomplete.test.tsx

@@ -7,7 +7,7 @@ import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
-describe('ControlledAsyncAutocomplete', () => {
+describe('ControlledCodesAutocomplete', () => {
   beforeAll(() => {
     // Start the interception.
     server.listen();
@@ -20,6 +20,9 @@ describe('ControlledAsyncAutocomplete', () => {
     jest.restoreAllMocks();
   });
 
+  // terminate the server
+  afterAll(() => server.close());
+
   const client = new QueryClient({
     defaultOptions: {
       queries: {

package/src/lib/Datepicker.test.tsx

@@ -6,7 +6,7 @@ import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
-describe('Datepicker', () => {
+describe('ControlledDatepicker', () => {
   test('should render successfully and submit selection', async () => {
     const screen = render(
       <ThemeProvider>
@@ -59,7 +59,7 @@ describe('Datepicker', () => {
           </ThemeProvider>
         );
 
-        expect(screen.getByText('*')).toBeDefined();
+        expect(screen.getAllByText('*')).toBeDefined();
       });
 
       test('should indicate it is required when passing an object with true', async () => {
@@ -80,7 +80,7 @@ describe('Datepicker', () => {
           </ThemeProvider>
         );
 
-        expect(screen.getByText('*')).toBeDefined();
+        expect(screen.getAllByText('*')).toBeDefined();
       });
 
       test('should not indicate it is required when passing an object with false', async () => {
@@ -101,7 +101,7 @@ describe('Datepicker', () => {
           </ThemeProvider>
         );
 
-        expect(screen.queryByText('*')).toBeNull();
+        expect(screen.queryAllByText('*')).toHaveLength(0);
       });
     });
   });

package/src/lib/Datepicker.tsx

@@ -39,8 +39,8 @@ export const ControlledDatepicker = <Output = Dayjs | null,>({
         <Datepicker
           {...rest}
           FieldProps={{
-            required: typeof rules.required === 'object' ? rules.required.value : !!rules.required,
             ...FieldProps,
+            required: (typeof rules.required === 'object' ? rules.required.value : !!rules.required) || FieldProps?.required,
             error: !!error,
             helperText: error ? (
               <>

package/src/lib/OrganizationAutocomplete.test.tsx

@@ -20,6 +20,9 @@ describe('ControlledOrganizationAutocomplete', () => {
     jest.restoreAllMocks();
   });
 
+  // terminate the server
+  afterAll(() => server.close());
+
   const client = new QueryClient({
     defaultOptions: {
       queries: {

package/src/lib/ProviderAutocomplete.test.tsx

@@ -20,6 +20,9 @@ describe('ControlledProviderAutocomplete', () => {
     jest.restoreAllMocks();
   });
 
+  // terminate the server
+  afterAll(() => server.close());
+
   const client = new QueryClient({
     defaultOptions: {
       queries: {

package/src/lib/Types.tsx

@@ -202,8 +202,7 @@ export const AllControllerPropertiesCategorized: CategorizedControllerPropsObjec
 };
 
 export const TextFieldPropsCategorized: TextFieldPropsObject = {
-  displayOverflowMaxLength: { table: { category: 'Input Props' } },
-  slotProps: { table: { category: 'Input Props' } },
+  required: { table: { category: 'Input Props' } },
   className: { table: { category: 'Input Props' } },
   style: { table: { category: 'Input Props' } },
   classes: { table: { category: 'Input Props' } },
@@ -213,7 +212,6 @@ export const TextFieldPropsCategorized: TextFieldPropsObject = {
   color: { table: { category: 'Input Props' } },
   onFocus: { table: { category: 'Input Props' } },
   focused: { table: { category: 'Input Props' } },
-  required: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
   label: { table: { category: 'Input Props' } },
   ref: { table: { category: 'Input Props' } },
@@ -240,24 +238,24 @@ export const TextFieldPropsCategorized: TextFieldPropsObject = {
   SelectProps: { table: { category: 'Input Props' } },
   type: { table: { category: 'Input Props' } },
   slots: { table: { category: 'Input Props' } },
+  slotProps: { table: { category: 'Input Props' } },
   showCharacterCount: { table: { category: 'Input Props' } },
+  displayOverflowMaxLength: { table: { category: 'Input Props' } }
 };
 
 export const RadioGroupPropsCategorized: RadioGroupPropsObject = {
+  required: { table: { category: 'Input Props' } },
   classes: { table: { category: 'Input Props' } },
   children: { table: { category: 'Input Props' } },
-  required: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
   label: { table: { category: 'Input Props' } },
   ref: { table: { category: 'Input Props' } },
   helperText: { table: { category: 'Input Props' } },
-  row: { table: { category: 'Input Props' } },
+  row: { table: { category: 'Input Props' } }
 };
 
 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' } },
@@ -269,7 +267,7 @@ export const ProviderAutocompletePropsCategorized: ProviderAutocompletePropsObje
   multiple: { table: { category: 'Input Props' } },
   onClose: { table: { category: 'Input Props' } },
   onOpen: { table: { category: 'Input Props' } },
-  queryKey: { table: { category: 'Input Props' } },
+  renderValue: { table: { category: 'Input Props' } },
   ChipProps: { table: { category: 'Input Props' } },
   disablePortal: { table: { category: 'Input Props' } },
   getLimitTagsText: { table: { category: 'Input Props' } },
@@ -303,18 +301,19 @@ export const ProviderAutocompletePropsCategorized: ProviderAutocompletePropsObje
   onHighlightChange: { table: { category: 'Input Props' } },
   onInputChange: { table: { category: 'Input Props' } },
   FieldProps: { table: { category: 'Input Props' } },
+  queryKey: { table: { category: 'Input Props' } },
   limit: { table: { category: 'Input Props' } },
   queryOptions: { table: { category: 'Input Props' } },
   watchParams: { table: { category: 'Input Props' } },
   debounceTimeout: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
   customerId: { table: { category: 'Input Props' } },
-  apiConfig: { table: { category: 'Input Props' } },
+  apiConfig: { table: { category: 'Input Props' } }
 };
 
 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' } },
@@ -326,7 +325,7 @@ export const OrganizationAutocompletePropsCategorized: OrganizationAutocompleteP
   multiple: { table: { category: 'Input Props' } },
   onClose: { table: { category: 'Input Props' } },
   onOpen: { table: { category: 'Input Props' } },
-  queryKey: { table: { category: 'Input Props' } },
+  renderValue: { table: { category: 'Input Props' } },
   ChipProps: { table: { category: 'Input Props' } },
   disablePortal: { table: { category: 'Input Props' } },
   getLimitTagsText: { table: { category: 'Input Props' } },
@@ -360,11 +359,14 @@ export const OrganizationAutocompletePropsCategorized: OrganizationAutocompleteP
   onHighlightChange: { table: { category: 'Input Props' } },
   onInputChange: { table: { category: 'Input Props' } },
   FieldProps: { table: { category: 'Input Props' } },
+  queryKey: { table: { category: 'Input Props' } },
   limit: { table: { category: 'Input Props' } },
   queryOptions: { table: { category: 'Input Props' } },
   watchParams: { table: { category: 'Input Props' } },
   debounceTimeout: { table: { category: 'Input Props' } },
-  apiConfig: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
+  apiConfig: { table: { category: 'Input Props' } }
 };
 
 export const DatepickerPropsCategorized: DatepickerPropsObject = {
@@ -400,6 +402,7 @@ export const DatepickerPropsCategorized: DatepickerPropsObject = {
   selectedSections: { table: { category: 'Input Props' } },
   onSelectedSectionsChange: { table: { category: 'Input Props' } },
   yearsPerRow: { table: { category: 'Input Props' } },
+  closeOnSelect: { table: { category: 'Input Props' } },
   renderLoading: { table: { category: 'Input Props' } },
   onYearChange: { table: { category: 'Input Props' } },
   onMonthChange: { table: { category: 'Input Props' } },
@@ -411,20 +414,13 @@ export const DatepickerPropsCategorized: DatepickerPropsObject = {
   monthsPerRow: { table: { category: 'Input Props' } },
   yearsOrder: { table: { category: 'Input Props' } },
   format: { table: { category: 'Input Props' } },
-  closeOnSelect: { table: { category: 'Input Props' } },
   disableOpenPicker: { table: { category: 'Input Props' } },
   placement: { table: { category: 'Input Props' } },
-  clearable: {
-    table: {
-      category: 'Input Props',
-    },
-  },
+  clearable: { table: { category: 'Input Props' } }
 };
 
 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' } },
@@ -437,7 +433,7 @@ export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
   multiple: { table: { category: 'Input Props' } },
   onClose: { table: { category: 'Input Props' } },
   onOpen: { table: { category: 'Input Props' } },
-  queryKey: { table: { category: 'Input Props' } },
+  renderValue: { table: { category: 'Input Props' } },
   ChipProps: { table: { category: 'Input Props' } },
   disablePortal: { table: { category: 'Input Props' } },
   getLimitTagsText: { table: { category: 'Input Props' } },
@@ -471,17 +467,18 @@ export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
   onHighlightChange: { table: { category: 'Input Props' } },
   onInputChange: { table: { category: 'Input Props' } },
   FieldProps: { table: { category: 'Input Props' } },
+  queryKey: { table: { category: 'Input Props' } },
   limit: { table: { category: 'Input Props' } },
   queryOptions: { table: { category: 'Input Props' } },
   watchParams: { table: { category: 'Input Props' } },
   debounceTimeout: { table: { category: 'Input Props' } },
-  apiConfig: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } },
+  apiConfig: { table: { category: 'Input Props' } }
 };
 
 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' } },
@@ -493,7 +490,7 @@ export const AsyncAutocompletePropsCategorized: AsyncAutocompletePropsObject = {
   multiple: { table: { category: 'Input Props' } },
   onClose: { table: { category: 'Input Props' } },
   onOpen: { table: { category: 'Input Props' } },
-  queryKey: { table: { category: 'Input Props' } },
+  renderValue: { table: { category: 'Input Props' } },
   ChipProps: { table: { category: 'Input Props' } },
   disablePortal: { table: { category: 'Input Props' } },
   getLimitTagsText: { table: { category: 'Input Props' } },
@@ -528,10 +525,13 @@ export const AsyncAutocompletePropsCategorized: AsyncAutocompletePropsObject = {
   onInputChange: { table: { category: 'Input Props' } },
   FieldProps: { table: { category: 'Input Props' } },
   loadOptions: { table: { category: 'Input Props' } },
+  queryKey: { table: { category: 'Input Props' } },
   limit: { table: { category: 'Input Props' } },
   queryOptions: { table: { category: 'Input Props' } },
   watchParams: { table: { category: 'Input Props' } },
   debounceTimeout: { table: { category: 'Input Props' } },
+  defaultToFirstOption: { table: { category: 'Input Props' } },
+  defaultToOnlyOption: { table: { category: 'Input Props' } }
 };
 
 export const AutocompletePropsCategorized: AutocompletePropsObject = {
@@ -549,6 +549,7 @@ export const AutocompletePropsCategorized: AutocompletePropsObject = {
   multiple: { table: { category: 'Input Props' } },
   onClose: { table: { category: 'Input Props' } },
   onOpen: { table: { category: 'Input Props' } },
+  renderValue: { table: { category: 'Input Props' } },
   disableListWrap: { table: { category: 'Input Props' } },
   ChipProps: { table: { category: 'Input Props' } },
   disablePortal: { table: { category: 'Input Props' } },
@@ -582,10 +583,11 @@ export const AutocompletePropsCategorized: AutocompletePropsObject = {
   isOptionEqualToValue: { table: { category: 'Input Props' } },
   onHighlightChange: { table: { category: 'Input Props' } },
   onInputChange: { table: { category: 'Input Props' } },
-  FieldProps: { table: { category: 'Input Props' } },
+  FieldProps: { table: { category: 'Input Props' } }
 };
 
 export const CheckboxPropsCategorized: CheckboxPropsObject = {
+  required: { table: { category: 'Input Props' } },
   className: { table: { category: 'Input Props' } },
   style: { table: { category: 'Input Props' } },
   classes: { table: { category: 'Input Props' } },
@@ -595,13 +597,14 @@ export const CheckboxPropsCategorized: CheckboxPropsObject = {
   id: { table: { category: 'Input Props' } },
   tabIndex: { table: { category: 'Input Props' } },
   color: { table: { category: 'Input Props' } },
-  required: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
   ref: { table: { category: 'Input Props' } },
   key: { table: { category: 'Input Props' } },
   component: { table: { category: 'Input Props' } },
   inputProps: { table: { category: 'Input Props' } },
   inputRef: { table: { category: 'Input Props' } },
+  slots: { table: { category: 'Input Props' } },
+  slotProps: { table: { category: 'Input Props' } },
   readOnly: { table: { category: 'Input Props' } },
   action: { table: { category: 'Input Props' } },
   formAction: { table: { category: 'Input Props' } },
@@ -617,7 +620,7 @@ export const CheckboxPropsCategorized: CheckboxPropsObject = {
   checked: { table: { category: 'Input Props' } },
   edge: { table: { category: 'Input Props' } },
   indeterminate: { table: { category: 'Input Props' } },
-  indeterminateIcon: { table: { category: 'Input Props' } },
+  indeterminateIcon: { table: { category: 'Input Props' } }
 };
 
 export const InputPropsCategorized: InputPropsObject = {
@@ -661,6 +664,7 @@ export const InputPropsCategorized: InputPropsObject = {
 };
 
 export const SelectPropsCategorized: SelectPropsObject = {
+  required: { table: { category: 'Input Props' } },
   className: { table: { category: 'Input Props' } },
   style: { table: { category: 'Input Props' } },
   classes: { table: { category: 'Input Props' } },
@@ -677,7 +681,6 @@ export const SelectPropsCategorized: SelectPropsObject = {
   onError: { table: { category: 'Input Props' } },
   onKeyDown: { table: { category: 'Input Props' } },
   onKeyUp: { table: { category: 'Input Props' } },
-  required: { table: { category: 'Input Props' } },
   sx: { table: { category: 'Input Props' } },
   label: { table: { category: 'Input Props' } },
   ref: { table: { category: 'Input Props' } },
@@ -712,7 +715,7 @@ export const SelectPropsCategorized: SelectPropsObject = {
   onClose: { table: { category: 'Input Props' } },
   onOpen: { table: { category: 'Input Props' } },
   renderValue: { table: { category: 'Input Props' } },
-  SelectDisplayProps: { table: { category: 'Input Props' } },
+  SelectDisplayProps: { table: { category: 'Input Props' } }
 };
 
 export const AllControllerPropsList = Object.keys(AllControllerPropertiesCategorized) as (keyof ControllerProps)[];