Upgrade to MUI v7

demo/src/InputsTab.jsx

@@ -8,7 +8,7 @@
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
-import { Box, Grid2 as Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import { useState } from 'react';
 import {
     AutocompleteInput,

demo/src/app.jsx

@@ -15,17 +15,17 @@
     CssBaseline,
     FormControlLabel,
     FormGroup,
-    Grid2 as Grid,
+    Grid,
     IconButton,
     styled,
-    StyledEngineProvider,
     Tab,
     Tabs,
     TextField,
     ThemeProvider,
     Typography,
     Stack,
 } from '@mui/material';
+import { StyledEngineProvider } from '@mui/material/styles';
 import { enUS, frFR } from '@mui/material/locale';
 import { Comment as CommentIcon } from '@mui/icons-material';
 import { BrowserRouter, useLocation, useMatch, useNavigate } from 'react-router';

demo/src/equipment-search.tsx

@@ -81,11 +81,13 @@ export function EquipmentSearchDialog() {
                         label={intl.formatMessage({
                             id: 'element_search/label',
                         })}
-                        InputProps={{
-                            ...params.InputProps,
-                            startAdornment: <Search color="disabled" />,
-                        }}
                         value={displayedValue}
+                        slotProps={{
+                            input: {
+                                ...params.InputProps,
+                                startAdornment: <Search color="disabled" />,
+                            },
+                        }}
                     />
                 )}
             />

demo/src/inline-search.tsx

@@ -59,11 +59,13 @@ export function InlineSearch() {
                     label={intl.formatMessage({
                         id: 'element_search/label',
                     })}
-                    InputProps={{
-                        ...params.InputProps,
-                        startAdornment: <Search color="disabled" />,
-                    }}
                     value={displayedValue}
+                    slotProps={{
+                        input: {
+                            ...params.InputProps,
+                            startAdornment: <Search color="disabled" />,
+                        },
+                    }}
                 />
             )}
         />

package.json

@@ -78,9 +78,9 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@hookform/resolvers": "^4.0.0",
-        "@mui/icons-material": "^6.5.0",
-        "@mui/lab": "6.0.1-beta.36",
-        "@mui/material": "^6.5.0",
+        "@mui/icons-material": "^7.0.0",
+        "@mui/lab": "^7.0.0",
+        "@mui/material": "^7.0.0",
         "@mui/x-charts": "^8.21.0",
         "@mui/x-tree-view": "^8.21.0",
         "ag-grid-community": "^35.3.1",
@@ -105,9 +105,9 @@
         "@eslint/js": "^9.38.0",
         "@hookform/resolvers": "^4.1.3",
         "@jest/globals": "^30.1.2",
-        "@mui/icons-material": "^6.5.0",
-        "@mui/lab": "6.0.1-beta.36",
-        "@mui/material": "^6.5.0",
+        "@mui/icons-material": "^7.3.11",
+        "@mui/lab": "^7.0.0",
+        "@mui/material": "^7.3.11",
         "@mui/x-charts": "^8.21.0",
         "@react-hook/window-size": "^3.1.1",
         "@storybook/addon-docs": "^10.4.2",

