@gridsuite/commons-ui 0.269.0 → 0.270.0

package/dist/features/index.js

@@ -166,6 +166,8 @@ import { VoltageLevelModificationForm } from "./network-modifications/voltageLev
 import { voltageLevelModificationDtoToForm, voltageLevelModificationEmptyFormData, voltageLevelModificationFormSchema, voltageLevelModificationFormToDto, voltageLevelModificationWithMeasurementsDtoToForm, voltageLevelModificationWithMeasurementsFormSchema, voltageLevelModificationWithMeasurementsFormToDto } from "./network-modifications/voltageLevel/modification/voltageLevelModification.utils.js";
 import { createVoltageLevelTopologyDtoToForm, createVoltageLevelTopologyEmptyFormData, createVoltageLevelTopologyFormSchema, createVoltageLevelTopologyFormToDto } from "./network-modifications/voltageLevel/topology/voltageLevelTopologyCreation.utils.js";
 import { CreateVoltageLevelTopologyForm } from "./network-modifications/voltageLevel/topology/CreateVoltageLevelTopologyForm.js";
+import { VoltageLevelSectionCreationForm } from "./network-modifications/voltageLevel/section/VoltageLevelSectionCreationForm.js";
+import { POSITION_NEW_SECTION_SIDE, voltageLevelSectionCreationDtoToForm, voltageLevelSectionCreationEmptyFormData, voltageLevelSectionCreationFormSchema, voltageLevelSectionCreationFormToDto } from "./network-modifications/voltageLevel/section/voltageLevelSectionCreation.utils.js";
 import { LOAD_TAB_FIELDS, LoadDialogTab } from "./network-modifications/load/common/load.utils.js";
 import { LoadDialogTabs } from "./network-modifications/load/common/LoadDialogTabs.js";
 import { LoadDialogTabsContent } from "./network-modifications/load/common/LoadDialogTabsContent.js";
