@gridsuite/commons-ui 0.191.0 → 0.192.0

package/dist/components/network-modifications/equipmentDeletion/hvdcLccDeletion/ShuntCompensatorSelectionForm.js

@@ -1,11 +1,11 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { FormattedMessage } from "react-intl";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
+import "react-intl";
 import "../../../overflowableText/OverflowableText.js";
 import "react";
 import "react-hook-form";
@@ -36,13 +36,14 @@ import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "uuid";
 import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
+import GridSection from "../../../grid/grid-section.js";
 function ShuntCompensatorSelectionForm({
   title,
   arrayFormName,
   mcsRows
 }) {
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, direction: "column", children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }),
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GridSection, { title, heading: 4 }),
     mcsRows.map((field, index) => /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "center", children: [
       /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(
         CheckboxInput,
@@ -50,7 +51,7 @@ function ShuntCompensatorSelectionForm({
           name: `${arrayFormName}[${index}].${FieldConstants.SHUNT_COMPENSATOR_SELECTED}`
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 11, children: /* @__PURE__ */ jsx(ReadOnlyInput, { name: `${arrayFormName}[${index}].${FieldConstants.ID}` }) })
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(ReadOnlyInput, { name: `${arrayFormName}[${index}].${FieldConstants.ID}` }) })
     ] }, field.id))
   ] });
 }

package/dist/components/network-modifications/load/common/LoadDialogHeader.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { TextField, Box, Grid } from "@mui/material";
+import { TextField, Grid } from "@mui/material";
 import { useIntl } from "react-intl";
 import { useWatch } from "react-hook-form";
 import { filledTextField } from "../../common/form.utils.js";
@@ -10,7 +10,6 @@ import "../../../../utils/conversionUtils.js";
 import { getLoadTypeLabel, LOAD_TYPES } from "../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
-import GridItem from "../../../grid/grid-item.js";
 import "../../../overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -80,21 +79,11 @@ function LoadDialogHeader({ loadToModify, isModification = false }) {
       }) : void 0
     }
   );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        flexWrap: "wrap",
-        gap: "15px"
-      },
-      children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-        /* @__PURE__ */ jsx(GridItem, { size: 4, children: loadIdField }),
-        /* @__PURE__ */ jsx(GridItem, { size: 4, children: loadNameField }),
-        /* @__PURE__ */ jsx(GridItem, { size: 4, children: loadTypeField })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: loadIdField }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: loadNameField }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: loadTypeField })
+  ] });
 }
 export {
   LoadDialogHeader

package/dist/components/network-modifications/load/common/LoadDialogTabs.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid, Tabs, Tab } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Tabs, Tab } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { LoadDialogTab } from "./load.utils.js";
 import { getTabIndicatorStyle, getTabStyle } from "../../../parameters/parameters-style.js";
