@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/parameters/short-circuit/short-circuit-parameters-content.js

@@ -1,40 +1,41 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
-import { Grid, Tabs, Tab, Box } from "@mui/material";
+import { Grid2, Tabs, Tab, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { getTabStyle, parametersStyles } from "../parameters-style.js";
 import { ShortCircuitParametersTabValues } from "./short-circuit-parameters-utils.js";
 import { ShortCircuitGeneralTabPanel } from "./short-circuit-general-tab-panel.js";
 import { ShortCircuitStudyAreaTabPanel } from "./short-circuit-study-area-tab-panel.js";
 import { ShortCircuitPowerElectronicsTabPanel } from "./short-circuit-power-electronics-tab-panel.js";
+import "@mui/icons-material";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
-import "@mui/icons-material";
-import { SPECIFIC_PARAMETERS } from "../common/constants.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 "../common/parameter-layout/parameter-layout-provider.js";
+import { SPECIFIC_PARAMETERS } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
@@ -65,7 +66,7 @@ function ShortCircuitParametersContent({ shortCircuitMethods }) {
     [watchSpecificParameters]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
+    /* @__PURE__ */ jsx(Grid2, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
       /* @__PURE__ */ jsx(
         Tab,
         {
@@ -91,7 +92,7 @@ function ShortCircuitParametersContent({ shortCircuitMethods }) {
         }
       )
     ] }) }),
-    /* @__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: [
+    /* @__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(ShortCircuitGeneralTabPanel, { resetAll, value: selectedTab }),
       isThereSpecificParameters && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ShortCircuitStudyAreaTabPanel, { value: selectedTab }),

package/dist/features/parameters/short-circuit/short-circuit-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";
@@ -9,7 +10,6 @@ import { ComputingType } from "../../../utils/types/computing-type.js";
 import "@mui/icons-material";
 import { fetchShortCircuitParameters, updateShortCircuitParameters, getShortCircuitSpecificParametersDescription } from "../../../services/short-circuit-analysis.js";
 import "react";
-import "@mui/material";
 import "react-intl";
 import "react-hook-form";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
@@ -69,7 +69,7 @@ function ShortCircuitParametersEditionDialog({
     formState: { errors, dirtyFields }
   } = shortCircuitMethods.formMethods;
   const disableSave = Object.keys(errors).length > 0 || Object.keys(dirtyFields).length === 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     CustomMuiDialog,
     {
       open,
@@ -85,22 +85,17 @@ function ShortCircuitParametersEditionDialog({
       titleId,
       disabledSave: disableSave,
       maxWidth: "lg",
-      children: /* @__PURE__ */ jsx(
-        ShortCircuitParametersForm,
-        {
-          shortCircuitMethods,
-          renderTitleFields: () => {
-            return /* @__PURE__ */ jsx(
-              NameElementEditorForm,
-              {
-                initialElementName: name,
-                activeDirectory,
-                elementType: ElementType.SHORT_CIRCUIT_PARAMETERS
-              }
-            );
+      children: [
+        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          NameElementEditorForm,
+          {
+            initialElementName: name,
+            activeDirectory,
+            elementType: ElementType.SHORT_CIRCUIT_PARAMETERS
           }
-        }
-      )
+        ) }),
+        /* @__PURE__ */ jsx(ShortCircuitParametersForm, { shortCircuitMethods })
+      ]
     }
   );
 }

package/dist/features/parameters/short-circuit/short-circuit-parameters-form.d.ts

@@ -1,9 +1,6 @@
-import { ReactNode } from 'react';
 import { UseShortCircuitParametersFormReturn } from './use-short-circuit-parameters-form';
 interface ShortCircuitParametersFormProps {
     shortCircuitMethods: UseShortCircuitParametersFormReturn;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
 }
-export declare function ShortCircuitParametersForm({ shortCircuitMethods, renderTitleFields, renderActions, }: Readonly<ShortCircuitParametersFormProps>): import("react").JSX.Element;
+export declare function ShortCircuitParametersForm({ shortCircuitMethods }: Readonly<ShortCircuitParametersFormProps>): import("react").JSX.Element;
 export {};

package/dist/features/parameters/short-circuit/short-circuit-parameters-form.js