@@ -490,6 +492,7 @@ export {
   PARAM_STATE_ESTIMATION,
   PARAM_SUBSTATION_LAYOUT,
   PHASE_SHIFTER_REGULATION_ON,
+  POSITION_NEW_SECTION_SIDE,
   PRIORITY,
   PROVIDER,
   PSTS_EQUIPMENT_TYPES,
@@ -624,6 +627,7 @@ export {
   VoltageLevelConnectivityForm,
   VoltageLevelCreationForm,
   VoltageLevelModificationForm,
+  VoltageLevelSectionCreationForm,
   VoltageRegulationForm,
   WRITE_SLACK_BUS,
   addGlobalFilterId,
@@ -921,5 +925,9 @@ export {
   voltageLevelModificationFormToDto,
   voltageLevelModificationWithMeasurementsDtoToForm,
   voltageLevelModificationWithMeasurementsFormSchema,
-  voltageLevelModificationWithMeasurementsFormToDto
+  voltageLevelModificationWithMeasurementsFormToDto,
+  voltageLevelSectionCreationDtoToForm,
+  voltageLevelSectionCreationEmptyFormData,
+  voltageLevelSectionCreationFormSchema,
+  voltageLevelSectionCreationFormToDto
 };

package/dist/features/network-modifications/index.js

@@ -94,6 +94,8 @@ import { VoltageLevelModificationForm } from "./voltageLevel/modification/Voltag
 import { voltageLevelModificationDtoToForm, voltageLevelModificationEmptyFormData, voltageLevelModificationFormSchema, voltageLevelModificationFormToDto, voltageLevelModificationWithMeasurementsDtoToForm, voltageLevelModificationWithMeasurementsFormSchema, voltageLevelModificationWithMeasurementsFormToDto } from "./voltageLevel/modification/voltageLevelModification.utils.js";
 import { createVoltageLevelTopologyDtoToForm, createVoltageLevelTopologyEmptyFormData, createVoltageLevelTopologyFormSchema, createVoltageLevelTopologyFormToDto } from "./voltageLevel/topology/voltageLevelTopologyCreation.utils.js";
 import { CreateVoltageLevelTopologyForm } from "./voltageLevel/topology/CreateVoltageLevelTopologyForm.js";
+import { VoltageLevelSectionCreationForm } from "./voltageLevel/section/VoltageLevelSectionCreationForm.js";
+import { POSITION_NEW_SECTION_SIDE, voltageLevelSectionCreationDtoToForm, voltageLevelSectionCreationEmptyFormData, voltageLevelSectionCreationFormSchema, voltageLevelSectionCreationFormToDto } from "./voltageLevel/section/voltageLevelSectionCreation.utils.js";
 import { LOAD_TAB_FIELDS, LoadDialogTab } from "./load/common/load.utils.js";
 import { LoadDialogTabs } from "./load/common/LoadDialogTabs.js";
 import { LoadDialogTabsContent } from "./load/common/LoadDialogTabsContent.js";
@@ -214,6 +216,7 @@ export {
   OPERATOR,
   OperationalLimitsGroupTabLabel,
   OperationalLimitsGroups,
+  POSITION_NEW_SECTION_SIDE,
   PowerMeasurementsForm,
   PowerWithValidityForm,
   PropertiesForm,
@@ -253,6 +256,7 @@ export {
   VoltageLevelConnectivityForm,
   VoltageLevelCreationForm,
   VoltageLevelModificationForm,
+  VoltageLevelSectionCreationForm,
   VoltageRegulationForm,
   addModificationTypeToOpLimitsGroups,
   addModificationTypeToTemporaryLimits,
@@ -469,5 +473,9 @@ export {
   voltageLevelModificationFormToDto,
   voltageLevelModificationWithMeasurementsDtoToForm,
   voltageLevelModificationWithMeasurementsFormSchema,
-  voltageLevelModificationWithMeasurementsFormToDto
+  voltageLevelModificationWithMeasurementsFormToDto,
+  voltageLevelSectionCreationDtoToForm,
+  voltageLevelSectionCreationEmptyFormData,
+  voltageLevelSectionCreationFormSchema,
+  voltageLevelSectionCreationFormToDto
 };

package/dist/features/network-modifications/voltageLevel/index.d.ts

@@ -9,3 +9,4 @@ export * from './creation';
 export * from './voltage-level.type';
 export * from './modification';
 export * from './topology';
+export * from './section';

package/dist/features/network-modifications/voltageLevel/index.js

@@ -72,15 +72,19 @@ import { VoltageLevelModificationForm } from "./modification/VoltageLevelModific
 import { voltageLevelModificationDtoToForm, voltageLevelModificationEmptyFormData, voltageLevelModificationFormSchema, voltageLevelModificationFormToDto, voltageLevelModificationWithMeasurementsDtoToForm, voltageLevelModificationWithMeasurementsFormSchema, voltageLevelModificationWithMeasurementsFormToDto } from "./modification/voltageLevelModification.utils.js";
 import { createVoltageLevelTopologyDtoToForm, createVoltageLevelTopologyEmptyFormData, createVoltageLevelTopologyFormSchema, createVoltageLevelTopologyFormToDto } from "./topology/voltageLevelTopologyCreation.utils.js";
 import { CreateVoltageLevelTopologyForm } from "./topology/CreateVoltageLevelTopologyForm.js";
+import { VoltageLevelSectionCreationForm } from "./section/VoltageLevelSectionCreationForm.js";
+import { POSITION_NEW_SECTION_SIDE, voltageLevelSectionCreationDtoToForm, voltageLevelSectionCreationEmptyFormData, voltageLevelSectionCreationFormSchema, voltageLevelSectionCreationFormToDto } from "./section/voltageLevelSectionCreation.utils.js";
 export {
   CouplingDeviceCreationForm,
   CreateVoltageLevelTopologyForm,
   MAX_SECTIONS_COUNT,
+  POSITION_NEW_SECTION_SIDE,
   SWITCH_TYPE,
   SwitchKind,
   SwitchesBetweenSections,
   VoltageLevelCreationForm,
   VoltageLevelModificationForm,
+  VoltageLevelSectionCreationForm,
   buildNewBusbarSections,
   couplingDeviceCreationDtoToForm,
   couplingDeviceCreationFormSchema,
@@ -103,5 +107,9 @@ export {
   voltageLevelModificationFormToDto,
   voltageLevelModificationWithMeasurementsDtoToForm,
   voltageLevelModificationWithMeasurementsFormSchema,
-  voltageLevelModificationWithMeasurementsFormToDto
+  voltageLevelModificationWithMeasurementsFormToDto,
+  voltageLevelSectionCreationDtoToForm,
+  voltageLevelSectionCreationEmptyFormData,
+  voltageLevelSectionCreationFormSchema,
+  voltageLevelSectionCreationFormToDto
 };

package/dist/features/network-modifications/voltageLevel/section/VoltageLevelSectionCreationForm.d.ts

@@ -0,0 +1,10 @@
+import { PositionDiagramPaneType } from '../../common/connectivity/connectivity.type';
+import { BusBarSections } from './voltageLevelSectionCreation.types';
+export interface VoltageLevelSectionCreationFormProps {
+    busBarSectionInfos?: BusBarSections;
+    allBusbarSectionsList?: string[];
+    isSymmetricalNbBusBarSections?: boolean;
+    isNotFoundOrNotSupported?: boolean;
+    PositionDiagramPane?: PositionDiagramPaneType;
+}
+export declare function VoltageLevelSectionCreationForm({ busBarSectionInfos, allBusbarSectionsList, isSymmetricalNbBusBarSections, isNotFoundOrNotSupported, PositionDiagramPane, }: Readonly<VoltageLevelSectionCreationFormProps>): import("react").JSX.Element;

package/dist/features/network-modifications/voltageLevel/section/VoltageLevelSectionCreationForm.js

@@ -0,0 +1,375 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { TextField, Tooltip, Box, Grid, Button, Typography, Slider } from "@mui/material";
+import { useIntl, FormattedMessage } from "react-intl";
+import { InfoOutlined } from "@mui/icons-material";
+import { useFormContext, useWatch } from "react-hook-form";
+import "../../../../components/ui/overflowableText/OverflowableText.js";
+import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import { areIdsEqual, getObjectId } from "../../../../utils/ts-utils.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import { useCustomFormContext } from "../../../../components/ui/reactHookForm/provider/useCustomFormContext.js";
+import "yup";
+import "../../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import { AutocompleteInput } from "../../../../components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.js";
+import { SwitchInput } from "../../../../components/ui/reactHookForm/booleans/SwitchInput.js";
+import "../../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import { SelectInput } from "../../../../components/ui/reactHookForm/selectInputs/SelectInput.js";
+import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes-fill.svg?react";
+import "../../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "react-papaparse";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
+import { filledTextField } from "../../common/form.utils.js";
+import "../../common/properties/propertyUtils.js";
+import "react-dom";
+import "autosuggest-highlight/match";
+import "autosuggest-highlight/parse";
+import "clsx";
+import "../../../../components/composite/filter/FilterCreationDialog.js";
+import "../../../../components/composite/filter/HeaderFilterForm.js";
+import "../../../../components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js";
+import "../../../../components/composite/filter/expert/ExpertFilterForm.js";
+import "../../../../components/composite/filter/expert/ExpertFilterEditionDialog.js";
+import "../../../../components/composite/filter/expert/expertFilterConstants.js";
+import "react-querybuilder";
+import "uuid";
+import "../../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
+import "../../../../components/composite/filter/utils/filterFormUtils.js";
+import "@react-querybuilder/material";
+import "../../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "../../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
+import "../../../../components/composite/agGridTable/BottomTableButtons.js";
+import "../../../../components/composite/agGridTable/CustomAgGridTable.js";
+import "ag-grid-community";
+import "../../../../components/composite/customAGGrid/customAggrid.js";
+import "../../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "mathjs";
+import "../../../../components/composite/report/report-viewer/log-table/log-table.js";
+import "react-window";
+import "../../../../components/composite/report/report-treeview/treeview-item.js";
+import "../../../../components/composite/report/report-viewer/context/report-viewer-context.js";
+import "../../common/regulatingTerminal/RegulatingTerminalForm.js";
+import "@mui/material/colors";
+import "@mui/x-charts";
+import "../../common/currentLimits/limitsPane.utils.js";
+import { SWITCH_TYPE } from "../creation/voltageLevelCreation.utils.js";
+import "../creation/voltageLevel.constants.js";
+import { POSITION_NEW_SECTION_SIDE } from "./voltageLevelSectionCreation.utils.js";
+const getArrayPosition = (data, selectedOptionId) => {
+  if (!selectedOptionId || !data) {
+    return { position: -1, length: 0 };
+  }
+  const matchingArray = Object.values(data).find(
+    (array) => Array.isArray(array) && array.indexOf(selectedOptionId) !== -1
+  );
+  if (matchingArray) {
+    return { position: matchingArray.indexOf(selectedOptionId), length: matchingArray.length };
+  }
+  return { position: -1, length: 0 };
+};
+function VoltageLevelSectionCreationForm({
+  busBarSectionInfos,
+  allBusbarSectionsList,
+  isSymmetricalNbBusBarSections = false,
+  isNotFoundOrNotSupported = false,
+  PositionDiagramPane
+}) {
+  const intl = useIntl();
+  const { isNodeBuilt, isUpdate } = useCustomFormContext();
+  const [isDiagramPaneOpen, setIsDiagramPaneOpen] = useState(false);
+  const [busBarSectionsIdOptions, setBusBarSectionsIdOptions] = useState([]);
+  const [isNotRequiredSwitchBefore, setIsNotRequiredSwitchBefore] = useState(false);
+  const [isNotRequiredSwitchAfter, setIsNotRequiredSwitchAfter] = useState(false);
+  const { setValue } = useFormContext();
+  const voltageLevelId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
+  const busbarIndex = useWatch({ name: FieldConstants.BUS_BAR_INDEX });
+  const selectedOption = useWatch({ name: FieldConstants.BUSBAR_SECTION_ID });
+  const selectedPositionOption = useWatch({ name: FieldConstants.IS_AFTER_BUSBAR_SECTION_ID });
+  const isFreeInputMode = !busBarSectionInfos;
+  const voltageLevelIdField = /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      fullWidth: true,
+      label: intl.formatMessage({ id: "VoltageLevelId" }),
+      value: voltageLevelId ?? "",
+      slotProps: {
+        input: {
+          readOnly: true
+        }
+      },
+      disabled: true,
+      ...filledTextField
+    }
+  );
+  const switchValue = useWatch({ name: FieldConstants.NEW_SWITCH_STATES });
+  useEffect(() => {
+    if (busBarSectionInfos && busbarIndex) {
+      const selectedKey = busbarIndex?.id;
+      setValue(FieldConstants.ALL_BUS_BAR_SECTIONS, false);
+      if (selectedKey === "all") {
+        setValue(FieldConstants.ALL_BUS_BAR_SECTIONS, true);
+        if (allBusbarSectionsList && Array.isArray(allBusbarSectionsList)) {
+          const options2 = allBusbarSectionsList.filter((id) => Boolean(id)).map((id) => ({
+            id,
+            label: id
+          }));
+          setBusBarSectionsIdOptions(options2);
+        } else {
+          setBusBarSectionsIdOptions([]);
+        }
+        return;
+      }
+      const sections = busBarSectionInfos[selectedKey];
+      if (!sections || !Array.isArray(sections)) {
+        setBusBarSectionsIdOptions([]);
+        return;
+      }
+      const options = sections.filter((id) => Boolean(id)).map((id) => ({
+        id,
+        label: id
+      }));
+      setBusBarSectionsIdOptions(options);
+    } else {
+      setBusBarSectionsIdOptions([]);
+    }
+  }, [allBusbarSectionsList, busBarSectionInfos, intl, busbarIndex, setValue]);
+  const arrayPosition = useMemo(
+    () => busBarSectionInfos && getArrayPosition(busBarSectionInfos, selectedOption?.id),
+    [busBarSectionInfos, selectedOption?.id]
+  );
+  useEffect(() => {
+    if (selectedOption && selectedPositionOption && busBarSectionInfos && arrayPosition) {
+      const selectedSectionIndex = arrayPosition.position;
+      const busBarSections = arrayPosition.length - 1;
+      if (selectedSectionIndex === 0 && selectedPositionOption === POSITION_NEW_SECTION_SIDE.BEFORE.id) {
+        setValue(FieldConstants.SWITCH_BEFORE_NOT_REQUIRED, true);
+        setIsNotRequiredSwitchBefore(true);
+      } else {
+        setValue(FieldConstants.SWITCH_BEFORE_NOT_REQUIRED, false);
+        setIsNotRequiredSwitchBefore(false);
+      }
+      if (busBarSections === selectedSectionIndex && selectedPositionOption === POSITION_NEW_SECTION_SIDE.AFTER.id) {
+        setValue(FieldConstants.SWITCH_AFTER_NOT_REQUIRED, true);
+        setIsNotRequiredSwitchAfter(true);
+      } else {
+        setValue(FieldConstants.SWITCH_AFTER_NOT_REQUIRED, false);
+        setIsNotRequiredSwitchAfter(false);
+      }
+    }
+    if (isUpdate && isNodeBuilt) {
+      setValue(FieldConstants.SWITCH_AFTER_NOT_REQUIRED, true);
+      setValue(FieldConstants.SWITCH_BEFORE_NOT_REQUIRED, true);
+    }
+  }, [selectedOption, setValue, busBarSectionInfos, selectedPositionOption, arrayPosition, isUpdate, isNodeBuilt]);
+  const busBarIndexOptions = useMemo(() => {
+    if (busBarSectionInfos) {
+      const sortedOptions = Object.keys(busBarSectionInfos || {}).sort((a, b) => parseInt(a, 10) - parseInt(b, 10)).map((key) => ({
+        id: key,
+        label: key
+      }));
+      const allOption = {
+        id: "all",
+        label: intl.formatMessage({ id: "allBusbarSections" }),
+        disabled: !isSymmetricalNbBusBarSections
+      };
+      return [...sortedOptions, allOption];
+    }
+    return [];
+  }, [busBarSectionInfos, intl, isSymmetricalNbBusBarSections]);
+  const getOptionLabel = (object) => {
+    if (typeof object === "string") {
+      return object;
+    }
+    if (object?.id === "all") {
+      return intl.formatMessage({ id: "allBusbarSections" }) ?? "";
+    }
+    return String(object?.id ?? "");
+  };
+  const isOptionEqualToValue = (val1, val2) => {
+    const getId = (option) => {
+      return typeof option === "string" ? option : String(option?.id ?? "");
+    };
+    return getId(val1) === getId(val2);
+  };
+  const handleChangeBusbarIndex = useCallback(() => {
+    if (!isFreeInputMode) {
+      setValue(FieldConstants.BUSBAR_SECTION_ID, null);
+    }
+  }, [isFreeInputMode, setValue]);
+  const freeInputOutputTransform = useCallback(
+    (value) => typeof value === "string" ? { id: value, label: value } : value,
+    []
+  );
+  const busbarCountField = /* @__PURE__ */ jsx(
+    AutocompleteInput,
+    {
+      name: FieldConstants.BUS_BAR_INDEX,
+      label: "Busbar",
+      onChangeCallback: handleChangeBusbarIndex,
+      options: busBarIndexOptions,
+      getOptionLabel,
+      isOptionEqualToValue,
+      allowNewValue: isFreeInputMode,
+      outputTransform: freeInputOutputTransform,
+      renderOption: (props, option) => {
+        const allOptionsDisabled = option.id === "all" && option?.disabled;
+        const { key, ...otherProps } = props;
+        return /* @__PURE__ */ jsx("li", { ...otherProps, children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { children: getOptionLabel(option) }),
+          allOptionsDisabled && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: "0.85rem",
+                color: "red",
+                marginTop: "2px"
+              },
+              children: intl.formatMessage({ id: "allOptionHelperText" })
+            }
+          )
+        ] }) }, key);
+      },
+      getOptionDisabled: (option) => option?.disabled,
+      size: "small",
+      disabled: isNotFoundOrNotSupported
+    }
+  );
+  const busbarSectionsField = /* @__PURE__ */ jsx(
+    AutocompleteInput,
+    {
+      name: FieldConstants.BUSBAR_SECTION_ID,
+      label: "BusBarSectionsReference",
+      options: busBarSectionsIdOptions,
+      getOptionLabel: getObjectId,
+      isOptionEqualToValue: areIdsEqual,
+      allowNewValue: isFreeInputMode,
+      outputTransform: freeInputOutputTransform,
+      size: "small",
+      disabled: !busbarIndex || isNotFoundOrNotSupported
+    }
+  );
+  const positionSideNewSectionField = /* @__PURE__ */ jsx(
+    SelectInput,
+    {
+      name: FieldConstants.IS_AFTER_BUSBAR_SECTION_ID,
+      label: "isAfterBusBarSectionId",
+      options: Object.values(POSITION_NEW_SECTION_SIDE),
+      size: "small",
+      disabled: !busbarIndex || isNotFoundOrNotSupported
+    }
+  );
+  const switchBeforeField = /* @__PURE__ */ jsx(
+    SelectInput,
+    {
+      name: FieldConstants.SWITCHES_BEFORE_SECTIONS,
+      label: "switchesBeforeSections",
+      options: Object.values(SWITCH_TYPE),
+      size: "small",
+      disabled: !busbarIndex || isNotRequiredSwitchBefore || isNotFoundOrNotSupported
+    }
+  );
+  const switchAfterField = /* @__PURE__ */ jsx(
+    SelectInput,
+    {
+      name: FieldConstants.SWITCHES_AFTER_SECTIONS,
+      label: "switchesAfterSections",
+      options: Object.values(SWITCH_TYPE),
+      size: "small",
+      disabled: !busbarIndex || isNotRequiredSwitchAfter || isNotFoundOrNotSupported
+    }
+  );
+  const newSwitchState = /* @__PURE__ */ jsx(
+    SwitchInput,
+    {
+      name: FieldConstants.NEW_SWITCH_STATES,
+      label: switchValue ? "areSwitchesClosed" : "areSwitchesOpen"
+    }
+  );
+  const getLabelDescription = useCallback(() => {
+    return intl.formatMessage({ id: "newSection" });
+  }, [intl]);
+  const newSectionField = /* @__PURE__ */ jsx(
+    Slider,
+    {
+      min: 0,
+      max: 3,
+      step: 0.1,
+      value: 1.5,
+      track: false,
+      valueLabelFormat: getLabelDescription,
+      valueLabelDisplay: "on",
+      size: "medium",
+      disabled: true,
+      sx: {
+        "& .MuiSlider-thumb": {
+          backgroundColor: "#1976d2",
+          color: "#1976d2",
+          "&:hover": {
+            backgroundColor: "#1976d2"
+          },
+          "&.Mui-disabled": {
+            backgroundColor: "#1976d2",
+            color: "#1976d2"
+          }
+        }
+      }
+    }
+  );
+  const handleCloseDiagramPane = useCallback(() => {
+    setIsDiagramPaneOpen(false);
+  }, []);
+  const handleClickOpenDiagramPane = useCallback(() => {
+    setIsDiagramPaneOpen(true);
+  }, []);
+  const diagramToolTip = /* @__PURE__ */ jsx(Tooltip, { sx: { paddingLeft: 1 }, title: intl.formatMessage({ id: "builtNodeTooltipForDiagram" }), children: /* @__PURE__ */ jsx(InfoOutlined, { color: "info", fontSize: "medium" }) });
+  return /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, md: 6 }, children: voltageLevelIdField }),
+        PositionDiagramPane && isNodeBuilt && /* @__PURE__ */ jsxs(Grid, { size: { xs: 12, md: 3 }, children: [
+          /* @__PURE__ */ jsx(Button, { onClick: handleClickOpenDiagramPane, variant: "outlined", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "CreateCouplingDeviceDiagramButton" }) }),
+          diagramToolTip
+        ] })
+      ] }) }),
+      isNotFoundOrNotSupported && /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "red", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "notValidVoltageLevel" }) }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(GridSection, { title: "SectionPosition" }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: busbarCountField }),
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: busbarSectionsField }),
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: positionSideNewSectionField }),
+      /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(GridSection, { title: "Switch" }) }),
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: switchBeforeField }),
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: newSectionField }),
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: switchAfterField }),
+      /* @__PURE__ */ jsx(Grid, { size: 12, children: newSwitchState })
+    ] }),
+    PositionDiagramPane && /* @__PURE__ */ jsx(
+      PositionDiagramPane,
+      {
+        open: isDiagramPaneOpen,
+        onClose: handleCloseDiagramPane,
+        voltageLevelId
+      }
+    )
+  ] });
+}
+export {
+  VoltageLevelSectionCreationForm
+};

