element v2

.github/workflows/commitlint.yml

@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: '22'
+          node-version: '24'
 
       - run: yarn install --immutable
 

.github/workflows/deploy.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -38,9 +38,9 @@ jobs:
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-22-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-24-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-22-yarn-
+            ${{ runner.os }}-24-yarn-
 
       - name: Install Dependencies
         run: yarn install --immutable
@@ -74,7 +74,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -86,9 +86,9 @@ jobs:
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-22-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-24-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-22-yarn-
+            ${{ runner.os }}-24-yarn-
 
       - name: Install Dependencies
         run: yarn install --immutable
@@ -159,7 +159,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
           cache-dependency-path: 'yarn.lock'
 

.github/workflows/pr-build.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest]
-        node: [18, 20, 22]
+        node: [20, 22, 24]
 
     steps:
       - name: Checkout Code
@@ -61,7 +61,7 @@ jobs:
         run: yarn build
 
       - name: Build Docs
-        if: ${{ matrix.node == 22 }}
+        if: ${{ matrix.node == 24 }}
         run: yarn build:storybook
 
       - name: Lint

.github/workflows/preview.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -39,9 +39,9 @@ jobs:
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-22-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-24-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-22-yarn-
+            ${{ runner.os }}-24-yarn-
 
       - name: Install Dependencies
         run: yarn install --immutable

.nvmrc

@@ -1 +1 @@
-22
+24

apps/element-storybook/.storybook/preview.tsx

@@ -5,7 +5,7 @@ import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from
 import type { StoryContext } from '@storybook/types';
 import { ThemeProvider } from '@availity/theme-provider';
 