@@ -1,67 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
-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";
-import { parametersStyles } from "../parameters-style.js";
+import { jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
 import ShortCircuitParametersContent from "./short-circuit-parameters-content.js";
-const styles = {
-  shortCircuitParameters: {
-    height: "100%",
-    display: "flex",
-    position: "relative",
-    flexDirection: "column"
-  }
-};
-function ShortCircuitParametersForm({
-  shortCircuitMethods,
-  renderTitleFields,
-  renderActions
-}) {
-  const { formMethods, formSchema, paramsLoaded } = shortCircuitMethods;
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(Box, { sx: styles.shortCircuitParameters, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
-    paramsLoaded ? /* @__PURE__ */ jsx(Grid, { sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(ShortCircuitParametersContent, { shortCircuitMethods }) }) : /* @__PURE__ */ jsx(LinearProgress, {}),
-    /* @__PURE__ */ jsx(
-      Grid,
-      {
-        item: true,
-        container: true,
-        direction: "column",
-        sx: {
-          position: "absolute",
-          bottom: "15px"
-        },
-        children: renderActions?.()
-      }
-    )
-  ] }) });
+import { parametersStyles } from "../parameters-style.js";
+function ShortCircuitParametersForm({ shortCircuitMethods }) {
+  return /* @__PURE__ */ jsx(Grid2, { container: true, sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(ShortCircuitParametersContent, { shortCircuitMethods }) });
 }
 export {
   ShortCircuitParametersForm

package/dist/features/parameters/short-circuit/short-circuit-parameters-inline.js

@@ -1,42 +1,39 @@
-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";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { fetchShortCircuitParameters } from "../../../services/short-circuit-analysis.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";
@@ -56,19 +53,13 @@ function ShortCircuitParametersInLine({
     name: null,
     description: null
   });
-  const intl = useIntl();
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
-  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
   const { resetParameters } = parametersBackend;
-  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
-  const [pendingResetAction, setPendingResetAction] = useState(null);
   const { snackError } = useSnackMessage();
   const { formMethods } = shortCircuitMethods;
   const { getValues, formState, handleSubmit, reset } = formMethods;
   const handleLoadParameters = useCallback(
     (newParams) => {
       if (newParams?.length) {
-        setOpenSelectParameterDialog(false);
         const paramUuid = newParams[0].id;
         fetchShortCircuitParameters(paramUuid).then((parameters) => {
           reset(shortCircuitMethods.toShortCircuitFormValues(parameters), {
@@ -78,94 +69,35 @@ function ShortCircuitParametersInLine({
           snackWithFallback(snackError, error, { headerId: "paramsRetrievingError" });
         });
       }
-      setOpenSelectParameterDialog(false);
     },
     [snackError, shortCircuitMethods, reset]
   );
-  const executeResetAction = useCallback(() => {
-    if (pendingResetAction === "all" || pendingResetAction === "parameters") {
-      resetParameters();
-    }
-    setOpenResetConfirmation(false);
-    setPendingResetAction(null);
-  }, [pendingResetAction, resetParameters]);
-  const handleResetAllClick = useCallback(() => {
-    setPendingResetAction("all");
-    setOpenResetConfirmation(true);
-  }, []);
-  const handleCancelReset = useCallback(() => {
-    setOpenResetConfirmation(false);
-    setPendingResetAction(null);
-  }, []);
   useEffect(() => {
     setHaveDirtyFields(formState.isDirty);
   }, [formState, setHaveDirtyFields]);
   return /* @__PURE__ */ jsx(
-    ShortCircuitParametersForm,
+    CustomFormProvider,
     {
-      shortCircuitMethods,
-      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: () => setOpenCreateParameterDialog(true), label: "save" }),
-            /* @__PURE__ */ jsx(LabelledButton, { callback: handleResetAllClick, label: "resetToDefault" }),
-            /* @__PURE__ */ jsx(
-              SubmitButton,
-              {
-                onClick: handleSubmit(
-                  shortCircuitMethods.onSaveInline,
-                  shortCircuitMethods.onValidationError
-                ),
-                variant: "outlined",
-                children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" })
-              }
-            )
-          ] }),
-          openCreateParameterDialog && /* @__PURE__ */ jsx(
-            CreateParameterDialog,
-            {
-              studyUuid,
-              open: openCreateParameterDialog,
-              onClose: () => setOpenCreateParameterDialog(false),
-              parameterValues: () => shortCircuitMethods.formatNewParams(getValues()),
-              parameterFormatter: (newParams) => newParams,
-              parameterType: ElementType.SHORT_CIRCUIT_PARAMETERS
-            }
-          ),
-          openSelectParameterDialog && /* @__PURE__ */ jsx(
-            DirectoryItemSelector,
-            {
-              open: openSelectParameterDialog,
-              onClose: handleLoadParameters,
-              types: [ElementType.SHORT_CIRCUIT_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: executeResetAction
-            }
-          )
-        ] });
-      }
+      validationSchema: shortCircuitMethods.formSchema,
+      ...shortCircuitMethods.formMethods,
+      removeOptional: true,
+      children: /* @__PURE__ */ jsx(
+        ParameterLayout,
+        {
+          title: "ShortCircuit",
+          isLoading: !shortCircuitMethods.paramsLoaded,
+          parameterType: ElementType.SHORT_CIRCUIT_PARAMETERS,
+          createParameter: {
+            studyUuid,
+            getParameterValues: getValues,
+            parameterFormatter: (params) => shortCircuitMethods.formatNewParams(params)
+          },
+          selectParameterHandler: handleLoadParameters,
+          resetHandler: resetParameters,
+          validateHandler: handleSubmit(shortCircuitMethods.onSaveInline, shortCircuitMethods.onValidationError),
+          children: /* @__PURE__ */ jsx(ShortCircuitParametersForm, { shortCircuitMethods })
+        }
+      )
     }
   );
 }

