@gridsuite/commons-ui 0.190.0 → 0.192.0

package/dist/components/network-modifications/common/properties/PropertyForm.js

@@ -1,14 +1,13 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
+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 GridItem from "../../../grid/grid-item.js";
 import "react-intl";
-import "@mui/material";
 import "../../../overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -30,6 +29,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
 import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
@@ -37,7 +37,7 @@ import "uuid";
 import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
 import { italicFontTextField } from "../form.utils.js";
-const PropertyForm = ({ name, index, predefinedProperties }) => {
+function PropertyForm({ name, index, predefinedProperties }) {
   const watchPropertyName = useWatch({ name: `${name}.${index}.${FieldConstants.NAME}` });
   const watchPropertyPreviousValue = useWatch({
     name: `${name}.${index}.${FieldConstants.PREVIOUS_VALUE}`
@@ -56,52 +56,45 @@ const PropertyForm = ({ name, index, predefinedProperties }) => {
     const values = predefinedProperties?.[watchPropertyName] ?? [];
     return values.sort((a, b) => a.localeCompare(b));
   }, [watchPropertyName, predefinedProperties]);
-  const nameField = /* @__PURE__ */ jsx(
-    AutocompleteInput,
-    {
-      name: `${name}.${index}.${FieldConstants.NAME}`,
-      options: predefinedNames,
-      label: "PropertyName",
-      size: "small",
-      allowNewValue: true
-    }
-  );
-  const nameReadOnlyField = /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      name: `${name}.${index}.${FieldConstants.NAME}`,
-      label: "PropertyName",
-      formProps: { disabled: true, ...italicFontTextField }
-    }
-  );
-  const valueField = /* @__PURE__ */ jsx(
-    AutocompleteInput,
-    {
-      name: `${name}.${index}.${FieldConstants.VALUE}`,
-      options: predefinedValues,
-      label: "PropertyValue",
-      size: "small",
-      allowNewValue: true,
-      previousValue: watchPropertyPreviousValue
-    }
-  );
-  const valueReadOnlyField = /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      name: `${name}.${index}.${FieldConstants.VALUE}`,
-      label: "PropertyValue",
-      previousValue: watchPropertyPreviousValue,
-      formProps: { disabled: true, ...italicFontTextField }
-    }
-  );
-  function renderPropertyLine() {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      watchPropertyDeletionMark || watchPropertyAdded === false && watchPropertyPreviousValue ? /* @__PURE__ */ jsx(GridItem, { size: 5, children: nameReadOnlyField }) : /* @__PURE__ */ jsx(GridItem, { size: 5, children: nameField }),
-      watchPropertyDeletionMark ? /* @__PURE__ */ jsx(GridItem, { size: 5, children: valueReadOnlyField }) : /* @__PURE__ */ jsx(GridItem, { size: 5, children: valueField })
-    ] });
-  }
-  return renderPropertyLine();
-};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    watchPropertyDeletionMark || watchPropertyAdded === false && watchPropertyPreviousValue ? /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        name: `${name}.${index}.${FieldConstants.NAME}`,
+        label: "PropertyName",
+        formProps: { disabled: true, ...italicFontTextField }
+      }
+    ) }) : /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        name: `${name}.${index}.${FieldConstants.NAME}`,
+        options: predefinedNames,
+        label: "PropertyName",
+        size: "small",
+        allowNewValue: true
+      }
+    ) }),
+    watchPropertyDeletionMark ? /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        label: "PropertyValue",
+        previousValue: watchPropertyPreviousValue,
+        formProps: { disabled: true, ...italicFontTextField }
+      }
+    ) }) : /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        options: predefinedValues,
+        label: "PropertyValue",
+        size: "small",
+        allowNewValue: true,
+        previousValue: watchPropertyPreviousValue
+      }
+    ) })
+  ] });
+}
 export {
   PropertyForm
 };

package/dist/components/network-modifications/common/setpoints/SetPointsForm.js

@@ -1,7 +1,6 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import GridSection from "../../../grid/grid-section.js";
-import GridItem from "../../../grid/grid-item.js";
 import { ActivePowerAdornment, ReactivePowerAdornment } from "../../../../utils/constants/adornments.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
