@gridsuite/commons-ui 0.193.0 → 0.195.0

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
+import { useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { DensityLarge } from "@mui/icons-material";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useIntl } from "react-intl";
@@ -8,14 +8,13 @@ import "../../../../../utils/conversionUtils.js";
 import { ElementType } from "../../../../../utils/types/elementType.js";
 import "../../../../../utils/types/equipmentType.js";
 import { FieldType } from "../../../../../utils/types/fieldType.js";
-import { areIdsEqual, getIdOrValue } from "../../../../../utils/ts-utils.js";
+import { getIdOrValue, areIdsEqual } from "../../../../../utils/ts-utils.js";
 import "../../../../../utils/yupConfig.js";
 import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { usePredefinedProperties } from "../../../../../hooks/usePredefinedProperties.js";
-import { usePrevious } from "../../../../../hooks/usePrevious.js";
 import "notistack";
 import { useFormatLabelWithUnit } from "../../../../../hooks/useFormatLabelWithUnit.js";
 import "../../../../overflowableText/OverflowableText.js";
@@ -49,6 +48,7 @@ import "react-querybuilder";
 import { DataType } from "./assignment.type.js";
 import GridItem from "../../../../grid/grid-item.js";
 import { EQUIPMENTS_FIELDS } from "./assignment-constants.js";
+import { EMPTY_FIELD_VALUE } from "./assignment-utils.js";
 const comparatorStrIgnoreCase = (str1, str2) => {
   return str1?.toLowerCase()?.localeCompare(str2?.toLowerCase());
 };
