@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/parameters/voltage-init/equipment-selection-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Alert } from "@mui/material";
+import { Stack, Alert, Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import "@mui/icons-material";
 import "../../../components/ui/overflowableText/OverflowableText.js";
@@ -32,6 +32,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import { GENERATORS_SELECTION_TYPE, VARIABLE_Q_GENERATORS, TRANSFORMERS_SELECTION_TYPE, VARIABLE_TRANSFORMERS, SHUNT_COMPENSATORS_SELECTION_TYPE, VARIABLE_SHUNT_COMPENSATORS } from "./constants.js";
+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";
@@ -63,9 +64,9 @@ const initialEquipmentsSelectionType = {
   }
 };
 function EquipmentSelectionParameters() {
-  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", children: [
+  return /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Alert, { sx: equipmentsSelectionStyles.alert, severity: "info", variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersEquipmentsSelectionAlert" }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid2, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
       RadioInput,
       {
         name: GENERATORS_SELECTION_TYPE,
@@ -82,7 +83,7 @@ function EquipmentSelectionParameters() {
         hideErrorMessage: true
       }
     ),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid2, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
       RadioInput,
       {
         name: TRANSFORMERS_SELECTION_TYPE,
@@ -99,7 +100,7 @@ function EquipmentSelectionParameters() {
         hideErrorMessage: true
       }
     ),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid2, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
       RadioInput,
       {
         name: SHUNT_COMPENSATORS_SELECTION_TYPE,

package/dist/features/parameters/voltage-init/general-parameters.js

@@ -2,37 +2,38 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
-import { Grid, Alert, Box } from "@mui/material";
+import { Grid2, Alert, Box } from "@mui/material";
 import { GENERAL, GENERAL_APPLY_MODIFICATIONS, UPDATE_BUS_VOLTAGE, REACTIVE_SLACKS_THRESHOLD, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD } from "./constants.js";
+import "@mui/icons-material";
+import { parametersStyles } from "../parameters-style.js";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import { ReactivePowerAdornment } from "../../../utils/constants/adornments.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
-import "@mui/icons-material";
-import { LineSeparator } from "../common/line-separator.js";
-import { parametersStyles } from "../parameters-style.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
 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 { LineSeparator } from "../common/line-separator.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import { ParameterFloat } from "../common/widget/parameter-float.js";
 import "../common/widget/parameter-line-slider.js";
 import { ParameterSwitch } from "../common/widget/parameter-switch.js";
@@ -65,7 +66,7 @@ function GeneralParameters({ withApplyModifications }) {
     },
     [setValue]
   );
-  return /* @__PURE__ */ jsxs(Grid, { children: [
+  return /* @__PURE__ */ jsxs(Grid2, { children: [
     withApplyModifications && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Alert, { sx: parametersStyles.adjustExistingLimitsInfo, severity: "info", variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersGeneralSaveInfo" }) }),
       /* @__PURE__ */ jsx(

package/dist/features/parameters/voltage-init/voltage-init-parameters-dialog.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
 import { CustomMuiDialog } from "../../../components/ui/dialogs/customMuiDialog/CustomMuiDialog.js";
 import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -7,7 +8,6 @@ import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "react";
-import "@mui/material";
 import "react-intl";
 import "react-hook-form";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
@@ -55,7 +55,7 @@ function VoltageInitParametersEditionDialog({
     formState: { errors, dirtyFields }
   } = voltageInitMethods.formMethods;
   const disableSave = Object.keys(errors).length > 0 || Object.keys(dirtyFields).length === 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     CustomMuiDialog,
     {
       open,
@@ -75,22 +75,17 @@ function VoltageInitParametersEditionDialog({
           // we want the dialog height to be fixed even when switching tabs
         }
       },
-      children: /* @__PURE__ */ jsx(
-        VoltageInitParametersForm,
-        {
-          voltageInitMethods,
-          renderTitleFields: () => {
-            return /* @__PURE__ */ jsx(
-              NameElementEditorForm,
-              {
-                initialElementName: name,
-                activeDirectory,
-                elementType: ElementType.VOLTAGE_INIT_PARAMETERS
-              }
-            );
+      children: [
+        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          NameElementEditorForm,
+          {
+            initialElementName: name,
+            activeDirectory,
+            elementType: ElementType.VOLTAGE_INIT_PARAMETERS
           }
-        }
-      )
+        ) }),
+        /* @__PURE__ */ jsx(VoltageInitParametersForm, { voltageInitMethods })
+      ]
     }
   );
 }

package/dist/features/parameters/voltage-init/voltage-init-parameters-form.d.ts

@@ -1,29 +1,7 @@
-import { ReactNode } from 'react';
 import { UseVoltageInitParametersFormReturn } from './use-voltage-init-parameters-form';
-export declare const styles: {
-    readonly gridWithActions: (theme: import('@mui/material').Theme) => {
-        overflowY: "auto";
-        overflowX: "hidden";
-        paddingRight: string;
-        paddingTop: string;
-        paddingBottom: string;
-        flexGrow: number;
-        maxHeight: string;
-    };
-    readonly gridWithoutActions: (theme: import('@mui/material').Theme) => {
-        overflowY: "auto";
-        overflowX: "hidden";
-        paddingRight: string;
-        paddingTop: string;
-        paddingBottom: string;
-        flexGrow: number;
-        maxHeight: string;
-    };
-};
 interface VoltageInitParametersFormProps {
     voltageInitMethods: UseVoltageInitParametersFormReturn;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
+    showActionsButtons?: boolean;
 }
-export declare function VoltageInitParametersForm({ voltageInitMethods, renderTitleFields, renderActions, }: Readonly<VoltageInitParametersFormProps>): import("react").JSX.Element;
+export declare function VoltageInitParametersForm({ voltageInitMethods, showActionsButtons, }: Readonly<VoltageInitParametersFormProps>): import("react").JSX.Element;
 export {};

package/dist/features/parameters/voltage-init/voltage-init-parameters-form.js

@@ -1,18 +1,19 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress, Tabs, Tab } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Tabs, Tab, Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
-import { getTabStyle, getTabIndicatorStyle } from "../parameters-style.js";
+import { parametersStyles, getTabStyle, getTabIndicatorStyle } from "../parameters-style.js";
 import "@mui/icons-material";
+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";
 import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
 import "yup";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
@@ -30,7 +31,7 @@ import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { TabPanel } from "../common/parameters.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
@@ -41,114 +42,56 @@ import { VoltageInitTabValues } from "./constants.js";
 import { GeneralParameters } from "./general-parameters.js";
 import { EquipmentSelectionParameters } from "./equipment-selection-parameters.js";
 import { VoltageLimitsParameters } from "./voltage-limits-parameters.js";
-const styles = {
-  gridWithActions: (theme) => ({
-    overflowY: "auto",
-    overflowX: "hidden",
-    paddingRight: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(1),
-    flexGrow: 1,
-    maxHeight: "85%"
-  }),
-  gridWithoutActions: (theme) => ({
-    overflowY: "auto",
-    overflowX: "hidden",
-    paddingRight: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(1),
-    flexGrow: 1,
-    maxHeight: "100%"
-  })
-};
 function VoltageInitParametersForm({
   voltageInitMethods,
-  renderTitleFields,
-  renderActions
+  showActionsButtons
 }) {
-  const { formMethods, formSchema, selectedTab, handleTabChange, paramsLoading, tabIndexesWithError } = voltageInitMethods;
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        height: "100%",
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: renderActions ? styles.gridWithActions : styles.gridWithoutActions, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
-          paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsxs(
-            Box,
+  const { selectedTab, handleTabChange, tabIndexesWithError } = voltageInitMethods;
+  return /* @__PURE__ */ jsxs(Stack, { sx: parametersStyles.scrollableGrid, children: [
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: selectedTab,
+        variant: "scrollable",
+        onChange: handleTabChange,
+        TabIndicatorProps: {
+          sx: getTabIndicatorStyle(tabIndexesWithError, selectedTab)
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Tab,
+            {
+              label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersGeneralTabLabel" }),
+              value: VoltageInitTabValues.GENERAL,
+              sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.GENERAL)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tab,
+            {
+              label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageLimits" }),
+              value: VoltageInitTabValues.VOLTAGE_LIMITS,
+              sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.VOLTAGE_LIMITS)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tab,
             {
-              sx: {
-                height: "100%",
-                width: "100%"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  Tabs,
-                  {
-                    value: selectedTab,
-                    variant: "scrollable",
-                    onChange: handleTabChange,
-                    TabIndicatorProps: {
-                      sx: getTabIndicatorStyle(tabIndexesWithError, selectedTab)
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Tab,
-                        {
-                          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersGeneralTabLabel" }),
-                          value: VoltageInitTabValues.GENERAL,
-                          sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.GENERAL)
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Tab,
-                        {
-                          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageLimits" }),
-                          value: VoltageInitTabValues.VOLTAGE_LIMITS,
-                          sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.VOLTAGE_LIMITS)
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Tab,
-                        {
-                          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "EquipmentSelection" }),
-                          value: VoltageInitTabValues.EQUIPMENTS_SELECTION,
-                          sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.EQUIPMENTS_SELECTION)
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-                  /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.GENERAL, children: /* @__PURE__ */ jsx(GeneralParameters, { withApplyModifications: renderActions != null }) }),
-                  /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.VOLTAGE_LIMITS, children: /* @__PURE__ */ jsx(VoltageLimitsParameters, {}) }),
-                  /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.EQUIPMENTS_SELECTION, children: /* @__PURE__ */ jsx(EquipmentSelectionParameters, {}) })
-                ] })
-              ]
+              label: /* @__PURE__ */ jsx(FormattedMessage, { id: "EquipmentSelection" }),
+              value: VoltageInitTabValues.EQUIPMENTS_SELECTION,
+              sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.EQUIPMENTS_SELECTION)
             }
           )
-        ] }),
-        renderActions && /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            container: true,
-            direction: "column",
-            sx: {
-              position: "fixed",
-              bottom: "15px"
-            },
-            children: renderActions()
-          }
-        )
-      ]
-    }
-  ) });
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.GENERAL, children: /* @__PURE__ */ jsx(GeneralParameters, { withApplyModifications: !!showActionsButtons }) }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.VOLTAGE_LIMITS, children: /* @__PURE__ */ jsx(VoltageLimitsParameters, {}) }),
+      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.EQUIPMENTS_SELECTION, children: /* @__PURE__ */ jsx(EquipmentSelectionParameters, {}) })
+    ] })
+  ] });
 }
 export {
-  VoltageInitParametersForm,
-  styles
+  VoltageInitParametersForm
 };

