@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/parameters/common/{ProviderParam.js → provider-param.js}

@@ -1,5 +1,5 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { LineSeparator } from "./line-separator.js";
 import { parametersStyles } from "../parameters-style.js";
@@ -7,6 +7,7 @@ import "@mui/icons-material";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
 import "react";
 import "react-hook-form";
 import "localized-countries";
@@ -35,17 +36,14 @@ import "react-papaparse";
 import { PROVIDER } from "./constants.js";
 const styles = {
   providerParam: {
-    height: "fit-content",
-    justifyContent: "space-between"
+    padding: 0
   }
 };
-function ProviderParam({ options }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.providerParam, paddingRight: 1, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 2, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(MuiSelectInput, { name: PROVIDER, size: "small", fullWidth: true, options }) })
-    ] }),
-    /* @__PURE__ */ jsx(Grid, { container: true, paddingTop: 1, paddingRight: 1, children: /* @__PURE__ */ jsx(LineSeparator, {}) })
+function ProviderParam({ options, id, sx }) {
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, sx: mergeSx(styles.providerParam, sx), justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: mergeSx(parametersStyles.parameterName, { paddingRight: 2 }), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(MuiSelectInput, { name: PROVIDER, size: "small", options, "data-testid": `${id}Provider` }) }),
+    /* @__PURE__ */ jsx(LineSeparator, {})
   ] });
 }
 export {

package/dist/features/parameters/common/widget/parameter-float.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { CustomTooltip } from "../../../../components/ui/tooltip/CustomTooltip.js";
 import "@mui/icons-material";
@@ -40,9 +40,9 @@ function ParameterFloat({
   labelSize,
   inputSize
 }) {
-  const content = /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "row", spacing: 1, paddingTop: 3, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: labelSize, sx: style, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: inputSize, children: /* @__PURE__ */ jsx(FloatInput, { name, adornment }) })
+  const content = /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "row", spacing: 1, paddingTop: 3, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: labelSize, sx: style, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: inputSize, children: /* @__PURE__ */ jsx(FloatInput, { name, adornment }) })
   ] });
   if (tooltip) {
     return /* @__PURE__ */ jsx(CustomTooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: tooltip }), children: content });

