@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/parameters/dynamic-security-analysis/dynamic-security-analysis-inline.js

@@ -1,38 +1,34 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
-import { FormattedMessage } from "react-intl";
-import { useState, useCallback, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
 import "../../../utils/conversionUtils.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
-import { mergeSx } from "../../../utils/styles.js";
 import { useDynamicSecurityAnalysisParametersForm, toParamsInfos } from "./use-dynamic-security-analysis-parameters-form.js";
-import { LabelledButton } from "../common/parameters.js";
-import { SubmitButton } from "../../../components/ui/reactHookForm/utils/SubmitButton.js";
-import { PopupConfirmationDialog } from "../../../components/ui/dialogs/popupConfirmationDialog/PopupConfirmationDialog.js";
-import { parametersStyles } from "../parameters-style.js";
-import { CreateParameterDialog } from "../common/parameters-creation-dialog.js";
-import "../../../components/ui/overflowableText/OverflowableText.js";
-import "react-hook-form";
+import { ParameterLayout } from "../common/parameter-layout/parameter-layout.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import "@mui/material";
+import "react-intl";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
+import "react-hook-form";
 import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import "yup";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "yup";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
@@ -41,9 +37,11 @@ import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
+import { useTabs } from "../common/hook/use-tabs.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { DynamicSecurityAnalysisParametersForm } from "./dynamic-security-analysis-parameters-form.js";
+import { TabValues } from "./dynamic-security-analysis.type.js";
 function DynamicSecurityAnalysisInline({
   studyUuid,
   parametersBackend,
@@ -56,20 +54,13 @@ function DynamicSecurityAnalysisInline({
     name: null,
     description: null
   });
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
-  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
-  const { formSchema, formMethods } = dynamicSecurityAnalysisMethods;
-  const { handleSubmit, getValues, formState } = formMethods;
-  const handleResetClick = useCallback(() => {
-    setOpenResetConfirmation(true);
-  }, []);
-  const handleCancelReset = useCallback(() => {
-    setOpenResetConfirmation(false);
-  }, []);
-  const handleReset = useCallback(() => {
-    resetParameters();
-    setOpenResetConfirmation(false);
-  }, [resetParameters]);
+  const { formMethods } = dynamicSecurityAnalysisMethods;
+  const { getValues, formState, handleSubmit } = formMethods;
+  const useTabsReturn = useTabs({
+    defaultTab: TabValues.SCENARIO,
+    tabEnum: TabValues,
+    errors: formState.errors
+  });
   const onSubmit = useCallback(
     (formData) => {
       updateParameters(toParamsInfos(formData));
@@ -79,50 +70,26 @@ function DynamicSecurityAnalysisInline({
   useEffect(() => {
     setHaveDirtyFields(formState.isDirty);
   }, [formState, setHaveDirtyFields]);
-  const renderActions = (onSubmitError) => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { container: true, item: true, children: /* @__PURE__ */ jsxs(
-        Grid,
-        {
-          sx: mergeSx(parametersStyles.controlParametersItem, {
-            paddingTop: 1,
-            paddingBottom: 2,
-            paddingLeft: 0
-          }),
-          children: [
-            /* @__PURE__ */ jsx(LabelledButton, { callback: handleResetClick, label: "resetToDefault" }),
-            /* @__PURE__ */ jsx(SubmitButton, { variant: "outlined", onClick: handleSubmit(onSubmit, onSubmitError), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
-          ]
-        }
-      ) }),
-      openCreateParameterDialog && /* @__PURE__ */ jsx(
-        CreateParameterDialog,
-        {
-          studyUuid,
-          open: openCreateParameterDialog,
-          onClose: () => setOpenCreateParameterDialog(false),
-          parameterValues: getValues,
-          parameterFormatter: toParamsInfos,
-          parameterType: ElementType.DYNAMIC_SECURITY_ANALYSIS_PARAMETERS
-        }
-      ),
-      openResetConfirmation && /* @__PURE__ */ jsx(
-        PopupConfirmationDialog,
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: dynamicSecurityAnalysisMethods.formSchema, ...formMethods, children: /* @__PURE__ */ jsx(
+    ParameterLayout,
+    {
+      title: "DynamicSecurityAnalysis",
+      isLoading: !dynamicSecurityAnalysisMethods.paramsLoaded,
+      parameterType: ElementType.DYNAMIC_SECURITY_ANALYSIS_PARAMETERS,
+      createParameter: {
+        studyUuid,
+        getParameterValues: getValues,
+        parameterFormatter: toParamsInfos
+      },
+      resetHandler: resetParameters,
+      validateHandler: handleSubmit(onSubmit, useTabsReturn.onError),
+      children: /* @__PURE__ */ jsx(
+        DynamicSecurityAnalysisParametersForm,
         {
-          message: "resetParamsConfirmation",
-          validateButtonLabel: "validate",
-          openConfirmationPopup: openResetConfirmation,
-          setOpenConfirmationPopup: handleCancelReset,
-          handlePopupConfirmation: handleReset
+          dynamicSecurityAnalysisMethods,
+          useTabsReturn
         }
       )
-    ] });
-  };
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, children: /* @__PURE__ */ jsx(
-    DynamicSecurityAnalysisParametersForm,
-    {
-      dynamicSecurityAnalysisMethods,
-      renderActions
     }
   ) });
 }

package/dist/features/parameters/dynamic-security-analysis/dynamic-security-analysis-parameters-form.d.ts

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
-import { FieldErrors } from 'react-hook-form';
+import { UseTabsReturn } from '../common';
+import { TabValues } from './dynamic-security-analysis.type';
 import { UseComputationParametersFormReturn } from '../common/utils';
 type DynamicSecurityAnalysisParametersFormProps = {
     dynamicSecurityAnalysisMethods: UseComputationParametersFormReturn;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: (onSubmitError: (errors: FieldErrors) => void) => ReactNode;
+    useTabsReturn: UseTabsReturn<TabValues>;
 };
-export declare function DynamicSecurityAnalysisParametersForm({ dynamicSecurityAnalysisMethods, renderTitleFields, renderActions, }: Readonly<DynamicSecurityAnalysisParametersFormProps>): import("react").JSX.Element;
+export declare function DynamicSecurityAnalysisParametersForm({ dynamicSecurityAnalysisMethods, useTabsReturn, }: Readonly<DynamicSecurityAnalysisParametersFormProps>): import("react").JSX.Element;
 export {};

package/dist/features/parameters/dynamic-security-analysis/dynamic-security-analysis-parameters-form.js

@@ -1,99 +1,77 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid, Tabs, Tab, LinearProgress } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Grid2, Tabs, Tab } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import ScenarioParameters from "./scenario-parameters.js";
 import ContingencyParameters from "./contingency-parameters.js";
-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 { TabPanel } from "../common/parameters.js";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import "react-hook-form";
 import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
-import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/overflowableText/OverflowableText.js";
-import { ProviderParam } from "../common/ProviderParam.js";
 import "yup";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { getTabStyle, parametersStyles } from "../parameters-style.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import { ProviderParam } from "../common/provider-param.js";
+import { parametersStyles, getTabStyle } from "../parameters-style.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
-import { useTabs } from "../common/hook/use-tabs.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { TabValues } from "./dynamic-security-analysis.type.js";
 function DynamicSecurityAnalysisParametersForm({
   dynamicSecurityAnalysisMethods,
-  renderTitleFields,
-  renderActions
+  useTabsReturn
 }) {
-  const { paramsLoaded, formattedProviders } = dynamicSecurityAnalysisMethods;
-  const { selectedTab, tabsWithError, onTabChange, onError } = useTabs({
-    defaultTab: TabValues.SCENARIO,
-    tabEnum: TabValues
-  });
-  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: [
-        /* @__PURE__ */ jsx(
-          Tab,
-          {
-            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisScenario" }),
-            value: TabValues.SCENARIO,
-            sx: getTabStyle(tabsWithError, TabValues.SCENARIO)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tab,
-          {
-            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisContingency" }),
-            value: TabValues.CONTINGENCY,
-            sx: getTabStyle(tabsWithError, TabValues.CONTINGENCY)
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxs(
-        Grid,
+  const { formattedProviders } = dynamicSecurityAnalysisMethods;
+  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: "Dsa" }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
+      /* @__PURE__ */ jsx(
+        Tab,
         {
-          container: true,
-          item: true,
-          xs: true,
-          sx: mergeSx(parametersStyles.scrollableGrid, {
-            paddingTop: 0,
-            width: "100%"
-          }),
-          children: [
-            /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.SCENARIO, children: /* @__PURE__ */ jsx(ScenarioParameters, { path: TabValues.SCENARIO }) }),
-            /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.CONTINGENCY, children: /* @__PURE__ */ jsx(ContingencyParameters, { path: TabValues.CONTINGENCY }) })
-          ]
-        },
-        "dsaParameters"
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisScenario" }),
+          value: TabValues.SCENARIO,
+          sx: getTabStyle(tabsWithError, TabValues.SCENARIO)
+        }
       ),
-      renderActions?.(onError)
-    ] }) : /* @__PURE__ */ jsx(LinearProgress, {})
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisContingency" }),
+          value: TabValues.CONTINGENCY,
+          sx: getTabStyle(tabsWithError, TabValues.CONTINGENCY)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, sx: { paddingTop: 0, width: "100%", maxHeight: "100%" }, children: [
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.SCENARIO, children: /* @__PURE__ */ jsx(ScenarioParameters, { path: TabValues.SCENARIO }) }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.CONTINGENCY, children: /* @__PURE__ */ jsx(ContingencyParameters, { path: TabValues.CONTINGENCY }) })
+    ] }, "dsaParameters")
   ] });
 }
 export {

package/dist/features/parameters/dynamic-security-analysis/scenario-parameters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { SCENARIO_DURATION } from "./constants.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
@@ -14,7 +14,7 @@ const params = [
   }
 ];
 function ScenarioParameters({ 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-security-analysis/use-dynamic-security-analysis-parameters-form.js

@@ -4,21 +4,17 @@ import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import "react/jsx-runtime";
 import "@mui/icons-material";
-import { PROVIDER } from "../common/constants.js";
 import "@mui/material";
-import "react-intl";
 import "react";
+import "react-intl";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import "react-hook-form";
 import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/overflowableText/OverflowableText.js";
 import { NAME } from "../../../components/ui/reactHookForm/constants.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
@@ -26,12 +22,17 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import { PROVIDER } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";

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.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";
@@ -121,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",
@@ -149,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,7 +1,7 @@
-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";
@@ -104,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,
@@ -120,7 +120,7 @@ const CurvePreview = forwardRef((props, ref) => {
         onSelectionChanged,
         overrideLocales: AGGRID_LOCALES
       }
-    ) }) })
+    ) })
   ] });
 });
 export {

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
+          }
+        )
+      ] }) })
     ] });
   }
 );