@gridsuite/commons-ui 0.239.0 → 0.241.0

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

@@ -1,36 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { MAPPING } from "./mapping-parameters-constants.js";
 import "../../../../utils/conversionUtils.js";
 import { ElementType } from "../../../../utils/types/elementType.js";
 import "../../../../utils/types/equipmentType.js";
 import "@mui/icons-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 "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";
@@ -39,7 +40,7 @@ import "../../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../../components/composite/filter/HeaderFilterForm.js";
 function MappingParameters({ path }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid2, { container: true, children: /* @__PURE__ */ jsx(
     ParameterLineDirectoryItemsInput,
     {
       name: `${path}.${MAPPING}`,

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { Network } from "./network-parameters-constants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -109,7 +109,7 @@ const params = [
   }
 ];
 function NetworkParameters({ path }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, children: params.map((param) => {
+  return /* @__PURE__ */ jsx(Grid2, { container: true, children: params.map((param) => {
     const { name, type, ...otherParams } = param;
     return /* @__PURE__ */ jsx(ParameterField, { id: path, name: param.name, type: param.type, ...otherParams }, param.name);
   }) });

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { SolverType } from "../../../../utils/types/dynamic-simulation.type.js";
@@ -38,7 +38,7 @@ function SolverParameters({ path }) {
       sx: { width: "100%" }
     }
   ];
-  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-simulation/time-delay/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 "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
 import { ParameterType } from "../../../../utils/types/parameters.type.js";
@@ -19,7 +19,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-simulation/use-dynamic-simulation-parameters-form.js

@@ -17,31 +17,32 @@ import { Solver } from "./solver/solver-parameters-constants.js";
 import "./solver/solver-parameters.js";
 import { MAPPING } from "./mapping/mapping-parameters-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 "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";

package/dist/features/parameters/index.js

@@ -1,9 +1,11 @@
+import { ParameterLayout } from "./common/parameter-layout/parameter-layout.js";
+import { ParameterLayoutProvider, useParameterLayoutContext } from "./common/parameter-layout/parameter-layout-provider.js";
 import { formatComputingTypeLabel, isValidComputingType } from "./common/computing-type.js";
 import { COMMON_PARAMETERS, CONTINGENCIES, CONTINGENCY_LISTS, CONTINGENCY_LISTS_INFOS, PARAM_SA_FLOW_PROPORTIONAL_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_LOW_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_PROVIDER, PROVIDER, SPECIFIC_PARAMETERS, VERSION_PARAMETER, VOLTAGE_LEVEL } from "./common/constants.js";
 import { LineSeparator } from "./common/line-separator.js";
 import { LabelledButton, SwitchWithLabel, TabPanel } from "./common/parameters.js";
 import { CreateParameterDialog } from "./common/parameters-creation-dialog.js";
-import { ProviderParam } from "./common/ProviderParam.js";
+import { ProviderParam } from "./common/provider-param.js";
 import { ParameterFloat } from "./common/widget/parameter-float.js";
 import { ParameterGroup } from "./common/widget/parameter-group.js";
 import { ParameterLineDirectoryItemsInput } from "./common/widget/parameter-line-directory-items-input.js";
@@ -163,6 +165,8 @@ export {
   PSTS_EQUIPMENT_TYPES,
   ParameterFloat,
   ParameterGroup,
+  ParameterLayout,
+  ParameterLayoutProvider,
   ParameterLineDirectoryItemsInput,
   ParameterLineSlider,
   ParameterSwitch,
@@ -242,6 +246,7 @@ export {
   sanitizePercentageValue,
   toFormValuesContingencyListsInfos,
   toFormValuesLimitReductions,
+  useParameterLayoutContext,
   useParametersForm,
   useTabs
 };

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

@@ -35,6 +35,7 @@ import "react-resizable-panels";
 import "react-papaparse";
 import { ParameterGroup } from "../common/widget/parameter-group.js";
 import "../common/widget/parameter-line-slider.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import { COMMON_PARAMETERS, SPECIFIC_PARAMETERS } from "../common/constants.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";

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

@@ -1,38 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { TabValues } from "./load-flow-parameters-utils.js";
 import LoadFlowGeneralParameters from "./load-flow-general-parameters.js";
-import "../../../utils/conversionUtils.js";
-import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
-import { TabPanel } from "../common/parameters.js";
 import "react";
 import "react-intl";
+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 { parametersStyles } from "../parameters-style.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 { parametersStyles } from "../parameters-style.js";
 import { ParameterLineSlider } from "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import { LimitReductionsTableForm } from "../common/limitreductions/limit-reductions-table-form.js";
@@ -62,9 +63,9 @@ function LoadFlowParametersContent({
   params,
   defaultLimitReductions
 }) {
-  return /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid, { item: true, sx: styles.maxWidth, children: [
+  return /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid2, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid2, { sx: styles.maxWidth, children: [
     /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.GENERAL, children: /* @__PURE__ */ jsx(LoadFlowGeneralParameters, { provider: currentProvider, specificParams: specificParameters }) }),
-    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.LIMIT_REDUCTIONS, children: /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: currentProvider === PARAM_PROVIDER_OPENLOADFLOW ? /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params?.limitReductions ?? defaultLimitReductions }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.LIMIT_REDUCTIONS, children: /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: currentProvider === PARAM_PROVIDER_OPENLOADFLOW ? /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params?.limitReductions ?? defaultLimitReductions }) : /* @__PURE__ */ jsx(
       ParameterLineSlider,
       {
         name: PARAM_LIMIT_REDUCTION,

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

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } 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";
@@ -10,7 +11,6 @@ import { LANG_ENGLISH } from "../../../utils/langs.js";
 import "@mui/icons-material";
 import { getLoadFlowDefaultLimitReductions, getLoadFlowProviders, fetchLoadFlowParameters, setLoadFlowParameters, getLoadFlowSpecificParametersDescription } from "../../../services/loadflow.js";
 import "react";
-import "@mui/material";
 import "react-intl";
 import "react-hook-form";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
@@ -84,23 +84,17 @@ function LoadFlowParametersEditionDialog({
       },
       titleId,
       disabledSave: disableSave,
-      children: /* @__PURE__ */ jsx(LoadFlowProvider, { children: /* @__PURE__ */ jsx(
-        LoadFlowParametersForm,
-        {
-          loadflowMethods,
-          language,
-          renderTitleFields: () => {
-            return /* @__PURE__ */ jsx(
-              NameElementEditorForm,
-              {
-                initialElementName: name,
-                activeDirectory,
-                elementType: ElementType.LOADFLOW_PARAMETERS
-              }
-            );
+      children: /* @__PURE__ */ jsxs(LoadFlowProvider, { children: [
+        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          NameElementEditorForm,
+          {
+            initialElementName: name,
+            activeDirectory,
+            elementType: ElementType.LOADFLOW_PARAMETERS
           }
-        }
-      ) })
+        ) }),
+        /* @__PURE__ */ jsx(LoadFlowParametersForm, { loadflowMethods })
+      ] })
     }
   );
 }

package/dist/features/parameters/loadflow/load-flow-parameters-form.d.ts

@@ -1,11 +1,6 @@
-import { ReactNode } from 'react';
 import { UseLoadFlowParametersFormReturn } from './use-load-flow-parameters-form';
-import { GsLang } from '../../../utils/langs';
 interface LoadFlowParametersFormProps {
     loadflowMethods: UseLoadFlowParametersFormReturn;
-    language: GsLang;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
 }
-export declare function LoadFlowParametersForm({ loadflowMethods, language, renderTitleFields, renderActions, }: Readonly<LoadFlowParametersFormProps>): import("react").JSX.Element;
+export declare function LoadFlowParametersForm({ loadflowMethods }: Readonly<LoadFlowParametersFormProps>): import("react").JSX.Element;
 export {};

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

@@ -1,70 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
 import LoadFlowParametersHeader from "./load-flow-parameters-header.js";
 import LoadFlowParametersContent from "./load-flow-parameters-content.js";
-import "@mui/icons-material";
-import "react-intl";
-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 "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";
-const styles = {
-  form: {
-    height: "100%",
-    display: "flex",
-    position: "relative",
-    flexDirection: "column",
-    maxHeight: "calc(100% - 5vh)"
-  },
-  loadflowParameters: {
-    flexGrow: 1,
-    paddingLeft: 1,
-    overflow: "auto"
-  },
-  actions: {
-    flexGrow: 0
-  },
-  content: (theme) => ({
-    overflowY: "auto",
-    overflowX: "hidden",
-    paddingRight: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(1),
-    flexGrow: 1
-  })
-};
-function LoadFlowParametersForm({
-  loadflowMethods,
-  language,
-  renderTitleFields,
-  renderActions
-}) {
+import { parametersStyles } from "../parameters-style.js";
+function LoadFlowParametersForm({ loadflowMethods }) {
   const {
-    formMethods,
-    formSchema,
     selectedTab,
     handleTabChange,
     tabIndexesWithError,
@@ -72,34 +12,29 @@ function LoadFlowParametersForm({
     specificParametersDescriptionForProvider,
     params,
     watchProvider,
-    defaultLimitReductions,
-    paramsLoaded
+    defaultLimitReductions
   } = loadflowMethods;
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, language, children: /* @__PURE__ */ jsxs(Box, { sx: styles.form, children: [
-    renderTitleFields?.(),
-    paramsLoaded ? /* @__PURE__ */ jsxs(Box, { sx: styles.loadflowParameters, children: [
-      /* @__PURE__ */ jsx(
-        LoadFlowParametersHeader,
-        {
-          selectedTab,
-          handleTabChange,
-          tabIndexesWithError,
-          formattedProviders
-        }
-      ),
-      /* @__PURE__ */ jsx(Grid, { container: true, sx: styles.content, children: /* @__PURE__ */ jsx(
-        LoadFlowParametersContent,
-        {
-          selectedTab,
-          currentProvider: watchProvider ?? "",
-          specificParameters: specificParametersDescriptionForProvider,
-          params,
-          defaultLimitReductions
-        }
-      ) })
-    ] }) : /* @__PURE__ */ jsx(LinearProgress, {}),
-    renderActions && /* @__PURE__ */ jsx(Box, { sx: styles.actions, children: renderActions() })
-  ] }) });
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, sx: parametersStyles.scrollableGrid, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+      LoadFlowParametersHeader,
+      {
+        selectedTab,
+        handleTabChange,
+        tabIndexesWithError,
+        formattedProviders
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+      LoadFlowParametersContent,
+      {
+        selectedTab,
+        currentProvider: watchProvider ?? "",
+        specificParameters: specificParametersDescriptionForProvider,
+        params,
+        defaultLimitReductions
+      }
+    ) })
+  ] });
 }
 export {
   LoadFlowParametersForm

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

@@ -1,13 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, Tabs, Tab } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Tabs, Tab } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { TabValues } from "./load-flow-parameters-utils.js";
-import { parametersStyles, getTabStyle } from "../parameters-style.js";
+import { getTabStyle } from "../parameters-style.js";
 import "@mui/icons-material";
