antoinebhs · Sep 21, 2026 · Sep 14, 2026 · Sep 17, 2026 · Sep 17, 2026 · Sep 21, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,11 +18,11 @@
         "@emotion/styled": "^11.14.1",
         "@gridsuite/commons-ui": "0.295.0",
         "@hookform/resolvers": "^4.1.3",
-        "@mui/icons-material": "^7.3.11",
-        "@mui/lab": "7.0.1-beta.25",
-        "@mui/material": "^7.3.11",
-        "@mui/x-date-pickers": "^7.29.4",
-        "@mui/x-tree-view": "^8.21.0",
+        "@mui/icons-material": "^9.4.0",
+        "@mui/lab": "^9.0.0-beta.9",
+        "@mui/material": "^9.4.0",
+        "@mui/x-date-pickers": "^9.13.0",
+        "@mui/x-tree-view": "^9.13.0",
         "@reduxjs/toolkit": "^2.9.0",
         "ag-grid-community": "^35.3.1",
         "ag-grid-react": "^35.3.1",
@@ -32,7 +32,7 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-hook-form": "^7.62.0",
-        "react-hook-form-mui": "^7.6.2",
+        "react-hook-form-mui": "^9.0.1",
         "react-intl": "^7.1.11",
         "react-redux": "^9.2.0",
         "react-router": "^7.8.2",
@@ -103,5 +103,10 @@
         "vite-plugin-checker": "^0.11.0",
         "vite-plugin-svgr": "^4.5.0",
         "vite-tsconfig-paths": "^5.1.4"
+    },
+    "overrides": {
+        "mui-nested-menu": {
+            "@mui/material": ">=5.0.0"
+        }
     }
 }