@@ -94,24 +94,31 @@ function AssignmentForm(props) {
   const options = useMemo(() => {
     return equipmentFields?.find((fieldOption) => fieldOption?.id === watchEditedField)?.values ?? [];
   }, [watchEditedField, equipmentFields]);
-  const prevDataType = usePrevious(dataType);
-  if (prevDataType && prevDataType !== dataType) {
-    setValue(`${name}.${index}.${FieldConstants.VALUE}`, dataType === DataType.BOOLEAN ? false : null);
-  }
-  const emptyValueStr = useMemo(() => {
+  const emptyFieldLabel = useMemo(() => {
     return intl.formatMessage({ id: "EmptyField" });
   }, [intl]);
   const formatLabelWithUnit = useFormatLabelWithUnit();
+  const prevEditedField = useRef(watchEditedField);
+  const [editedFieldKey, setEditedFieldKey] = useState(watchEditedField);
+  useEffect(() => {
+    if (prevEditedField.current !== watchEditedField) {
+      prevEditedField.current = watchEditedField;
+      setValue(`${name}.${index}.${FieldConstants.VALUE}`, dataType === DataType.BOOLEAN ? false : null);
+      setValue(`${name}.${index}.${FieldConstants.PROPERTY_NAME}`, null);
+      setEditedFieldKey(watchEditedField);
+    }
+  }, [dataType, index, name, setValue, watchEditedField]);
   const renderAutoCompleteSettableToNone = useCallback(
     (numberOnly) => /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: `${name}.${index}.${FieldConstants.VALUE}`,
         label: "ValueOrEmptyField",
-        options: [emptyValueStr],
+        options: [emptyFieldLabel],
         size: "small",
         onCheckNewValue: numberOnly ? (option) => {
-          if (option && option !== emptyValueStr && Number.isNaN(Number(option))) {
+          const optionValue = getIdOrValue(option);
+          if (optionValue && optionValue !== emptyFieldLabel && optionValue !== EMPTY_FIELD_VALUE && Number.isNaN(Number(optionValue))) {
             setError(`${name}.${index}.${FieldConstants.VALUE}`, {
               message: "NumericValueOrEmptyField"
             });
@@ -123,10 +130,19 @@ function AssignmentForm(props) {
           return true;
         } : void 0,
         getOptionLabel: (option) => typeof option !== "string" ? option?.label ?? option : option,
+        inputTransform: (value) => value === EMPTY_FIELD_VALUE ? emptyFieldLabel : value,
+        outputTransform: (value) => {
+          const optionValue = getIdOrValue(value);
+          if (optionValue === emptyFieldLabel) {
+            return EMPTY_FIELD_VALUE;
+          }
+          return optionValue ?? null;
+        },
         allowNewValue: true
-      }
+      },
+      editedFieldKey
     ),
-    [emptyValueStr, index, name, setError]
+    [emptyFieldLabel, index, name, setError, editedFieldKey]
   );
   const filtersField = /* @__PURE__ */ jsx(
     DirectoryItemsInput,
@@ -162,47 +178,50 @@ function AssignmentForm(props) {
       allowNewValue: true
     }
   );
-  const valueField = useMemo(() => {
-    if (dataType === DataType.PROPERTY) {
-      return /* @__PURE__ */ jsx(
-        AutocompleteInput,
-        {
-          name: `${name}.${index}.${FieldConstants.VALUE}`,
-          label: "PropertyValue",
-          options: predefinedPropertiesValues,
-          size: "small",
-          allowNewValue: true
-        }
-      );
-    }
-    if (dataType === DataType.INTEGER) {
-      return /* @__PURE__ */ jsx(IntegerInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" });
-    }
-    if (dataType === DataType.BOOLEAN) {
-      return /* @__PURE__ */ jsx(SwitchInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, formProps: { value: false } });
-    }
-    if (dataType === DataType.ENUM) {
-      return /* @__PURE__ */ jsx(
-        SelectInput,
-        {
-          name: `${name}.${index}.${FieldConstants.VALUE}`,
-          label: "Value",
-          options,
-          size: "small"
-        }
-      );
-    }
-    if (dataType === DataType.STRING && settableToNone) {
-      return renderAutoCompleteSettableToNone();
-    }
-    if (dataType === DataType.STRING) {
-      return /* @__PURE__ */ jsx(TextInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value", clearable: true });
-    }
-    if (dataType === DataType.DOUBLE && settableToNone) {
-      return renderAutoCompleteSettableToNone(true);
-    }
-    return /* @__PURE__ */ jsx(FloatInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" });
-  }, [dataType, settableToNone, name, index, predefinedPropertiesValues, options, renderAutoCompleteSettableToNone]);
+  let valueField;
+  if (dataType === DataType.PROPERTY) {
+    valueField = /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        label: "PropertyValue",
+        options: predefinedPropertiesValues,
+        size: "small",
+        allowNewValue: true
+      },
+      editedFieldKey
+    );
+  } else if (dataType === DataType.INTEGER) {
+    valueField = /* @__PURE__ */ jsx(IntegerInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" }, editedFieldKey);
+  } else if (dataType === DataType.BOOLEAN) {
+    valueField = /* @__PURE__ */ jsx(
+      SwitchInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        formProps: { value: false }
+      },
+      editedFieldKey
+    );
+  } else if (dataType === DataType.ENUM) {
+    valueField = /* @__PURE__ */ jsx(
+      SelectInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        label: "Value",
+        options,
+        size: "small"
+      },
+      editedFieldKey
+    );
+  } else if (dataType === DataType.STRING && settableToNone) {
+    valueField = renderAutoCompleteSettableToNone();
+  } else if (dataType === DataType.STRING) {
+    valueField = /* @__PURE__ */ jsx(TextInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value", clearable: true }, editedFieldKey);
+  } else if (dataType === DataType.DOUBLE && settableToNone) {
+    valueField = renderAutoCompleteSettableToNone(true);
+  } else {
+    valueField = /* @__PURE__ */ jsx(FloatInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" }, editedFieldKey);
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridItem, { size: 3.25, children: filtersField }),
     /* @__PURE__ */ jsx(GridItem, { size: 3, children: editedField }),

package/dist/components/network-modifications/by-filter/assignment/assignment/assignment-utils.d.ts

@@ -1,5 +1,6 @@
 import { yupConfig as yup } from '../../../../../utils';
 import { Assignment, DataType, FieldOptionType, FieldValue } from './assignment.type';
+export declare const EMPTY_FIELD_VALUE = "\u2014";
 export declare const getFieldOption: (fieldName?: string | null) => FieldOptionType | undefined;
 export declare const getDataType: (fieldName?: string | null) => DataType | undefined;
 export declare const getUnsettable: (fieldName?: string | null) => boolean | undefined;

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

@@ -1,4 +1,5 @@
 import { FieldConstants } from "../../../../../utils/constants/fieldConstants.js";
+import { YUP_REQUIRED } from "../../../../../utils/constants/translationKeys.js";
 import "../../../../../utils/conversionUtils.js";
 import "../../../../../utils/types/equipmentType.js";
 import "react/jsx-runtime";
@@ -7,6 +8,7 @@ import "../../../../../utils/yupConfig.js";
 import { DataType } from "./assignment.type.js";
 import { FIELD_OPTIONS } from "./assignment-constants.js";
 import * as yup from "yup";
+const EMPTY_FIELD_VALUE = "—";
 const getFieldOption = (fieldName) => {
   return Object.values(FIELD_OPTIONS).find((fieldOption) => fieldOption.id === fieldName);
 };
@@ -40,7 +42,7 @@ function getValueSchema(emptyValueStr, dataType, settable_to_none) {
     default:
       schema = yup.number();
   }
-  return schema.required();
+  return schema.required(YUP_REQUIRED);
 }
 const getAssignmentInitialValue = () => ({
   [FieldConstants.FILTERS]: [],
@@ -56,12 +58,12 @@ function getAssignmentsSchema(emptyValueStr) {
           [FieldConstants.ID]: yup.string().required(),
           [FieldConstants.NAME]: yup.string().required()
         })
-      ).required().min(1, "YupRequired"),
-      [FieldConstants.EDITED_FIELD]: yup.string().required(),
+      ).required().min(1, YUP_REQUIRED),
+      [FieldConstants.EDITED_FIELD]: yup.string().required(YUP_REQUIRED),
       [FieldConstants.PROPERTY_NAME]: yup.string().when([FieldConstants.EDITED_FIELD], ([editedField], schema) => {
         const dataType = getDataType(editedField);
         if (dataType === DataType.PROPERTY) {
-          return schema.required();
+          return schema.required(YUP_REQUIRED);
         }
         return schema.nullable();
       }),
@@ -69,7 +71,7 @@ function getAssignmentsSchema(emptyValueStr) {
         const dataType = getDataType(editedField);
         const unsettable = getUnsettable(editedField);
         return getValueSchema(emptyValueStr, dataType, unsettable);
-      }).required()
+      }).required(YUP_REQUIRED)
     })
   ).required();
 }