package/dist/features/network-modifications/voltageLevel/section/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 * from './VoltageLevelSectionCreationForm';
+export * from './voltageLevelSectionCreation.types';
+export * from './voltageLevelSectionCreation.utils';

package/dist/features/network-modifications/voltageLevel/section/index.js

@@ -0,0 +1,10 @@
+import { VoltageLevelSectionCreationForm } from "./VoltageLevelSectionCreationForm.js";
+import { POSITION_NEW_SECTION_SIDE, voltageLevelSectionCreationDtoToForm, voltageLevelSectionCreationEmptyFormData, voltageLevelSectionCreationFormSchema, voltageLevelSectionCreationFormToDto } from "./voltageLevelSectionCreation.utils.js";
+export {
+  POSITION_NEW_SECTION_SIDE,
+  VoltageLevelSectionCreationForm,
+  voltageLevelSectionCreationDtoToForm,
+  voltageLevelSectionCreationEmptyFormData,
+  voltageLevelSectionCreationFormSchema,
+  voltageLevelSectionCreationFormToDto
+};

package/dist/features/network-modifications/voltageLevel/section/voltageLevelSectionCreation.types.d.ts

@@ -0,0 +1,15 @@
+import { UUID } from 'node:crypto';
+import { ModificationType } from '../../../../utils';
+export type BusBarSections = Record<string, string[]>;
+export interface VoltageLevelSectionCreationDto {
+    type: ModificationType;
+    uuid?: UUID;
+    voltageLevelId: string;
+    busbarIndex: string | null;
+    busbarSectionId: string | null;
+    allBusbars: boolean;
+    afterBusbarSectionId: boolean;
+    leftSwitchKind: string | null;
+    rightSwitchKind: string | null;
+    switchOpen: boolean;
+}