+import "react";
 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";
@@ -17,7 +17,6 @@ import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
 import "yup";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
-import { MuiSelectInput } from "../../../components/ui/reactHookForm/selectInputs/MuiSelectInput.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";
@@ -32,8 +31,8 @@ import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { PROVIDER } from "../common/constants.js";
-import { LineSeparator } from "../common/line-separator.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import { ProviderParam } from "../common/provider-param.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
@@ -46,52 +45,29 @@ function LoadFlowParametersHeader({
   tabIndexesWithError,
   formattedProviders
 }) {
-  return /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 0, paddingLeft: 1, paddingTop: 1 }, children: /* @__PURE__ */ jsxs(
-    Grid,
-    {
-      container: true,
-      spacing: 1,
-      sx: {
-        padding: 0,
-        paddingBottom: 0,
-        height: "fit-content"
-      },
-      justifyContent: "space-between",
-      children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
-          MuiSelectInput,
-          {
-            "data-testid": "LfProvider",
-            name: PROVIDER,
-            size: "small",
-            options: Object.values(formattedProviders)
-          }
-        ) }),
-        /* @__PURE__ */ jsx(LineSeparator, {}),
-        /* @__PURE__ */ jsx(Grid, { item: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
-          /* @__PURE__ */ jsx(
-            Tab,
-            {
-              label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.GENERAL }),
-              value: TabValues.GENERAL,
-              sx: getTabStyle(tabIndexesWithError, TabValues.GENERAL),
-              "data-testid": "LfGeneralTab"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tab,
-            {
-              label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.LIMIT_REDUCTIONS }),
-              value: TabValues.LIMIT_REDUCTIONS,
-              sx: getTabStyle(tabIndexesWithError, TabValues.LIMIT_REDUCTIONS),
-              "data-testid": "LfLimitReductionsTab"
-            }
-          )
-        ] }) })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders, id: "Lf" }),
+    /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.GENERAL }),
+          value: TabValues.GENERAL,
+          sx: getTabStyle(tabIndexesWithError, TabValues.GENERAL),
+          "data-testid": "LfGeneralTab"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.LIMIT_REDUCTIONS }),
+          value: TabValues.LIMIT_REDUCTIONS,
+          sx: getTabStyle(tabIndexesWithError, TabValues.LIMIT_REDUCTIONS),
+          "data-testid": "LfLimitReductionsTab"
+        }
+      )
+    ] })
+  ] });
 }
 export {
   LoadFlowParametersHeader as default