@gridsuite/commons-ui 0.191.0 → 0.192.0

package/dist/components/network-modifications/by-filter/deletion/ByFilterDeletionForm.d.ts

@@ -1,7 +1 @@
-/**
- * Copyright (c) 2026, 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/.
- */
 export declare function ByFilterDeletionForm(): import("react/jsx-runtime").JSX.Element;

package/dist/components/network-modifications/by-filter/deletion/ByFilterDeletionForm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 import "react-intl";
 import "../../../overflowableText/OverflowableText.js";
@@ -48,24 +48,20 @@ function ByFilterDeletionForm() {
   const handleEquipmentTypeChange = useCallback(() => {
     setValue(FieldConstants.FILTERS, []);
   }, [setValue]);
-  const typesOptions = useMemo(() => {
-    return Object.values(EQUIPMENT_TYPE_ORDER);
-  }, []);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, padding: 0.5, alignItems: "center", children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, pt: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         isOptionEqualToValue: richTypeEquals,
         name: FieldConstants.TYPE,
         label: "Type",
-        options: typesOptions,
+        options: EQUIPMENT_TYPE_ORDER,
         onChangeCallback: handleEquipmentTypeChange,
         getOptionLabel,
-        size: "small",
-        formProps: { variant: "filled" }
+        size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
       DirectoryItemsInput,
       {
         name: FieldConstants.FILTERS,

package/dist/components/network-modifications/common/connectivity/BranchConnectivityForm.js

@@ -1,7 +1,5 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import GridSection from "../../../grid/grid-section.js";
-import GridItem from "../../../grid/grid-item.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -17,45 +15,43 @@ function BranchConnectivityForm({
 }) {
   const id1 = `${FieldConstants.CONNECTIVITY}.${FieldConstants.CONNECTIVITY_1}`;
   const id2 = `${FieldConstants.CONNECTIVITY}.${FieldConstants.CONNECTIVITY_2}`;
-  const connectivity1Field = /* @__PURE__ */ jsx(
-    ConnectivityForm,
-    {
-      id: id1,
-      withPosition: true,
-      isEquipmentModification: isModification,
-      previousValues: {
-        connectablePosition: previousValues?.connectablePosition1,
-        voltageLevelId: previousValues?.voltageLevelId1,
-        busOrBusbarSectionId: previousValues?.busOrBusbarSectionId1,
-        terminalConnected: previousValues?.terminal1Connected
-      },
-      voltageLevelOptions,
-      fetchBusesOrBusbarSections,
-      PositionDiagramPane
-    }
-  );
-  const connectivity2Field = /* @__PURE__ */ jsx(
-    ConnectivityForm,
-    {
-      id: id2,
-      withPosition: true,
-      isEquipmentModification: isModification,
-      previousValues: {
-        connectablePosition: previousValues?.connectablePosition2,
-        voltageLevelId: previousValues?.voltageLevelId2,
-        busOrBusbarSectionId: previousValues?.busOrBusbarSectionId2,
-        terminalConnected: previousValues?.terminal2Connected
-      },
-      voltageLevelOptions,
-      fetchBusesOrBusbarSections,
-      PositionDiagramPane
-    }
-  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "Side1", heading: 4 }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivity1Field }) }),
+    /* @__PURE__ */ jsx(
+      ConnectivityForm,
+      {
+        id: id1,
+        withPosition: true,
+        isEquipmentModification: isModification,
+        previousValues: {
+          connectablePosition: previousValues?.connectablePosition1,
+          voltageLevelId: previousValues?.voltageLevelId1,
+          busOrBusbarSectionId: previousValues?.busOrBusbarSectionId1,
+          terminalConnected: previousValues?.terminal1Connected
+        },
+        voltageLevelOptions,
+        fetchBusesOrBusbarSections,
+        PositionDiagramPane
+      }
+    ),
     /* @__PURE__ */ jsx(GridSection, { title: "Side2", heading: 4 }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivity2Field }) })