package/dist/features/parameters/short-circuit/short-circuit-parameters-utils.js

@@ -1,27 +1,23 @@
 import * as yup from "yup";
 import { SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, NODE_CLUSTER, NODE_CLUSTER_FILTER_IDS, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, InitialVoltage, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_FEEDER_RESULT } from "./constants.js";
+import "react/jsx-runtime";
+import "@mui/material";
+import "@mui/icons-material";
+import "react";
+import "react-intl";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import { ID } from "../../../utils/constants/filterConstant.js";
 import { YUP_REQUIRED } from "../../../utils/constants/translationKeys.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "../../../utils/types/equipmentType.js";
-import "react/jsx-runtime";
-import "@mui/icons-material";
-import { COMMON_PARAMETERS, SPECIFIC_PARAMETERS } from "../common/constants.js";
-import "@mui/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 { 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";
@@ -29,12 +25,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 { COMMON_PARAMETERS, SPECIFIC_PARAMETERS } 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/short-circuit/short-circuit-power-electronics-tab-panel.js

@@ -1,26 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { ShortCircuitIccMaterialTable } from "./short-circuit-icc-material-table.js";
-import "../../../utils/conversionUtils.js";
-import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
-import { SPECIFIC_PARAMETERS } from "../common/constants.js";
 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 { FieldLabel } from "../../../components/ui/reactHookForm/utils/FieldLabel.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 "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
@@ -28,20 +24,25 @@ 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 { SPECIFIC_PARAMETERS } from "../common/constants.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 GridSection from "../../../components/composite/grid/grid-section.js";
-import GridItem from "../../../components/composite/grid/grid-item.js";
+import { GridSection } from "../../../components/composite/grid/grid-section.js";
+import { GridItem } from "../../../components/composite/grid/grid-item.js";
 import { SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS } from "./constants.js";
 import { ShortCircuitIccClusterTable } from "./short-circuit-icc-cluster-table.js";
 import { COLUMNS_DEFINITIONS_ICC_MATERIALS, COLUMNS_DEFINITIONS_ICC_CLUSTERS } from "./columns-definition.js";