-const withThemeProvider = (Story: () => JSX.Element, context: StoryContext) => {
+const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => {
   return (
     <ThemeProvider theme={context.globals.theme || 'lightTheme'}>
       <Story />

apps/element-storybook/src/FormComponentExamples.tsx

@@ -41,10 +41,16 @@ export const AutocompleteExample = () => (
   </QueryClientProvider>
 );
 
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+const loadOptions = async (offset: number, limit: number) => {await sleep(10000); return({options: [], hasMore: false, offset: 0})};
+
 export const AsyncAutocompleteExample = () => (
   <QueryClientProvider client={client}>
     <ThemeProvider>
-      <AsyncAutocomplete FieldProps={{label:"Async Autocomplete", helperText:"Help Text"}}/>
+      <AsyncAutocomplete FieldProps={{label:"Async Autocomplete", helperText:"Help Text"}} queryKey='example' loadOptions={loadOptions}/>
     </ThemeProvider>
   </QueryClientProvider>
 );

apps/element-storybook/src/bs4-migration/FormMigration.stories.tsx

@@ -155,7 +155,7 @@ const dropdownOptions = ['Bulbasaur', 'Squirtle', 'Charmander'];
 //           />
 //           {errors.radio ? <FormHelperText id="radio-helper-text">{errors.radio?.message}</FormHelperText> : null }
 //         </FormControl>
-//         <LoadingButton loading={isSubmitting} type="submit" variant="contained">
+//         <LoadingButton loading={isSubmitting} type="submit">
 //           Submit
 //         </LoadingButton>
 //       </form>
@@ -185,7 +185,7 @@ export const _YupValidation: StoryObj = {
     });
 
     const isRequired = (name: string) => {
-      return(!schema.describe().fields[name]?.optional || undefined)
+      return(!(schema.describe().fields[name] as yup.SchemaDescription)?.optional || undefined)
     }
 
     type FormInputsType = yup.InferType<typeof schema>;
@@ -237,7 +237,7 @@ export const _YupValidation: StoryObj = {
             <FormControlLabel control={<Radio />} value="1" label="Option 1" />
             <FormControlLabel control={<Radio />} value="2" label="Option 2" />
           </ControlledRadioGroup>
-          <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" variant="contained" sx={{mt: 2}}>
+          <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" sx={{mt: 2}}>
             Submit
           </LoadingButton>
         </form>
@@ -338,7 +338,7 @@ export const _YupValidation: StoryObj = {
 //             </FormControl>
 //           )}
 //         />
-//         <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" variant="contained">
+//         <LoadingButton loading={methods?.formState?.isSubmitting} type="submit">
 //           Submit
 //         </LoadingButton>
 //       </form>
@@ -401,7 +401,7 @@ export const _RHFRules: StoryObj = {
             <FormControlLabel control={<Radio />} value="1" label="Option 1" />
             <FormControlLabel control={<Radio />} value="2" label="Option 2" />
           </ControlledRadioGroup>
-          <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" variant="contained" sx={{mt: 2}}>
+          <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" sx={{mt: 2}}>
             Submit
           </LoadingButton>
         </form>

apps/element-storybook/src/bs4-migration/form-migration.md

@@ -340,7 +340,7 @@ export const Form = () => {
           <FormControlLabel control={<Radio />} value="1" label="Option 1" />
           <FormControlLabel control={<Radio />} value="2" label="Option 2" />
         </ControlledRadioGroup>
-        <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" variant="contained">
+        <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" >
           Submit
         </LoadingButton>
       </form>
@@ -430,7 +430,7 @@ export const Form = () => {
         />
         {errors.radio ? <FormHelperText id="radio-helper-text">{errors.radio?.message}</FormHelperText> : null }
       </FormControl>
-      <LoadingButton loading={loading} type="submit" variant="contained">
+      <LoadingButton loading={loading} type="submit" >
         Submit
       </LoadingButton>
     </form>

apps/element-storybook/src/layouts/sidebar-tables/DataGridSection.tsx

@@ -1,4 +1,4 @@
-import { AttachmentIcon, Badge, Chip } from '@availity/element';
+import { AttachmentIcon, Badge, StatusChip } from '@availity/element';
 import { Paper, Typography } from '@mui/material';
 import { DataGrid, GridColDef, GridRenderCellParams, GridValueGetterParams } from '@mui/x-data-grid';
 import type { AlertColor } from '@mui/material';
@@ -53,12 +53,12 @@ const columns: GridColDef[] = [
         Denied: 'error',
         Approved: 'success',
       };
-      return <Chip size="small" color={color[params.value] || 'secondary'} label={params.value || 'Unknown'} />;
+      return <StatusChip color={color[params.value] || 'secondary'} label={params.value || 'Unknown'} />;
     },
   },
 ];
 
-export const DataGridSection = (): JSX.Element => (
+export const DataGridSection = (): React.JSX.Element => (
   <Paper variant="elevation" elevation={0} sx={{ padding: '10px' }}>
     <Typography variant="h2" id="datagridTitle">
       DataGrid

apps/element-storybook/src/layouts/sidebar-tables/HeaderSection.tsx

@@ -1,6 +1,6 @@
 import { Box, Breadcrumbs, HomeIcon, IconButton, Link, Typography } from '@availity/element';
 
-export const HeaderSection = (): JSX.Element => {
+export const HeaderSection = (): React.JSX.Element => {
   return (
     <Box sx={{ marginBottom: '.5rem' }}>
       <Breadcrumbs aria-label="breadcrumbs">

apps/element-storybook/src/layouts/sidebar-tables/SearchSection.tsx

@@ -12,7 +12,7 @@ import {
   ChartColumnIcon,
 } from '@availity/element';
 
-export const SearchSection = (): JSX.Element => {
+export const SearchSection = (): React.JSX.Element => {
   const [searchValue, setSearchValue] = useState('');
   return (
     <Paper variant="elevation" elevation={0}>

apps/element-storybook/src/layouts/sidebar-tables/TablesSection.tsx

@@ -143,7 +143,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-export const TablesSection = (): JSX.Element => {
+export const TablesSection = (): React.JSX.Element => {
   const [order, setOrder] = useState<Order>();
   const [orderBy, setOrderBy] = useState<keyof Data>();
 

apps/element-storybook/src/upgrading-to-v2.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Upgrading to v2" />
+
+## Upgrading to Element v2
+
+Element v2 introduces major upgrades to `@mui/material` v7 and `@mui/x-*` v8. For a
+comprehensive list of the changes made see
+
+- [`@mui/material` Upgrade to v7 Guide](https://mui.com/material-ui/migration/upgrade-to-v7/)
+- [`@mui/x-date-pickers` Migration from v7 to v8](https://mui.com/x/migration/migration-pickers-v7/)
+- [`@mui/x-tree-view` Migration from v7 to v8](https://mui.com/x/migration/migration-tree-view-v7/)
+
+### Critical Changes
+
+#### React Upgrade and Dependency Coordination
+
+By default the material packages will use v19 of react, however if using a lower version of react a resolution will need to be
+set for the corresponding version of `react-is`. See the MUI notes on [React 18 and below](https://mui.com/material-ui/migration/upgrade-to-v7/#react-18-and-below)
+
+### Potential Impact Changes
+
+These changes may affect your application depending on component usage:
+
+#### Component-Specific Changes
+
+- [Datepicker](https://mui.com/x/migration/migration-pickers-v7/)
+  - [New DOM structure for the field](https://mui.com/x/migration/migration-pickers-v7/) moves away from the old text input. The new section list input is more accessible,
+  but removes any `placeholder` from the field. If you are passing your own `TextField` you will need to swap to a `PickersTextField`.
+  - [Treat partially filled date as `null` in `onChange`](https://mui.com/x/migration/migration-pickers-v7/#treat-partially-filled-date-as-null-in-onchange)
+  - [disableOpenPicker prop deprecated](https://mui.com/x/migration/migration-pickers-v7/#deprecate-the-disableopenpicker-prop)
+  - [Do not pass the date object as a generic](https://mui.com/x/migration/migration-pickers-v7/#do-not-pass-the-date-object-as-a-generic)
+- FileSelector/FileSelector2
+  - `isCloud` is true by default
+- LoadingButton
+  - LoadingButton pattern now matches Button, removing the `variant` prop
+
+#### Removed Internals
+
+We are cleaning up our exports to no longer include internal utils/components
+
+- Alert: `AlertIcons`
+- Autocomplete: `fetchCodes`, `handleGetCodesOptionLabel`, `fetchOrgs`, `handleGetOrgOptionLabel`, `fetchProviders`, `handleGetProviderOptionLabel`, `Code` type, `Organization` type, `Provider` type
+- Dialog: `CloseButtonSlot`
+- FileSelector: `outerBoxStyles`, `innerBoxStyles`, `createCounter`, `DropzoneContainer`, `formatFileTooLarge`, `CLOUD_URL`
+- Form Utils: `InputPropOverrides`, `SearchByContainer`, `SelectDivider`, `SelectExpandIcon`, `SelectPropOverrides`, `SelectAccessibilityOverrides`
+- Spaces: `INITIAL_STATE`
+
+### Non-Impact Changes
+
+The following changes should not require any action:
+
+- [Deprecated APIs removed](https://mui.com/material-ui/migration/upgrade-to-v7/#deprecated-apis-removed)
+  - [Dialog onBackdropClick prop removal]()
+- [Grid and Grid2 renamed](https://mui.com/material-ui/migration/upgrade-to-v7/#grid-and-grid2-renamed) - see `element` v1 codemods
+- [TablePaginationActions types import path changed](https://mui.com/material-ui/migration/upgrade-to-v7/#tablepaginationactions-types-import-path-changed)
+- [Use Simple Tree View instead of Tree View](https://mui.com/x/migration/migration-tree-view-v7/#%E2%9C%85-use-simple-tree-view-instead-of-tree-view)
+

netlify.toml

@@ -3,7 +3,7 @@
   command = "yarn build:storybook:ci"
 
 [build.environment]
-  NODE_VERSION = "22"
+  NODE_VERSION = "24"
   YARN_VERSION = "1.19.1"
 
 [[redirects]]

package.json

@@ -11,7 +11,7 @@
   ],
   "engines": {
     "yarn": "^3.0.0",
-    "node": "^18.0.0 | ^20.0.0 | ^22.0.0"
+    "node": "^20.0.0 | ^22.0.0 | ^24.0.0"
   },
   "scripts": {
     "build": "nx run-many --target=build --all",
@@ -42,8 +42,8 @@
     "@commitlint/config-conventional": "^18.6.3",
     "@commitlint/config-nx-scopes": "^18.6.1",
     "@jscutlery/semver": "~5.5.1",
-    "@mui/lab": "6.0.0-beta.12",
-    "@mui/x-data-grid": "^7.26.0",
+    "@mui/lab": "7.0.1-beta.18",
+    "@mui/x-data-grid": "^8.16.0",
     "@nx/devkit": "20.8.2",
     "@nx/eslint": "20.8.2",
     "@nx/eslint-plugin": "20.8.2",
@@ -66,10 +66,10 @@
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "29.5.14",
-    "@types/node": "18.19.31",
+    "@types/node": "24.10.0",
     "@types/qs": "^6.9.18",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "babel-jest": "29.7.0",
@@ -94,15 +94,15 @@
     "prettier": "^3.5.3",
     "react-hook-form": "^7.55.0",
     "react-imask": "7.6.1",
-    "react-number-format": "5.4.0",
+    "react-number-format": "5.4.4",
     "remark-gfm": "^4.0.1",
     "ts-jest": "29.1.2",
     "ts-node": "10.9.1",
     "tslib": "^2.8.1",
     "typescript": "5.7.3",
     "undici": "^5.29.0",
     "vite": "6.2.7",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "vite-plugin-node-polyfills": "^0.24.0"
   },
   "packageManager": "yarn@3.3.1",
   "msw": {

packages/accordion/package.json

@@ -44,16 +44,16 @@
     "@availity/mui-chip": "workspace:^",
     "@availity/mui-layout": "workspace:^",
     "@availity/mui-typography": "workspace:^",
-    "@mui/material": "^6.4.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "@mui/material": "^7.3.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "@availity/mui-icon": "workspace:^",
-    "@mui/material": "^6.4.5",
-    "react": ">=16.3.0"
+    "@mui/material": "^7.0.0",
+    "react": ">=17.0.0"
   },
   "publishConfig": {
     "access": "public"