@gridsuite/commons-ui 0.260.0 → 0.261.0

package/dist/features/parameters/dynamic-simulation/curve/common/grid-search.js

@@ -46,11 +46,13 @@ const GridSearch = forwardRef(({ gridRef, disabled }, ref) => {
       onChange: handleChangeFilter,
       inputRef,
       fullWidth: true,
-      InputProps: {
-        sx: {
-          input: styles.searchSection
-        },
-        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { color: disabled ? "disabled" : "inherit" }) })
+      slotProps: {
+        input: {
+          sx: {
+            input: styles.searchSection
+          },
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { color: disabled ? "disabled" : "inherit" }) })
+        }
       }
     }
   );

package/dist/features/parameters/dynamic-simulation/curve/curve-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useTheme, Stack, Grid2, Typography, Box } from "@mui/material";
+import { useTheme, Stack, Grid, Typography, Box } from "@mui/material";
 import { useState, useRef, useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useFormContext, useFieldArray } from "react-hook-form";
@@ -122,10 +122,10 @@ function CurveParameters({
   }, [getValues, mappingPath]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Stack, { sx: { height: 600 }, children: [
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: { marginBottom: theme.spacing(1) }, children: [
-        /* @__PURE__ */ jsx(Grid2, { container: true, size: "auto", children: /* @__PURE__ */ jsx(GridSearch, { ref: quickFilterRef, gridRef }, "curve-quick-filter") }),
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: { marginBottom: theme.spacing(1) }, children: [
+        /* @__PURE__ */ jsx(Grid, { container: true, size: "auto", children: /* @__PURE__ */ jsx(GridSearch, { ref: quickFilterRef, gridRef }, "curve-quick-filter") }),
         /* @__PURE__ */ jsx(
-          Grid2,
+          Grid,
           {
             container: true,
             size: "auto",
@@ -148,7 +148,7 @@ function CurveParameters({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Grid2, { sx: { flexGrow: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { sx: { flexGrow: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
         CustomAGGrid,
         {
           ref: gridRef,

package/dist/features/parameters/dynamic-simulation/curve/dialog/curve-selector-dialog.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme, Dialog, DialogTitle, Typography, DialogContent, Grid2, Stack, IconButton, DialogActions, Button } from "@mui/material";
+import { useTheme, Dialog, DialogTitle, Typography, DialogContent, Grid, Stack, IconButton, DialogActions, Button } from "@mui/material";
 import { useRef, useCallback } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { ArrowCircleRight, ArrowCircleLeft } from "@mui/icons-material";
@@ -55,7 +55,7 @@ function CurveSelectorDialog({
   return /* @__PURE__ */ jsxs(Dialog, { open, "aria-labelledby": "curve-selector-dialog-title", maxWidth: "xl", fullWidth: true, children: [
     /* @__PURE__ */ jsx(DialogTitle, { id: "curve-selector-dialog-title", children: /* @__PURE__ */ jsx(Typography, { component: "span", variant: "h5", sx: parametersStyles.title, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveSelectorDialogTitle" }) }) }),
     /* @__PURE__ */ jsx(DialogContent, { style: { overflowY: "hidden", height: "60vh" }, children: /* @__PURE__ */ jsxs(
-      Grid2,
+      Grid,
       {
         container: true,
         sx: mergeSx(parametersStyles.scrollableGrid, {
@@ -64,7 +64,7 @@ function CurveSelectorDialog({
           maxHeight: "100%"
         }),
         children: [
-          /* @__PURE__ */ jsx(Grid2, { container: true, size: 8, spacing: theme.spacing(1), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid, { container: true, size: 8, spacing: theme.spacing(1), children: /* @__PURE__ */ jsx(
             CurveSelector,
             {
               ref: selectorRef,
@@ -74,7 +74,7 @@ function CurveSelectorDialog({
               modelsFetcher
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { size: 0.5, display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsx(Grid, { size: 0.5, display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsxs(Stack, { children: [
             /* @__PURE__ */ jsx(
               CustomTooltip,
               {
@@ -110,7 +110,7 @@ function CurveSelectorDialog({
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(CurvePreview, { ref: previewRef }) })
+          /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(CurvePreview, { ref: previewRef }) })
         ]
       }
     ) }),

package/dist/features/parameters/dynamic-simulation/curve/dialog/curve-selector.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2, Stack, Typography } from "@mui/material";
+import { Grid, Stack, Typography } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { forwardRef, useRef, useState, useCallback, useImperativeHandle } from "react";
 import { getReferencedEquipmentTypeForModel } from "./curve-selector-utils.js";
@@ -39,7 +39,7 @@ const CurveSelector = forwardRef(
       []
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid2, { size: 6, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", justifyContent: "flex-start", spacing: 1, sx: { height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", justifyContent: "flex-start", spacing: 1, sx: { height: "100%" }, children: [
         /* @__PURE__ */ jsx(Typography, { sx: styles.h6, variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveEquipmentFilter" }) }),
         /* @__PURE__ */ jsx(
           EquipmentFilter,
@@ -53,7 +53,7 @@ const CurveSelector = forwardRef(
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 6, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", justifyContent: "flex-start", spacing: 1, sx: { height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", justifyContent: "flex-start", spacing: 1, sx: { height: "100%" }, children: [
         /* @__PURE__ */ jsx(Typography, { sx: styles.h6, variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveCurveFilter" }) }),
         /* @__PURE__ */ jsx(
           ModelFilter,

package/dist/features/parameters/dynamic-simulation/curve/dialog/equipment-filter.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2, Typography, Select, MenuItem, Stack, Box } from "@mui/material";
+import { Grid, Typography, Select, MenuItem, Stack, Box } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { forwardRef, useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle } from "react";
 import { buildExpertFilter, CURVE_EQUIPMENT_TYPES, NOMINAL_VOLTAGE_UNIT } from "./curve-selector-utils.js";
@@ -156,9 +156,9 @@ const EquipmentFilter = forwardRef(
       []
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveEquipmentType" }) }) }),
-        /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.criteria, children: [
+        /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveEquipmentType" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { size: 8, children: /* @__PURE__ */ jsx(
           Select,
           {
             labelId: "DynamicSimulationCurveEquipmentType",
@@ -170,9 +170,9 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurvePost" }) }) }),
-        /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.criteria, children: [
+        /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurvePost" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { size: 8, children: /* @__PURE__ */ jsx(
           CheckboxAutocomplete,
           {
             id: "voltage-level",
@@ -185,9 +185,9 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveCountry" }) }) }),
-        /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.criteria, children: [
+        /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveCountry" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { size: 8, children: /* @__PURE__ */ jsx(
           CheckboxAutocomplete,
           {
             id: "country",
@@ -198,9 +198,9 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveTension" }) }) }),
-        /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.criteria, children: [
+        /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveTension" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { size: 8, children: /* @__PURE__ */ jsx(
           CheckboxAutocomplete,
           {
             id: "nominal-voltage",

package/dist/features/parameters/dynamic-simulation/curve/dialog/model-filter.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useIntl, FormattedMessage } from "react-intl";
 import { forwardRef, useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from "react";
-import { Grid2, Typography, Stack, Box } from "@mui/material";
+import { Grid, Typography, Stack, Box } from "@mui/material";
 import CheckboxSelect from "../common/checkbox-select.js";
 import CheckboxTreeview from "../common/checkbox-treeview.js";
 import { EquipmentType } from "../../../../../utils/types/equipmentType.js";
@@ -115,9 +115,9 @@ const ModelFilter = forwardRef(
       return makeGetVariableLabel(intl);
     }, [intl]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.model, children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 6, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveModel" }) }) }),
-        /* @__PURE__ */ jsx(Grid2, { size: 6, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.model, children: [
+        /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveModel" }) }) }),
+        /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsx(
           CheckboxSelect,
           {
             options: initialSelectedModels,

package/dist/features/parameters/dynamic-simulation/dynamic-simulation-parameters-form.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Grid2, Tabs, Tab } from "@mui/material";
+import { Stack, Grid, Tabs, Tab } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import "@mui/icons-material";
 import "react";
@@ -59,8 +59,8 @@ function DynamicSimulationForm({
   const { formattedProviders } = dynamicSimulationMethods;
   const { selectedTab, tabsWithError, onTabChange } = useTabsReturn;
   return /* @__PURE__ */ jsxs(Stack, { sx: parametersStyles.scrollableGrid, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders, id: "Ds" }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
+    /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders, id: "Ds" }) }),
+    /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
       /* @__PURE__ */ jsx(
         Tab,
         {
@@ -102,7 +102,7 @@ function DynamicSimulationForm({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, sx: { paddingTop: 0, width: "100%", maxHeight: "100%" }, children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, size: 12, sx: { paddingTop: 0, width: "100%", maxHeight: "100%" }, children: [
       /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_TIME_DELAY, children: /* @__PURE__ */ jsx(TimeDelayParameters, { path: TabValues.TAB_TIME_DELAY }) }),
       /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_SOLVER, children: /* @__PURE__ */ jsx(SolverParameters, { path: TabValues.TAB_SOLVER }) }),
       /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_MAPPING, children: /* @__PURE__ */ jsx(MappingParameters, { path: TabValues.TAB_MAPPING }) }),

package/dist/features/parameters/dynamic-simulation/mapping/mapping-parameters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { MAPPING } from "./mapping-parameters-constants.js";
 import "../../../../utils/conversionUtils.js";
 import { ElementType } from "../../../../utils/types/elementType.js";
@@ -38,7 +38,7 @@ import "../../common/contingency-table/contingency-table.js";
 import "../../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 function MappingParameters({ path }) {
-  return /* @__PURE__ */ jsx(Grid2, { container: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(
     ParameterLineDirectoryItemsInput,
     {
       name: `${path}.${MAPPING}`,

package/dist/features/parameters/dynamic-simulation/network/network-parameters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Network } from "./network-parameters-constants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -109,7 +109,7 @@ const params = [
   }
 ];
 function NetworkParameters({ path }) {
-  return /* @__PURE__ */ jsx(Grid2, { container: true, children: params.map((param) => {
+  return /* @__PURE__ */ jsx(Grid, { container: true, children: params.map((param) => {
     const { name, type, ...otherParams } = param;
     return /* @__PURE__ */ jsx(ParameterField, { id: path, name: param.name, type: param.type, ...otherParams }, param.name);
   }) });

package/dist/features/parameters/dynamic-simulation/solver/solver-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { SolverType } from "../../../../utils/types/dynamic-simulation.type.js";
@@ -38,7 +38,7 @@ function SolverParameters({ path }) {
       sx: { width: "100%" }
     }
   ];
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
     params.map((param) => {
       const { name, type, ...otherParams } = param;
       return /* @__PURE__ */ jsx(ParameterField, { id: path, name: param.name, type: param.type, ...otherParams }, param.name);

package/dist/features/parameters/dynamic-simulation/time-delay/time-delay-parameters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
 import { ParameterType } from "../../../../utils/types/parameters.type.js";
@@ -19,7 +19,7 @@ const params = [
   }
 ];
 function TimeDelayParameters({ path }) {
-  return /* @__PURE__ */ jsx(Grid2, { container: true, children: params.map((param) => {
+  return /* @__PURE__ */ jsx(Grid, { container: true, children: params.map((param) => {
     const { name, type, ...otherParams } = param;
     return /* @__PURE__ */ jsx(ParameterField, { id: path, name: param.name, type: param.type, ...otherParams }, param.name);
   }) });

package/dist/features/parameters/loadflow/load-flow-parameters-content.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid2 } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import { TabValues } from "./load-flow-parameters-utils.js";
 import LoadFlowAdvancedParameters from "./load-flow-advanced-parameters.js";
 import LoadFlowGeneralParameters from "./load-flow-general-parameters.js";
@@ -63,9 +63,9 @@ function LoadFlowParametersContent({
   params,
   defaultLimitReductions
 }) {
-  return /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid2, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid2, { sx: styles.maxWidth, children: [
+  return /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid, { sx: styles.maxWidth, children: [
     /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.GENERAL, children: /* @__PURE__ */ jsx(LoadFlowGeneralParameters, {}) }),
-    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.LIMIT_REDUCTIONS, children: /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: currentProvider === PARAM_PROVIDER_OPENLOADFLOW ? /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params?.limitReductions ?? defaultLimitReductions }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.LIMIT_REDUCTIONS, children: /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: currentProvider === PARAM_PROVIDER_OPENLOADFLOW ? /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params?.limitReductions ?? defaultLimitReductions }) : /* @__PURE__ */ jsx(
       ParameterLineSlider,
       {
         name: PARAM_LIMIT_REDUCTION,

package/dist/features/parameters/loadflow/load-flow-parameters-dialog.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid2, LinearProgress } from "@mui/material";
+import { Grid, LinearProgress } from "@mui/material";
 import { CustomMuiDialog } from "../../../components/ui/dialogs/customMuiDialog/CustomMuiDialog.js";
 import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -81,7 +81,7 @@ function LoadFlowParametersEditionDialog({
       titleId,
       disabledSave: isDisabledValidationButton(errors),
       children: /* @__PURE__ */ jsxs(LoadFlowProvider, { children: [
-        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
           NameElementEditorForm,
           {
             initialElementName: name,

package/dist/features/parameters/loadflow/load-flow-parameters-form.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import LoadFlowParametersHeader from "./load-flow-parameters-header.js";
 import LoadFlowParametersContent from "./load-flow-parameters-content.js";
 import { parametersStyles } from "../parameters-style.js";
@@ -14,8 +14,8 @@ function LoadFlowParametersForm({ loadflowMethods }) {
     watchProvider,
     defaultLimitReductions
   } = loadflowMethods;
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, sx: parametersStyles.scrollableGrid, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, sx: parametersStyles.scrollableGrid, children: [
+    /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(
       LoadFlowParametersHeader,
       {
         selectedTab,
@@ -25,7 +25,7 @@ function LoadFlowParametersForm({ loadflowMethods }) {
         disableSpecificProviderParams: !watchProvider || !specificParametersDescriptionForProvider
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(
       LoadFlowParametersContent,
       {
         selectedTab,

package/dist/features/parameters/network-visualizations/map-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useState, useEffect } from "react";
 import { MAP_BASE_MAP, NetworkVisualizationTabValues, PARAM_MAP_BASEMAP, PARAM_LINE_FULL_PATH, PARAM_LINE_PARALLEL_PATH, INTL_LINE_FLOW_MODE_OPTIONS, LINE_FLOW_MODE, PARAM_LINE_FLOW_MODE, MAP_MANUAL_REFRESH, PARAM_MAP_MANUAL_REFRESH } from "./constants.js";
@@ -52,12 +52,12 @@ function MapParameters() {
     });
   }, [setBaseMapOptions, snackError]);
   const lineSwitch = (name, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.MAP}.${name}` }) })
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.MAP}.${name}` }) })
   ] });
   const lineFlow = (name, label, options) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -68,8 +68,8 @@ function MapParameters() {
     ) })
   ] });
   const mapBaseMap = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: MAP_BASE_MAP }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: MAP_BASE_MAP }) }),
+    /* @__PURE__ */ jsx(Grid, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -80,7 +80,7 @@ function MapParameters() {
     ) })
   ] });
   return /* @__PURE__ */ jsxs(
-    Grid2,
+    Grid,
     {
       container: true,
       spacing: 1,

package/dist/features/parameters/network-visualizations/network-area-diagram-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { NAD_POSITIONS_GENERATION_MODE_LABEL, NetworkVisualizationTabValues, PARAM_NAD_POSITIONS_GENERATION_MODE, NAD_POSITIONS_GENERATION_MODE } from "./constants.js";
 import { parametersStyles } from "../parameters-style.js";
@@ -34,7 +34,7 @@ import "react-resizable-panels";
 import "react-papaparse";
 function NetworkAreaDiagramParameters() {
   return /* @__PURE__ */ jsxs(
-    Grid2,
+    Grid,
     {
       container: true,
       spacing: 1,
@@ -42,8 +42,8 @@ function NetworkAreaDiagramParameters() {
       marginTop: -3,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: NAD_POSITIONS_GENERATION_MODE_LABEL }) }),
-        /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: NAD_POSITIONS_GENERATION_MODE_LABEL }) }),
+        /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
           MuiSelectInput,
           {
             fullWidth: true,

package/dist/features/parameters/network-visualizations/network-visualizations-parameters-dialog.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, LinearProgress } from "@mui/material";
+import { Grid, LinearProgress } from "@mui/material";
 import { CustomMuiDialog } from "../../../components/ui/dialogs/customMuiDialog/CustomMuiDialog.js";
 import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -67,14 +67,16 @@ function NetworkVisualizationsParametersEditionDialog({
       },
       titleId,
       disabledSave: isDisabledValidationButton(errors),
-      PaperProps: {
-        sx: {
-          height: "65vh"
-          // we want the dialog height to be fixed even when switching tabs
+      slotProps: {
+        paper: {
+          sx: {
+            height: "65vh"
+            // we want the dialog height to be fixed even when switching tabs
+          }
         }
       },
       children: [
-        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
           NameElementEditorForm,
           {
             initialElementName: name,

package/dist/features/parameters/network-visualizations/single-line-diagram-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { INTL_SUBSTATION_LAYOUT_OPTIONS, SUBSTATION_LAYOUT, NetworkVisualizationTabValues, PARAM_SUBSTATION_LAYOUT, COMPONENT_LIBRARY, PARAM_COMPONENT_LIBRARY, DIAGONAL_LABEL, PARAM_DIAGONAL_LABEL, CENTER_LABEL, PARAM_CENTER_LABEL, CUSTOM_REAL_TIME_STATE_ESTIMATION, PARAM_STATE_ESTIMATION } from "./constants.js";
@@ -42,12 +42,12 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     return INTL_SUBSTATION_LAYOUT_OPTIONS;
   }, []);
   const labelPosition = (name, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM}.${name}` }) })
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM}.${name}` }) })
   ] });
   const substationLineDropDown = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: SUBSTATION_LAYOUT }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: SUBSTATION_LAYOUT }) }),
+    /* @__PURE__ */ jsx(Grid, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -58,8 +58,8 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     ) })
   ] });
   const componentLineDropDown = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: COMPONENT_LIBRARY }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: COMPONENT_LIBRARY }) }),
+    /* @__PURE__ */ jsx(Grid, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -72,7 +72,7 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     ) })
   ] });
   return /* @__PURE__ */ jsxs(
-    Grid2,
+    Grid,
     {
       container: true,
       spacing: 1,

package/dist/features/parameters/pcc-min/pcc-min-parameters-dialog.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, LinearProgress } from "@mui/material";
+import { Grid, LinearProgress } from "@mui/material";
 import { CustomMuiDialog } from "../../../components/ui/dialogs/customMuiDialog/CustomMuiDialog.js";
 import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -65,14 +65,16 @@ function PccMinParametersEditionDialog({
       },
       titleId,
       disabledSave: isDisabledValidationButton(errors),
-      PaperProps: {
-        sx: {
-          height: "90vh"
-          // we want the dialog height to be fixed even when switching tabs
+      slotProps: {
+        paper: {
+          sx: {
+            height: "90vh"
+            // we want the dialog height to be fixed even when switching tabs
+          }
         }
       },
       children: [
-        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
           NameElementEditorForm,
           {
             initialElementName: name,

package/dist/features/parameters/pcc-min/pcc-min-parameters-form.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { ParameterLineDirectoryItemsInput } from "../common/widget/parameter-line-directory-items-input.js";
 import { FILTERS } from "../../../utils/constants/filterConstant.js";
 import "../../../utils/conversionUtils.js";
@@ -8,7 +8,7 @@ import { EquipmentType } from "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { parametersStyles } from "../parameters-style.js";
 function PccMinParametersForm() {
-  return /* @__PURE__ */ jsx(Grid2, { container: true, sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid, { container: true, sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(
     ParameterLineDirectoryItemsInput,
     {
       name: FILTERS,

package/dist/features/parameters/security-analysis/security-analysis-parameters-dialog.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, LinearProgress } from "@mui/material";
+import { Grid, LinearProgress } from "@mui/material";
 import "react";
 import "react-intl";
 import "../../../utils/conversionUtils.js";
@@ -76,14 +76,16 @@ function SecurityAnalysisParametersDialog({
       },
       titleId,
       disabledSave: isDisabledValidationButton(errors),
-      PaperProps: {
-        sx: {
-          height: "90vh"
-          // we want the dialog height to be fixed even when switching tabs
+      slotProps: {
+        paper: {
+          sx: {
+            height: "90vh"
+            // we want the dialog height to be fixed even when switching tabs
+          }
         }
       },
       children: [
-        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
           NameElementEditorForm,
           {
             initialElementName: name,

package/dist/features/parameters/security-analysis/security-analysis-violations-hiding.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import { useIntl } from "react-intl";
 import { Info } from "@mui/icons-material";
 import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
@@ -41,10 +41,10 @@ function SecurityAnalysisFields({
   isSingleField
 }) {
   const intl = useIntl();
-  return /* @__PURE__ */ jsxs(Grid2, { sx: isSingleField ? parametersStyles.singleItem : parametersStyles.multipleItems, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: label }) }) }),
+  return /* @__PURE__ */ jsxs(Grid, { sx: isSingleField ? parametersStyles.singleItem : parametersStyles.multipleItems, children: [
+    /* @__PURE__ */ jsx(Grid, { size: 4, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: label }) }) }),
     /* @__PURE__ */ jsx(
-      Grid2,
+      Grid,
       {
         container: true,
         size: isSingleField ? 8 : 4,
@@ -61,7 +61,7 @@ function SecurityAnalysisFields({
         )
       }
     ),
-    !isSingleField && secondField && /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.secondTextField, children: /* @__PURE__ */ jsx(
+    !isSingleField && secondField && /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: parametersStyles.secondTextField, children: /* @__PURE__ */ jsx(
       FloatInput,
       {
         name: secondField.name,
@@ -112,7 +112,7 @@ const fieldsToShow = [
 function ViolationsHidingParameters() {
   const intl = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 1, paddingBottom: 1, children: /* @__PURE__ */ jsxs(Grid2, { size: 8, sx: parametersStyles.text, children: [
+    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, paddingBottom: 1, children: /* @__PURE__ */ jsxs(Grid, { size: 8, sx: parametersStyles.text, children: [
       /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({
         id: "securityAnalysis.violationsHiding"
       }) }),