@@ -9,7 +9,7 @@ function LoadDialogTabs({
   setTabIndex,
   isModification = false
 }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     Tabs,
     {
       value: tabIndex,
@@ -42,7 +42,7 @@ function LoadDialogTabs({
         )
       ]
     }
-  ) });
+  );
 }
 export {
   LoadDialogTabs

package/dist/components/network-modifications/load/common/LoadDialogTabsContent.js

@@ -15,23 +15,26 @@ function LoadDialogTabsContent({
   fetchBusesOrBusbarSections
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== LoadDialogTab.CONNECTIVITY_TAB, p: 1, children: /* @__PURE__ */ jsx(
-      ConnectivityForm,
-      {
-        withPosition: true,
-        isEquipmentModification: isModification,
-        previousValues: {
-          connectablePosition: loadToModify?.connectablePosition,
-          voltageLevelId: loadToModify?.voltageLevelId,
-          busOrBusbarSectionId: loadToModify?.busOrBusbarSectionId,
-          terminalConnected: loadToModify?.terminalConnected
-        },
-        voltageLevelOptions,
-        PositionDiagramPane,
-        fetchBusesOrBusbarSections
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== LoadDialogTab.CHARACTERISTICS_TAB, p: 1, sx: { marginTop: -4 }, children: [
+    /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== LoadDialogTab.CONNECTIVITY_TAB, children: [
+      /* @__PURE__ */ jsx(GridSection, { title: "ConnectivityTab" }),
+      /* @__PURE__ */ jsx(
+        ConnectivityForm,
+        {
+          withPosition: true,
+          isEquipmentModification: isModification,
+          previousValues: {
+            connectablePosition: loadToModify?.connectablePosition,
+            voltageLevelId: loadToModify?.voltageLevelId,
+            busOrBusbarSectionId: loadToModify?.busOrBusbarSectionId,
+            terminalConnected: loadToModify?.terminalConnected
+          },
+          voltageLevelOptions,
+          PositionDiagramPane,
+          fetchBusesOrBusbarSections
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== LoadDialogTab.CHARACTERISTICS_TAB, children: [
       /* @__PURE__ */ jsx(
         SetPointsForm,
         {
@@ -44,7 +47,7 @@ function LoadDialogTabsContent({
       ),
       /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "load", isModification })
     ] }),
-    isModification && /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== LoadDialogTab.STATE_ESTIMATION_TAB, p: 1, sx: { marginTop: -4 }, children: [
+    isModification && /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== LoadDialogTab.STATE_ESTIMATION_TAB, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "MeasurementsSection" }),
       /* @__PURE__ */ jsx(
         PowerMeasurementsForm,

package/dist/components/network-modifications/load/modification/loadModification.utils.js

@@ -7,10 +7,10 @@ import "react/jsx-runtime";
 import "@mui/icons-material";
 import { sanitizeString } from "../../../../utils/ts-utils.js";
 import "../../../../utils/yupConfig.js";
-import "@mui/material";
 import "react";
 import "react-hook-form";
 import { modificationPropertiesSchema, getPropertiesFromModification, toModificationProperties } from "../../common/properties/propertyUtils.js";
+import "@mui/material";
 import "react-intl";
 import "../../../overflowableText/OverflowableText.js";
 import "localized-countries";

package/dist/components/network-modifications/substation/creation/SubstationCreationForm.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
-import GridItem from "../../../grid/grid-item.js";
 import "react-intl";
 import "../../../overflowableText/OverflowableText.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -41,16 +40,21 @@ import { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import { filledTextField } from "../../common/form.utils.js";
 import "../../common/properties/propertyUtils.js";
 function SubstationCreationForm() {
-  const substationIdField = /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_ID, label: "ID", formProps: filledTextField });
-  const substationNameField = /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_NAME, label: "Name", formProps: filledTextField });
-  const substationCountryField = /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", formProps: filledTextField, size: "small" });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: substationIdField }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: substationNameField }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: substationCountryField })
-    ] }),
-    /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "substation" })
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_ID, label: "ID", formProps: filledTextField }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_NAME, label: "Name", formProps: filledTextField }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+        CountrySelectionInput,
+        {
+          name: FieldConstants.COUNTRY,
+          label: "Country",
+          formProps: filledTextField,
+          size: "small"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "substation" }) })
   ] });
 }
 export {

package/dist/components/network-modifications/substation/modification/SubstationModificationForm.js

@@ -1,8 +1,7 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { TextField, Grid } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid, TextField } from "@mui/material";
 import { useIntl } from "react-intl";
 import { useWatch } from "react-hook-form";
-import GridItem from "../../../grid/grid-item.js";
 import "../../../overflowableText/OverflowableText.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
@@ -42,47 +41,44 @@ function SubstationModificationForm({ substationToModify }) {
   const { locale } = useIntl();
   const { translate } = useLocalizedCountries(locale);
   const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
-  const substationIdField = /* @__PURE__ */ jsx(
-    TextField,
-    {
-      size: "small",
-      fullWidth: true,
-      label: "ID",
-      value: equipmentId ?? "",
-      InputProps: {
-        readOnly: true
-      },
-      disabled: true,
-      ...filledTextField
-    }
-  );
-  const substationNameField = /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      name: FieldConstants.EQUIPMENT_NAME,
-      label: "Name",
-      formProps: filledTextField,
-      previousValue: substationToModify?.name,
-      clearable: true
-    }
-  );
-  const substationCountryField = /* @__PURE__ */ jsx(
-    CountrySelectionInput,
-    {
-      name: FieldConstants.COUNTRY,
-      label: "Country",
-      formProps: filledTextField,
-      size: "small",
-      previousValue: substationToModify?.country ? translate(substationToModify.country) : ""
-    }
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: substationIdField }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: substationNameField }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: substationCountryField })
-    ] }),
-    /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "substation", isModification: true })
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          fullWidth: true,
+          label: "ID",
+          value: equipmentId ?? "",
+          InputProps: {
+            readOnly: true
+          },
+          disabled: true,
+          ...filledTextField
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          name: FieldConstants.EQUIPMENT_NAME,
+          label: "Name",
+          formProps: filledTextField,
+          previousValue: substationToModify?.name,
+          clearable: true
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+        CountrySelectionInput,
+        {
+          name: FieldConstants.COUNTRY,
+          label: "Country",
+          formProps: filledTextField,
+          size: "small",
+          previousValue: substationToModify?.country ? translate(substationToModify.country) : ""
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "substation", isModification: true }) })
   ] });
 }
 export {

package/dist/components/network-modifications/voltageLevel/creation/VoltageLevelCreationForm.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid, Tabs, Tab, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useWatch } from "react-hook-form";
@@ -36,11 +36,11 @@ import "uuid";
 import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
 import { VoltageLevelTab, VOLTAGE_LEVEL_TAB_FIELDS } from "./voltageLevel.constants.js";
