@gridsuite/commons-ui 0.240.0 → 0.241.0

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

@@ -1,54 +1,48 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
-import { Box, Grid2 } from "@mui/material";
-import { useIntl, FormattedMessage } from "react-intl";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
 import { LoadFlowProvider } from "./load-flow-parameters-provider.js";
-import { parametersStyles } from "../parameters-style.js";
+import "react-intl";
 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 { fetchLoadFlowParameters } from "../../../services/loadflow.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 { useLoadFlowParametersForm } from "./use-load-flow-parameters-form.js";
+import { LoadFlowParametersForm } from "./load-flow-parameters-form.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 { LineSeparator } from "../common/line-separator.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";
 import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
-import { useLoadFlowParametersForm } from "./use-load-flow-parameters-form.js";
-import { LoadFlowParametersForm } from "./load-flow-parameters-form.js";
 function LoadFlowParametersInline({
   studyUuid,
   language,
@@ -58,26 +52,11 @@ function LoadFlowParametersInline({
 }) {
   const { resetParameters } = parametersBackend;
   const loadflowMethods = useLoadFlowParametersForm(parametersBackend, isDeveloperMode, null, null, null);
-  const intl = useIntl();
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
-  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
-  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
   const { snackError } = useSnackMessage();
-  const executeResetAction = useCallback(() => {
-    resetParameters();
-    setOpenResetConfirmation(false);
-  }, [resetParameters]);
-  const handleResetAllClick = useCallback(() => {
-    setOpenResetConfirmation(true);
-  }, []);
-  const handleCancelReset = useCallback(() => {
-    setOpenResetConfirmation(false);
-  }, []);
   const { reset, getValues, formState, handleSubmit } = loadflowMethods.formMethods;
   const handleLoadParameter = useCallback(
     (newParams) => {
       if (newParams && newParams.length > 0) {
-        setOpenSelectParameterDialog(false);
         fetchLoadFlowParameters(newParams[0].id).then((parameters) => {
           console.info(`loading the following loadflow parameters : ${parameters.uuid}`);
           reset(loadflowMethods.toLoadFlowFormValues(parameters), {
@@ -87,7 +66,6 @@ function LoadFlowParametersInline({
           snackWithFallback(snackError, error, { headerId: "paramsRetrievingError" });
         });
       }
-      setOpenSelectParameterDialog(false);
     },
     [loadflowMethods, reset, snackError]
   );
@@ -95,99 +73,29 @@ function LoadFlowParametersInline({
     setHaveDirtyFields(formState.isDirty);
   }, [formState, setHaveDirtyFields]);
   return /* @__PURE__ */ jsx(LoadFlowProvider, { children: /* @__PURE__ */ jsx(
-    LoadFlowParametersForm,
+    CustomFormProvider,
     {
-      loadflowMethods,
+      validationSchema: loadflowMethods.formSchema,
+      ...loadflowMethods.formMethods,
+      removeOptional: true,
       language,
-      renderActions: () => {
-        return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(LineSeparator, {}),
-          /* @__PURE__ */ jsxs(
-            Grid2,
-            {
-              container: true,
-              sx: mergeSx(parametersStyles.controlParametersItem, parametersStyles.marginTopButton, {
-                paddingBottom: 0
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  LabelledButton,
-                  {
-                    callback: () => setOpenSelectParameterDialog(true),
-                    label: "settings.button.chooseSettings",
-                    "data-testid": "LfChooseParametersButton"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  LabelledButton,
-                  {
-                    callback: () => setOpenCreateParameterDialog(true),
-                    label: "save",
-                    "data-testid": "LfSaveButton"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  LabelledButton,
-                  {
-                    callback: handleResetAllClick,
-                    label: "resetToDefault",
-                    "data-testid": "LfResetToDefaultButton"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SubmitButton,
-                  {
-                    onClick: handleSubmit(
-                      loadflowMethods.onSaveInline,
-                      loadflowMethods.onValidationError
-                    ),
-                    variant: "outlined",
-                    "data-testid": "LfValidateButton",
-                    children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" })
-                  }
-                )
-              ]
-            }
-          ),
-          openCreateParameterDialog && /* @__PURE__ */ jsx(
-            CreateParameterDialog,
-            {
-              studyUuid,
-              open: openCreateParameterDialog,
-              onClose: () => setOpenCreateParameterDialog(false),
-              parameterValues: () => loadflowMethods.formatNewParams(getValues()),
-              parameterFormatter: (newParams) => newParams,
-              parameterType: ElementType.LOADFLOW_PARAMETERS
-            }
-          ),
-          openSelectParameterDialog && /* @__PURE__ */ jsx(
-            DirectoryItemSelector,
-            {
-              open: openSelectParameterDialog,
-              onClose: handleLoadParameter,
-              types: [ElementType.LOADFLOW_PARAMETERS],
-              title: intl.formatMessage({
-                id: "showSelectParameterDialog"
-              }),
-              onlyLeaves: true,
-              multiSelect: false,
-              validationButtonText: intl.formatMessage({
-                id: "validate"
-              })
-            }
-          ),
-          openResetConfirmation && /* @__PURE__ */ jsx(
-            PopupConfirmationDialog,
-            {
-              message: "resetParamsConfirmation",
-              validateButtonLabel: "validate",
-              openConfirmationPopup: openResetConfirmation,
-              setOpenConfirmationPopup: handleCancelReset,
-              handlePopupConfirmation: executeResetAction
-            }
-          )
-        ] });
-      }
+      children: /* @__PURE__ */ jsx(
+        ParameterLayout,
+        {
+          title: "LoadFlow",
+          isLoading: !loadflowMethods.paramsLoaded,
+          parameterType: ElementType.LOADFLOW_PARAMETERS,
+          createParameter: {
+            studyUuid,
+            getParameterValues: getValues,
+            parameterFormatter: (values) => loadflowMethods.formatNewParams(values)
+          },
+          selectParameterHandler: handleLoadParameter,
+          resetHandler: resetParameters,
+          validateHandler: handleSubmit(loadflowMethods.onSaveInline, loadflowMethods.onValidationError),
+          children: /* @__PURE__ */ jsx(LoadFlowParametersForm, { loadflowMethods })
+        }
+      )
     }
   ) });
 }

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

@@ -1,35 +1,36 @@
 import * as yup from "yup";
-import "../../../utils/conversionUtils.js";
-import "../../../utils/types/equipmentType.js";
 import "react/jsx-runtime";
-import "@mui/icons-material";
-import { COMMON_PARAMETERS } from "../common/constants.js";
 import "@mui/material";
-import "react-intl";
+import "@mui/icons-material";
 import "react";
+import "react-intl";
+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 "../../../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 { COMMON_PARAMETERS } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import { IST_FORM, LIMIT_DURATION_FORM, LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";

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

@@ -3,26 +3,22 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { useState, useRef, useCallback, useMemo, useEffect, useEffectEvent } from "react";
 import * as yup from "yup";
 import { TabValues, getCommonLoadFlowParametersFormSchema, mapLimitReductions, setLimitReductions } from "./load-flow-parameters-utils.js";
+import "react/jsx-runtime";
+import "@mui/material";
+import "@mui/icons-material";
+import "react-intl";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
-import "react/jsx-runtime";
-import "@mui/icons-material";
-import { PROVIDER, SPECIFIC_PARAMETERS, COMMON_PARAMETERS, VERSION_PARAMETER } from "../common/constants.js";
-import "@mui/material";
-import "react-intl";
 import { updateParameter } from "../../../services/explore.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
 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 { DESCRIPTION, 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";
@@ -30,12 +26,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, SPECIFIC_PARAMETERS, COMMON_PARAMETERS, VERSION_PARAMETER } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import { getLimitReductionsFormSchema, LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";

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

@@ -3,25 +3,21 @@ import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useState, useEffect } from "react";
 import { MAP_BASE_MAP, NetworkVisualizationTabValues, PARAM_MAP_BASEMAP, PARAM_LINE_FULL_PATH, PARAM_LINE_PARALLEL_PATH, INTL_LINE_FLOW_MODE_OPTIONS, LINE_FLOW_MODE, PARAM_LINE_FLOW_MODE, MAP_MANUAL_REFRESH, PARAM_MAP_MANUAL_REFRESH } from "./constants.js";
+import "@mui/icons-material";
+import { parametersStyles } from "../parameters-style.js";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "../../../utils/types/equipmentType.js";
-import "@mui/icons-material";
-import { LineSeparator } from "../common/line-separator.js";
-import { parametersStyles } from "../parameters-style.js";
+import "react-hook-form";
 import { fetchStudyMetadata } from "../../../services/appsMetadata.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 "../../../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 { SwitchInput } from "../../../components/ui/reactHookForm/booleans/SwitchInput.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import { MuiSelectInput } from "../../../components/ui/reactHookForm/selectInputs/MuiSelectInput.js";
@@ -30,12 +26,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 { LineSeparator } from "../common/line-separator.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";

package/dist/features/parameters/network-visualizations/network-visualizations-form.d.ts

@@ -1,11 +1,8 @@
-import { ReactNode } from 'react';
 import { UserProfile } from 'oidc-client-ts';
 import { UseNetworkVisualizationParametersFormReturn } from './use-network-visualizations-parameters-form';
 interface NetworkVisualizationParametersFormProps {
     networkVisuMethods: UseNetworkVisualizationParametersFormReturn;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
     userProfile: UserProfile | null;
 }
-export declare function NetworkVisualizationParametersForm({ networkVisuMethods, renderTitleFields, renderActions, userProfile, }: Readonly<NetworkVisualizationParametersFormProps>): import("react").JSX.Element;
+export declare function NetworkVisualizationParametersForm({ networkVisuMethods, userProfile, }: Readonly<NetworkVisualizationParametersFormProps>): import("react").JSX.Element;
 export {};

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

@@ -1,8 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Stack, LinearProgress, Tabs, Tab } from "@mui/material";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Tabs, Tab } from "@mui/material";
 import { useState, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
+import { NetworkVisualizationTabValues } from "./constants.js";
+import { MapParameters } from "./map-parameters.js";
+import { SingleLineDiagramParameters } from "./single-line-diagram-parameters.js";
+import { NetworkAreaDiagramParameters } from "./network-area-diagram-parameters.js";
 import "@mui/icons-material";
+import { TabPanel } from "../common/parameters.js";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
@@ -12,7 +17,7 @@ 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,11 +35,7 @@ import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { NetworkVisualizationTabValues } from "./constants.js";
-import { MapParameters } from "./map-parameters.js";
-import { SingleLineDiagramParameters } from "./single-line-diagram-parameters.js";
-import { NetworkAreaDiagramParameters } from "./network-area-diagram-parameters.js";
-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";
@@ -56,47 +57,20 @@ const useGetAvailableComponentLibraries = (userProfile) => {
 };
 function NetworkVisualizationParametersForm({
   networkVisuMethods,
-  renderTitleFields,
-  renderActions,
   userProfile
 }) {
   const componentLibraries = useGetAvailableComponentLibraries(userProfile);
-  const { formMethods, formSchema, selectedTab, handleTabChange, paramsLoading } = networkVisuMethods;
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Stack, { children: renderTitleFields?.() }),
-    paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: handleTabChange, children: [
-        /* @__PURE__ */ jsx(Tab, { label: /* @__PURE__ */ jsx(FormattedMessage, { id: "Map" }), value: NetworkVisualizationTabValues.MAP }),
-        /* @__PURE__ */ jsx(
-          Tab,
-          {
-            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "SingleLineDiagram" }),
-            value: NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tab,
-          {
-            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "NetworkAreaDiagram" }),
-            value: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.MAP, children: /* @__PURE__ */ jsx(MapParameters, {}) }),
-      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM, children: /* @__PURE__ */ jsx(SingleLineDiagramParameters, { componentLibraries }) }),
-      /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM, children: /* @__PURE__ */ jsx(NetworkAreaDiagramParameters, {}) })
+  const { selectedTab, handleTabChange } = networkVisuMethods;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: handleTabChange, children: [
+      /* @__PURE__ */ jsx(Tab, { label: /* @__PURE__ */ jsx(FormattedMessage, { id: "Map" }), value: NetworkVisualizationTabValues.MAP }),
+      /* @__PURE__ */ jsx(Tab, { label: /* @__PURE__ */ jsx(FormattedMessage, { id: "SingleLineDiagram" }), value: NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM }),
+      /* @__PURE__ */ jsx(Tab, { label: /* @__PURE__ */ jsx(FormattedMessage, { id: "NetworkAreaDiagram" }), value: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM })
     ] }),