@@ -65,13 +66,13 @@ function createRows() {
 }
 const ShortCircuitPowerElectronicsTabPanel = forwardRef(
   ({ ...othersTabPanelProps }, ref) => {
-    const modelPowerElectronics = /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 2, direction: "row", children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 10, children: /* @__PURE__ */ jsx(FieldLabel, { label: "ShortCircuitModelPowerElectronics" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 2, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS}` }) })
+    const modelPowerElectronics = /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", spacing: 2, direction: "row", children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 10, children: /* @__PURE__ */ jsx(FieldLabel, { label: "ShortCircuitModelPowerElectronics" }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: 2, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS}` }) })
     ] });
     return /* @__PURE__ */ jsxs(TabPanel, { index: ShortCircuitParametersTabValues.POWER_ELECTRONICS, ref, ...othersTabPanelProps, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitPowerElectronicsSection", heading: 4 }),
-      /* @__PURE__ */ jsx(Grid, { container: true, xl: 6, children: /* @__PURE__ */ jsx(GridItem, { size: 10, children: modelPowerElectronics }) }),
+      /* @__PURE__ */ jsx(Grid2, { container: true, size: { xl: 6 }, children: /* @__PURE__ */ jsx(GridItem, { size: 10, children: modelPowerElectronics }) }),
       /* @__PURE__ */ jsx(
         ShortCircuitIccMaterialTable,
         {

package/dist/features/parameters/short-circuit/short-circuit-study-area-tab-panel.js

@@ -1,26 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Grid, Box } from "@mui/material";
+import { Grid2, Box } from "@mui/material";
 import { useFormContext } from "react-hook-form";
+import "@mui/icons-material";
+import "react-intl";
+import { TabPanel } from "../common/parameters.js";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import { OverflowableChipWithHelperText } from "../../../components/ui/reactHookForm/OverflowableChipWithHelperText.js";
 import { ActivePowerAdornment } from "../../../utils/constants/adornments.js";
 import "../../../utils/conversionUtils.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import { EquipmentType } from "../../../utils/types/equipmentType.js";
-import "@mui/icons-material";
-import { SPECIFIC_PARAMETERS } from "../common/constants.js";
-import { TabPanel } from "../common/parameters.js";
-import "react-intl";
 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 { OverflowableChipWithHelperText } from "../../../components/ui/reactHookForm/OverflowableChipWithHelperText.js";
 import { FieldLabel } from "../../../components/ui/reactHookForm/utils/FieldLabel.js";
 import "yup";
 import { DirectoryItemsInput } from "../../../components/ui/reactHookForm/DirectoryItemsInput.js";
@@ -32,20 +27,26 @@ 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 "../../../components/ui/treeViewFinder/TreeViewFinder.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 { SPECIFIC_PARAMETERS } from "../common/constants.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 GridSection from "../../../components/composite/grid/grid-section.js";
-import GridItem from "../../../components/composite/grid/grid-item.js";
+import { GridSection } from "../../../components/composite/grid/grid-section.js";
+import { GridItem } from "../../../components/composite/grid/grid-item.js";
 import { NODE_CLUSTER_FILTER_IDS, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, onlyStartedGeneratorsOptions, STARTED_GENERATORS_IN_CALCULATION_CLUSTER_THRESHOLD, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER_THRESHOLD } from "./constants.js";
 import { ShortCircuitParametersTabValues } from "./short-circuit-parameters-utils.js";
 const equipmentTypes = [EquipmentType.VOLTAGE_LEVEL];
@@ -111,7 +112,7 @@ const ShortCircuitStudyAreaTabPanel = forwardRef(
     );
     return /* @__PURE__ */ jsxs(TabPanel, { index: ShortCircuitParametersTabValues.STUDY_AREA, ref, ...othersTabPanelProps, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitInClusterFilter", heading: 4 }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, sx: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { size: "grow", sx: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
         DirectoryItemsInput,
         {
           titleId: "FiltersListsSelection",

package/dist/features/parameters/short-circuit/use-short-circuit-parameters-form.js

@@ -37,6 +37,7 @@ import "react-papaparse";
 import { SHORT_CIRCUIT_PREDEFINED_PARAMS, PredefinedParameters, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, InitialVoltage, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, SHORT_CIRCUIT_VOLTAGE_RANGES, SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, NODE_CLUSTER_FILTER_IDS } from "./constants.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import { SPECIFIC_PARAMETERS, COMMON_PARAMETERS, VERSION_PARAMETER, PROVIDER } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";