@@ -31,6 +30,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
 import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
@@ -38,31 +38,29 @@ import "uuid";
 import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
 function SetPointsForm({ previousValues, isModification = false }) {
-  const activePowerSetPointField = /* @__PURE__ */ jsx(
-    FloatInput,
-    {
-      name: FieldConstants.ACTIVE_POWER_SET_POINT,
-      label: "ActivePowerText",
-      adornment: ActivePowerAdornment,
-      previousValue: previousValues?.activePower ?? void 0,
-      clearable: isModification
-    }
-  );
-  const reactivePowerSetPointField = /* @__PURE__ */ jsx(
-    FloatInput,
-    {
-      name: FieldConstants.REACTIVE_POWER_SET_POINT,
-      label: "ReactivePowerText",
-      adornment: ReactivePowerAdornment,
-      previousValue: previousValues?.reactivePower ?? void 0,
-      clearable: isModification
-    }
-  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "Setpoints" }),
     /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: activePowerSetPointField }),
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: reactivePowerSetPointField })
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+        FloatInput,
+        {
+          name: FieldConstants.ACTIVE_POWER_SET_POINT,
+          label: "ActivePowerText",
+          adornment: ActivePowerAdornment,
+          previousValue: previousValues?.activePower ?? void 0,
+          clearable: isModification
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+        FloatInput,
+        {
+          name: FieldConstants.REACTIVE_POWER_SET_POINT,
+          label: "ReactivePowerText",
+          adornment: ReactivePowerAdornment,
+          previousValue: previousValues?.reactivePower ?? void 0,
+          clearable: isModification
+        }
+      ) })
     ] })
   ] });
 }

package/dist/components/network-modifications/equipmentDeletion/EquipmentDeletionForm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { useRef, useState, useMemo, useEffect, useCallback } from "react";
 import { useWatch, useFormContext } from "react-hook-form";
@@ -12,7 +12,6 @@ import { richTypeEquals, getObjectId, areIdsEqual } from "../../../utils/ts-util
 import "../../../utils/yupConfig.js";
 import { filledTextField } from "../common/form.utils.js";
 import "../common/properties/propertyUtils.js";
-import GridItem from "../../grid/grid-item.js";
 import "react-intl";
 import "../../overflowableText/OverflowableText.js";
 import "localized-countries";
@@ -35,6 +34,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../filter/expert/expertFilterConstants.js";
 import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