package/dist/features/parameters/common/widget/parameter-group.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Settings, ExpandCircleDown, ExpandMore } from "@mui/icons-material";
-import { Grid, Accordion, AccordionSummary, Typography, AccordionDetails } from "@mui/material";
+import { Grid2, Accordion, AccordionSummary, Typography, AccordionDetails } from "@mui/material";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { parametersStyles } from "../../parameters-style.js";
@@ -14,7 +14,7 @@ function ParameterGroup({
   children
 }) {
   const [mouseHover, setMouseHover] = useState(false);
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sx: parametersStyles.subgroupParameters, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Grid2, { size: 12, sx: parametersStyles.subgroupParameters, children: /* @__PURE__ */ jsxs(
     Accordion,
     {
       sx: parametersStyles.subgroupParametersAccordion,

package/dist/features/parameters/common/widget/parameter-line-directory-items-input.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 { parametersStyles } from "../../parameters-style.js";
 import "@mui/icons-material";
@@ -39,9 +39,9 @@ function ParameterLineDirectoryItemsInput({
   hideErrorMessage,
   allowMultiSelect = true
 }) {
-  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, paddingTop: 1, paddingBottom: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 7, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, paddingBottom: 1, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 7, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 5, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       DirectoryItemsInput,
       {
         name,

package/dist/features/parameters/common/widget/parameter-line-slider.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 { parametersStyles } from "../../parameters-style.js";
 import "@mui/icons-material";
@@ -49,9 +49,9 @@ function ParameterLineSlider({
   minValue = 0,
   maxValue = 100
 }) {
-  return /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.container, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.container, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       SliderInput,
       {
         name,

package/dist/features/parameters/common/widget/parameter-switch.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { SwitchWithLabel } from "../parameters.js";
 function ParameterSwitch({ label, value, onChange, key }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", children: /* @__PURE__ */ jsx(SwitchWithLabel, { value, label, callback: onChange }) }, key);
+  return /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", children: /* @__PURE__ */ jsx(SwitchWithLabel, { value, label, callback: onChange }) }, key);
 }
 export {
   ParameterSwitch

package/dist/features/parameters/dynamic-margin-calculation/dynamic-margin-calculation-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-margin-calculation.type';
 import { UseComputationParametersFormReturn } from '../common/utils';
 type DynamicMarginCalculationFormProps = {
     dynamicMarginCalculationMethods: UseComputationParametersFormReturn;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: (onSubmitError: (errors: FieldErrors) => void) => ReactNode;
+    useTabsReturn: UseTabsReturn<TabValues>;
 };
-export declare function DynamicMarginCalculationForm({ dynamicMarginCalculationMethods, renderTitleFields, renderActions, }: Readonly<DynamicMarginCalculationFormProps>): import("react").JSX.Element;
+export declare function DynamicMarginCalculationForm({ dynamicMarginCalculationMethods, useTabsReturn, }: Readonly<DynamicMarginCalculationFormProps>): import("react").JSX.Element;
 export {};

package/dist/features/parameters/dynamic-margin-calculation/dynamic-margin-calculation-form.js

@@ -1,43 +1,42 @@
-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 "../../../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 TimeDelayParameters from "./time-delay-parameters.js";
@@ -45,54 +44,34 @@ import LoadsVariationsParameters from "./loads-variations-parameters.js";
 import { TabValues } from "./dynamic-margin-calculation.type.js";
 function DynamicMarginCalculationForm({
   dynamicMarginCalculationMethods,
-  renderTitleFields,
-  renderActions
+  useTabsReturn
 }) {
-  const { paramsLoaded, formattedProviders } = dynamicMarginCalculationMethods;
-  const { selectedTab, tabsWithError, onTabChange, onError } = useTabs({
-    defaultTab: Object.values(TabValues)[0],
-    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: "DynamicMarginCalculationTimeDelayTab" }),
-            value: TabValues.TAB_TIME_DELAY,
-            sx: getTabStyle(tabsWithError, TabValues.TAB_TIME_DELAY)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tab,
-          {
-            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicMarginCalculationLoadsVariationsTab" }),
-            value: TabValues.TAB_LOADS_VARIATIONS,
-            sx: getTabStyle(tabsWithError, TabValues.TAB_LOADS_VARIATIONS)
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxs(
-        Grid,
+  const { formattedProviders } = dynamicMarginCalculationMethods;
+  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: "Dmc" }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
+      /* @__PURE__ */ jsx(
+        Tab,
         {
-          container: true,
-          xs: true,
-          sx: mergeSx(parametersStyles.scrollableGrid, {
-            paddingTop: 0,
-            width: "100%"
-          }),
-          children: [
-            /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_TIME_DELAY, children: /* @__PURE__ */ jsx(TimeDelayParameters, { path: TabValues.TAB_TIME_DELAY }) }),
-            /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_LOADS_VARIATIONS, children: /* @__PURE__ */ jsx(LoadsVariationsParameters, { path: TabValues.TAB_LOADS_VARIATIONS }) })
-          ]
-        },
-        "dmcParameters"
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicMarginCalculationTimeDelayTab" }),
+          value: TabValues.TAB_TIME_DELAY,
+          sx: getTabStyle(tabsWithError, TabValues.TAB_TIME_DELAY)
+        }
       ),
-      renderActions?.(onError)
-    ] }) : /* @__PURE__ */ jsx(LinearProgress, {})
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicMarginCalculationLoadsVariationsTab" }),
+          value: TabValues.TAB_LOADS_VARIATIONS,
+          sx: getTabStyle(tabsWithError, TabValues.TAB_LOADS_VARIATIONS)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, sx: { paddingTop: 0, width: "100%", maxHeight: "100%" }, children: [
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_TIME_DELAY, children: /* @__PURE__ */ jsx(TimeDelayParameters, { path: TabValues.TAB_TIME_DELAY }) }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.TAB_LOADS_VARIATIONS, children: /* @__PURE__ */ jsx(LoadsVariationsParameters, { path: TabValues.TAB_LOADS_VARIATIONS }) })
+    ] }, "dmcParameters")
   ] });
 }
 export {

package/dist/features/parameters/dynamic-margin-calculation/dynamic-margin-calculation-inline.js

@@ -1,52 +1,49 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
-import { useIntl, 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 { snackWithFallback } from "../../../utils/error.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
-import { mergeSx } from "../../../utils/styles.js";
 import { DynamicMarginCalculationForm } from "./dynamic-margin-calculation-form.js";
 import { useDynamicMarginCalculationParametersForm, toParamsInfos, toFormValues } from "./use-dynamic-margin-calculation-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 { fetchDynamicMarginCalculationParameters } from "../../../services/dynamic-margin-calculation.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import "react-hook-form";
 import { CustomFormProvider } from "../../../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 "yup";
-import { DirectoryItemSelector } from "../../../components/ui/directoryItemSelector/DirectoryItemSelector.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 "../../../components/ui/treeViewFinder/TreeViewFinder.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-margin-calculation.type.js";
 function DynamicMarginCalculationInline({
   studyUuid,
   parametersBackend,
@@ -59,23 +56,14 @@ function DynamicMarginCalculationInline({
     name: null,
     description: null
   });
-  const intl = useIntl();
   const { snackError } = useSnackMessage();
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
-  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
-  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
-  const { formSchema, formMethods } = dynamicMarginCalculationMethods;
-  const { reset, handleSubmit, getValues, formState } = formMethods;
-  const handleResetClick = useCallback(() => {
-    setOpenResetConfirmation(true);
-  }, []);
-  const handleCancelReset = useCallback(() => {
-    setOpenResetConfirmation(false);
-  }, []);
-  const handleReset = useCallback(() => {
-    resetParameters();
-    setOpenResetConfirmation(false);
-  }, [resetParameters]);
+  const { formMethods } = dynamicMarginCalculationMethods;
+  const { reset, getValues, formState, handleSubmit } = formMethods;
+  const useTabsReturn = useTabs({
+    defaultTab: Object.values(TabValues)[0],
+    tabEnum: TabValues,
+    errors: formState.errors
+  });
   const onSubmit = useCallback(
     (formData) => {
       updateParameters(toParamsInfos(formData));
@@ -85,7 +73,6 @@ function DynamicMarginCalculationInline({
   const handleLoadParameter = useCallback(
     (newParams) => {
       if (newParams?.length) {
-        setOpenSelectParameterDialog(false);
         const parametersUuid = newParams[0].id;
         fetchDynamicMarginCalculationParameters(parametersUuid).then((_params) => {
           reset(toFormValues(_params), {
@@ -95,82 +82,33 @@ function DynamicMarginCalculationInline({
           snackWithFallback(snackError, error, { headerId: "paramsRetrievingError" });
         });
       }
-      setOpenSelectParameterDialog(false);
     },
     [reset, snackError]
   );
   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,
-              {
-                disabled: true,
-                callback: () => setOpenSelectParameterDialog(true),
-                label: "settings.button.chooseSettings"
-              }
-            ),
-            /* @__PURE__ */ jsx(LabelledButton, { disabled: true, callback: () => setOpenCreateParameterDialog(true), label: "save" }),
-            /* @__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_MARGIN_CALCULATION_PARAMETERS
-        }
-      ),
-      openSelectParameterDialog && /* @__PURE__ */ jsx(
-        DirectoryItemSelector,
-        {
-          open: openSelectParameterDialog,
-          onClose: handleLoadParameter,
-          types: [ElementType.DYNAMIC_MARGIN_CALCULATION_PARAMETERS],
-          title: intl.formatMessage({
-            id: "showSelectParameterDialog"
-          }),
-          onlyLeaves: true,
-          multiSelect: false,
-          validationButtonText: intl.formatMessage({
-            id: "validate"
-          })
-        }
-      ),
-      openResetConfirmation && /* @__PURE__ */ jsx(
-        PopupConfirmationDialog,
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: dynamicMarginCalculationMethods.formSchema, ...formMethods, children: /* @__PURE__ */ jsx(
+    ParameterLayout,
+    {
+      title: "DynamicMarginCalculation",
+      isLoading: !dynamicMarginCalculationMethods.paramsLoaded,
+      parameterType: ElementType.DYNAMIC_MARGIN_CALCULATION_PARAMETERS,
+      createParameter: {
+        studyUuid,
+        parameterFormatter: toParamsInfos,
+        getParameterValues: getValues
+      },
+      selectParameterHandler: handleLoadParameter,
+      resetHandler: resetParameters,
+      validateHandler: handleSubmit(onSubmit, useTabsReturn.onError),
+      children: /* @__PURE__ */ jsx(
+        DynamicMarginCalculationForm,
         {
-          message: "resetParamsConfirmation",
-          validateButtonLabel: "validate",
-          openConfirmationPopup: openResetConfirmation,
-          setOpenConfirmationPopup: handleCancelReset,
-          handlePopupConfirmation: handleReset
+          dynamicMarginCalculationMethods,
+          useTabsReturn
         }
       )
-    ] });
-  };
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, children: /* @__PURE__ */ jsx(
-    DynamicMarginCalculationForm,
-    {
-      dynamicMarginCalculationMethods,
-      renderActions
     }
   ) });
 }

package/dist/features/parameters/dynamic-margin-calculation/loads-variations-parameters.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import * as yup from "yup";
 import { LOADS_VARIATIONS, ACTIVE, VARIATION, LOAD_FILTERS, LOAD_MODELS_RULE, ACCURACY, CALCULATION_TYPE } from "./constants.js";
 import { ID } from "../../../utils/constants/filterConstant.js";
@@ -129,7 +129,7 @@ function LoadsVariationsParameters({ path }) {
       label: inlt.formatMessage({ id: colDef.label })
     }));
   }, [inlt]);
-  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-margin-calculation/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 * as yup from "yup";
 import { LOAD_INCREASE_STOP_TIME, LOAD_INCREASE_START_TIME, MARGIN_CALCULATION_START_TIME, STOP_TIME, START_TIME } from "./constants.js";
 import "../../../utils/conversionUtils.js";
@@ -49,7 +49,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/dynamic-margin-calculation/use-dynamic-margin-calculation-parameters-form.js

@@ -6,33 +6,34 @@ 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 "../../../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 "../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-security-analysis/contingency-parameters.js

@@ -1,36 +1,37 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
+import "@mui/icons-material";
+import "react";
+import "react-intl";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import { ParameterType } from "../../../utils/types/parameters.type.js";
-import "@mui/icons-material";
-import "react-intl";
-import "react";
+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 "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 "../common/parameter-layout/parameter-layout-provider.js";
 import { ParameterLineDirectoryItemsInput } from "../common/widget/parameter-line-directory-items-input.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
@@ -48,7 +49,7 @@ const params = [
   }
 ];
 function ContingencyParameters({ path }) {
-  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);