package/dist/features/parameters/voltage-init/voltage-init-parameters-inline.js

@@ -1,7 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
-import { useIntl, FormattedMessage } from "react-intl";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import { ElementType } from "../../../utils/types/elementType.js";
@@ -9,35 +8,33 @@ import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { updateVoltageInitParameters } from "../../../services/study.js";
 import { getVoltageInitParameters } from "../../../services/voltage-init.js";
+import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
-import "../../../components/ui/overflowableText/OverflowableText.js";
+import { ParameterLayout } from "../common/parameter-layout/parameter-layout.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import "react-hook-form";
-import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import { SubmitButton } from "../../../components/ui/reactHookForm/utils/SubmitButton.js";
+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 { PopupConfirmationDialog } from "../../../components/ui/dialogs/popupConfirmationDialog/PopupConfirmationDialog.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 { LabelledButton } from "../common/parameters.js";
-import { CreateParameterDialog } from "../common/parameters-creation-dialog.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
@@ -60,16 +57,11 @@ function VoltageInitParametersInLine({
     studyUuid,
     parameters: voltageInitParameters
   });
-  const intl = useIntl();
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
-  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
-  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
   const { snackError } = useSnackMessage();
-  const { formState, getValues, handleSubmit, reset, trigger } = voltageInitMethods.formMethods;
+  const { formState, getValues, handleSubmit, reset } = voltageInitMethods.formMethods;
   const handleLoadParameters = useCallback(
     (newParams) => {
       if (newParams?.length) {
-        setOpenSelectParameterDialog(false);
         const parametersUuid = newParams[0].id;
         getVoltageInitParameters(parametersUuid).then((params) => {
           reset(fromVoltageInitParamsDataToFormValues(params), {
@@ -79,7 +71,6 @@ function VoltageInitParametersInLine({
           snackWithFallback(snackError, error, { headerId: "paramsRetrievingError" });
         });
       }
-      setOpenSelectParameterDialog(false);
     },
     [reset, snackError]
   );
@@ -91,80 +82,33 @@ function VoltageInitParametersInLine({
     }).catch((error) => {
       snackWithFallback(snackError, error, { headerId: "updateVoltageInitParametersError" });
     });
-    setOpenResetConfirmation(false);
   }, [studyUuid, snackError]);
-  const handleResetClick = useCallback(() => {
-    setOpenResetConfirmation(true);
-  }, []);
-  const handleCancelReset = useCallback(() => {
-    setOpenResetConfirmation(false);
-  }, []);
   useEffect(() => {
     setHaveDirtyFields(formState.isDirty);
   }, [formState, setHaveDirtyFields]);
-  const handleOpenSaveDialog = useCallback(() => {
-    trigger().then((isValid) => {
-      if (isValid) {
-        setOpenCreateParameterDialog(true);
-      }
-    });
-  }, [trigger]);
   return /* @__PURE__ */ jsx(
-    VoltageInitParametersForm,
+    CustomFormProvider,
     {
-      voltageInitMethods,
-      renderActions: () => {
-        return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-            /* @__PURE__ */ jsx(
-              LabelledButton,
-              {
-                callback: () => setOpenSelectParameterDialog(true),
-                label: "settings.button.chooseSettings"
-              }
-            ),
-            /* @__PURE__ */ jsx(LabelledButton, { callback: handleOpenSaveDialog, label: "save" }),
-            /* @__PURE__ */ jsx(LabelledButton, { callback: handleResetClick, label: "resetToDefault" }),
-            /* @__PURE__ */ jsx(SubmitButton, { onClick: handleSubmit(voltageInitMethods.onSaveInline), variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
-          ] }),
-          openCreateParameterDialog && /* @__PURE__ */ jsx(
-            CreateParameterDialog,
-            {
-              studyUuid,
-              open: openCreateParameterDialog,
-              onClose: () => setOpenCreateParameterDialog(false),
-              parameterValues: getValues,
-              parameterFormatter: (params) => fromVoltageInitParametersFormToParamValues(params).computationParameters,
-              parameterType: ElementType.VOLTAGE_INIT_PARAMETERS
-            }
-          ),
-          openSelectParameterDialog && /* @__PURE__ */ jsx(
-            DirectoryItemSelector,
-            {
-              open: openSelectParameterDialog,
-              onClose: handleLoadParameters,
-              types: [ElementType.VOLTAGE_INIT_PARAMETERS],
-              title: intl.formatMessage({
-                id: "showSelectParameterDialog"
-              }),
-              multiSelect: false,
-              validationButtonText: intl.formatMessage({
-                id: "validate"
-              })
-            }
-          ),
-          openResetConfirmation && /* @__PURE__ */ jsx(
-            PopupConfirmationDialog,
-            {
-              message: "resetParamsConfirmation",
-              validateButtonLabel: "validate",
-              openConfirmationPopup: openResetConfirmation,
-              setOpenConfirmationPopup: handleCancelReset,
-              handlePopupConfirmation: resetVoltageInitParameters
-            }
-          )
-        ] });
-      }
+      validationSchema: voltageInitMethods.formSchema,
+      ...voltageInitMethods.formMethods,
+      removeOptional: true,
+      children: /* @__PURE__ */ jsx(
+        ParameterLayout,
+        {
+          title: "VoltageInit",
+          isLoading: voltageInitMethods.paramsLoading,
+          parameterType: ElementType.VOLTAGE_INIT_PARAMETERS,
+          createParameter: {
+            studyUuid,
+            getParameterValues: getValues,
+            parameterFormatter: (params) => fromVoltageInitParametersFormToParamValues(params).computationParameters
+          },
+          selectParameterHandler: handleLoadParameters,
+          resetHandler: resetVoltageInitParameters,
+          validateHandler: handleSubmit(voltageInitMethods.onSaveInline),
+          children: /* @__PURE__ */ jsx(VoltageInitParametersForm, { voltageInitMethods, showActionsButtons: true })
+        }
+      )
     }
   );
 }

package/dist/features/parameters/voltage-init/voltage-limits-parameters.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Info } from "@mui/icons-material";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useIntl } from "react-intl";
 import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
 import { LOW_VOLTAGE_LIMIT, HIGH_VOLTAGE_LIMIT, VOLTAGE_LIMITS_MODIFICATION, VOLTAGE_LIMITS_DEFAULT } from "./constants.js";
@@ -141,7 +141,7 @@ function VoltageLimitsParameters() {
     return newRowData;
   }, [VOLTAGE_LIMITS_DEFAULT_COLUMNS_DEFINITIONS]);
   const createVoltageLimitDefaultRows = () => [newDefaultRowData];
-  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
     /* @__PURE__ */ jsx(
       ParameterTableField,
       {

package/dist/features/process-configs/security-analysis/update-sa-process-config.js

@@ -8,30 +8,31 @@ import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "react";
+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 "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 "../../parameters/common/parameter-layout/parameter-layout-provider.js";
 import { ParameterLineDirectoryItemsInput } from "../../parameters/common/widget/parameter-line-directory-items-input.js";
 import "../../parameters/common/widget/parameter-line-slider.js";
 import "../../parameters/common/limitreductions/columns-definitions.js";