package/dist/features/network-modifications/voltageLevel/section/voltageLevelSectionCreation.types.js

@@ -0,0 +1 @@
+

package/dist/features/network-modifications/voltageLevel/section/voltageLevelSectionCreation.utils.d.ts

@@ -0,0 +1,48 @@
+import { InferType } from 'yup';
+import { DeepNullable } from '../../../../utils';
+import { BusBarSections, VoltageLevelSectionCreationDto } from './voltageLevelSectionCreation.types';
+export declare const POSITION_NEW_SECTION_SIDE: {
+    readonly BEFORE: {
+        readonly id: "BEFORE";
+        readonly label: "Before";
+    };
+    readonly AFTER: {
+        readonly id: "AFTER";
+        readonly label: "After";
+    };
+};
+export declare const voltageLevelSectionCreationFormSchema: import('yup').ObjectSchema<{
+    equipmentID: string;
+    busbarIndex: {
+        id: string;
+    };
+    busbarSectionId: {
+        id: string;
+    };
+    isAfterBusBarSectionId: string;
+    switchesBeforeSections: string | null | undefined;
+    switchesAfterSections: string | null | undefined;
+    allBusbarSections: boolean | undefined;
+    newSwitchStates: boolean | undefined;
+    switchBeforeNotRequired: boolean | undefined;
+    switchAfterNotRequired: boolean | undefined;
+}, import('yup').AnyObject, {
+    equipmentID: undefined;
+    busbarIndex: {
+        id: undefined;
+    };
+    busbarSectionId: {
+        id: undefined;
+    };
+    isAfterBusBarSectionId: undefined;
+    switchesBeforeSections: undefined;
+    switchesAfterSections: undefined;
+    allBusbarSections: undefined;
+    newSwitchStates: undefined;
+    switchBeforeNotRequired: undefined;
+    switchAfterNotRequired: undefined;
+}, "">;
+export type VoltageLevelSectionCreationFormData = InferType<typeof voltageLevelSectionCreationFormSchema>;
+export declare const voltageLevelSectionCreationEmptyFormData: DeepNullable<VoltageLevelSectionCreationFormData>;
+export declare const voltageLevelSectionCreationDtoToForm: (dto: VoltageLevelSectionCreationDto) => VoltageLevelSectionCreationFormData;
+export declare const voltageLevelSectionCreationFormToDto: (form: VoltageLevelSectionCreationFormData, busBarSectionInfos?: BusBarSections) => VoltageLevelSectionCreationDto;