-import GridItem from "../../../grid/grid-item.js";
 import "./tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesDialog.js";
 import { StructureTab } from "./tabs/structureTab/StructureTab.js";
 import { SubstationTab } from "./tabs/substationTab/SubstationTab.js";
 import { CharacteristicsTab } from "./tabs/characteristicsTab/CharacteristicsTab.js";
+import { filledTextField } from "../../common/form.utils.js";
 import { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import "../../common/properties/propertyUtils.js";
 import { getTabIndicatorStyle, getTabStyle } from "../../../parameters/parameters-style.js";
@@ -54,19 +54,19 @@ function VoltageLevelCreationForm({
     VoltageLevelTab.SUBSTATION_TAB
   );
   const watchHideBusBarSection = useWatch({ name: FieldConstants.HIDE_BUS_BAR_SECTION });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
         TextInput,
         {
           name: FieldConstants.EQUIPMENT_ID,
           label: "ID",
-          formProps: { autoFocus: true, margin: "normal" }
+          formProps: { autoFocus: true, ...filledTextField }
         }
       ) }),
-      /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_NAME, label: "Name", formProps: { margin: "normal" } }) })
-    ] }),
-    /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_NAME, label: "Name", formProps: filledTextField }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(
       Tabs,
       {
         value: tabIndex,
@@ -107,11 +107,19 @@ function VoltageLevelCreationForm({
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.SUBSTATION_TAB, children: /* @__PURE__ */ jsx(SubstationTab, { substationOptions, showDeleteButton: showDeleteSubstationButton }) }),
-    /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.CHARACTERISTICS_TAB, children: /* @__PURE__ */ jsx(CharacteristicsTab, {}) }),
-    /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.STRUCTURE_TAB, children: /* @__PURE__ */ jsx(StructureTab, {}) }),
-    /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.ADDITIONAL_INFORMATION_TAB, children: /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "voltageLevel" }) })
+    ) }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, children: [
+      /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.SUBSTATION_TAB, children: /* @__PURE__ */ jsx(
+        SubstationTab,
+        {
+          substationOptions,
+          showDeleteButton: showDeleteSubstationButton
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.CHARACTERISTICS_TAB, children: /* @__PURE__ */ jsx(CharacteristicsTab, {}) }),
+      /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.STRUCTURE_TAB, children: /* @__PURE__ */ jsx(StructureTab, {}) }),
+      /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.ADDITIONAL_INFORMATION_TAB, children: /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "voltageLevel" }) })
+    ] })
   ] });
 }
 export {

package/dist/components/network-modifications/voltageLevel/creation/tabs/characteristicsTab/CharacteristicsTab.js

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useWatch } from "react-hook-form";
 import { Grid } from "@mui/material";
 import GridSection from "../../../../../grid/grid-section.js";
-import GridItem from "../../../../../grid/grid-item.js";
 import { VoltageAdornment, KiloAmpereAdornment } from "../../../../../../utils/constants/adornments.js";
 import { FieldConstants } from "../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../utils/conversionUtils.js";
@@ -43,7 +42,7 @@ function CharacteristicsTab() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "VoltageText" }),
     /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      !watchHideNominalVoltage && /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+      !watchHideNominalVoltage && /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.NOMINAL_V,
@@ -51,7 +50,7 @@ function CharacteristicsTab() {
           adornment: VoltageAdornment
         }
       ) }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.LOW_VOLTAGE_LIMIT,
@@ -59,7 +58,7 @@ function CharacteristicsTab() {
           adornment: VoltageAdornment
         }
       ) }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.HIGH_VOLTAGE_LIMIT,
@@ -70,7 +69,7 @@ function CharacteristicsTab() {
     ] }),
     /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuit" }),
     /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.LOW_SHORT_CIRCUIT_CURRENT_LIMIT,
@@ -78,7 +77,7 @@ function CharacteristicsTab() {
           adornment: KiloAmpereAdornment
         }
       ) }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.HIGH_SHORT_CIRCUIT_CURRENT_LIMIT,

package/dist/components/network-modifications/voltageLevel/creation/tabs/structureTab/StructureTab.js

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { useWatch } from "react-hook-form";
 import GridSection from "../../../../../grid/grid-section.js";
-import GridItem from "../../../../../grid/grid-item.js";
 import "react-intl";
 import "../../../../../overflowableText/OverflowableText.js";
 import { FieldConstants } from "../../../../../../utils/constants/fieldConstants.js";
@@ -46,13 +45,13 @@ function StructureTab() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "BusBarSections" }),
     /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.BUS_BAR_COUNT, label: "BusBarCount" }) }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.SECTION_COUNT, label: "numberOfSections" }) })
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.BUS_BAR_COUNT, label: "BusBarCount" }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.SECTION_COUNT, label: "numberOfSections" }) })
     ] }),
     /* @__PURE__ */ jsx(SwitchesBetweenSections, {}),
     displayOmnibus && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(GridSection, { title: "Coupling_Omnibus" }),