-    /* @__PURE__ */ jsx(
-      Stack,
-      {
-        sx: {
-          position: "absolute",
-          bottom: "30px"
-        },
-        children: renderActions?.()
-      }
-    )
-  ] }) });
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.MAP, children: /* @__PURE__ */ jsx(MapParameters, {}) }),
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM, children: /* @__PURE__ */ jsx(SingleLineDiagramParameters, { componentLibraries }) }),
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: NetworkVisualizationTabValues.NETWORK_AREA_DIAGRAM, children: /* @__PURE__ */ jsx(NetworkAreaDiagramParameters, {}) })
+  ] });
 }
 export {
   NetworkVisualizationParametersForm

package/dist/features/parameters/network-visualizations/network-visualizations-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";
@@ -56,7 +56,7 @@ function NetworkVisualizationsParametersEditionDialog({
     formState: { errors, dirtyFields }
   } = networkVisuMethods.formMethods;
   const disableSave = Object.keys(errors).length > 0 || Object.keys(dirtyFields).length === 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     CustomMuiDialog,
     {
       open,
@@ -76,23 +76,17 @@ function NetworkVisualizationsParametersEditionDialog({
           // we want the dialog height to be fixed even when switching tabs
         }
       },
-      children: /* @__PURE__ */ jsx(
-        NetworkVisualizationParametersForm,
-        {
-          userProfile,
-          networkVisuMethods,
-          renderTitleFields: () => {
-            return /* @__PURE__ */ jsx(
-              NameElementEditorForm,
-              {
-                initialElementName: name,
-                activeDirectory,
-                elementType: ElementType.NETWORK_VISUALIZATIONS_PARAMETERS
-              }
-            );
+      children: [
+        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          NameElementEditorForm,
+          {
+            initialElementName: name,
+            activeDirectory,
+            elementType: ElementType.NETWORK_VISUALIZATIONS_PARAMETERS
           }
-        }
-      )
+        ) }),
+        /* @__PURE__ */ jsx(NetworkVisualizationParametersForm, { userProfile, networkVisuMethods })
+      ]
     }
   );
 }