package/dist/features/network-modifications/voltageLevel/section/voltageLevelSectionCreation.utils.js

@@ -0,0 +1,100 @@
+import { object, boolean, string } from "yup";
+import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import { ModificationType } from "../../../../utils/types/modificationType.js";
+import "react/jsx-runtime";
+import "@mui/icons-material";
+const POSITION_NEW_SECTION_SIDE = {
+  BEFORE: { id: "BEFORE", label: "Before" },
+  AFTER: { id: "AFTER", label: "After" }
+};
+const voltageLevelSectionCreationFormSchema = object().shape({
+  [FieldConstants.EQUIPMENT_ID]: string().required(),
+  [FieldConstants.BUS_BAR_INDEX]: object().nullable().required().shape({
+    [FieldConstants.ID]: string().nullable().required()
+  }),
+  [FieldConstants.BUSBAR_SECTION_ID]: object().nullable().required().shape({
+    [FieldConstants.ID]: string().nullable().required()
+  }),
+  [FieldConstants.IS_AFTER_BUSBAR_SECTION_ID]: string().nullable().required(),
+  [FieldConstants.SWITCHES_BEFORE_SECTIONS]: string().nullable().when([FieldConstants.IS_AFTER_BUSBAR_SECTION_ID, FieldConstants.SWITCH_BEFORE_NOT_REQUIRED], {
+    is: (isAfterBusBarSectionId, switchBeforeNotRequired) => isAfterBusBarSectionId === POSITION_NEW_SECTION_SIDE.BEFORE.id && switchBeforeNotRequired,
+    then: (schema) => schema.notRequired(),
+    otherwise: (schema) => schema.required()
+  }),
+  [FieldConstants.SWITCHES_AFTER_SECTIONS]: string().nullable().when([FieldConstants.IS_AFTER_BUSBAR_SECTION_ID, FieldConstants.SWITCH_AFTER_NOT_REQUIRED], {
+    is: (isAfterBusBarSectionId, switchAfterNotRequired) => isAfterBusBarSectionId === POSITION_NEW_SECTION_SIDE.AFTER.id && switchAfterNotRequired,
+    then: (schema) => schema.notRequired(),
+    otherwise: (schema) => schema.required()
+  }),
+  [FieldConstants.ALL_BUS_BAR_SECTIONS]: boolean(),
+  [FieldConstants.NEW_SWITCH_STATES]: boolean(),
+  [FieldConstants.SWITCH_BEFORE_NOT_REQUIRED]: boolean(),
+  [FieldConstants.SWITCH_AFTER_NOT_REQUIRED]: boolean()
+}).required();
+const voltageLevelSectionCreationEmptyFormData = {
+  [FieldConstants.EQUIPMENT_ID]: "",
+  [FieldConstants.BUS_BAR_INDEX]: null,
+  [FieldConstants.BUSBAR_SECTION_ID]: null,
+  [FieldConstants.IS_AFTER_BUSBAR_SECTION_ID]: null,
+  [FieldConstants.SWITCHES_BEFORE_SECTIONS]: null,
+  [FieldConstants.SWITCHES_AFTER_SECTIONS]: null,
+  [FieldConstants.ALL_BUS_BAR_SECTIONS]: false,
+  [FieldConstants.NEW_SWITCH_STATES]: true,
+  [FieldConstants.SWITCH_BEFORE_NOT_REQUIRED]: false,
+  [FieldConstants.SWITCH_AFTER_NOT_REQUIRED]: false
+};
+const getBusBarIndexValue = ({
+  busbarIndex,
+  allBusbars
+}) => {
+  if (allBusbars) {
+    return { id: "all" };
+  }
+  return { id: busbarIndex ?? "" };
+};
+const getBusBarSectionValue = ({ busbarSectionId }) => {
+  return { id: busbarSectionId ?? "" };
+};
+const findBusbarKeyForSection = (busBarSectionInfos, sectionId) => {
+  if (!sectionId) {
+    return null;
+  }
+  return Object.keys(busBarSectionInfos || {}).find((key) => busBarSectionInfos?.[key]?.includes(sectionId)) ?? null;
+};
+const voltageLevelSectionCreationDtoToForm = (dto) => {
+  return {
+    equipmentID: dto.voltageLevelId,
+    busbarIndex: getBusBarIndexValue({
+      busbarIndex: dto.busbarIndex,
+      allBusbars: dto.allBusbars
+    }),
+    allBusbarSections: dto.allBusbars ?? false,
+    busbarSectionId: getBusBarSectionValue({ busbarSectionId: dto.busbarSectionId }),
+    isAfterBusBarSectionId: dto.afterBusbarSectionId ? POSITION_NEW_SECTION_SIDE.AFTER.id : POSITION_NEW_SECTION_SIDE.BEFORE.id,
+    switchesBeforeSections: dto.leftSwitchKind ?? null,
+    switchesAfterSections: dto.rightSwitchKind ?? null,
+    newSwitchStates: !(dto.switchOpen ?? true)
+  };
+};
+const voltageLevelSectionCreationFormToDto = (form, busBarSectionInfos) => {
+  return {
+    type: ModificationType.CREATE_VOLTAGE_LEVEL_SECTION,
+    voltageLevelId: form.equipmentID,
+    busbarIndex: form.allBusbarSections ? findBusbarKeyForSection(busBarSectionInfos, form.busbarSectionId?.id) : form.busbarIndex?.id ?? null,
+    busbarSectionId: form.busbarSectionId?.id ?? null,
+    allBusbars: form.allBusbarSections ?? false,
+    afterBusbarSectionId: form.isAfterBusBarSectionId === POSITION_NEW_SECTION_SIDE.AFTER.id,
+    leftSwitchKind: form.switchesBeforeSections ?? null,
+    rightSwitchKind: form.switchesAfterSections ?? null,
+    switchOpen: !form.newSwitchStates
+  };
+};
+export {
+  POSITION_NEW_SECTION_SIDE,
+  voltageLevelSectionCreationDtoToForm,
+  voltageLevelSectionCreationEmptyFormData,
+  voltageLevelSectionCreationFormSchema,
+  voltageLevelSectionCreationFormToDto
+};

