@gridsuite/commons-ui 0.238.0 → 0.240.0

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { AddCircle, Delete } from "@mui/icons-material";
 import { useCallback } from "react";
 import { useIntl } from "react-intl";
@@ -12,8 +12,8 @@ function GridButtons({ onAddButton, onDeleteButton, disabledAdd, disabledDelete
   const handleDeleteButton = useCallback(() => {
     onDeleteButton();
   }, [onDeleteButton]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, xs: true, spacing: 1, sx: { justifyContent: "flex-end", alignItems: "flex-end" }, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, size: "grow", spacing: 1, sx: { justifyContent: "flex-end", alignItems: "flex-end" }, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -22,7 +22,7 @@ function GridButtons({ onAddButton, onDeleteButton, disabledAdd, disabledDelete
         children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => handleAddButton(), disabled: disabledAdd, children: /* @__PURE__ */ jsx(AddCircle, {}) }) })
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({

package/dist/features/parameters/dynamic-simulation/curve/curve-parameters.d.ts

@@ -7,5 +7,5 @@ export type CurveParametersProps = {
     countriesFetcher?: () => Promise<string[]>;
     evaluateFilterFetcher?: (filter: ExpertFilter) => Promise<IdentifiableAttributes[]>;
 };
-declare function CurveParameters({ path, mappingPath, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, }: Readonly<CurveParametersProps>): import("react/jsx-runtime").JSX.Element;
+declare function CurveParameters({ path, mappingPath, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, }: Readonly<CurveParametersProps>): import("react").JSX.Element;
 export default CurveParameters;

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useTheme, Grid, Typography, Box } from "@mui/material";
+import { useTheme, Stack, Grid2, Typography, Box } from "@mui/material";
 import { useState, useRef, useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useFormContext, useFieldArray } from "react-hook-form";
@@ -13,6 +13,12 @@ import "../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { fetchDynamicSimulationModels } from "../../../../services/dynamic-mapping.js";
 import { CustomAGGrid } from "../../../../components/composite/customAGGrid/customAggrid.js";
+import "../../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "mathjs";
 const styles = {
   grid: {
     width: "auto",
@@ -115,15 +121,14 @@ function CurveParameters({
     return mapping?.id ? fetchDynamicSimulationModels(mapping) : void 0;
   }, [getValues, mappingPath]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", sx: { height: 600 }, children: [
-      /* @__PURE__ */ jsxs(Grid, { container: true, item: true, sx: { marginBottom: theme.spacing(1) }, children: [
-        /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: "auto", children: /* @__PURE__ */ jsx(GridSearch, { ref: quickFilterRef, gridRef }, "curve-quick-filter") }),
+    /* @__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__ */ jsx(
-          Grid,
+          Grid2,
           {
             container: true,
-            item: true,
-            xs: "auto",
+            size: "auto",
             sx: {
               justifyContent: "flex-end",
               alignItems: "flex-end",
@@ -143,7 +148,7 @@ function CurveParameters({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { 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-preview.js

@@ -1,12 +1,18 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useMemo, useCallback, useImperativeHandle } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Grid, Typography, Box } from "@mui/material";
+import { Stack, Typography, Box } from "@mui/material";
 import { AGGRID_LOCALES } from "../../../../../translations/not-intl/aggrid-locales.js";
 import { CustomAGGrid } from "../../../../../components/composite/customAGGrid/customAggrid.js";
 import "../../../../../utils/conversionUtils.js";
 import "../../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
+import "../../../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "mathjs";
 const styles = {
   grid: {
     width: "auto",
@@ -98,12 +104,12 @@ const CurvePreview = forwardRef((props, ref) => {
     }),
     [addCurves, removeCurves, rowData]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Typography, { sx: styles.h6, variant: "h6", children: [
+  return /* @__PURE__ */ jsxs(Stack, { sx: { height: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxs(Typography, { sx: styles.h6, variant: "h6", children: [
       /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveToAdd" }),
       ` (${selectedRowsLength} / ${rowData.length})`
-    ] }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { sx: styles.grid, children: /* @__PURE__ */ jsx(
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: [styles.grid, { flexGrow: 1, minHeight: 0 }], children: /* @__PURE__ */ jsx(
       CustomAGGrid,
       {
         ref: gridRef,
@@ -114,7 +120,7 @@ const CurvePreview = forwardRef((props, ref) => {
         onSelectionChanged,
         overrideLocales: AGGRID_LOCALES
       }
-    ) }) })
+    ) })
   ] });
 });
 export {

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

@@ -11,5 +11,5 @@ interface CurveSelectorDialogProps {
     evaluateFilterFetcher?: (filter: ExpertFilter) => Promise<IdentifiableAttributes[]>;
     modelsFetcher?: () => Promise<DynamicSimulationModelInfos[]> | undefined;
 }
-declare function CurveSelectorDialog({ open, onClose, onSave, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, modelsFetcher, }: Readonly<CurveSelectorDialogProps>): import("react/jsx-runtime").JSX.Element;
+declare function CurveSelectorDialog({ open, onClose, onSave, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, modelsFetcher, }: Readonly<CurveSelectorDialogProps>): import("react").JSX.Element;
 export default CurveSelectorDialog;

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, Grid, IconButton, DialogActions, Button } from "@mui/material";
+import { useTheme, Dialog, DialogTitle, Typography, DialogContent, Grid2, 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(
-      Grid,
+      Grid2,
       {
         container: true,
         sx: mergeSx(parametersStyles.scrollableGrid, {
@@ -64,7 +64,7 @@ function CurveSelectorDialog({
           maxHeight: "100%"
         }),
         children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 8, spacing: theme.spacing(1), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid2, { container: true, size: 8, spacing: theme.spacing(1), children: /* @__PURE__ */ jsx(
             CurveSelector,
             {
               ref: selectorRef,
@@ -74,8 +74,8 @@ function CurveSelectorDialog({
               modelsFetcher
             }
           ) }),
-          /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", justifyContent: "center", alignItems: "center", xs: 0.5, children: [
-            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid2, { size: 0.5, display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsxs(Stack, { children: [
+            /* @__PURE__ */ jsx(
               CustomTooltip,
               {
                 title: intl.formatMessage({
@@ -91,8 +91,8 @@ function CurveSelectorDialog({
                   }
                 ) })
               }
-            ) }),
-            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+            ),
+            /* @__PURE__ */ jsx(
               CustomTooltip,
               {
                 title: intl.formatMessage({
@@ -108,9 +108,9 @@ function CurveSelectorDialog({
                   }
                 ) })
               }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: true, direction: "column", children: /* @__PURE__ */ jsx(CurvePreview, { ref: previewRef }) })
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid2, { 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 { Grid, Typography } from "@mui/material";
+import { Grid2, 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,55 +39,31 @@ const CurveSelector = forwardRef(
       []
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        Grid,
-        {
-          item: true,
-          container: true,
-          xs: 6,
-          direction: "column",
-          alignItems: "flex-start",
-          justifyContent: "flex-start",
-          spacing: 1,
-          children: [
-            /* @__PURE__ */ jsx(Typography, { sx: styles.h6, variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveEquipmentFilter" }) }),
-            /* @__PURE__ */ jsx(
-              EquipmentFilter,
-              {
-                ref: equipmentFilterRef,
-                equipmentType,
-                onChangeEquipmentType: handleChangeEquipmentType,
-                voltageLevelsFetcher,
-                countriesFetcher,
-                evaluateFilterFetcher
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Grid,
-        {
-          item: true,
-          container: true,
-          xs: 6,
-          direction: "column",
-          alignItems: "flex-start",
-          justifyContent: "flex-start",
-          spacing: 1,
-          children: [
-            /* @__PURE__ */ jsx(Typography, { sx: styles.h6, variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSimulationCurveCurveFilter" }) }),
-            /* @__PURE__ */ jsx(
-              ModelFilter,
-              {
-                ref: modelFilterRef,
-                equipmentType: getReferencedEquipmentTypeForModel(equipmentType),
-                modelsFetcher
-              }
-            )
-          ]
-        }
-      )
+      /* @__PURE__ */ jsx(Grid2, { 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,
+          {
+            ref: equipmentFilterRef,
+            equipmentType,
+            onChangeEquipmentType: handleChangeEquipmentType,
+            voltageLevelsFetcher,
+            countriesFetcher,
+            evaluateFilterFetcher
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid2, { 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,
+          {
+            ref: modelFilterRef,
+            equipmentType: getReferencedEquipmentTypeForModel(equipmentType),
+            modelsFetcher
+          }
+        )
+      ] }) })
     ] });
   }
 );

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";
@@ -11,11 +11,13 @@ import "../../../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../../../utils/error.js";
 import "../../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
+import "../../../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
 import { useSnackMessage } from "../../../../../hooks/useSnackMessage.js";
+import "mathjs";
 const styles = {
   grid: {
     width: "100%",
-    height: "100%"
+    flex: 1
   },
   criteria: {
     width: "100%",
@@ -23,7 +25,7 @@ const styles = {
   },
   equipment: {
     width: "100%",
-    flexGrow: 1
+    flex: 1
   },
   equipmentTitle: (theme) => ({
     marginBottom: theme.spacing(1)
@@ -154,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",
@@ -168,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",
@@ -183,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",
@@ -196,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",
@@ -209,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,
@@ -228,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.d.ts

@@ -1,7 +1,6 @@
 import { UUID } from 'node:crypto';
-import { VoltageLevelInfos } from '../../../utils';
+import { ComputingType, VoltageLevelInfos } from '../../../utils';
 import { UseParametersBackendReturnProps } from '../../../utils/types/parameters.type';
-import { ComputingType } from '../common';
 import { ExpertFilter, IdentifiableAttributes } from '../../../components/composite/filter';
 type DynamicSimulationInlineProps = {
     studyUuid: UUID | null;
@@ -11,5 +10,5 @@ type DynamicSimulationInlineProps = {
     countriesFetcher: () => Promise<string[]>;
     evaluateFilterFetcher: (filter: ExpertFilter) => Promise<IdentifiableAttributes[]>;
 };
-export declare function DynamicSimulationInline({ studyUuid, parametersBackend, setHaveDirtyFields, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, }: Readonly<DynamicSimulationInlineProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DynamicSimulationInline({ studyUuid, parametersBackend, setHaveDirtyFields, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, }: Readonly<DynamicSimulationInlineProps>): import("react").JSX.Element;
 export {};

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.d.ts

@@ -11,5 +11,5 @@ type DynamicSimulationFormProps = {
     countriesFetcher?: () => Promise<string[]>;
     evaluateFilterFetcher?: (filter: ExpertFilter) => Promise<IdentifiableAttributes[]>;
 };
-export declare function DynamicSimulationForm({ dynamicSimulationMethods, renderTitleFields, renderActions, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, }: Readonly<DynamicSimulationFormProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DynamicSimulationForm({ dynamicSimulationMethods, renderTitleFields, renderActions, voltageLevelsFetcher, countriesFetcher, evaluateFilterFetcher, }: Readonly<DynamicSimulationFormProps>): import("react").JSX.Element;
 export {};

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

@@ -1,12 +1,12 @@
 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 { TabPanel } from "../common/parameters.js";
-import "react";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { mergeSx } from "../../../utils/styles.js";
+import { TabPanel } from "../common/parameters.js";
+import "react";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
@@ -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.d.ts

@@ -1,5 +1,5 @@
 interface MappingParametersProps {
     path: string;
 }
-export declare function MappingParameters({ path }: Readonly<MappingParametersProps>): import("react/jsx-runtime").JSX.Element;
+export declare function MappingParameters({ path }: Readonly<MappingParametersProps>): import("react").JSX.Element;
 export {};

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.d.ts

@@ -1,3 +1,3 @@
 export declare function NetworkParameters({ path }: Readonly<{
     path: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

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/common-solver/common-solver-parameters.d.ts

@@ -1,3 +1,3 @@
 export declare function CommonSolverParameters({ path }: Readonly<{
     path: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/features/parameters/dynamic-simulation/solver/ida-solver/ida-solver-parameters.d.ts

@@ -1,3 +1,3 @@
 export declare function IdaSolverParameters({ path }: Readonly<{
     path: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/features/parameters/dynamic-simulation/solver/sim-solver/simplified-solver-parameters.d.ts

@@ -1,3 +1,3 @@
 export declare function SimplifiedSolverParameters({ path }: Readonly<{
     path: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/features/parameters/dynamic-simulation/solver/solver-parameters.d.ts

@@ -1,5 +1,5 @@
 interface SolverParametersProps {
     path: string;
 }
-export declare function SolverParameters({ path }: Readonly<SolverParametersProps>): import("react/jsx-runtime").JSX.Element;
+export declare function SolverParameters({ path }: Readonly<SolverParametersProps>): import("react").JSX.Element;
 export {};