@gridsuite/commons-ui 0.190.0 → 0.192.0

package/dist/components/dialogs/elementSaveDialog/ElementSaveDialog.js

@@ -33,6 +33,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 "../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/dnd-table/dnd-table-add-rows-dialog.js

@@ -27,6 +27,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/dnd-table/dnd-table.js

@@ -41,6 +41,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 "notistack";
 import "@react-querybuilder/material";
 import "../filter/expert/expertFilterConstants.js";

package/dist/components/filter/HeaderFilterForm.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 "./expert/expertFilterConstants.js";
 import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";

package/dist/components/filter/expert/ExpertFilterForm.js

@@ -40,6 +40,7 @@ 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/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 yup.setLocale({

package/dist/components/filter/explicitNaming/ExplicitNamingFilterForm.js

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

package/dist/components/inputs/reactHookForm/expandableInput/ExpandableInput.d.ts

@@ -4,6 +4,10 @@
  * 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 type ExpandableInputHandle = {
+    replaceItems: (newItems: any[]) => void;
+    appendItem: (newItem: any) => void;
+};
 export interface ExpandableInputProps {
     name: string;
     Field: React.ComponentType<any>;
@@ -17,8 +21,4 @@ export interface ExpandableInputProps {
     disabled?: boolean;
     disabledDeletion?: (idx: number) => boolean;
 }
-export declare function ExpandableInput({ name, Field, // Used to display each object of an array
-fieldProps, // Props to pass to Field
-addButtonLabel, initialValue, // Initial value to display when we add a new entry to array
-getDeletionMark, deleteCallback, alignItems, // default value for a flex container
-watchProps, disabled, disabledDeletion, }: Readonly<ExpandableInputProps>): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableInput: import('react').ForwardRefExoticComponent<Readonly<ExpandableInputProps> & import('react').RefAttributes<unknown>>;

package/dist/components/inputs/reactHookForm/expandableInput/ExpandableInput.js

@@ -3,6 +3,7 @@ import { useFieldArray } from "react-hook-form";
 import { Grid, Button } from "@mui/material";
 import { ControlPoint } from "@mui/icons-material";
 import { FormattedMessage } from "react-intl";
+import { forwardRef, useImperativeHandle } from "react";
 import { DeletableRow } from "./DeletableRow.js";
 import { ErrorInput } from "../errorManagement/ErrorInput.js";
 import { MidFormError } from "../errorManagement/MidFormError.js";
@@ -20,61 +21,72 @@ const styles = {
     paddingLeft: theme.spacing(2)
   })
 };
-function ExpandableInput({
-  name,
-  Field,
-  // Used to display each object of an array
-  fieldProps,
-  // Props to pass to Field
-  addButtonLabel,
-  initialValue,
-  // Initial value to display when we add a new entry to array
-  getDeletionMark,
-  deleteCallback,
-  alignItems = "stretch",
-  // default value for a flex container
-  watchProps = true,
-  disabled = false,
-  disabledDeletion
-}) {
-  const {
-    fields: values,
-    append,
-    remove
-  } = useFieldArray({
-    name
-  });
-  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
-    watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
-      DeletableRow,
-      {
-        alignItems,
-        onClick: () => {
-          const shouldRemove = deleteCallback ? deleteCallback(idx) : true;
-          if (shouldRemove) {
-            remove(idx);
-          }
+const ExpandableInput = forwardRef(
+  ({
+    name,
+    Field,
+    // Used to display each object of an array
+    fieldProps,
+    // Props to pass to Field
+    addButtonLabel,
+    initialValue,
+    // Initial value to display when we add a new entry to array
+    getDeletionMark,
+    deleteCallback,
+    alignItems = "stretch",
+    // default value for a flex container
+    watchProps = true,
+    disabled = false,
+    disabledDeletion
+  }, ref) => {
+    const {
+      fields: values,
+      append,
+      remove,
+      replace
+    } = useFieldArray({
+      name
+    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        replaceItems: (newItems) => replace(newItems),
+        appendItem: (newItem) => append(newItem)
+      }),
+      [append, replace]
+    );
+    return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
+      watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
+        DeletableRow,
+        {
+          alignItems,
+          onClick: () => {
+            const shouldRemove = deleteCallback ? deleteCallback(idx) : true;
+            if (shouldRemove) {
+              remove(idx);
+            }
+          },
+          deletionMark: getDeletionMark?.(idx),
+          disabledDeletion: disabledDeletion?.(idx),
+          children: /* @__PURE__ */ jsx(Field, { name, index: idx, ...fieldProps })
         },
-        deletionMark: getDeletionMark?.(idx),
-        disabledDeletion: disabledDeletion?.(idx),
-        children: /* @__PURE__ */ jsx(Field, { name, index: idx, ...fieldProps })
-      },
-      value.id
-    )),
-    /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        disabled,
-        fullWidth: true,
-        sx: mergeSx(styles.button, styles.paddingButton),
-        startIcon: /* @__PURE__ */ jsx(ControlPoint, {}),
-        onClick: () => append(initialValue),
-        children: addButtonLabel && /* @__PURE__ */ jsx(FormattedMessage, { id: addButtonLabel })
-      }
-    ) })
-  ] });
-}
+        value.id
+      )),
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled,
+          fullWidth: true,
+          sx: mergeSx(styles.button, styles.paddingButton),
+          startIcon: /* @__PURE__ */ jsx(ControlPoint, {}),
+          onClick: () => append(initialValue),
+          children: addButtonLabel && /* @__PURE__ */ jsx(FormattedMessage, { id: addButtonLabel })
+        }
+      ) })
+    ] });
+  }
+);
 export {
   ExpandableInput
 };

package/dist/components/network-modifications/by-filter/assignment/assignment/assignment-form.js

@@ -39,6 +39,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/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";
@@ -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";
@@ -47,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/connectivity/ConnectivityForm.js

@@ -36,6 +36,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 { CheckboxNullableInput } from "../../../inputs/reactHookForm/CheckboxNullableInput.js";
 import "@react-querybuilder/material";
 import "../../../filter/expert/expertFilterConstants.js";

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";
@@ -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";
@@ -46,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 {};