@@ -130,42 +130,40 @@ function EquipmentDeletionForm({
   const handleTypeChange = useCallback(() => {
     setValue(FieldConstants.EQUIPMENT_ID, null);
   }, [setValue]);
-  const equipmentTypeField = /* @__PURE__ */ jsx(
-    AutocompleteInput,
-    {
-      isOptionEqualToValue: richTypeEquals,
-      name: FieldConstants.TYPE,
-      label: "Type",
-      options: typesOptions,
-      onChangeCallback: handleTypeChange,
-      getOptionLabel,
-      size: "small",
-      inputTransform: (value) => typesOptions.find((option) => option === value) || value,
-      formProps: filledTextField
-    }
-  );
-  const equipmentField = /* @__PURE__ */ jsx(
-    AutocompleteInput,
-    {
-      isOptionEqualToValue: areIdsEqual,
-      allowNewValue: true,
-      forcePopupIcon: true,
-      name: FieldConstants.EQUIPMENT_ID,
-      label: "ID",
-      options: equipmentsOptions,
-      getOptionLabel: getObjectId,
-      inputTransform: (value) => value ?? "",
-      outputTransform: (value) => value === "" ? null : getObjectId(value),
-      size: "small",
-      formProps: filledTextField
-    }
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { children: equipmentTypeField }),
-      /* @__PURE__ */ jsx(GridItem, { children: equipmentField })
-    ] }),
-    watchSpecificData?.specificType === FieldConstants.HVDC_LINE_LCC_DELETION_SPECIFIC_TYPE && /* @__PURE__ */ jsx(HvdcLccDeletionSpecificForm, {})
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", 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(
+        AutocompleteInput,
+        {
+          isOptionEqualToValue: richTypeEquals,
+          name: FieldConstants.TYPE,
+          label: "Type",
+          options: typesOptions,
+          onChangeCallback: handleTypeChange,
+          getOptionLabel,
+          size: "small",
+          inputTransform: (value) => typesOptions.find((option) => option === value) || value,
+          formProps: filledTextField
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+        AutocompleteInput,
+        {
+          isOptionEqualToValue: areIdsEqual,
+          allowNewValue: true,
+          forcePopupIcon: true,
+          name: FieldConstants.EQUIPMENT_ID,
+          label: "ID",
+          options: equipmentsOptions,
+          getOptionLabel: getObjectId,
+          inputTransform: (value) => value ?? "",
+          outputTransform: (value) => value === "" ? null : getObjectId(value),
+          size: "small",
+          formProps: filledTextField
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, children: watchSpecificData?.specificType === FieldConstants.HVDC_LINE_LCC_DELETION_SPECIFIC_TYPE && /* @__PURE__ */ jsx(HvdcLccDeletionSpecificForm, {}) })
   ] });
 }
 export {

package/dist/components/network-modifications/equipmentDeletion/equipmentDeletion.utils.js

@@ -2,7 +2,6 @@ import { object, mixed, string } from "yup";
 import { EquipmentType } from "../../../utils/types/equipmentType.js";
 import { getHvdcLccDeletionSchema } from "./hvdcLccDeletion/hvdcLccDeletion.utils.js";
 import "react/jsx-runtime";
-import "react-intl";
 import "@mui/material";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import { YUP_REQUIRED } from "../../../utils/constants/translationKeys.js";
@@ -10,6 +9,7 @@ import "../../../utils/conversionUtils.js";
 import { ModificationType } from "../../../utils/types/modificationType.js";
 import "@mui/icons-material";
 import "../../../utils/yupConfig.js";
+import "react-intl";
 import "../../overflowableText/OverflowableText.js";
 import "react";
 import "react-hook-form";
@@ -30,6 +30,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../filter/expert/expertFilterConstants.js";
 import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { useFieldArray } from "react-hook-form";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -7,7 +7,6 @@ import "../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
 import GridSection from "../../../grid/grid-section.js";
-import GridItem from "../../../grid/grid-item.js";
 import { ShuntCompensatorSelectionForm } from "./ShuntCompensatorSelectionForm.js";
 function HvdcLccDeletionSpecificForm() {
   const { fields: mcsRows1 } = useFieldArray({
@@ -16,10 +15,10 @@ function HvdcLccDeletionSpecificForm() {
   const { fields: mcsRows2 } = useFieldArray({
     name: `${FieldConstants.DELETION_SPECIFIC_DATA}.${FieldConstants.SHUNT_COMPENSATOR_SIDE_2}`
   });
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, direction: "column", paddingTop: 2, paddingLeft: 1, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "LCCConverterStationShuntCompensators" }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
-      /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
         ShuntCompensatorSelectionForm,
         {
           title: "Side1",
@@ -27,7 +26,7 @@ function HvdcLccDeletionSpecificForm() {
           mcsRows: mcsRows1
         }
       ) }),
-      /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
         ShuntCompensatorSelectionForm,
         {
           title: "Side2",

package/dist/components/network-modifications/equipmentDeletion/hvdcLccDeletion/ShuntCompensatorSelectionForm.d.ts

@@ -1,9 +1,3 @@
-/**
- * Copyright (c) 2023, RTE (http://www.rte-france.com)
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
 interface ShuntCompensatorSelectionFormProps {
     title: string;
     arrayFormName: string;

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";
@@ -29,19 +29,21 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
 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,
@@ -49,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/index.js

@@ -53,6 +53,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../filter/expert/expertFilterConstants.js";
 import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

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";
@@ -32,6 +31,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
 import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
@@ -79,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/creation/loadCreation.utils.js

@@ -31,6 +31,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
 import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

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";
@@ -30,6 +30,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
 import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

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";
@@ -29,6 +28,7 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
 import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import { CountrySelectionInput } from "../../../inputs/reactHookForm/CountrySelectionInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";
@@ -40,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 {