+    /* @__PURE__ */ jsx(
+      ConnectivityForm,
+      {
+        id: id2,
+        withPosition: true,
+        isEquipmentModification: isModification,
+        previousValues: {
+          connectablePosition: previousValues?.connectablePosition2,
+          voltageLevelId: previousValues?.voltageLevelId2,
+          busOrBusbarSectionId: previousValues?.busOrBusbarSectionId2,
+          terminalConnected: previousValues?.terminal2Connected
+        },
+        voltageLevelOptions,
+        fetchBusesOrBusbarSections,
+        PositionDiagramPane
+      }
+    )
   ] });
 }
 export {

package/dist/components/network-modifications/common/measurements/BranchActiveReactivePowerMeasurementsForm.js

@@ -1,17 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { PowerMeasurementsForm } from "./PowerMeasurementsForm.js";
 import GridSection from "../../../grid/grid-section.js";
-const styles = {
-  h3: {
-    marginTop: 0,
-    marginBottom: 0
-  }
-};
 function BranchActiveReactivePowerMeasurementsForm({
   equipmentToModify
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(GridSection, { title: "MeasurementsSection", customStyle: styles.h3 }),
+    /* @__PURE__ */ jsx(GridSection, { title: "MeasurementsSection" }),
     /* @__PURE__ */ jsx(GridSection, { title: "Side1", heading: 4 }),
     /* @__PURE__ */ jsx(
       PowerMeasurementsForm,

package/dist/components/network-modifications/common/measurements/PowerMeasurementsForm.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { PowerWithValidityForm } from "./PowerWithValidityForm.js";
-import GridItem from "../../../grid/grid-item.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -28,8 +27,8 @@ function PowerMeasurementsForm({
   };
   const activePowerId = `${FieldConstants.STATE_ESTIMATION}.${getActiveMeasurementType(side)}`;
   const reactivePowerId = `${FieldConstants.STATE_ESTIMATION}.${getReactiveMeasurementType(side)}`;
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    !reactivePowerOnly && /* @__PURE__ */ jsx(GridItem, { size: 12, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
+    !reactivePowerOnly && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
       PowerWithValidityForm,
       {
         id: activePowerId,
@@ -37,7 +36,7 @@ function PowerMeasurementsForm({
         measurement: activePowerMeasurement
       }
     ) }),
-    /* @__PURE__ */ jsx(GridItem, { size: 12, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
       PowerWithValidityForm,
       {
         id: reactivePowerId,

package/dist/components/network-modifications/common/measurements/PowerWithValidityForm.js

@@ -1,8 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import { Grid } from "@mui/material";
-import GridItem from "../../../grid/grid-item.js";
 import { CheckboxNullableInput } from "../../../inputs/reactHookForm/CheckboxNullableInput.js";
 import "../../../overflowableText/OverflowableText.js";
 import { ActivePowerAdornment, ReactivePowerAdornment } from "../../../../utils/constants/adornments.js";
@@ -47,27 +46,25 @@ function PowerWithValidityForm({ id, field, measurement }) {
     }
     return measurement.validity ? intl.formatMessage({ id: "ValidMeasurement" }) : intl.formatMessage({ id: "InvalidMeasurement" });
   }, [intl, measurement?.validity]);
-  const valueField = /* @__PURE__ */ jsx(
-    FloatInput,
-    {
-      name: `${id}.${FieldConstants.VALUE}`,
-      label: field === FieldType.ACTIVE_POWER ? "ActivePowerText" : "ReactivePowerText",
-      adornment: field === FieldType.ACTIVE_POWER ? ActivePowerAdornment : ReactivePowerAdornment,
-      previousValue: convertInputValue(field, measurement?.value),
-      clearable: true
-    }
-  );
-  const validityField = /* @__PURE__ */ jsx(
-    CheckboxNullableInput,
-    {
-      name: `${id}.${FieldConstants.VALIDITY}`,
-      label: "ValidMeasurement",
-      previousValue: previousValidityField
-    }
-  );
   return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(GridItem, { size: 6, children: valueField }),
-    /* @__PURE__ */ jsx(GridItem, { size: 6, children: validityField })
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      FloatInput,
+      {
+        name: `${id}.${FieldConstants.VALUE}`,
+        label: field === FieldType.ACTIVE_POWER ? "ActivePowerText" : "ReactivePowerText",
+        adornment: field === FieldType.ACTIVE_POWER ? ActivePowerAdornment : ReactivePowerAdornment,
+        previousValue: convertInputValue(field, measurement?.value),
+        clearable: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      CheckboxNullableInput,
+      {
+        name: `${id}.${FieldConstants.VALIDITY}`,
+        label: "ValidMeasurement",
+        previousValue: previousValidityField
+      }
+    ) })
   ] });
 }
 export {

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

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 import { fetchPredefinedProperties, initializedProperty } from "./propertyUtils.js";
@@ -11,6 +10,7 @@ import "../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
 import "react-intl";
+import "@mui/material";
 import "../../../overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -93,20 +93,19 @@ function PropertiesForm({ id, networkElementType, isModification = false }) {
     deleteCallback,
     watchProps
   } : {};
-  const additionalProps = /* @__PURE__ */ jsx(
-    ExpandableInput,
-    {
-      name: additionalProperties,
-      Field: PropertyForm,
-      fieldProps: { predefinedProperties },
-      addButtonLabel: "AddProperty",
-      initialValue: initializedProperty(),
-      ...modificationProperties
-    }
-  );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "AdditionalInformation" }),
-    additionalProps
+    /* @__PURE__ */ jsx(
+      ExpandableInput,
+      {
+        name: additionalProperties,
+        Field: PropertyForm,
+        fieldProps: { predefinedProperties },
+        addButtonLabel: "AddProperty",
+        initialValue: initializedProperty(),
+        ...modificationProperties
+      }
+    )
   ] });
 }
 export {

package/dist/components/network-modifications/common/properties/PropertyForm.d.ts

@@ -4,5 +4,5 @@ type PropertyFormProps = {
     index: string;
     predefinedProperties: PredefinedProperties;
 };
-export declare const PropertyForm: ({ name, index, predefinedProperties }: PropertyFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare function PropertyForm({ name, index, predefinedProperties }: PropertyFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

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";
@@ -38,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}`
@@ -57,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";
@@ -39,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";
@@ -131,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";

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;