@@ -80,6 +82,7 @@ function getAssignmentFromEditData(assignment) {
   };
 }
 export {
+  EMPTY_FIELD_VALUE,
   getAssignmentFromEditData,
   getAssignmentInitialValue,
   getAssignmentsSchema,

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

@@ -8,12 +8,11 @@ import { FieldType } from "../../../../utils/types/fieldType.js";
 import "react/jsx-runtime";
 import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
-import { getAssignmentsSchema, getAssignmentInitialValue, getAssignmentFromEditData, getDataType } from "./assignment/assignment-utils.js";
+import { getAssignmentsSchema, getAssignmentInitialValue, getAssignmentFromEditData, getUnsettable, EMPTY_FIELD_VALUE, getDataType } from "./assignment/assignment-utils.js";
 import { DataType } from "./assignment/assignment.type.js";
-const emptyValueStr = "—";
 const modificationByAssignmentFormSchema = yup.object().shape({
   [FieldConstants.EQUIPMENT_TYPE]: mixed().oneOf(Object.values(EquipmentType)).required(),
-  [FieldConstants.ASSIGNMENTS]: getAssignmentsSchema(emptyValueStr)
+  [FieldConstants.ASSIGNMENTS]: getAssignmentsSchema(EMPTY_FIELD_VALUE)
 }).required();
 const emptyModificationByAssignmentFormData = {
   [FieldConstants.EQUIPMENT_TYPE]: null,
@@ -27,9 +26,10 @@ const modificationByAssignmentDtoToForm = (dto) => ({
     const field = FieldType[fieldKey];
     const { value } = assignment;
     const valueConverted = convertInputValue(field, value);
+    const unsettable = getUnsettable(assignment.editedField);
     return {
       ...assignment,
-      value: valueConverted !== 0 && !valueConverted ? emptyValueStr : valueConverted
+      value: unsettable && valueConverted !== 0 && !valueConverted ? EMPTY_FIELD_VALUE : valueConverted
     };
   }) ?? [getAssignmentInitialValue()]
 });