diff --git a/src/components/App/AppWrapper.tsx b/src/components/App/AppWrapper.tsx
@@ -11,7 +11,7 @@ import { CssBaseline, responsiveFontSizes, ThemeOptions } from '@mui/material';
 import { createTheme, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material/styles';
 import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { enUS as MuiDatePickersEnUS, frFR as MuiDatePickersFrFR } from '@mui/x-date-pickers/locales';
 import { enUS as dateFnsEnUS, fr as dateFnsFr } from 'date-fns/locale';
 import {

diff --git a/src/components/App/HomePage.tsx b/src/components/App/HomePage.tsx
@@ -11,7 +11,14 @@ import { FormattedMessage } from 'react-intl';
 
 export default function HomePage(): ReactElement {
     return (
-        <Grid id="home-page" size={12} alignSelf="center" component="section">
+        <Grid
+            id="home-page"
+            size={12}
+            component="section"
+            sx={{
+                alignSelf: 'center',
+            }}
+        >
             <Typography variant="h3" color="textPrimary" align="center">
                 <FormattedMessage id="connected" />
             </Typography>

diff --git a/src/components/App/PageNotFound.tsx b/src/components/App/PageNotFound.tsx
@@ -6,7 +6,7 @@
  */
 
 import { Container } from '@mui/material';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 import { ReactNode } from 'react';
 import { type MuiStyles } from '@gridsuite/commons-ui';
 
@@ -25,7 +25,7 @@ const PageNotFound = ({ message }: { message: ReactNode }) => {
     return (
         <Container sx={styles.container}>
             <br />
-            <ErrorOutlineIcon sx={styles.error} />
+            <ErrorOutlinedIcon sx={styles.error} />
             <h1 style={{ textAlign: 'center' }}>{message}</h1>
         </Container>
     );

diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx
@@ -73,7 +73,13 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     );
 
     return (
-        <Stack justifyContent="flex-start" alignItems="stretch" width={'100%'}>
+        <Stack
+            sx={{
+                justifyContent: 'flex-start',
+                alignItems: 'stretch',
+                width: '100%',
+            }}
+        >
             <AppBar position="static" color="default">
                 <Toolbar
                     variant="dense"

diff --git a/src/pages/announcements/add-announcement-form.tsx b/src/pages/announcements/add-announcement-form.tsx
@@ -135,7 +135,12 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
             FormProps={{ style: { height: '100%' } }}
         >
             <FormErrorProvider onError={onErrorIntl}>
-                <Stack spacing={1} height="100%">
+                <Stack
+                    spacing={1}
+                    sx={{
+                        height: '100%',
+                    }}
+                >
                     <Grid container spacing={1}>
                         <Grid size={{ xs: 12, lg: 6 }}>
                             <DateTimePickerElement<FormSchema>

diff --git a/src/pages/announcements/announcements-page.tsx b/src/pages/announcements/announcements-page.tsx
@@ -122,7 +122,12 @@ export default function AnnouncementsPage() {
     return (
         <Grid container spacing={2} sx={{ p: 1, height: '100%', width: '100%' }}>
             <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ display: 'flex' }}>
-                <Stack height="100%" sx={{ flexGrow: 1 }}>
+                <Stack
+                    sx={{
+                        height: '100%',
+                        flexGrow: 1,
+                    }}
+                >
                     <Typography variant="subtitle1">
                         <FormattedMessage id="announcements.programNewMessage" />
                     </Typography>
@@ -133,8 +138,17 @@ export default function AnnouncementsPage() {
                 </Stack>
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 8 }}>
-                <Stack height="100%">
-                    <Typography variant="subtitle1" mb={0.5}>
+                <Stack
+                    sx={{
+                        height: '100%',
+                    }}
+                >
+                    <Typography
+                        variant="subtitle1"
+                        sx={{
+                            mb: 0.5,
+                        }}
+                    >
                         <FormattedMessage id="announcements.programmedMessage" />
                     </Typography>
                     <Box sx={{ flexGrow: 1 }}>

diff --git a/src/pages/groups/add-group-dialog.tsx b/src/pages/groups/add-group-dialog.tsx
@@ -96,15 +96,17 @@ const AddGroupDialog: FunctionComponent<AddGroupDialogProps> = (props) => {
                             fullWidth
                             variant="standard"
                             inputMode="text"
-                            InputProps={{
-                                startAdornment: (
-                                    <InputAdornment position="start">
-                                        <Groups />
-                                    </InputAdornment>
-                                ),
-                            }}
                             error={fieldState?.invalid}
                             helperText={fieldState?.error?.message}
+                            slotProps={{
+                                input: {
+                                    startAdornment: (
+                                        <InputAdornment position="start">
+                                            <Groups />
+                                        </InputAdornment>
+                                    ),
+                                },
+                            }}
                         />
                     )}
                 />

diff --git a/src/pages/groups/modification/group-modification-form.tsx b/src/pages/groups/modification/group-modification-form.tsx
@@ -60,7 +60,15 @@ const GroupModificationForm: FunctionComponent<GroupModificationFormProps> = ({
     );
 
     return (
-        <Grid container spacing={2} marginTop={2} sx={{ height: '100%', width: '100%' }}>
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                marginTop: 2,
+                height: '100%',
+                width: '100%',
+            }}
+        >
             <Grid sx={{ width: '100%' }}>
                 <TextInput name={GROUP_NAME} label={'groups.table.id'} clearable={true} />
             </Grid>

diff --git a/src/pages/profiles/add-profile-dialog.tsx b/src/pages/profiles/add-profile-dialog.tsx
@@ -100,15 +100,17 @@ const AddProfileDialog: FunctionComponent<AddProfileDialogProps> = (props) => {
                             fullWidth
                             variant="standard"
                             inputMode="text"
-                            InputProps={{
-                                startAdornment: (
-                                    <InputAdornment position="start">
-                                        <ManageAccounts />
-                                    </InputAdornment>
-                                ),
-                            }}
                             error={fieldState?.invalid}
                             helperText={fieldState?.error?.message}
+                            slotProps={{
+                                input: {
+                                    startAdornment: (
+                                        <InputAdornment position="start">
+                                            <ManageAccounts />
+                                        </InputAdornment>
+                                    ),
+                                },
+                            }}
                         />
                     )}
                 />

diff --git a/src/pages/profiles/modification/configuration-selection.tsx b/src/pages/profiles/modification/configuration-selection.tsx
@@ -99,7 +99,13 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
     };
 
     return (
-        <Grid container columns={24} alignItems={'center'}>
+        <Grid
+            container
+            columns={24}
+            sx={{
+                alignItems: 'center',
+            }}
+        >
             <Grid size={1}>
                 <IconButton edge="start" onClick={handleResetConfig} disableRipple={watchConfigId === undefined}>
                     <Tooltip

diff --git a/src/pages/profiles/modification/profile-modification-form.tsx b/src/pages/profiles/modification/profile-modification-form.tsx
@@ -40,7 +40,14 @@ const configList: ConfigSelectionProps[] = [
 
 const ProfileModificationForm: FunctionComponent = () => {
     return (
-        <Grid container spacing={2} marginTop={2} sx={{ width: '100%' }}>
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                marginTop: 2,
+                width: '100%',
+            }}
+        >
             <Grid sx={{ width: '100%' }}>
                 <TextInput name={PROFILE_NAME} label={'profiles.table.id'} clearable={true} />
             </Grid>
@@ -64,13 +71,29 @@ const ProfileModificationForm: FunctionComponent = () => {
                     <FormattedMessage id={'profiles.form.modification.userQuotas'} />
                 </h3>
             </Grid>
-            <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+            <Grid
+                container
+                spacing={2}
+                direction="row"
+                sx={{
+                    marginLeft: 'auto',
+                    width: '100%',
+                }}
+            >
                 <Grid sx={{ width: '100%' }}>
                     <h4>
                         <FormattedMessage id={'profiles.form.modification.userCaseAndBuildsQuotas'} />
                     </h4>
                 </Grid>
-                <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid
+                    container
+                    spacing={2}
+                    direction="row"
+                    sx={{
+                        marginLeft: 'auto',
+                        width: '100%',
+                    }}
+                >
                     <Grid size={4}>
                         <IntegerInput
                             name={UserQuotaNb.CASE}
@@ -91,7 +114,15 @@ const ProfileModificationForm: FunctionComponent = () => {
                         <FormattedMessage id={'profiles.form.modification.parallelExecutionsQuotas'} />
                     </h4>
                 </Grid>
-                <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid
+                    container
+                    spacing={2}
+                    direction="row"
+                    sx={{
+                        marginLeft: 'auto',
+                        width: '100%',
+                    }}
+                >
                     <Grid size={4}>
                         <IntegerInput
                             name={UserQuotaNb.LOADFLOW}
@@ -114,7 +145,15 @@ const ProfileModificationForm: FunctionComponent = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid
+                    container
+                    spacing={2}
+                    direction="row"
+                    sx={{
+                        marginLeft: 'auto',
+                        width: '100%',
+                    }}
+                >
                     <Grid size={4}>
                         <IntegerInput
                             name={UserQuotaNb.SHORTCIRCUIT}
@@ -137,7 +176,15 @@ const ProfileModificationForm: FunctionComponent = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid
+                    container
+                    spacing={2}
+                    direction="row"
+                    sx={{
+                        marginLeft: 'auto',
+                        width: '100%',
+                    }}
+                >
                     <Grid size={4}>
                         <IntegerInput
                             name={UserQuotaNb.STATE_ESTIMATION}
@@ -160,7 +207,15 @@ const ProfileModificationForm: FunctionComponent = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid
+                    container
+                    spacing={2}
+                    direction="row"
+                    sx={{
+                        marginLeft: 'auto',
+                        width: '100%',
+                    }}
+                >
                     <Grid size={4}>
                         <IntegerInput
                             name={UserQuotaNb.DYNAMIC_SECURITY_INIT}

diff --git a/src/pages/users/add-user-dialog.tsx b/src/pages/users/add-user-dialog.tsx
@@ -97,15 +97,17 @@ const AddUserDialog: FunctionComponent<AddUserDialogProps> = (props) => {
                             fullWidth
                             variant="standard"
                             inputMode="text"
-                            InputProps={{
-                                startAdornment: (
-                                    <InputAdornment position="start">
-                                        <AccountCircle />
-                                    </InputAdornment>
-                                ),
-                            }}
                             error={fieldState?.invalid}
                             helperText={fieldState?.error?.message}
+                            slotProps={{
+                                input: {
+                                    startAdornment: (
+                                        <InputAdornment position="start">
+                                            <AccountCircle />
+                                        </InputAdornment>
+                                    ),
+                                },
+                            }}
                         />
                     )}
                 />

diff --git a/src/pages/users/modification/user-modification-form.tsx b/src/pages/users/modification/user-modification-form.tsx
@@ -74,7 +74,15 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
     );
 
     return (
-        <Grid container spacing={2} marginTop={2} sx={{ height: '100%', width: '100%' }}>
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                marginTop: 2,
+                height: '100%',
+                width: '100%',
+            }}
+        >
             <Grid sx={{ width: '100%' }}>
                 <TextInput
                     name={USER_NAME}
@@ -92,7 +100,14 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                 />
             </Grid>
             <Grid sx={{ width: '100%' }}>
-                <Grid container columns={24} columnSpacing={3} alignItems="center">
+                <Grid
+                    container
+                    columns={24}
+                    columnSpacing={3}
+                    sx={{
+                        alignItems: 'center',
+                    }}
+                >
                     <Grid size={23}>
                         <AutocompleteInput
                             name={USER_PROFILE_NAME}