package/dist/index.js

@@ -362,6 +362,8 @@ import { VoltageLevelModificationForm } from "./features/network-modifications/v
 import { voltageLevelModificationDtoToForm, voltageLevelModificationEmptyFormData, voltageLevelModificationFormSchema, voltageLevelModificationFormToDto, voltageLevelModificationWithMeasurementsDtoToForm, voltageLevelModificationWithMeasurementsFormSchema, voltageLevelModificationWithMeasurementsFormToDto } from "./features/network-modifications/voltageLevel/modification/voltageLevelModification.utils.js";
 import { createVoltageLevelTopologyDtoToForm, createVoltageLevelTopologyEmptyFormData, createVoltageLevelTopologyFormSchema, createVoltageLevelTopologyFormToDto } from "./features/network-modifications/voltageLevel/topology/voltageLevelTopologyCreation.utils.js";
 import { CreateVoltageLevelTopologyForm } from "./features/network-modifications/voltageLevel/topology/CreateVoltageLevelTopologyForm.js";
+import { VoltageLevelSectionCreationForm } from "./features/network-modifications/voltageLevel/section/VoltageLevelSectionCreationForm.js";
+import { POSITION_NEW_SECTION_SIDE, voltageLevelSectionCreationDtoToForm, voltageLevelSectionCreationEmptyFormData, voltageLevelSectionCreationFormSchema, voltageLevelSectionCreationFormToDto } from "./features/network-modifications/voltageLevel/section/voltageLevelSectionCreation.utils.js";
 import { LOAD_TAB_FIELDS, LoadDialogTab } from "./features/network-modifications/load/common/load.utils.js";
 import { LoadDialogTabs } from "./features/network-modifications/load/common/LoadDialogTabs.js";
 import { LoadDialogTabsContent } from "./features/network-modifications/load/common/LoadDialogTabsContent.js";