@@ -39,7 +39,7 @@ const modificationByAssignmentFormToDto = (formData) => ({
   assignmentInfosList: formData.assignments.map((assignment) => {
     const fieldKey = assignment.editedField;
     const field = FieldType[fieldKey];
-    const value = assignment.value === emptyValueStr ? "" : assignment.value;
+    const value = assignment.value === EMPTY_FIELD_VALUE ? "" : assignment.value;
     return {
       ...assignment,
       dataType: getDataType(assignment.editedField) ?? DataType.STRING,

package/dist/components/parameters/common/contingency-table/columns-definitions.d.ts

@@ -1,8 +1,8 @@
-import { Parameters, ColumnsDef } from '../parameter-table';
+import { FieldValues } from 'react-hook-form';
 import { default as yup } from '../../../../utils/yupConfig';
 import { ContingencyListsInfos } from './types';
-export declare const COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS: ColumnsDef[];
-export declare const ParamContingencyLists: Parameters;
+import { DndColumn } from '../../../dnd-table-v2';
+export declare const COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS: DndColumn[];
 export declare const getContingencyListsInfosFormSchema: () => yup.ObjectSchema<{
     contingencyListsInfos: {
         description?: string | undefined;
@@ -25,3 +25,4 @@ export declare const toFormValuesContingencyListsInfos: (contingencyListsInfos:
         activated: boolean;
     }[];
 };
+export declare const isValidContingencyRow: (row?: FieldValues) => boolean;

package/dist/components/parameters/common/contingency-table/columns-definitions.js

@@ -1,10 +1,14 @@
-import { DESCRIPTION, ACTIVATED, NAME, ID } from "../parameter-table/constants.js";
+import { CONTINGENCY_LISTS, CONTINGENCY_LISTS_INFOS } from "../constants.js";
+import { DESCRIPTION, ACTIVATED, NAME, ID } from "../parameter-table-field/constants.js";
 import "react/jsx-runtime";
 import "@mui/material";
-import "@mui/icons-material";
-import "react";
 import "react-intl";
 import "react-hook-form";
+import "@mui/icons-material";
+import "react";
+import "react-dom";
+import "@hello-pangea/dnd";
+import { DndColumnType } from "../../../dnd-table-v2/dnd-table.type.js";
 import "../../../overflowableText/OverflowableText.js";
 import "../../../../utils/conversionUtils.js";
 import { ElementType } from "../../../../utils/types/elementType.js";
@@ -35,38 +39,38 @@ import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "uuid";
 import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
-import { CONTINGENCY_LISTS, CONTINGENCY_LISTS_INFOS } from "../constants.js";
 const COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS = [
   {
     label: "ContingencyLists",
     dataKey: CONTINGENCY_LISTS,
     initialValue: [],
     editable: true,
-    directoryItems: true,
+    type: DndColumnType.DIRECTORY_ITEMS,
+    equipmentTypes: [],
     elementType: ElementType.CONTINGENCY_LIST,
-    titleId: "ContingencyListsSelection"
+    titleId: "ContingencyListsSelection",
+    shouldHandleOnChangeCell: true
   },
   {
     label: "description",
+    sxHeader: { textAlign: "center" },
     dataKey: DESCRIPTION,
     initialValue: "",
     editable: true,
-    descriptionItems: true,
-    width: "8rem"
+    width: "8rem",
+    type: DndColumnType.DESCRIPTIONS
   },
   {
     label: "Active",
+    sxHeader: { textAlign: "center" },
     dataKey: ACTIVATED,
     initialValue: true,
-    checkboxItems: true,
     editable: true,
-    width: "4rem"
+    width: "4rem",
+    type: DndColumnType.SWITCH,
+    shouldHandleOnChangeCell: true
   }
 ];
-const ParamContingencyLists = {
-  columnsDef: COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS,
-  name: CONTINGENCY_LISTS_INFOS
-};
 const getContingencyListsInfosFormSchema = () => {
   return yup.object().shape({
     [CONTINGENCY_LISTS_INFOS]: yup.array().of(
@@ -95,9 +99,13 @@ const toFormValuesContingencyListsInfos = (contingencyListsInfos) => {
     }))
   };
 };
+const isValidContingencyRow = (row) => {
+  const contingencyLists = row?.[CONTINGENCY_LISTS];
+  return row?.[ACTIVATED] === true && Array.isArray(contingencyLists) && contingencyLists.length > 0;
+};
 export {
   COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS,
-  ParamContingencyLists,
   getContingencyListsInfosFormSchema,
+  isValidContingencyRow,
   toFormValuesContingencyListsInfos
 };

package/dist/components/parameters/common/contingency-table/contingency-table.d.ts

@@ -1,6 +1,7 @@
 import { UUID } from 'node:crypto';
 import { ContingencyCount } from './types';
-export declare function ContingencyTable({ showContingencyCount, fetchContingencyCount, isBuiltCurrentNode, }: Readonly<{
+export declare function ContingencyTable({ name, showContingencyCount, fetchContingencyCount, isBuiltCurrentNode, }: Readonly<{
+    name: string;
     showContingencyCount: boolean;
     fetchContingencyCount?: (contingencyLists: UUID[] | null, abortSignal: AbortSignal) => Promise<ContingencyCount>;
     isBuiltCurrentNode?: boolean;

package/dist/components/parameters/common/contingency-table/contingency-table.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Alert, CircularProgress } from "@mui/material";
-import { useState, useCallback, useEffect } from "react";
+import { Grid, Alert, CircularProgress } from "@mui/material";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { useWatch } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import "../../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../../utils/error.js";
 import "../../../../utils/types/equipmentType.js";
@@ -13,40 +13,44 @@ import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../../hooks/useSnackMessage.js";
-import { useCreateRowData } from "../../../../hooks/use-create-row-data.js";
-import { ACTIVATED, ID } from "../parameter-table/constants.js";
-import { ParameterTable } from "../parameter-table/parameter-table.js";
-import { CONTINGENCY_LISTS_INFOS, CONTINGENCY_LISTS } from "../constants.js";
-import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, ParamContingencyLists } from "./columns-definitions.js";
+import { ACTIVATED, ID } from "../parameter-table-field/constants.js";
+import { ParameterTableField } from "../parameter-table-field/parameter-table-field.js";
+import { CONTINGENCY_LISTS } from "../constants.js";
+import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, isValidContingencyRow } from "./columns-definitions.js";
+const styles = {
+  alert: { color: "text.primary", paddingTop: 0, paddingBottom: 0 }
+};
 function ContingencyTable({
+  name,
   showContingencyCount = false,
   fetchContingencyCount,
   isBuiltCurrentNode
 }) {
   const intl = useIntl();
   const [simulatedContingencyCount, setSimulatedContingencyCount] = useState(null);
-  const [rowData, useFieldArrayOutput] = useCreateRowData(ParamContingencyLists);
-  const contingencyListsInfos = useWatch({ name: CONTINGENCY_LISTS_INFOS });
   const [isLoading, setIsLoading] = useState(false);
+  const [contingencyCountRefreshTrigger, setContingencyCountRefreshTrigger] = useState(0);
   const { snackError } = useSnackMessage();
-  const getColumnsDefinition = useCallback(
-    (columns) => {
-      if (columns) {
-        return columns.map((column) => ({
-          ...column,
-          label: intl.formatMessage({ id: column.label })
-        }));
-      }
-      return [];
-    },
-    [intl]
-  );
+  const { getValues } = useFormContext();
+  const handleOnChange = useCallback(() => {
+    setContingencyCountRefreshTrigger((prevValue) => prevValue + 1);
+  }, []);
+  const columnsDefinition = useMemo(() => {
+    return COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS.map(
+      (colDef) => ({
+        ...colDef,
+        label: intl.formatMessage({ id: colDef.label })
+      })
+    );
+  }, [intl]);
   useEffect(() => {
     if (!showContingencyCount || !isBuiltCurrentNode) {
       setIsLoading(false);
+      setSimulatedContingencyCount(null);
       return () => {
       };
     }
+    const contingencyListsInfos = getValues(name);
     const hasNoContingencies = !contingencyListsInfos || (contingencyListsInfos.length ?? 0) === 0 || contingencyListsInfos.every(
       (contingencyList) => !contingencyList[ACTIVATED] || (contingencyList[CONTINGENCY_LISTS]?.length ?? 0) === 0
     );
@@ -80,26 +84,26 @@ function ContingencyTable({
       controller?.abort(new Error(IGNORE_SIGNAL));
       clearTimeout(loadingTimeoutId);
     };
-  }, [snackError, contingencyListsInfos, fetchContingencyCount, showContingencyCount, isBuiltCurrentNode]);
+  }, [
+    snackError,
+    getValues,
+    fetchContingencyCount,
+    showContingencyCount,
+    isBuiltCurrentNode,
+    name,
+    contingencyCountRefreshTrigger
+  ]);
   const renderContingencyCount = () => {
     if (!isBuiltCurrentNode) {
-      return /* @__PURE__ */ jsx(Alert, { variant: "standard", severity: "warning", sx: { color: "text.primary" }, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "contingencyCountImpossibleOnUnbuiltNode" }) });
+      return /* @__PURE__ */ jsx(Alert, { variant: "standard", severity: "warning", sx: styles.alert, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "contingencyCountImpossibleOnUnbuiltNode" }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx(
-        Alert,
-        {
-          variant: "standard",
-          icon: /* @__PURE__ */ jsx(CircularProgress, { size: 22 }),
-          severity: "info",
-          sx: { color: "text.primary" }
-        }
-      );
+      return /* @__PURE__ */ jsx(Alert, { variant: "standard", icon: /* @__PURE__ */ jsx(CircularProgress, { size: 22 }), severity: "info", sx: styles.alert });
     }
     if (simulatedContingencyCount?.contingencies === 0 && simulatedContingencyCount.notFoundElements === 0) {
-      return /* @__PURE__ */ jsx(Alert, { variant: "standard", severity: "error", sx: { color: "text.primary" }, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "noContingency" }) });
+      return /* @__PURE__ */ jsx(Alert, { variant: "standard", severity: "error", sx: styles.alert, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "noContingency" }) });
     }
-    return /* @__PURE__ */ jsx(Alert, { variant: "standard", icon: false, severity: "info", sx: { color: "text.primary" }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Alert, { variant: "standard", icon: false, severity: "info", sx: styles.alert, children: /* @__PURE__ */ jsx(
       FormattedMessage,
       {
         id: "xContingenciesWillBeSimulatedAndYNotFound",
@@ -110,18 +114,15 @@ function ContingencyTable({
       }
     ) });
   };
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 0, sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", children: [
     /* @__PURE__ */ jsx(
-      ParameterTable,
+      ParameterTableField,
       {
-        arrayFormName: CONTINGENCY_LISTS_INFOS,
-        useFieldArrayOutput,
-        columnsDefinition: getColumnsDefinition(COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS),
+        name,
+        columnsDefinition,
         tableHeight: 270,
-        createRows: rowData,
-        onFormChanged: () => {
-        },
-        isValidParameterRow: (row) => row[CONTINGENCY_LISTS]?.length > 0
+        onChange: handleOnChange,
+        isValidRow: isValidContingencyRow
       }
     ),
     showContingencyCount && renderContingencyCount()

package/dist/components/parameters/common/contingency-table/index.js

@@ -1,9 +1,9 @@
 import { ContingencyTable } from "./contingency-table.js";
-import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, ParamContingencyLists, getContingencyListsInfosFormSchema, toFormValuesContingencyListsInfos } from "./columns-definitions.js";
+import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, getContingencyListsInfosFormSchema, isValidContingencyRow, toFormValuesContingencyListsInfos } from "./columns-definitions.js";
 export {
   COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS,
   ContingencyTable,
-  ParamContingencyLists,
   getContingencyListsInfosFormSchema,
+  isValidContingencyRow,
   toFormValuesContingencyListsInfos
 };

package/dist/components/parameters/common/index.js

@@ -17,7 +17,7 @@ import { LimitReductionsTableForm } from "./limitreductions/limit-reductions-tab
 import { LimitReductionTableRow } from "./limitreductions/limit-reduction-table-row.js";
 import { LimitReductionTableCell } from "./limitreductions/limit-reduction-table-cell.js";
 import { ContingencyTable } from "./contingency-table/contingency-table.js";
-import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, ParamContingencyLists, getContingencyListsInfosFormSchema, toFormValuesContingencyListsInfos } from "./contingency-table/columns-definitions.js";
+import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, getContingencyListsInfosFormSchema, isValidContingencyRow, toFormValuesContingencyListsInfos } from "./contingency-table/columns-definitions.js";
 import { useTabs } from "./hook/use-tabs.js";
 import { useParametersForm } from "./hook/use-parameters-form.js";
 export {
@@ -48,7 +48,6 @@ export {
   PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD,
   PARAM_SA_PROVIDER,
   PROVIDER,
-  ParamContingencyLists,
   ParameterFloat,
   ParameterGroup,
   ParameterLineDirectoryItemsInput,
@@ -67,6 +66,7 @@ export {
   getContingencyListsInfosFormSchema,
   getLimitReductionsFormSchema,
   isValidComputingType,
+  isValidContingencyRow,
   sanitizePercentageValue,
   toFormValuesContingencyListsInfos,
   toFormValuesLimitReductions,

package/dist/components/parameters/common/parameter-field.js

@@ -47,6 +47,8 @@ import { LineSeparator } from "./line-separator.js";
 import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "./widget/parameter-line-slider.js";
 import "./limitreductions/columns-definitions.js";
+import "react-dom";
+import "@hello-pangea/dnd";
 import "./contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../filter/HeaderFilterForm.js";

package/dist/components/parameters/common/parameter-table/table-cell.js

@@ -51,7 +51,7 @@ function EditableTableCell(arrayFormName, rowIndex, column, onRowChanged) {
             hideErrorMessage: true,
             label: void 0,
             itemFilter: void 0,
-            onRowChanged
+            onChange: onRowChanged
           }
         ),
         column.menuItems && /* @__PURE__ */ jsx(

package/dist/components/parameters/common/parameter-table-field/constants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 const NAME = "name";
+export declare const ID = "id";
+export declare const ACTIVATED = "activated";
+export declare const DESCRIPTION = "description";

package/dist/components/parameters/common/parameter-table-field/constants.js

@@ -0,0 +1,10 @@
+const NAME = "name";
+const ID = "id";
+const ACTIVATED = "activated";
+const DESCRIPTION = "description";
+export {
+  ACTIVATED,
+  DESCRIPTION,
+  ID,
+  NAME
+};

package/dist/components/parameters/common/{parameter-table → parameter-table-field}/index.d.ts

@@ -2,8 +2,7 @@
  * 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 https://mozilla.org/MPL/2.0/.
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 export * from './constants';
-export * from './parameter-table';
-export * from './types';
+export * from './parameter-table-field';

package/dist/components/parameters/common/parameter-table-field/index.js

@@ -0,0 +1,9 @@
+import { ACTIVATED, DESCRIPTION, ID, NAME } from "./constants.js";
+import { ParameterTableField } from "./parameter-table-field.js";
+export {
+  ACTIVATED,
+  DESCRIPTION,
+  ID,
+  NAME,
+  ParameterTableField
+};