@gridsuite/commons-ui 0.239.0 → 0.240.0

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid, Typography, Select, MenuItem, Box } from "@mui/material";
+import { Grid2, 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";
@@ -17,7 +17,7 @@ import "mathjs";
 const styles = {
   grid: {
     width: "100%",
-    height: "100%"
+    flex: 1
   },
   criteria: {
     width: "100%",
@@ -25,7 +25,7 @@ const styles = {
   },
   equipment: {
     width: "100%",
-    flexGrow: 1
+    flex: 1
   },
   equipmentTitle: (theme) => ({
     marginBottom: theme.spacing(1)
@@ -156,9 +156,9 @@ const EquipmentFilter = forwardRef(
       []
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveEquipmentType" }) }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+      /* @__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(
           Select,
           {
             labelId: "DynamicSimulationCurveEquipmentType",
@@ -170,9 +170,9 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurvePost" }) }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+      /* @__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(
           CheckboxAutocomplete,
           {
             id: "voltage-level",
@@ -185,9 +185,9 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveCountry" }) }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+      /* @__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(
           CheckboxAutocomplete,
           {
             id: "country",
@@ -198,9 +198,9 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: styles.criteria, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveTension" }) }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+      /* @__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(
           CheckboxAutocomplete,
           {
             id: "nominal-voltage",
@@ -211,12 +211,12 @@ const EquipmentFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: styles.equipment, direction: "column", children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Typography, { sx: styles.equipmentTitle, variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxs(Stack, { sx: styles.equipment, children: [
+        /* @__PURE__ */ jsxs(Typography, { sx: styles.equipmentTitle, variant: "subtitle1", children: [
           /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveEquipment" }),
           ` (${selectedRowsLength} / ${equipmentRowData?.length ?? 0})`
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
           CustomAGGrid,
           {
             ref: equipmentsRef,
@@ -230,7 +230,7 @@ const EquipmentFilter = forwardRef(
             overlayLoadingTemplate: intl.formatMessage({ id: "LoadingRemoteData" }),
             overrideLocales: AGGRID_LOCALES
           }
-        ) }) })
+        ) })
       ] })
     ] });
   }

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 { Grid, Typography, Box } from "@mui/material";
+import { Grid2, 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";
@@ -31,7 +31,8 @@ const styles = {
     border: "solid",
     borderWidth: ".5px",
     borderColor: theme.palette.divider,
-    overflow: "auto"
+    overflow: "auto",
+    flex: 1
   }),
   model: {
     width: "100%"
@@ -41,7 +42,7 @@ const styles = {
   }),
   variable: {
     width: "100%",
-    flexGrow: 1
+    flex: 1
   },
   variableTree: {
     maxHeight: "440px"
@@ -114,9 +115,9 @@ const ModelFilter = forwardRef(
       return makeGetVariableLabel(intl);
     }, [intl]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: styles.model, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveModel" }) }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+      /* @__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(
           CheckboxSelect,
           {
             options: initialSelectedModels,
@@ -127,9 +128,9 @@ const ModelFilter = forwardRef(
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid, { item: true, sx: styles.variable, container: true, direction: "column", children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, width: "100%", children: /* @__PURE__ */ jsx(Typography, { sx: styles.modelTitle, variant: "subtitle1", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveVariable" }) }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, width: "100%", xs: true, children: /* @__PURE__ */ jsx(Box, { sx: styles.tree, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Stack, { sx: styles.variable, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: styles.modelTitle, variant: "subtitle1", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveVariable" }) }),
+        /* @__PURE__ */ jsx(Box, { sx: styles.tree, children: /* @__PURE__ */ jsx(
           CheckboxTreeview,
           {
             ref: variablesRef,
@@ -138,7 +139,7 @@ const ModelFilter = forwardRef(
             checkAll: true,
             sx: styles.variableTree
           }
-        ) }) })
+        ) })
       ] })
     ] });
   }

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useState, useCallback, useEffect } from "react";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import { ElementType } from "../../../utils/types/elementType.js";
@@ -111,8 +111,8 @@ function DynamicSimulationInline({
   }, [formState, setHaveDirtyFields]);
   const renderActions = (onSubmitError) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { container: true, item: true, children: /* @__PURE__ */ jsxs(
-        Grid,
+      /* @__PURE__ */ jsx(Grid2, { container: true, children: /* @__PURE__ */ jsxs(
+        Grid2,
         {
           sx: mergeSx(parametersStyles.controlParametersItem, {
             paddingTop: 1,

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid, Tabs, Tab, LinearProgress } from "@mui/material";
+import { Stack, Grid2, Tabs, Tab, LinearProgress } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
@@ -67,9 +67,9 @@ function DynamicSimulationForm({
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     renderTitleFields?.(),
-    paramsLoaded ? /* @__PURE__ */ jsxs(Grid, { container: true, sx: { height: "100%" }, direction: "column", children: [
-      /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders }) }),
-      /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
+    paramsLoaded ? /* @__PURE__ */ jsxs(Stack, { sx: { height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Grid2, { container: true, children: /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders }) }),
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
         /* @__PURE__ */ jsx(
           Tab,
           {
@@ -112,11 +112,10 @@ function DynamicSimulationForm({
         )
       ] }) }),
       /* @__PURE__ */ jsxs(
-        Grid,
+        Grid2,
         {
           container: true,
-          item: true,
-          xs: true,
+          size: "grow",
           sx: mergeSx(parametersStyles.scrollableGrid, {
             paddingTop: 0,
             width: "100%"

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { MAPPING } from "./mapping-parameters-constants.js";
 import "../../../../utils/conversionUtils.js";
 import { ElementType } from "../../../../utils/types/elementType.js";
@@ -39,7 +39,7 @@ import "../../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../../components/composite/filter/HeaderFilterForm.js";
 function MappingParameters({ path }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid2, { 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 { Grid } from "@mui/material";
+import { Grid2 } 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(Grid, { container: true, children: params.map((param) => {
+  return /* @__PURE__ */ jsx(Grid2, { 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 { Grid } from "@mui/material";
+import { Grid2 } 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(Grid, { container: true, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { 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 { Grid } from "@mui/material";
+import { Grid2 } 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(Grid, { container: true, children: params.map((param) => {
+  return /* @__PURE__ */ jsx(Grid2, { 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, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { TabValues } from "./load-flow-parameters-utils.js";
 import LoadFlowGeneralParameters from "./load-flow-general-parameters.js";
 import "../../../utils/conversionUtils.js";
@@ -62,9 +62,9 @@ function LoadFlowParametersContent({
   params,
   defaultLimitReductions
 }) {
-  return /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid, { item: true, sx: styles.maxWidth, children: [
+  return /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid2, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid2, { sx: styles.maxWidth, children: [
     /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.GENERAL, children: /* @__PURE__ */ jsx(LoadFlowGeneralParameters, { provider: currentProvider, specificParams: specificParameters }) }),
-    /* @__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(
+    /* @__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(
       ParameterLineSlider,
       {
         name: PARAM_LIMIT_REDUCTION,

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
+import { Box, Grid2, LinearProgress } from "@mui/material";
 import LoadFlowParametersHeader from "./load-flow-parameters-header.js";
 import LoadFlowParametersContent from "./load-flow-parameters-content.js";
 import "@mui/icons-material";
@@ -87,7 +87,7 @@ function LoadFlowParametersForm({
           formattedProviders
         }
       ),
-      /* @__PURE__ */ jsx(Grid, { container: true, sx: styles.content, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { container: true, sx: styles.content, children: /* @__PURE__ */ jsx(
         LoadFlowParametersContent,
         {
           selectedTab,

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, Tabs, Tab } from "@mui/material";
+import { Box, Grid2, Tabs, Tab } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { TabValues } from "./load-flow-parameters-utils.js";
 import { parametersStyles, getTabStyle } from "../parameters-style.js";
@@ -47,7 +47,7 @@ function LoadFlowParametersHeader({
   formattedProviders
 }) {
   return /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 0, paddingLeft: 1, paddingTop: 1 }, children: /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       container: true,
       spacing: 1,
@@ -58,8 +58,8 @@ function LoadFlowParametersHeader({
       },
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid2, { size: "grow", sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
+        /* @__PURE__ */ jsx(Grid2, { container: true, size: "auto", sx: { justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
           MuiSelectInput,
           {
             "data-testid": "LfProvider",
@@ -69,7 +69,7 @@ function LoadFlowParametersHeader({
           }
         ) }),
         /* @__PURE__ */ jsx(LineSeparator, {}),
-        /* @__PURE__ */ jsx(Grid, { item: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
+        /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
           /* @__PURE__ */ jsx(
             Tab,
             {

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { LoadFlowProvider } from "./load-flow-parameters-provider.js";
 import { parametersStyles } from "../parameters-style.js";
@@ -103,10 +103,9 @@ function LoadFlowParametersInline({
         return /* @__PURE__ */ jsxs(Box, { children: [
           /* @__PURE__ */ jsx(LineSeparator, {}),
           /* @__PURE__ */ jsxs(
-            Grid,
+            Grid2,
             {
               container: true,
-              item: true,
               sx: mergeSx(parametersStyles.controlParametersItem, parametersStyles.marginTopButton, {
                 paddingBottom: 0
               }),

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } 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";
@@ -59,12 +59,12 @@ function MapParameters() {
     });
   }, [setBaseMapOptions, snackError]);
   const lineSwitch = (name, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.MAP}.${name}` }) })
+    /* @__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}` }) })
   ] });
   const lineFlow = (name, label, options) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__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(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -75,8 +75,8 @@ function MapParameters() {
     ) })
   ] });
   const mapBaseMap = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: MAP_BASE_MAP }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__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(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -87,7 +87,7 @@ function MapParameters() {
     ) })
   ] });
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       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 { Grid } from "@mui/material";
+import { Grid2 } 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(
-    Grid,
+    Grid2,
     {
       container: true,
       spacing: 1,
@@ -42,8 +42,8 @@ function NetworkAreaDiagramParameters() {
       marginTop: -3,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: NAD_POSITIONS_GENERATION_MODE_LABEL }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+        /* @__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(
           MuiSelectInput,
           {
             fullWidth: true,

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid, LinearProgress, Tabs, Tab } from "@mui/material";
+import { Stack, LinearProgress, Tabs, Tab } from "@mui/material";
 import { useState, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import "@mui/icons-material";
@@ -62,9 +62,9 @@ function NetworkVisualizationParametersForm({
 }) {
   const componentLibraries = useGetAvailableComponentLibraries(userProfile);
   const { formMethods, formSchema, selectedTab, handleTabChange, paramsLoading } = networkVisuMethods;
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
-    paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", children: [
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Stack, { children: renderTitleFields?.() }),
+    paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: handleTabChange, children: [
         /* @__PURE__ */ jsx(Tab, { label: /* @__PURE__ */ jsx(FormattedMessage, { id: "Map" }), value: NetworkVisualizationTabValues.MAP }),
         /* @__PURE__ */ jsx(
@@ -87,11 +87,8 @@ function NetworkVisualizationParametersForm({
       /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM, children: /* @__PURE__ */ jsx(NetworkAreaDiagramParameters, {}) })
     ] }),
     /* @__PURE__ */ jsx(
-      Grid,
+      Stack,
       {
-        item: true,
-        container: true,
-        direction: "column",
         sx: {
           position: "absolute",
           bottom: "30px"

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
@@ -88,7 +88,7 @@ function NetworkVisualizationParametersInline({
       networkVisuMethods,
       renderActions: () => {
         return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+          /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
             /* @__PURE__ */ jsx(
               LabelledButton,
               {

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
@@ -49,12 +49,12 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     return INTL_SUBSTATION_LAYOUT_OPTIONS;
   }, []);
   const labelPosition = (name, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM}.${name}` }) })
+    /* @__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}` }) })
   ] });
   const substationLineDropDown = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: SUBSTATION_LAYOUT }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__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(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -65,8 +65,8 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     ) })
   ] });
   const componentLineDropDown = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: COMPONENT_LIBRARY }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__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(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -79,7 +79,7 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     ) })
   ] });
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       container: true,
       spacing: 1,

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
+import { Box, Grid2, Stack, LinearProgress } from "@mui/material";
 import "@mui/icons-material";
 import "react-intl";
 import "../../../components/ui/overflowableText/OverflowableText.js";
@@ -72,8 +72,8 @@ function PccMinParametersForm({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: renderActions ? styles.gridWithActions : styles.gridWithoutActions, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
+        /* @__PURE__ */ jsxs(Grid2, { container: true, sx: renderActions ? styles.gridWithActions : styles.gridWithoutActions, children: [
+          /* @__PURE__ */ jsx(Stack, { children: renderTitleFields?.() }),
           paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsx(
             Box,
             {
@@ -81,7 +81,7 @@ function PccMinParametersForm({
                 height: "100%",
                 width: "100%"
               },
-              children: /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(
                 ParameterLineDirectoryItemsInput,
                 {
                   name: FILTERS,
@@ -96,11 +96,8 @@ function PccMinParametersForm({
           )
         ] }),
         renderActions && /* @__PURE__ */ jsx(
-          Grid,
+          Stack,
           {
-            item: true,
-            container: true,
-            direction: "column",
             sx: {
               position: "fixed",
               bottom: "15px"

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
@@ -106,7 +106,7 @@ function PccMinParametersInLine({
       pccMinMethods,
       renderActions: () => {
         return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+          /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
             /* @__PURE__ */ jsx(
               LabelledButton,
               {