@@ -1001,6 +1003,7 @@ export {
   PERCENTAGE,
   PHASE_REGULATION_MODE_OPTIONS,
   PHASE_SHIFTER_REGULATION_ON,
+  POSITION_NEW_SECTION_SIDE,
   PREFIX_CONFIG_NOTIFICATION_WS,
   PREFIX_DIRECTORY_NOTIFICATION_WS,
   PREFIX_MONITOR_NOTIFICATION_WS,
@@ -1221,6 +1224,7 @@ export {
   VoltageLevelConnectivityForm,
   VoltageLevelCreationForm,
   VoltageLevelModificationForm,
+  VoltageLevelSectionCreationForm,
   VoltageRegulationForm,
   VoltageUnitIcon,
   WRITE_SLACK_BUS,
@@ -1821,5 +1825,9 @@ export {
   voltageLevelModificationFormToDto,
   voltageLevelModificationWithMeasurementsDtoToForm,
   voltageLevelModificationWithMeasurementsFormSchema,
-  voltageLevelModificationWithMeasurementsFormToDto
+  voltageLevelModificationWithMeasurementsFormToDto,
+  voltageLevelSectionCreationDtoToForm,
+  voltageLevelSectionCreationEmptyFormData,
+  voltageLevelSectionCreationFormSchema,
+  voltageLevelSectionCreationFormToDto
 };

package/dist/translations/en/networkModificationsEn.d.ts

@@ -335,4 +335,21 @@ export declare const networkModificationsEn: {
     CreateCouplingDevice: string;
     CouplingDeviceText: string;
     CouplingDeviceBusBarSectionToolTipText: string;
+    CreateVoltageLevelSection: string;
+    VoltageLevelSectionCreationError: string;
+    BusBarSectionsReference: string;
+    notValidVoltageLevel: string;
+    SectionPosition: string;
+    isAfterBusBarSectionId: string;
+    Switch: string;
+    newSection: string;
+    switchesAfterSections: string;
+    switchesBeforeSections: string;
+    Busbar: string;
+    Before: string;
+    After: string;
+    allBusbarSections: string;
+    allOptionHelperText: string;
+    areSwitchesOpen: string;
+    areSwitchesClosed: string;
 };

package/dist/translations/en/networkModificationsEn.js

@@ -320,7 +320,7 @@ const networkModificationsEn = {
   copyLink: "Copy link",
   linkCopied: "Link copied",
   linkCopyError: "Error while attempting to copy link",
-  // Voltage level topology creation
+  // Voltage level creation
   CreateVoltageLevelTopology: "Adding a busbar",
   CreateVoltageLevelTopologyError: "Error while creating a voltage level topology",
   CreateCouplingDeviceDiagramButton: "Show voltage level",
@@ -331,7 +331,25 @@ const networkModificationsEn = {
   // Voltage level coupling device creation
   CreateCouplingDevice: "Add a coupling device",
   CouplingDeviceText: "Bus bar sections",
-  CouplingDeviceBusBarSectionToolTipText: "If both bus bar sections have a different section number it creates an omnibus otherwise a coupling device"
+  CouplingDeviceBusBarSectionToolTipText: "If both bus bar sections have a different section number it creates an omnibus otherwise a coupling device",
+  // Voltage level section creation
+  CreateVoltageLevelSection: "Add busbar section",
+  VoltageLevelSectionCreationError: "Error while creating a section",
+  BusBarSectionsReference: "Busbar reference section",
+  notValidVoltageLevel: "Invalid voltage level to add busbar section. Please re-create the voltage level.",
+  SectionPosition: "Position",
+  isAfterBusBarSectionId: "New section side",
+  Switch: "Switch",
+  newSection: "New section",
+  switchesAfterSections: "Switch after",
+  switchesBeforeSections: "Switch before",
+  Busbar: "Busbar",
+  Before: "Before",
+  After: "After",
+  allBusbarSections: "All",
+  allOptionHelperText: "Busbars have different sections (number or index)",
+  areSwitchesOpen: "Open",
+  areSwitchesClosed: "Closed"
 };
 export {
   networkModificationsEn

package/dist/translations/fr/networkModificationsFr.d.ts

@@ -335,4 +335,21 @@ export declare const networkModificationsFr: {
     CreateCouplingDevice: string;
     CouplingDeviceText: string;
     CouplingDeviceBusBarSectionToolTipText: string;
+    CreateVoltageLevelSection: string;
+    VoltageLevelSectionCreationError: string;
+    BusBarSectionsReference: string;
+    notValidVoltageLevel: string;
+    SectionPosition: string;
+    isAfterBusBarSectionId: string;
+    Switch: string;
+    newSection: string;
+    switchesAfterSections: string;
+    switchesBeforeSections: string;
+    Busbar: string;
+    Before: string;
+    After: string;
+    allBusbarSections: string;
+    allOptionHelperText: string;
+    areSwitchesOpen: string;
+    areSwitchesClosed: string;
 };

package/dist/translations/fr/networkModificationsFr.js

@@ -320,7 +320,7 @@ const networkModificationsFr = {
   copyLink: "Copier le lien",
   linkCopied: "Lien copié",
   linkCopyError: "Erreur lors de la copie du lien",
-  // Voltage level topology creation
+  // Voltage level
   CreateVoltageLevelTopology: "Ajouter un jeu de barre",
   CreateVoltageLevelTopologyError: "Erreur lors de la création d'une topologie de poste",
   CreateCouplingDeviceDiagramButton: "Voir le poste",
@@ -331,7 +331,25 @@ const networkModificationsFr = {
   // Voltage level coupling device creation
   CreateCouplingDevice: "Ajouter un couplage ou un omnibus",
   CouplingDeviceText: "Sections de jeu de barre",
-  CouplingDeviceBusBarSectionToolTipText: "Si les deux sections de barre sélectionnées ont des numéros de tronçon/section différents la modification crée un omnibus, autrement elle crée un couplage"
+  CouplingDeviceBusBarSectionToolTipText: "Si les deux sections de barre sélectionnées ont des numéros de tronçon/section différents la modification crée un omnibus, autrement elle crée un couplage",
+  // Voltage level section creation
+  CreateVoltageLevelSection: "Ajouter un tronçon ou une section",
+  VoltageLevelSectionCreationError: "Erreur lors de la création d'une section",
+  BusBarSectionsReference: "Section de jeu de barres de référence",
+  notValidVoltageLevel: "Poste invalide pour l'ajout de section/tronçon. Veuillez re-créer le poste.",
+  SectionPosition: "Position",
+  isAfterBusBarSectionId: "Côté de la nouvelle section",
+  Switch: "Organes de coupure",
+  newSection: "Nouvelle section",
+  switchesAfterSections: "OC après",
+  switchesBeforeSections: "OC avant",
+  Busbar: "Jeu de barres",
+  Before: "Avant",
+  After: "Après",
+  allBusbarSections: "Tous",
+  allOptionHelperText: "Tous les jeux de barres n'ont pas les mêmes sections (index et nombre)",
+  areSwitchesOpen: "Ouverts",
+  areSwitchesClosed: "Fermés"
 };
 export {
   networkModificationsFr

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.269.0",
+    "version": "0.270.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",