-      /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: /* @__PURE__ */ jsx(CouplingOmnibusForm, {}) }) })
+      /* @__PURE__ */ jsx(CouplingOmnibusForm, {})
     ] })
   ] });
 }

package/dist/components/network-modifications/voltageLevel/creation/tabs/structureTab/couplingOmnibus/CouplingOmnibusCreation.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
+import { Grid } from "@mui/material";
 import { AutocompleteInput } from "../../../../../../inputs/reactHookForm/autocompleteInputs/AutocompleteInput.js";
-import GridItem from "../../../../../../grid/grid-item.js";
 import { FieldConstants } from "../../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../../utils/conversionUtils.js";
 import "../../../../../../../utils/types/equipmentType.js";
@@ -25,7 +25,7 @@ function CouplingOmnibusCreation({ index, sectionOptions }) {
     return () => unsubscribe();
   }, [subscribe, trigger, getValues, index]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,
@@ -36,7 +36,7 @@ function CouplingOmnibusCreation({ index, sectionOptions }) {
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,

package/dist/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.js

@@ -9,7 +9,6 @@ import "../../../../../../../utils/conversionUtils.js";
 import "../../../../../../../utils/types/equipmentType.js";
 import "../../../../../../../utils/yupConfig.js";
 import { SwitchKind } from "../../../voltageLevelCreation.types.js";
-import GridItem from "../../../../../../grid/grid-item.js";
 import "../../../../../../overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -94,7 +93,7 @@ function SwitchesBetweenSections() {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "SwitchesBetweenSections" }),
-    /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       TextInput,
       {
         name: FieldConstants.SWITCHES_BETWEEN_SECTIONS,
@@ -104,7 +103,7 @@ function SwitchesBetweenSections() {
         },
         customAdornment: addIconAdornment(handleClickOpenSwitchesPane)
       }
-    ) }),
+    ),
     openCreateSwitchesDialog && /* @__PURE__ */ jsx(
       CreateSwitchesDialog,
       {

package/dist/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesForm.js

@@ -40,30 +40,19 @@ function CreateSwitchesForm({ id }) {
   const { fields: rows } = useFieldArray({ name: `${id}` });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "SwitchesBetweenSections" }) }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
-      Grid,
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, direction: "column", pt: 1, children: rows.map((value, index) => /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      EnumInput,
       {
-        container: true,
-        spacing: 2,
-        direction: "column",
-        style: {
-          paddingTop: "5px"
+        options: Object.values(SWITCH_TYPE),
+        name: `${id}.${index}.${FieldConstants.SWITCH_KIND}`,
+        label: "SwitchBetweenSectionsLabel",
+        labelValues: {
+          index1: String(index + 1),
+          index2: String(index + 2)
         },
-        children: rows.map((value, index) => /* @__PURE__ */ jsx(Grid, { container: true, item: true, children: /* @__PURE__ */ jsx(
-          EnumInput,
-          {
-            options: Object.values(SWITCH_TYPE),
-            name: `${id}.${index}.${FieldConstants.SWITCH_KIND}`,
-            label: "SwitchBetweenSectionsLabel",
-            labelValues: {
-              index1: String(index + 1),
-              index2: String(index + 2)
-            },
-            size: "small"
-          }
-        ) }, value.id))
+        size: "small"
       }
-    ) })
+    ) }, value.id)) }) })
   ] });
 }
 export {

package/dist/components/network-modifications/voltageLevel/creation/tabs/substationTab/SubstationCreationSection.js

@@ -47,9 +47,9 @@ function SubstationCreationSection({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "CreateSubstation" }),
     /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
       showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
     ] }),
     /* @__PURE__ */ jsx(PropertiesForm, { id: FieldConstants.SUBSTATION_CREATION, networkElementType: "substation" })

package/dist/components/network-modifications/voltageLevel/creation/tabs/substationTab/SubstationTab.js

@@ -59,8 +59,8 @@ function SubstationTab({ substationOptions, showDeleteButton }) {
       });
     }
   }, [setValue, getValues, watchAddSubstationCreation]);
-  return watchAddSubstationCreation ? /* @__PURE__ */ jsx(SubstationCreationSection, { showDeleteButton, onDelete: handleDeleteSubstationCreation }) : /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, my: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: substationOptions ? /* @__PURE__ */ jsx(
+  return watchAddSubstationCreation ? /* @__PURE__ */ jsx(SubstationCreationSection, { showDeleteButton, onDelete: handleDeleteSubstationCreation }) : /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, pt: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: substationOptions ? /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: FieldConstants.SUBSTATION_ID,