@gridsuite/commons-ui 0.280.0 → 0.282.0

package/dist/features/network-modifications/static-var-compensator/common/static-var-compensator-dialog-tabs.d.ts

@@ -1,7 +1,8 @@
+import { SyntheticEvent } from 'react';
 import { StaticVarCompensatorDialogTab } from './static-var-compensator-tab-utils';
 export interface StaticVarCompensatorCreationDialogTabsProps {
     tabIndex: number;
     tabIndexesWithError: StaticVarCompensatorDialogTab[];
-    setTabIndex: (newValue: StaticVarCompensatorDialogTab) => void;
+    onTabChange: (event: SyntheticEvent<Element, Event>, newValue: number) => void;
 }
-export declare function StaticVarCompensatorDialogTabs({ tabIndex, tabIndexesWithError, setTabIndex, }: StaticVarCompensatorCreationDialogTabsProps): import("react").JSX.Element;
+export declare function StaticVarCompensatorDialogTabs({ tabIndex, tabIndexesWithError, onTabChange, }: StaticVarCompensatorCreationDialogTabsProps): import("react").JSX.Element;

package/dist/features/network-modifications/static-var-compensator/common/static-var-compensator-dialog-tabs.js

@@ -6,9 +6,9 @@ import { StaticVarCompensatorDialogTab } from "./static-var-compensator-tab-util
 function StaticVarCompensatorDialogTabs({
   tabIndex,
   tabIndexesWithError,
-  setTabIndex
+  onTabChange
 }) {
-  return /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: tabIndex, onChange: (event, newValue) => setTabIndex(newValue), children: [
+  return /* @__PURE__ */ jsx(Grid, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: tabIndex, onChange: onTabChange, children: [
     /* @__PURE__ */ jsx(
       Tab,
       {

package/dist/features/network-modifications/static-var-compensator/creation/static-var-compensator-creation-form.d.ts

@@ -1,8 +1,11 @@
 import { ConnectivityNetworkProps } from '../../common';
+import { StaticVarCompensatorDialogTab } from '../common/static-var-compensator-tab-utils';
 import { EquipmentType, Identifiable } from '../../../../utils';
+import { UseTabsReturn } from '../../../../hooks';
 export interface StaticVarCompensatorCreationFormProps extends ConnectivityNetworkProps {
     fetchVoltageLevelEquipments: (voltageLevelId: string) => Promise<(Identifiable & {
         type: EquipmentType;
     })[]>;
+    useTabsReturn: UseTabsReturn<StaticVarCompensatorDialogTab>;
 }
-export declare function StaticVarCompensatorCreationForm({ voltageLevelOptions, PositionDiagramPane, fetchBusesOrBusbarSections, fetchVoltageLevelEquipments, }: StaticVarCompensatorCreationFormProps): import("react").JSX.Element;
+export declare function StaticVarCompensatorCreationForm({ voltageLevelOptions, PositionDiagramPane, fetchBusesOrBusbarSections, fetchVoltageLevelEquipments, useTabsReturn, }: StaticVarCompensatorCreationFormProps): import("react").JSX.Element;

package/dist/features/network-modifications/static-var-compensator/creation/static-var-compensator-creation-form.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Box } from "@mui/material";
-import { StaticVarCompensatorDialogTab, STATIC_VAR_COMPENSATOR_TAB_FIELDS } from "../common/static-var-compensator-tab-utils.js";
 import { StaticVarCompensatorDialogHeader } from "../common/static-var-compensator-dialog-header.js";
 import { StaticVarCompensatorDialogTabs } from "../common/static-var-compensator-dialog-tabs.js";
+import "../common/static-var-compensator-tab-utils.js";
 import "yup";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -67,25 +67,22 @@ import "../../common/currentLimits/limitsPane.utils.js";
 import "../../shunt-compensator/creation/shuntCompensatorCreation.utils.js";
 import "../../shunt-compensator/modification/shuntCompensatorModification.utils.js";
 import { StaticVarCompensatorTabsContent } from "../common/static-var-compensator-tabs-content.js";
-import { useTabsWithError } from "../../hooks/useTabsWithError.js";
 function StaticVarCompensatorCreationForm({
   voltageLevelOptions,
   PositionDiagramPane,
   fetchBusesOrBusbarSections,
-  fetchVoltageLevelEquipments
+  fetchVoltageLevelEquipments,
+  useTabsReturn
 }) {
-  const { tabIndex, setTabIndex, tabIndexesWithError } = useTabsWithError(
-    STATIC_VAR_COMPENSATOR_TAB_FIELDS,
-    StaticVarCompensatorDialogTab.CONNECTIVITY_TAB
-  );
+  const { selectedTab, tabsWithError, onTabChange } = useTabsReturn;
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
     /* @__PURE__ */ jsx(StaticVarCompensatorDialogHeader, {}),
     /* @__PURE__ */ jsx(
       StaticVarCompensatorDialogTabs,
       {
-        tabIndex,
-        tabIndexesWithError,
-        setTabIndex
+        tabIndex: selectedTab,
+        tabIndexesWithError: tabsWithError,
+        onTabChange
       }
     ),
     /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden", paddingRight: 3 }, children: /* @__PURE__ */ jsx(
@@ -95,7 +92,7 @@ function StaticVarCompensatorCreationForm({
         PositionDiagramPane,
         fetchBusesOrBusbarSections,
         fetchVoltageLevelEquipments,
-        tabIndex
+        tabIndex: selectedTab
       }
     ) })
   ] });

package/dist/features/network-modifications/tabular/TabularForm.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { EquipmentType } from '../../../utils';
+import { PredefinedEquipmentProperties, TabularModificationType } from './tabular.types';
+/** Context handed over to the host application when it renders its own actions in the form. */
+export interface TabularFormActionsContext {
+    dialogMode: TabularModificationType;
+    equipmentType: EquipmentType;
+    csvColumns: string[];
+    commentLines: string[][];
+    predefinedEquipmentProperties: PredefinedEquipmentProperties;
+}
+export interface TabularFormProps {
+    dialogMode: TabularModificationType;
+    dataFetching?: boolean;
+    /**
+     * Application specific actions rendered next to the CSV template buttons.
+     */
+    renderActions?: (context: TabularFormActionsContext) => ReactNode;
+    /** Display the name of the CSV file the table was imported from. */
+    showCsvFileName?: boolean;
+}
+export declare function TabularForm({ dialogMode, dataFetching, renderActions, showCsvFileName, }: Readonly<TabularFormProps>): import("react").JSX.Element;

package/dist/features/network-modifications/tabular/TabularForm.js

@@ -0,0 +1,536 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useFormContext, useWatch } from "react-hook-form";
+import { Stack, Grid, Button, Alert } from "@mui/material";
+import { v4 } from "uuid";
+import "@mui/icons-material";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
+import "../../../utils/conversionUtils.js";
+import { EquipmentType } from "../../../utils/types/equipmentType.js";
+import { hasNonEmptyRows } from "../../../utils/functions.js";
+import { transformIfFrenchNumber } from "../../../utils/langs.js";
+import { useStateBoolean } from "../../../hooks/customStates/useStateBoolean.js";
+import { fetchStudyMetadata } from "../../../services/appsMetadata.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "yup";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import { AutocompleteInput } from "../../../components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.js";
+import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import { InputWithPopupConfirmation } from "../../../components/ui/reactHookForm/selectInputs/InputWithPopupConfirmation.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 { CsvDownloadButton } from "../../../components/ui/csvDownloader/csv-download-button.js";
+import { CsvPicker } from "../../../components/ui/csvPicker/csv-picker.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 "../../../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 { CustomAgGridTable } from "../../../components/composite/agGridTable/CustomAgGridTable.js";
+import { NumericEditor, suppressNonNumericKeyboardEvent } from "../../../components/composite/agGridTable/cellEditors/numericEditor.js";
+import "../../../components/composite/customAGGrid/customAggrid.js";
+import { DefaultCellRenderer } from "../../../components/composite/customAGGrid/cell-renderers.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 { AGGRID_LOCALES } from "../../../translations/not-intl/aggrid-locales.js";
+import { DefineTabularPropertiesDialog } from "./properties/DefineTabularPropertiesDialog.js";
+import { TabularFieldConstants, PROPERTY_CSV_COLUMN_PREFIX, TABULAR_BOOLEAN, TABULAR_ENUM, TABULAR_NUMBER } from "./tabular.constants.js";
+import "../common/properties/propertyUtils.js";
+import "../common/regulatingTerminal/RegulatingTerminalForm.js";
+import "@mui/material/colors";
+import "@mui/x-charts";
+import "../common/currentLimits/limitsPane.utils.js";
+import "./properties/tabularProperty.utils.js";
+import { TABULAR_CREATION_FIELDS } from "./tabularCreation.utils.js";
+import { TABULAR_MODIFICATION_FIELDS } from "./tabularModification.utils.js";
+import { TabularModificationType } from "./tabular.types.js";
+import { isFieldTypeOk, setFieldTypeError, getSelectedTabularPropertyNames, generateCommentLines, sanitizeRowValue } from "./tabular.utils.js";
+function TabularForm({
+  dialogMode,
+  dataFetching = false,
+  renderActions,
+  showCsvFileName = true
+}) {
+  const intl = useIntl();
+  const language = intl.locale;
+  const { snackWarning } = useSnackMessage();
+  const [isFetching, setIsFetching] = useState(dataFetching);
+  const { setValue, clearErrors, setError, getValues } = useFormContext();
+  const tableRef = useRef(null);
+  const propertiesDialogOpen = useStateBoolean(false);
+  const [predefinedEquipmentProperties, setPredefinedEquipmentProperties] = useState(
+    {}
+  );
+  const getTypeLabel = useCallback((type) => intl.formatMessage({ id: type }), [intl]);
+  const equipmentType = useWatch({
+    name: FieldConstants.TYPE
+  });
+  const tabularProperties = useWatch({
+    name: TabularFieldConstants.TABULAR_PROPERTIES
+  });
+  const watchFileName = useWatch({
+    name: TabularFieldConstants.CSV_FILENAME
+  });
+  const csvFields = useMemo(() => {
+    const fields = dialogMode === TabularModificationType.CREATION ? TABULAR_CREATION_FIELDS : TABULAR_MODIFICATION_FIELDS;
+    return fields[equipmentType] ?? [];
+  }, [equipmentType, dialogMode]);
+  const [selectedFile, setSelectedFile] = useState();
+  const [fileErrorMessage, setFileErrorMessage] = useState();
+  const [fileWarningMessage, setFileWarningMessage] = useState();
+  const parseConfig = useMemo(
+    () => ({
+      dynamicTyping: (field) => (
+        // "property_*" (user added property) columns should remain as strings
+        typeof field !== "string" || !field.startsWith(PROPERTY_CSV_COLUMN_PREFIX)
+      ),
+      transform: (value, field) => {
+        if (typeof field === "string" && field.startsWith(PROPERTY_CSV_COLUMN_PREFIX)) {
+          return value;
+        }
+        return transformIfFrenchNumber(value, language);
+      }
+    }),
+    [language]
+  );
+  const handleBooleanValue = useCallback(
+    (key, value, fieldDef) => {
+      if (fieldDef?.type !== TABULAR_BOOLEAN) {
+        return false;
+      }
+      if (fieldDef.required && typeof value !== "boolean") {
+        setFileWarningMessage(
+          intl.formatMessage({ id: "WrongBooleanValueWarning" }, { field: intl.formatMessage({ id: key }) })
+        );
+      }
+      return true;
+    },
+    [intl]
+  );
+  const handleTabularCreationParsingError = useCallback(
+    (results) => {
+      let requiredFieldNameInError = "";
+      let requiredDependantFieldNameInError = "";
+      let dependantFieldNameInError = "";
+      let fieldTypeInError = "";
+      let expectedTypeForFieldInError = "";
+      let expectedValues;
+      if (results.data.flatMap(
+        (result) => Object.entries(result).map(([key, value]) => [
+          result,
+          key,
+          value
+        ])
+      ).some(([result, key, value]) => {
+        const fieldDef = csvFields.find((field) => field.id === key);
+        if (handleBooleanValue(key, value, fieldDef)) {
+          return false;
+        }
+        if (fieldDef !== void 0 && fieldDef.required && (value === void 0 || value === null)) {
+          requiredFieldNameInError = key;
+          return true;
+        }
+        if (fieldDef?.requiredIf) {
+          const dependentValue = result[fieldDef.requiredIf.id];
+          if (dependentValue !== void 0 && dependentValue !== null && (value === void 0 || value === null)) {
+            dependantFieldNameInError = key;
+            requiredDependantFieldNameInError = fieldDef.requiredIf.id;
+            return true;
+          }
+        }
+        if (!isFieldTypeOk(value, fieldDef)) {
+          fieldTypeInError = key;
+          expectedTypeForFieldInError = fieldDef?.type ?? "";
+          expectedValues = fieldDef?.options;
+          return true;
+        }
+        return false;
+      })) {
+        if (requiredFieldNameInError !== "") {
+          setError(TabularFieldConstants.MODIFICATIONS_TABLE, {
+            type: "custom",
+            message: intl.formatMessage(
+              { id: "FieldRequired" },
+              { requiredFieldNameInError: intl.formatMessage({ id: requiredFieldNameInError }) }
+            )
+          });
+        } else if (dependantFieldNameInError !== "" && requiredDependantFieldNameInError !== "") {
+          setError(TabularFieldConstants.MODIFICATIONS_TABLE, {
+            type: "custom",
+            message: intl.formatMessage(
+              { id: "DependantFieldMissing" },
+              {
+                requiredField: intl.formatMessage({ id: dependantFieldNameInError }),
+                dependantField: intl.formatMessage({ id: requiredDependantFieldNameInError })
+              }
+            )
+          });
+        } else if (fieldTypeInError !== "") {
+          setFieldTypeError(
+            intl.formatMessage({ id: fieldTypeInError }),
+            expectedTypeForFieldInError,
+            TabularFieldConstants.MODIFICATIONS_TABLE,
+            setError,
+            intl,
+            expectedValues
+          );
+        }
+      }
+      if (equipmentType === EquipmentType.SHUNT_COMPENSATOR && results.data.some(
+        (creation) => creation.maxSusceptance != null && (creation.shuntCompensatorType || creation.maxQAtNominalV != null)
+      )) {
+        snackWarning({
+          messageId: "TabularCreationShuntWarning"
+        });
+      }
+    },
+    [csvFields, equipmentType, handleBooleanValue, intl, setError, snackWarning]
+  );
+  const handleTabularModificationParsingError = useCallback(
+    (results) => {
+      let fieldTypeInError = "";
+      let expectedTypeForFieldInError = "";
+      let expectedValues;
+      if (results.data.flatMap(Object.entries).some(([key, value]) => {
+        const fieldDef = csvFields.find((field) => field.id === key);
+        if (handleBooleanValue(key, value, fieldDef)) {
+          return false;
+        }
+        if (!isFieldTypeOk(value, fieldDef)) {
+          fieldTypeInError = key;
+          expectedTypeForFieldInError = fieldDef?.type ?? "";
+          expectedValues = fieldDef?.options;
+          return true;
+        }
+        return false;
+      })) {
+        setFieldTypeError(
+          intl.formatMessage({ id: fieldTypeInError }),
+          expectedTypeForFieldInError,
+          TabularFieldConstants.MODIFICATIONS_TABLE,
+          setError,
+          intl,
+          expectedValues
+        );
+      }
+      if (equipmentType === EquipmentType.SHUNT_COMPENSATOR && results.data.some(
+        (modification) => modification.maxSusceptance != null && (modification.shuntCompensatorType || modification.maxQAtNominalV != null)
+      )) {
+        snackWarning({ messageId: "TabularModificationShuntWarning" });
+      }
+    },
+    [equipmentType, csvFields, handleBooleanValue, setError, intl, snackWarning]
+  );
+  const selectedProperties = useMemo(
+    () => getSelectedTabularPropertyNames(tabularProperties),
+    [tabularProperties]
+  );
+  const csvColumns = useMemo(() => {
+    return csvFields.map((field) => field.id).concat(selectedProperties.map((propertyName) => PROPERTY_CSV_COLUMN_PREFIX + propertyName));
+  }, [csvFields, selectedProperties]);
+  const requiredColumns = useMemo(
+    () => csvFields.filter((field) => field.required).map((field) => field.id),
+    [csvFields]
+  );
+  const commentLines = useMemo(() => {
+    return generateCommentLines({
+      fields: csvFields,
+      selectedProperties,
+      intl,
+      equipmentType,
+      language,
+      formType: dialogMode,
+      predefinedEquipmentProperties
+    });
+  }, [csvFields, selectedProperties, intl, equipmentType, language, dialogMode, predefinedEquipmentProperties]);
+  const getTemplateData = useCallback(() => [csvColumns, ...commentLines], [csvColumns, commentLines]);
+  const getTableData = useCallback(() => {
+    const rows = getValues(TabularFieldConstants.MODIFICATIONS_TABLE) ?? [];
+    return [...getTemplateData(), ...rows.map((row) => csvColumns.map((col) => row[col] ?? ""))];
+  }, [csvColumns, getValues, getTemplateData]);
+  const csvProps = useMemo(
+    () => ({
+      fileName: `${equipmentType}${dialogMode === TabularModificationType.CREATION ? "_creation" : "_modification"}_template`,
+      language,
+      getTableData
+    }),
+    [equipmentType, dialogMode, language, getTableData]
+  );
+  const getDataFromCsvFile = useCallback(
+    (results, file) => {
+      clearErrors(TabularFieldConstants.MODIFICATIONS_TABLE);
+      setFileWarningMessage(void 0);
+      if (dialogMode === TabularModificationType.CREATION) {
+        handleTabularCreationParsingError(results);
+      } else {
+        handleTabularModificationParsingError(results);
+      }
+      setValue(TabularFieldConstants.CSV_FILENAME, file.name);
+      return results.data.map((row) => {
+        const sanitizedRow = {
+          [FieldConstants.AG_GRID_ROW_UUID]: v4()
+        };
+        Object.entries(row).forEach(([key, value]) => {
+          sanitizedRow[key] = sanitizeRowValue(
+            value,
+            csvFields.find((field) => field.id === key)
+          );
+        });
+        return sanitizedRow;
+      });
+    },
+    [
+      clearErrors,
+      csvFields,
+      dialogMode,
+      handleTabularCreationParsingError,
+      handleTabularModificationParsingError,
+      setValue
+    ]
+  );
+  useEffect(() => {
+    fetchStudyMetadata().then((studyMetadata) => {
+      setPredefinedEquipmentProperties(studyMetadata?.predefinedEquipmentProperties ?? {});
+    });
+  }, []);
+  useEffect(() => {
+    if (!showCsvFileName) {
+      return;
+    }
+    setSelectedFile(watchFileName ? new File([], watchFileName) : void 0);
+  }, [watchFileName, showCsvFileName]);
+  useEffect(() => {
+    setIsFetching(dataFetching);
+  }, [dataFetching]);
+  const typesOptions = useMemo(() => {
+    return Object.keys(
+      dialogMode === TabularModificationType.CREATION ? TABULAR_CREATION_FIELDS : TABULAR_MODIFICATION_FIELDS
+    );
+  }, [dialogMode]);
+  const resetOnTypeChange = useCallback(() => {
+    setValue(TabularFieldConstants.CSV_FILENAME, void 0);
+    setValue(TabularFieldConstants.TABULAR_PROPERTIES, []);
+    setSelectedFile(void 0);
+    setFileErrorMessage(void 0);
+    setFileWarningMessage(void 0);
+    clearErrors(TabularFieldConstants.MODIFICATIONS_TABLE);
+    tableRef.current?.replace([]);
+  }, [clearErrors, setValue]);
+  const equipmentTypeField = /* @__PURE__ */ jsx(
+    InputWithPopupConfirmation,
+    {
+      Input: AutocompleteInput,
+      name: FieldConstants.TYPE,
+      label: "Type",
+      options: typesOptions,
+      getOptionLabel: (option) => getTypeLabel(option),
+      size: "small",
+      formProps: { variant: "outlined" },
+      shouldOpenPopup: () => hasNonEmptyRows(getValues(TabularFieldConstants.MODIFICATIONS_TABLE)),
+      onValueChange: resetOnTypeChange,
+      message: "changeTypeMessage",
+      validateButtonLabel: "button.changeType"
+    }
+  );
+  const defaultColDef = useMemo(
+    () => ({
+      sortable: true,
+      resizable: false,
+      lockPinned: true,
+      wrapHeaderText: true,
+      autoHeaderHeight: true,
+      cellRenderer: DefaultCellRenderer
+    }),
+    []
+  );
+  const columnDefs = useMemo(() => {
+    return csvFields.map((field) => {
+      const columnDef = {
+        field: field.id,
+        headerName: intl.formatMessage({ id: field.id }) + (field.required ? " (*)" : ""),
+        editable: true,
+        singleClickEdit: true
+      };
+      if (field.id === TabularFieldConstants.EQUIPMENT_ID) {
+        columnDef.pinned = true;
+      }
+      switch (field.type) {
+        case TABULAR_BOOLEAN:
+          columnDef.cellDataType = TABULAR_BOOLEAN;
+          break;
+        case TABULAR_NUMBER:
+          columnDef.cellDataType = TABULAR_NUMBER;
+          columnDef.cellEditor = NumericEditor;
+          columnDef.cellEditorParams = { allowNegativeValues: true };
+          columnDef.suppressKeyboardEvent = suppressNonNumericKeyboardEvent;
+          break;
+        case TABULAR_ENUM:
+          columnDef.cellDataType = "text";
+          columnDef.cellEditor = "agSelectCellEditor";
+          columnDef.cellEditorParams = { values: [null, ...field.options ?? []] };
+          break;
+      }
+      return columnDef;
+    }).concat(
+      selectedProperties.map((propertyName) => ({
+        field: PROPERTY_CSV_COLUMN_PREFIX + propertyName,
+        headerName: propertyName,
+        // property values are always kept as strings (see parseConfig)
+        cellDataType: "text",
+        editable: true,
+        singleClickEdit: true
+      }))
+    );
+  }, [csvFields, selectedProperties, intl]);
+  const makeDefaultRowData = useCallback(() => {
+    const row = { [FieldConstants.AG_GRID_ROW_UUID]: v4() };
+    csvFields.forEach((field) => {
+      row[field.id] = null;
+    });
+    selectedProperties.forEach((propertyName) => {
+      row[PROPERTY_CSV_COLUMN_PREFIX + propertyName] = null;
+    });
+    return row;
+  }, [csvFields, selectedProperties]);
+  const onPropertiesChange = (formData) => {
+    const newSelectedProperties = getSelectedTabularPropertyNames(
+      formData[TabularFieldConstants.TABULAR_PROPERTIES]
+    );
+    if (newSelectedProperties.toString() !== selectedProperties.toString()) {
+      clearErrors(TabularFieldConstants.MODIFICATIONS_TABLE);
+      const removedPropertyColumns = selectedProperties.filter((name) => !newSelectedProperties.includes(name)).map((name) => PROPERTY_CSV_COLUMN_PREFIX + name);
+      const addedPropertyColumns = newSelectedProperties.filter((name) => !selectedProperties.includes(name)).map((name) => PROPERTY_CSV_COLUMN_PREFIX + name);
+      const currentRows = getValues(TabularFieldConstants.MODIFICATIONS_TABLE) ?? [];
+      const updatedRows = currentRows.map((row) => {
+        const newRow = { ...row };
+        removedPropertyColumns.forEach((col) => {
+          delete newRow[col];
+        });
+        addedPropertyColumns.forEach((col) => {
+          newRow[col] = null;
+        });
+        return newRow;
+      });
+      tableRef.current?.replace(updatedRows);
+    }
+    setValue(TabularFieldConstants.TABULAR_PROPERTIES, formData[TabularFieldConstants.TABULAR_PROPERTIES], {
+      shouldDirty: true
+    });
+  };
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, paddingTop: 1, sx: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid, { sx: { width: 400, maxWidth: "100%" }, children: equipmentTypeField }),
+    equipmentType && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              onClick: () => {
+                propertiesDialogOpen.setTrue();
+              },
+              children: /* @__PURE__ */ jsx(FormattedMessage, { id: "DefinePropertiesButton" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+            CsvDownloadButton,
+            {
+              data: getTemplateData,
+              fileName: csvProps.fileName,
+              language,
+              labelId: "GenerateCSV",
+              variant: "contained"
+            }
+          ) }),
+          renderActions?.({
+            dialogMode,
+            equipmentType,
+            csvColumns,
+            commentLines,
+            predefinedEquipmentProperties
+          })
+        ] }),
+        /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+          CsvPicker,
+          {
+            label: "UploadCSV",
+            requiredColumns,
+            language,
+            parseConfig,
+            selectedFile: showCsvFileName ? selectedFile : void 0,
+            onFileChange: setSelectedFile,
+            onFileError: setFileErrorMessage,
+            getTableData: () => getValues(TabularFieldConstants.MODIFICATIONS_TABLE),
+            onReplace: (results, file) => tableRef.current?.replace(getDataFromCsvFile(results, file)),
+            onAppend: (results, file) => tableRef.current?.append(getDataFromCsvFile(results, file))
+          }
+        ) })
+      ] }),
+      fileErrorMessage && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: fileErrorMessage }) }),
+      fileWarningMessage && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Alert, { severity: "warning", children: fileWarningMessage }) }),
+      /* @__PURE__ */ jsx(Grid, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+        CustomAgGridTable,
+        {
+          ref: tableRef,
+          name: TabularFieldConstants.MODIFICATIONS_TABLE,
+          columnDefs,
+          defaultColDef,
+          makeDefaultRowData,
+          loading: isFetching,
+          pagination: true,
+          rowSelection: {
+            mode: "multiRow"
+          },
+          overrideLocales: AGGRID_LOCALES,
+          csvProps
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DefineTabularPropertiesDialog,
+      {
+        open: propertiesDialogOpen,
+        equipmentType,
+        currentProperties: tabularProperties,
+        predefinedEquipmentProperties,
+        onValidate: onPropertiesChange
+      }
+    )
+  ] });
+}
+export {
+  TabularForm
+};

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

@@ -0,0 +1,7 @@
+export * from './properties';
+export * from './tabular.constants';
+export * from './tabular.types';
+export * from './tabular.utils';
+export * from './tabularCreation.utils';
+export * from './tabularModification.utils';
+export * from './TabularForm';