src/components/composite/agGridTable/BottomTableButtons.tsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Box, Grid2 as Grid, IconButton, styled } from '@mui/material';
+import { Box, Grid, IconButton, styled } from '@mui/material';
 import { ArrowCircleDown, ArrowCircleUp, ControlPoint as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
 import { ErrorInput } from '../../ui/reactHookForm/errorManagement/ErrorInput';
 import { FieldErrorAlert } from '../../ui/reactHookForm/errorManagement/FieldErrorAlert';

src/components/composite/customAGGrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { useMemo } from 'react';
-import { Grid2 as Grid, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
+import { Grid, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
 import { Clear as ClearIcon } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
 import { mergeSx, MuiStyles } from '../../../../utils';
@@ -57,19 +57,21 @@ export function CustomAggridTextFilter({
                     placeholder={intl.formatMessage({
                         id: 'filter.filterOoo',
                     })}
-                    inputProps={{
-                        type: isNumberInput ? FilterDataTypes.NUMBER : FilterDataTypes.TEXT,
-                    }}
                     sx={mergeSx(styles.input, isNumberInput ? styles.noArrows : undefined)}
-                    /* eslint-disable-next-line react/jsx-no-duplicate-props */
-                    InputProps={{
-                        endAdornment: value ? (
-                            <InputAdornment position="end">
-                                <IconButton aria-label="clear filter" onClick={onClear} edge="end" size="small">
-                                    <ClearIcon />
-                                </IconButton>
-                            </InputAdornment>
-                        ) : null,
+                    slotProps={{
+                        input: {
+                            endAdornment: value ? (
+                                <InputAdornment position="end">
+                                    <IconButton aria-label="clear filter" onClick={onClear} edge="end" size="small">
+                                        <ClearIcon />
+                                    </IconButton>
+                                </InputAdornment>
+                            ) : null,
+                        },
+
+                        htmlInput: {
+                            type: isNumberInput ? FilterDataTypes.NUMBER : FilterDataTypes.TEXT,
+                        },
                     }}
                 />
             </Grid>

src/components/composite/customAGGrid/custom-aggrid-filters/custom-filter-icon.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { MouseEventHandler } from 'react';
-import { Badge, Grid2 as Grid, IconButton } from '@mui/material';
+import { Badge, Grid, IconButton } from '@mui/material';
 import { FilterAlt } from '@mui/icons-material';
 import { isNonEmptyStringOrArray, MuiStyles } from '../../../../utils';
 import { FilterTextComparators } from '../custom-aggrid-types';

src/components/composite/customAGGrid/custom-aggrid-header.tsx

@@ -7,7 +7,7 @@
 
 import React, { ComponentType, useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Grid2 as Grid, Tooltip } from '@mui/material';
+import { Grid, Tooltip } from '@mui/material';
 import { WarningAmber } from '@mui/icons-material';
 import { CustomHeaderProps } from 'ag-grid-react';
 import { CustomAggridSort } from './custom-aggrid-sort';

src/components/composite/customAGGrid/custom-aggrid-menu.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { useRef, useState } from 'react';
-import { Badge, Grid2 as Grid, IconButton } from '@mui/material';
+import { Badge, Grid, IconButton } from '@mui/material';
 import { MoreVert as MoreVertIcon } from '@mui/icons-material';
 import { MuiStyles } from '../../../utils';
 

src/components/composite/dnd-table/dnd-table-bottom-left-buttons.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid2 as Grid, IconButton } from '@mui/material';
+import { Grid, IconButton } from '@mui/material';
 import { Replay as ReplayIcon, Upload as UploadIcon } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
 import { CustomTooltip } from '../../ui/tooltip/CustomTooltip';

src/components/composite/dnd-table/dnd-table-bottom-right-buttons.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid2 as Grid, IconButton } from '@mui/material';
+import { Grid, IconButton } from '@mui/material';
 import {
     AddCircle as AddCircleIcon,
     ArrowDownward as ArrowDownwardIcon,

src/components/composite/dnd-table/dnd-table.tsx

@@ -12,7 +12,7 @@ import {
     Box,
     Checkbox,
     CheckboxProps,
-    Grid2 as Grid,
+    Grid,
     IconButton,
     Table,
     TableBody,

src/components/composite/elementSearch/elementSearchInput/ElementSearchInput.tsx

@@ -126,8 +126,10 @@ export function ElementSearchInput<T>(props: Readonly<ElementSearchInputProps<T>
                 return option === value;
             }}
             disabled={searchTermDisabled}
-            PaperComponent={PaperComponent}
             filterOptions={filterOptions}
+            slots={{
+                paper: PaperComponent,
+            }}
         />
     );
 }

src/components/composite/filter/HeaderFilterForm.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid2 as Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import type { UUID } from 'node:crypto';
 import * as yup from 'yup';
 import { ElementType, FieldConstants, MAX_CHAR_DESCRIPTION } from '../../../utils';

src/components/composite/filter/explicitNaming/ExplicitNamingFilterForm.tsx

@@ -8,7 +8,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { FieldValues, UseFieldArrayReturn, useWatch } from 'react-hook-form';
-import { Alert, Grid2 as Grid, Stack } from '@mui/material';
+import { Alert, Grid, Stack } from '@mui/material';
 import { ColDef, ValueParserParams } from 'ag-grid-community';
 import { v4 as uuid4 } from 'uuid';
 import type { UUID } from 'node:crypto';

src/components/composite/flatParameters/FlatParameters.tsx

@@ -274,7 +274,6 @@ export function FlatParameters({
                     <TextField
                         size="small"
                         sx={{ width: '50%' }}
-                        inputProps={{ style: { textAlign: 'right' } }}
                         value={fieldValue}
                         onFocus={() => onUncommitted(param, true)}
                         onBlur={() => onUncommitted(param, false)}
@@ -286,6 +285,9 @@ export function FlatParameters({
                         }}
                         error={err}
                         variant={variant}
+                        slotProps={{
+                            htmlInput: { style: { textAlign: 'right' } },
+                        }}
                     />
                 );
             }
@@ -294,7 +296,6 @@ export function FlatParameters({
                     <TextField
                         size="small"
                         sx={{ width: '50%' }}
-                        inputProps={{ style: { textAlign: 'right' } }}
                         value={fieldValue}
                         onFocus={() => onUncommitted(param, true)}
                         onBlur={() => onUncommitted(param, false)}
@@ -305,6 +306,9 @@ export function FlatParameters({
                             }
                         }}
                         variant={variant}
+                        slotProps={{
+                            htmlInput: { style: { textAlign: 'right' } },
+                        }}
                     />
                 );
             case 'STRING_LIST':
@@ -319,13 +323,15 @@ export function FlatParameters({
                                     value={getStringListValue(allOptions, fieldValue)}
                                     size="small"
                                     variant={variant}
-                                    InputProps={{
-                                        readOnly: true,
-                                        endAdornment: (
-                                            <IconButton onClick={() => setOpenSelector(true)}>
-                                                <TuneIcon />
-                                            </IconButton>
-                                        ),
+                                    slotProps={{
+                                        input: {
+                                            readOnly: true,
+                                            endAdornment: (
+                                                <IconButton onClick={() => setOpenSelector(true)}>
+                                                    <TuneIcon />
+                                                </IconButton>
+                                            ),
+                                        },
                                     }}
                                 />
                                 <MultipleSelectionDialog
@@ -354,11 +360,11 @@ export function FlatParameters({
                             getOptionLabel={(option) => getTranslatedValue(param.name, option)}
                             onChange={(e, value) => onFieldChange(value, param)}
                             value={fieldValue}
-                            renderTags={(values, getTagProps) => {
+                            renderValue={(values, getItemProps) => {
                                 return values.map((value, index) => (
                                     <Chip
                                         label={getTranslatedValue(param.name, value)}
-                                        {...getTagProps({ index })}
+                                        {...getItemProps({ index })}
                                         key={`chip_${value}`}
                                     />
                                 ));
@@ -378,13 +384,13 @@ export function FlatParameters({
                         size="small"
                         onChange={(e, value) => onFieldChange(value, param)}
                         value={fieldValue}
-                        renderTags={(values, getTagProps) => {
+                        renderValue={(values, getItemProps) => {
                             return values.map((value, index) => (
                                 <Chip
                                     id={`chip_${value}`}
                                     size="small"
                                     label={value}
-                                    {...getTagProps({ index })}
+                                    {...getItemProps({ index })}
                                     key={`chip_${value}`}
                                 />
                             ));

src/components/composite/grid/grid-item.tsx

@@ -5,16 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { PropsWithChildren, ReactNode } from 'react';
-import { Grid2 as Grid, Grid2Props } from '@mui/material';
+import { Grid, GridProps } from '@mui/material';
 import { CustomTooltip } from '../../ui/tooltip';
 import { mergeSx } from '../../../utils';
 
 export interface GridItemProps extends PropsWithChildren {
-    size?: Grid2Props['size'];
-    offset?: Grid2Props['offset'];
+    size?: GridProps['size'];
+    offset?: GridProps['offset'];
     alignItem?: string;
     tooltip?: ReactNode;
-    sx?: Grid2Props['sx'];
+    sx?: GridProps['sx'];
 }
 
 export function GridItem({

src/components/composite/grid/grid-section.tsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Box, Grid2 as Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import type { SxStyle } from '../../../utils/styles';
 

src/components/composite/reactQueryBuilder/PropertyValueEditor.tsx

@@ -6,15 +6,7 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import {
-    Autocomplete,
-    FormControl,
-    Grid2 as Grid,
-    MenuItem,
-    Select,
-    type SelectChangeEvent,
-    TextField,
-} from '@mui/material';
+import { Autocomplete, FormControl, Grid, MenuItem, Select, type SelectChangeEvent, TextField } from '@mui/material';
 import { ValueEditorProps } from 'react-querybuilder';
 import { useIntl } from 'react-intl';
 import { useValid } from './hooks/useValid';

src/components/composite/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { ValueEditorProps } from 'react-querybuilder';
-import { Grid2 as Grid, MenuItem, Select, Typography } from '@mui/material';
+import { Grid, MenuItem, Select, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { CompositeRule, OperatorOption } from '../../filter/expert/expertFilter.type';
 import type { MuiStyles } from '../../../../utils/styles';