@gridsuite/commons-ui 0.134.0 → 0.136.0

package/README.md

@@ -7,6 +7,16 @@ Library for sharing GridSuite apps commons components
 The commons-ui library have a demo app in which you can call your components to test them.
 The `npm start` command install the library's dependencies then launches the demo app.
 
+##### Development Scripts
+
+- **`npm run type-check`** - Runs TypeScript type checking without emitting files. This ensures all developers use the project's local TypeScript version from `node_modules` rather than a potentially different globally-installed version. Run this to verify your code has no type errors before committing.
+
+- **`npm run build`** - Builds the library. Note: This automatically runs `npm run prebuild` first.
+
+- **`npm run prebuild`** - Runs linting and type checking before the build. This script is executed automatically by npm before `npm run build` and ensures that the build is not executed if linting or type checking fails. You don't need to call this manually unless you want to verify code quality without building.
+
+##### Local Testing
+
 If you want to test your library integration with a consumer application my-app you have first
 to build commons-ui via
 

package/dist/components/csvDownloader/csv-export.d.ts

@@ -1,2 +1,2 @@
 import { CsvExportProps } from './csv-export.type';
-export declare function CsvExport({ columns, tableNamePrefix, tableName, disabled, skipColumnHeaders, language, exportDataAsCsv, }: CsvExportProps): JSX.Element;
+export declare function CsvExport({ columns, tableNamePrefix, tableName, disabled, skipColumnHeaders, skipPinnedBottom, language, exportDataAsCsv, }: CsvExportProps): JSX.Element;

package/dist/components/csvDownloader/csv-export.js

@@ -8,13 +8,31 @@ function CsvExport({
   tableName,
   disabled,
   skipColumnHeaders = false,
+  skipPinnedBottom = false,
   language,
   exportDataAsCsv
 }) {
   const { downloadCSVData } = useCsvExport();
   const download = useCallback(() => {
-    downloadCSVData({ columns, tableName, tableNamePrefix, skipColumnHeaders, language, exportDataAsCsv });
-  }, [downloadCSVData, columns, tableName, tableNamePrefix, skipColumnHeaders, language, exportDataAsCsv]);
+    downloadCSVData({
+      columns,
+      tableName,
+      tableNamePrefix,
+      skipColumnHeaders,
+      skipPinnedBottom,
+      language,
+      exportDataAsCsv
+    });
+  }, [
+    downloadCSVData,
+    columns,
+    tableName,
+    tableNamePrefix,
+    skipColumnHeaders,
+    skipPinnedBottom,
+    language,
+    exportDataAsCsv
+  ]);
   return /* @__PURE__ */ jsx(ExportCsvButton, { disabled, onClick: download });
 }
 export {

package/dist/components/csvDownloader/csv-export.type.d.ts

@@ -5,6 +5,7 @@ export type CsvDownloadProps = {
     tableName: string;
     tableNamePrefix?: string;
     skipColumnHeaders?: boolean;
+    skipPinnedBottom?: boolean;
     language: GsLang;
     exportDataAsCsv: (params?: CsvExportParams) => void;
 };

package/dist/components/csvDownloader/use-csv-export.js

@@ -32,6 +32,7 @@ const useCsvExport = () => {
       const prefix = props.tableNamePrefix ?? "";
       props.exportDataAsCsv({
         suppressQuotes: false,
+        skipPinnedBottom: props.skipPinnedBottom,
         columnSeparator: props.language === LANG_FRENCH ? ";" : ",",
         columnKeys: props.columns.map((col) => col.colId).filter(hasColId),
         skipColumnHeaders: props.skipColumnHeaders,

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

@@ -188,8 +188,7 @@ function importExpertRules(query) {
       }
       return rule.values.sort();
     }
-    convertInputValue(rule.field, parseFloat(rule.value));
-    return rule.value;
+    return convertInputValue(rule.field, parseFloat(rule.value));
   }
   function transformRule(rule) {
     return {

package/dist/components/filter/index.d.ts

@@ -8,7 +8,6 @@ export * from './filter.type';
 export * from './FilterCreationDialog';
 export * from './FilterForm';
 export * from './constants/FilterConstants';
-export * from '../contingencyList/criteriaBased';
 export * from './expert';
 export * from './explicitNaming';
 export * from './utils';

package/dist/components/filter/index.js

@@ -1,8 +1,6 @@
 import { FilterCreationDialog } from "./FilterCreationDialog.js";
 import { FilterForm } from "./FilterForm.js";
 import { DISTRIBUTION_KEY, FilterType, NO_ITEM_SELECTION_FOR_COPY } from "./constants/FilterConstants.js";
-import { CriteriaBasedForm } from "../contingencyList/criteriaBased/CriteriaBasedForm.js";
-import { getCriteriaBasedFormData, getCriteriaBasedSchema } from "../contingencyList/criteriaBased/criteriaBasedUtils.js";
 import { ExpertFilterEditionDialog } from "./expert/ExpertFilterEditionDialog.js";
 import { ExpertFilterForm, expertFilterSchema, getExpertFilterEmptyFormData } from "./expert/ExpertFilterForm.js";
 import { CombinatorType, DataType, OperatorType } from "./expert/expertFilter.type.js";
@@ -18,7 +16,6 @@ export {
   CONTINGENCY_LIST_EQUIPMENTS,
   CONVERTERS_MODE_OPTIONS,
   CombinatorType,
-  CriteriaBasedForm,
   DISTRIBUTION_KEY,
   DataType,
   ENERGY_SOURCE_OPTIONS,
@@ -49,8 +46,6 @@ export {
   expertFilterSchema,
   explicitNamingFilterSchema,
   exportExpertRules,
-  getCriteriaBasedFormData,
-  getCriteriaBasedSchema,
   getExpertFilterEmptyFormData,
   getExplicitNamingFilterEmptyFormData,
   getFilterEquipmentTypeLabel,

package/dist/components/filter/utils/filterFormUtils.d.ts

@@ -1,18 +1,9 @@
-import { FunctionComponent } from 'react';
-import { EquipmentType } from '../../../utils/types/equipmentType';
-export type FormField = {
-    renderer: FunctionComponent<any>;
-    props: {
-        label: string;
-        name: string;
-    };
-};
-export type FormEquipment = {
+import { EquipmentType } from '../../../utils';
+export type ContingencyListEquipment = {
     id: string;
     label: string;
-    fields: FormField[];
 };
-export declare const CONTINGENCY_LIST_EQUIPMENTS: Record<EquipmentType.BUSBAR_SECTION | EquipmentType.LINE | EquipmentType.TWO_WINDINGS_TRANSFORMER | EquipmentType.THREE_WINDINGS_TRANSFORMER | EquipmentType.GENERATOR | EquipmentType.BATTERY | EquipmentType.LOAD | EquipmentType.SHUNT_COMPENSATOR | EquipmentType.STATIC_VAR_COMPENSATOR | EquipmentType.HVDC_LINE | EquipmentType.DANGLING_LINE, FormEquipment>;
+export declare const CONTINGENCY_LIST_EQUIPMENTS: Record<EquipmentType.BUSBAR_SECTION | EquipmentType.LINE | EquipmentType.TWO_WINDINGS_TRANSFORMER | EquipmentType.THREE_WINDINGS_TRANSFORMER | EquipmentType.GENERATOR | EquipmentType.BATTERY | EquipmentType.LOAD | EquipmentType.SHUNT_COMPENSATOR | EquipmentType.STATIC_VAR_COMPENSATOR | EquipmentType.HVDC_LINE | EquipmentType.DANGLING_LINE, ContingencyListEquipment>;
 export declare const FILTER_EQUIPMENTS: Partial<Record<EquipmentType, {
     id: EquipmentType;
     label: string;

package/dist/components/filter/utils/filterFormUtils.js

@@ -1,111 +1,52 @@
-import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
-import { RangeInput } from "../../inputs/reactHookForm/numbers/RangeInput.js";
-import { CountriesInput } from "../../inputs/reactHookForm/selectInputs/CountriesInput.js";
+import "../../../utils/conversionUtils.js";
+import "react/jsx-runtime";
+import "@mui/icons-material";
 import { EquipmentType, BASE_EQUIPMENTS } from "../../../utils/types/equipmentType.js";
-const countries = {
-  renderer: CountriesInput,
-  props: {
-    label: "Countries",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.COUNTRIES}`
-  }
-};
-const countries1 = {
-  renderer: CountriesInput,
-  props: {
-    label: "Countries1",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.COUNTRIES_1}`
-  }
-};
-const countries2 = {
-  renderer: CountriesInput,
-  props: {
-    label: "Countries2",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.COUNTRIES_2}`
-  }
-};
-const nominalVoltage = {
-  renderer: RangeInput,
-  props: {
-    label: "nominalVoltage",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.NOMINAL_VOLTAGE}`
-  }
-};
-const nominalVoltage1 = {
-  renderer: RangeInput,
-  props: {
-    label: "nominalVoltage1",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.NOMINAL_VOLTAGE_1}`
-  }
-};
-const nominalVoltage2 = {
-  renderer: RangeInput,
-  props: {
-    label: "nominalVoltage2",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.NOMINAL_VOLTAGE_2}`
-  }
-};
-const nominalVoltage3 = {
-  renderer: RangeInput,
-  props: {
-    label: "nominalVoltage3",
-    name: `${FieldConstants.CRITERIA_BASED}.${FieldConstants.NOMINAL_VOLTAGE_3}`
-  }
-};
+import "../../../utils/yupConfig.js";
 const CONTINGENCY_LIST_EQUIPMENTS = {
   BUSBAR_SECTION: {
     id: "BUSBAR_SECTION",
-    label: "BusBarSections",
-    fields: [countries, nominalVoltage]
+    label: "BusBarSections"
   },
   LINE: {
     id: "LINE",
-    label: "Lines",
-    fields: [countries1, countries2, nominalVoltage1, nominalVoltage2]
+    label: "Lines"
   },
   TWO_WINDINGS_TRANSFORMER: {
     id: "TWO_WINDINGS_TRANSFORMER",
-    label: "TwoWindingsTransformers",
-    fields: [countries, nominalVoltage1, nominalVoltage2]
+    label: "TwoWindingsTransformers"
   },
   THREE_WINDINGS_TRANSFORMER: {
     id: "THREE_WINDINGS_TRANSFORMER",
-    label: "ThreeWindingsTransformers",
-    fields: [countries, nominalVoltage1, nominalVoltage2, nominalVoltage3]
+    label: "ThreeWindingsTransformers"
   },
   GENERATOR: {
     id: "GENERATOR",
-    label: "Generators",
-    fields: [countries, nominalVoltage]
+    label: "Generators"
   },
   BATTERY: {
     id: "BATTERY",
-    label: "Batteries",
-    fields: [countries, nominalVoltage]
+    label: "Batteries"
   },
   LOAD: {
     id: "LOAD",
-    label: "Loads",
-    fields: [countries, nominalVoltage]
+    label: "Loads"
   },
   SHUNT_COMPENSATOR: {
     id: "SHUNT_COMPENSATOR",
-    label: "ShuntCompensators",
-    fields: [countries, nominalVoltage]
+    label: "ShuntCompensators"
   },
   STATIC_VAR_COMPENSATOR: {
     id: "STATIC_VAR_COMPENSATOR",
-    label: "StaticVarCompensators",
-    fields: [countries, nominalVoltage]
+    label: "StaticVarCompensators"
   },
   HVDC_LINE: {
     id: "HVDC_LINE",
-    label: "HvdcLines",
-    fields: [countries1, countries2, nominalVoltage]
+    label: "HvdcLines"
   },
   DANGLING_LINE: {
     id: "DANGLING_LINE",
-    label: "DanglingLines",
-    fields: [countries, nominalVoltage]
+    label: "DanglingLines"
   }
 };
 const FILTER_EQUIPMENTS = {

package/dist/components/index.js

@@ -39,8 +39,6 @@ import { TagRenderer } from "./elementSearch/tagRenderer/TagRenderer.js";
 import { FilterCreationDialog } from "./filter/FilterCreationDialog.js";
 import { FilterForm } from "./filter/FilterForm.js";
 import { DISTRIBUTION_KEY, FilterType, NO_ITEM_SELECTION_FOR_COPY } from "./filter/constants/FilterConstants.js";
-import { CriteriaBasedForm } from "./contingencyList/criteriaBased/CriteriaBasedForm.js";
-import { getCriteriaBasedFormData, getCriteriaBasedSchema } from "./contingencyList/criteriaBased/criteriaBasedUtils.js";
 import { ExpertFilterEditionDialog } from "./filter/expert/ExpertFilterEditionDialog.js";
 import { ExpertFilterForm, expertFilterSchema, getExpertFilterEmptyFormData } from "./filter/expert/ExpertFilterForm.js";
 import { CombinatorType, DataType, OperatorType } from "./filter/expert/expertFilter.type.js";
@@ -211,7 +209,6 @@ export {
   CountriesInput,
   CountryValueEditor,
   CreateParameterDialog,
-  CriteriaBasedForm,
   CsvExport,
   CsvUploader,
   CustomAGGrid,
@@ -486,8 +483,6 @@ export {
   formatComputingTypeLabel,
   genHelperError,
   generateTreeViewFinderClass,
-  getCriteriaBasedFormData,
-  getCriteriaBasedSchema,
   getExpertFilterEmptyFormData,
   getExplicitNamingFilterEmptyFormData,
   getFilterEquipmentTypeLabel,

package/dist/components/inputs/reactHookForm/DirectoryItemsInput.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { FormControl, Box, Chip, FormHelperText, Grid, Tooltip, IconButton } from "@mui/material";
 import { Folder } from "@mui/icons-material";
-import { useState, useMemo, useCallback } from "react";
-import { useFieldArray, useController } from "react-hook-form";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useFieldArray, useWatch, useController } from "react-hook-form";
 import { useIntl, FormattedMessage } from "react-intl";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 import { FieldLabel } from "./utils/FieldLabel.js";
@@ -86,7 +86,8 @@ function DirectoryItemsInput({
     name
   });
   const formContext = useCustomFormContext();
-  const { getValues, validationSchema } = formContext;
+  const { getValues, validationSchema, setError, clearErrors, getFieldState } = formContext;
+  const watchedElements = useWatch({ name });
   const {
     fieldState: { error }
   } = useController({
@@ -148,6 +149,24 @@ function DirectoryItemsInput({
   const shouldReplaceElement = useMemo(() => {
     return allowMultiSelect === false && elements?.length === 1;
   }, [allowMultiSelect, elements]);
+  const hasElementsWithoutName = useMemo(() => {
+    const elementsToCheck = watchedElements ?? elements;
+    return (elementsToCheck ?? []).some((item) => !item?.[NAME]);
+  }, [elements, watchedElements]);
+  useEffect(() => {
+    const errorMessage = intl.formatMessage({ id: "elementNotFound" });
+    const fieldState = getFieldState(name);
+    if (hasElementsWithoutName) {
+      if (fieldState.error?.message !== errorMessage) {
+        setError(name, {
+          type: "manual",
+          message: errorMessage
+        });
+      }
+    } else if (fieldState.error?.type === "manual" && fieldState.error?.message === errorMessage) {
+      clearErrors(name);
+    }
+  }, [clearErrors, getFieldState, hasElementsWithoutName, intl, name, setError]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       FormControl,
@@ -166,39 +185,51 @@ function DirectoryItemsInput({
               optional: labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())
             }
           ),
-          elements?.length > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.formDirectoryElements2, children: elements.map((item, index) => /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Chip,
-                  {
-                    size: "small",
-                    sx: {
-                      backgroundColor: item?.specificMetadata?.equipmentType && equipmentColorsMap?.get(item?.specificMetadata?.equipmentType)
-                    },
-                    onDelete: () => removeElements(index),
-                    onClick: () => handleChipClick(index),
-                    label: /* @__PURE__ */ jsx(
-                      OverflowableText,
-                      {
-                        text: getValues(`${name}.${index}.${NAME}`) ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }) : intl.formatMessage({ id: "elementNotFound" }),
-                        sx: { width: "100%" }
-                      }
-                    )
-                  }
-                ),
-                equipmentColorsMap && /* @__PURE__ */ jsx(FormHelperText, { children: item?.specificMetadata?.equipmentType ? /* @__PURE__ */ jsx(
-                  FormattedMessage,
-                  {
-                    id: getFilterEquipmentTypeLabel(item.specificMetadata.equipmentType)
-                  }
-                ) : "" })
-              ]
-            },
-            item.id
-          )) }),
+          elements?.length > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.formDirectoryElements2, children: elements.map((item, index) => {
+            const elementName = watchedElements?.[index]?.[NAME] ?? getValues(`${name}.${index}.${NAME}`) ?? item?.[NAME];
+            return /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      size: "small",
+                      sx: mergeSx(
+                        {
+                          backgroundColor: item?.specificMetadata?.equipmentType && equipmentColorsMap?.get(item?.specificMetadata?.equipmentType)
+                        },
+                        !elementName ? (theme) => ({
+                          backgroundColor: theme.palette.error.light,
+                          borderColor: theme.palette.error.main,
+                          color: theme.palette.error.contrastText
+                        }) : void 0
+                      ),
+                      onDelete: () => removeElements(index),
+                      onClick: () => handleChipClick(index),
+                      label: /* @__PURE__ */ jsx(
+                        OverflowableText,
+                        {
+                          text: elementName ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${name}.${index}.${NAME}` }) : intl.formatMessage({ id: "elementNotFound" }),
+                          sx: { width: "100%" }
+                        }
+                      )
+                    }
+                  ),
+                  equipmentColorsMap && /* @__PURE__ */ jsx(FormHelperText, { children: item?.specificMetadata?.equipmentType ? /* @__PURE__ */ jsx(
+                    FormattedMessage,
+                    {
+                      id: getFilterEquipmentTypeLabel(
+                        item.specificMetadata.equipmentType
+                      )
+                    }
+                  ) : "" })
+                ]
+              },
+              item.id
+            );
+          }) }),
           /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "row-reverse", children: /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
             IconButton,
             {

package/dist/components/inputs/reactHookForm/text/TextInput.d.ts

@@ -15,6 +15,7 @@ export interface TextInputProps {
     outputTransform?: (value: string) => Input | null;
     inputTransform?: (value: Input) => string;
     acceptValue?: (value: string) => boolean;
+    onChange?: (value: string) => void;
     previousValue?: Input;
     clearable?: boolean;
     formProps?: Omit<TextFieldWithAdornmentProps | TextFieldProps, 'value' | 'onChange' | 'inputRef' | 'inputProps' | 'InputProps'>;
@@ -25,5 +26,6 @@ export declare function TextInput({ name, label, labelValues, // this prop is us
 id, adornment, customAdornment, outputTransform, // transform materialUi input value before sending it to react hook form, mostly used to deal with number fields
 inputTransform, // transform react hook form value before sending it to materialUi input, mostly used to deal with number fields
 acceptValue, // used to check user entry before committing the input change, used mostly to prevent user from typing a character in number field
+onChange, // method called when input value changed, if you want to manually trigger validation for example (do not update the form here unless you know what you do, it's already done by RHF)
 previousValue, clearable, formProps, disabledTooltip, // In case we don't want to show tooltip on the value and warning/info icons
 disabled, }: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/reactHookForm/text/TextInput.js

@@ -21,6 +21,8 @@ function TextInput({
   // transform react hook form value before sending it to materialUi input, mostly used to deal with number fields
   acceptValue = () => true,
   // used to check user entry before committing the input change, used mostly to prevent user from typing a character in number field
+  onChange,
+  // method called when input value changed, if you want to manually trigger validation for example (do not update the form here unless you know what you do, it's already done by RHF)
   previousValue,
   clearable,
   formProps,
@@ -30,7 +32,7 @@ function TextInput({
 }) {
   const { validationSchema, getValues, removeOptional, isNodeBuilt, isUpdate } = useCustomFormContext();
   const {
-    field: { onChange, value, ref },
+    field: { onChange: onChangeRhf, value, ref },
     fieldState: { error }
   } = useController({ name });
   const Field = adornment ? TextFieldWithAdornment : TextField;
@@ -39,11 +41,12 @@ function TextInput({
     adornmentText: adornment?.text ?? ""
   };
   const handleClearValue = () => {
-    onChange(outputTransform(""));
+    onChangeRhf(outputTransform(""));
   };
   const handleValueChanged = (e) => {
     if (acceptValue(e.target.value)) {
-      onChange(outputTransform(e.target.value));
+      onChangeRhf(outputTransform(e.target.value));
+      onChange?.(e.target.value);
     }
   };
   const transformedValue = inputTransform(value);

package/dist/components/parameters/common/widget/parameter-line-slider.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { parametersStyles } from "../../parameters-style.js";
@@ -35,7 +35,8 @@ function sanitizePercentageValue(value) {
 const styles = {
   container: {
     ...parametersStyles.controlItem,
-    paddingRight: 2
+    paddingTop: 3,
+    paddingRight: 3
   }
 };
 function ParameterLineSlider({
@@ -46,9 +47,9 @@ function ParameterLineSlider({
   minValue = 0,
   maxValue = 100
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.container, children: [
     /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: styles.container, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
       SliderInput,
       {
         name,

package/dist/components/parameters/loadflow/load-flow-parameters-utils.js

@@ -124,6 +124,7 @@ const setLimitReductions = (provider, defaultLimitReductions, formMethods) => {
   } else {
     formMethods.setValue(PARAM_LIMIT_REDUCTION, DEFAULT_LIMIT_REDUCTION_VALUE);
     formMethods.setValue(LIMIT_REDUCTIONS_FORM, []);
+    formMethods.clearErrors(LIMIT_REDUCTIONS_FORM);
   }
 };
 const mapLimitReductions = (vlLimits, formLimits, indexVl) => {

package/dist/components/parameters/loadflow/use-load-flow-parameters-form.js

@@ -58,6 +58,7 @@ const useLoadFlowParametersForm = (parametersBackend, enableDeveloperMode, param
   ] = parametersBackend;
   const [currentProvider, setCurrentProvider] = useState(params?.provider);
   const [selectedTab, setSelectedTab] = useState(TabValues.GENERAL);
+  const [limitReductionNumber, setLimitReductionNumber] = useState(0);
   const [tabIndexesWithError, setTabIndexesWithError] = useState([]);
   const { snackError } = useSnackMessage();
   const handleTabChange = useCallback((event, newValue) => {
@@ -83,12 +84,10 @@ const useLoadFlowParametersForm = (parametersBackend, enableDeveloperMode, param
       [PROVIDER]: yup.string().required(),
       [PARAM_LIMIT_REDUCTION]: yup.number().nullable(),
       ...getCommonLoadFlowParametersFormSchema().fields,
-      ...getLimitReductionsFormSchema(
-        params?.limitReductions ? params.limitReductions[0]?.temporaryLimitReductions.length : 0
-      ).fields,
+      ...getLimitReductionsFormSchema(limitReductionNumber).fields,
       ...getSpecificLoadFlowParametersFormSchema(specificParameters).fields
     }).concat(getNameElementEditorSchema(name));
-  }, [name, params?.limitReductions, specificParameters]);
+  }, [name, limitReductionNumber, specificParameters]);
   const formMethods = useForm({
     defaultValues: {
       ...getNameElementEditorEmptyFormData(name, description),
@@ -240,12 +239,28 @@ const useLoadFlowParametersForm = (parametersBackend, enableDeveloperMode, param
     reset(toLoadFlowFormValues(params));
   }, [paramsLoaded, params, reset, specificParamsDescriptions, toLoadFlowFormValues]);
   useEffect(() => {
-    if (watchProvider !== currentProvider) {
+    if (watchProvider && watchProvider !== currentProvider) {
       setCurrentProvider(watchProvider);
       setSpecificParameters(watchProvider, specificParamsDescriptions, formMethods);
       setLimitReductions(watchProvider, defaultLimitReductions, formMethods);
+      if (watchProvider === PARAM_PROVIDER_OPENLOADFLOW) {
+        if (currentProvider) {
+          setLimitReductionNumber(defaultLimitReductions?.at(0)?.temporaryLimitReductions?.length ?? 0);
+        } else {
+          setLimitReductionNumber(params?.limitReductions?.at(0)?.temporaryLimitReductions?.length ?? 0);
+        }
+      } else {
+        setLimitReductionNumber(0);
+      }
     }
-  }, [currentProvider, defaultLimitReductions, formMethods, specificParamsDescriptions, watchProvider]);
+  }, [
+    currentProvider,
+    defaultLimitReductions,
+    formMethods,
+    params?.limitReductions,
+    specificParamsDescriptions,
+    watchProvider
+  ]);
   return {
     formMethods,
     formSchema,

package/dist/hooks/useSnackMessage.d.ts

@@ -1,4 +1,4 @@
-import { OptionsObject, closeSnackbar as closeSnackbarFromNotistack } from 'notistack';
+import { closeSnackbar as closeSnackbarFromNotistack, OptionsObject } from 'notistack';
 interface SnackInputs extends Omit<OptionsObject, 'variant' | 'style'> {
     messageTxt?: string;
     messageId?: string;
@@ -11,6 +11,7 @@ export interface UseSnackMessageReturn {
     snackError: (snackInputs: SnackInputs) => void;
     snackWarning: (snackInputs: SnackInputs) => void;
     snackInfo: (snackInputs: SnackInputs) => void;
+    snackSuccess: (snackInputs: SnackInputs) => void;
     closeSnackbar: typeof closeSnackbarFromNotistack;
 }
 export declare function useSnackMessage(): UseSnackMessageReturn;

package/dist/hooks/useSnackMessage.js

@@ -63,7 +63,8 @@ function useSnackMessage() {
   );
   const snackWarning = useCallback((snackInputs) => enqueue(snackInputs, "warning"), [enqueue]);
   const snackInfo = useCallback((snackInputs) => enqueue(snackInputs, "info"), [enqueue]);
-  return { snackError, snackInfo, snackWarning, closeSnackbar };
+  const snackSuccess = useCallback((snackInputs) => enqueue(snackInputs, "success"), [enqueue]);
+  return { snackError, snackInfo, snackWarning, snackSuccess, closeSnackbar };
 }
 export {
   useSnackMessage

package/dist/index.js

@@ -40,8 +40,6 @@ import { TagRenderer } from "./components/elementSearch/tagRenderer/TagRenderer.
 import { FilterCreationDialog } from "./components/filter/FilterCreationDialog.js";
 import { FilterForm } from "./components/filter/FilterForm.js";
 import { DISTRIBUTION_KEY, FilterType, NO_ITEM_SELECTION_FOR_COPY } from "./components/filter/constants/FilterConstants.js";
-import { CriteriaBasedForm } from "./components/contingencyList/criteriaBased/CriteriaBasedForm.js";
-import { getCriteriaBasedFormData, getCriteriaBasedSchema } from "./components/contingencyList/criteriaBased/criteriaBasedUtils.js";
 import { ExpertFilterEditionDialog } from "./components/filter/expert/ExpertFilterEditionDialog.js";
 import { ExpertFilterForm, expertFilterSchema, getExpertFilterEmptyFormData } from "./components/filter/expert/ExpertFilterForm.js";
 import { CombinatorType, DataType, OperatorType } from "./components/filter/expert/expertFilter.type.js";
@@ -327,7 +325,6 @@ export {
   CountriesInput,
   CountryValueEditor,
   CreateParameterDialog,
-  CriteriaBasedForm,
   CsvExport,
   CsvUploader,
   CustomAGGrid,
@@ -737,8 +734,6 @@ export {
   getAppName,
   getAvailableComponentLibraries,
   getComputedLanguage,
-  getCriteriaBasedFormData,
-  getCriteriaBasedSchema,
   getDefaultLoadFlowProvider,
   getEquipmentsInfosForSearchBar,
   getExpertFilterEmptyFormData,

package/dist/utils/constants/fieldConstants.d.ts

@@ -16,7 +16,6 @@ export declare enum FieldConstants {
     COUNTRIES_1 = "countries1",
     COUNTRIES_2 = "countries2",
     COUNTRIES = "countries",
-    CRITERIA_BASED = "criteriaBased",
     CURRENT_PARAMETERS = "currentParameters",
     DESCRIPTION = "description",
     DIRECTORY = "directory",

package/dist/utils/constants/fieldConstants.js

@@ -10,7 +10,6 @@ var FieldConstants = /* @__PURE__ */ ((FieldConstants2) => {
   FieldConstants2["COUNTRIES_1"] = "countries1";
   FieldConstants2["COUNTRIES_2"] = "countries2";
   FieldConstants2["COUNTRIES"] = "countries";
-  FieldConstants2["CRITERIA_BASED"] = "criteriaBased";
   FieldConstants2["CURRENT_PARAMETERS"] = "currentParameters";
   FieldConstants2["DESCRIPTION"] = "description";
   FieldConstants2["DIRECTORY"] = "directory";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.134.0",
+    "version": "0.136.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",
@@ -23,13 +23,16 @@
     "scripts": {
         "start": "vite demo/ --config vite.config.ts",
         "start:open": "vite demo/ --config vite.config.ts --open",
-        "build": "tsc && vite build",
+        "build": "vite build",
         "build:pack": "tsc && vite build && npm pack",
         "prepublishOnly": "npm run build",
         "test": "jest",
         "test:coverage": "jest --coverage",
         "test:watch": "jest --watch",
-        "lint": "eslint . --ext js,mjs,jsx,ts,mts,tsx --max-warnings 0",
+        "type-check": "tsc",
+        "prebuild": "npm run lint && npm run type-check",
+        "lint": "eslint . --max-warnings 0",
+        "lint:fix": "eslint . --fix",
         "lint:format": "prettier --check --cache .",
         "licenses-check": "license-checker --summary --excludePrivatePackages --production --onlyAllow \"$( jq -r .onlyAllow[] license-checker-config.json | tr '\n' ';')\" --excludePackages \"$( jq -r .excludePackages[] license-checker-config.json | tr '\n' ';')\""
     },
@@ -80,17 +83,19 @@
         "@babel/preset-typescript": "^7.27.1",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@eslint/compat": "^1.4.1",
+        "@eslint/js": "^9.38.0",
         "@hookform/resolvers": "^4.1.3",
         "@jest/globals": "^30.1.2",
         "@mui/icons-material": "^5.18.0",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.18.0",
         "@react-hook/window-size": "^3.1.1",
+        "@stylistic/eslint-plugin": "^3.1.0",
         "@testing-library/jest-dom": "^6.8.0",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/autosuggest-highlight": "^3.2.3",
-        "@types/eslint": "^8.56.12",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/jest": "^30.0.0",
         "@types/json-logic-js": "^2.0.8",
@@ -101,25 +106,21 @@
         "@types/react": "^18.3.24",
         "@types/react-dom": "^18.3.7",
         "@types/react-resizable": "^3.0.8",
-        "@typescript-eslint/eslint-plugin": "^7.18.0",
-        "@typescript-eslint/parser": "^7.18.0",
         "@vitejs/plugin-react": "^5.0.4",
         "ag-grid-community": "^33.1.0",
         "ag-grid-react": "^33.3.2",
         "babel-eslint": "^10.1.0",
         "babel-preset-airbnb": "^5.0.0",
         "babel-preset-vite": "^1.1.3",
-        "eslint": "^8.57.1",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^18.0.0",
+        "eslint": "^9.38.0",
+        "eslint-config-airbnb-extended": "^2.3.2",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-config-react-app": "^7.0.1",
-        "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-import": "^2.32.0",
+        "eslint-import-resolver-typescript": "^4.4.4",
+        "eslint-plugin-import-x": "^4.16.1",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "glob": "^11.0.3",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^30.1.3",
@@ -136,10 +137,11 @@
         "react-resizable": "^3.0.5",
         "react-router": "^7.8.2",
         "ts-node": "^10.9.2",
-        "typescript": "~5.6.3",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.2",
         "vite": "^7.1.12",
+        "vite-plugin-checker": "^0.8.0",
         "vite-plugin-dts": "^4.5.4",
-        "vite-plugin-eslint": "^1.8.1",
         "vite-plugin-lib-inject-css": "^2.2.2",
         "vite-plugin-svgr": "^4.5.0",
         "yup": "^1.7.0"

package/dist/components/contingencyList/criteriaBased/CriteriaBasedForm.d.ts

@@ -1,8 +0,0 @@
-import { ReactElement } from 'react';
-import { FormEquipment } from '../../filter/utils/filterFormUtils';
-export interface CriteriaBasedFormProps {
-    equipments: Record<string, FormEquipment>;
-    defaultValues: Record<string, any>;
-    children?: ReactElement;
-}
-export declare function CriteriaBasedForm({ equipments, defaultValues, children }: Readonly<CriteriaBasedFormProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/contingencyList/criteriaBased/CriteriaBasedForm.js

@@ -1,66 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useFormContext, useWatch } from "react-hook-form";
-import { Box, Grid } from "@mui/material";
-import { useEffect } from "react";
-import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
-import { SelectInput } from "../../inputs/reactHookForm/selectInputs/SelectInput.js";
-import { InputWithPopupConfirmation } from "../../inputs/reactHookForm/selectInputs/InputWithPopupConfirmation.js";
-import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
-import { unscrollableDialogStyles } from "../../dialogs/customMuiDialog/CustomMuiDialog.js";
-import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
-import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
-import "react-intl";
-import "@mui/icons-material";
-import "../../treeViewFinder/TreeViewFinder.js";
-import "../../../utils/conversionUtils.js";
-import "../../../utils/types/equipmentType.js";
-import "../../../utils/yupConfig.js";
-function CriteriaBasedForm({ equipments, defaultValues, children }) {
-  const { getValues, setValue } = useFormContext();
-  const { snackError } = useSnackMessage();
-  const watchEquipmentType = useWatch({
-    name: FieldConstants.EQUIPMENT_TYPE
-  });
-  useEffect(() => {
-    if (watchEquipmentType && !equipments[watchEquipmentType]) {
-      snackError({
-        headerId: "obsoleteFilter"
-      });
-    }
-  }, [snackError, equipments, watchEquipmentType]);
-  const openConfirmationPopup = () => {
-    return JSON.stringify(getValues(FieldConstants.CRITERIA_BASED)) !== JSON.stringify(defaultValues);
-  };
-  const handleResetOnConfirmation = () => {
-    Object.keys(defaultValues).forEach(
-      (field) => setValue(`${FieldConstants.CRITERIA_BASED}.${field}`, defaultValues[field])
-    );
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { sx: unscrollableDialogStyles.unscrollableHeader, children: /* @__PURE__ */ jsx(
-      InputWithPopupConfirmation,
-      {
-        Input: SelectInput,
-        name: FieldConstants.EQUIPMENT_TYPE,
-        options: Object.values(equipments),
-        label: "equipmentType",
-        shouldOpenPopup: openConfirmationPopup,
-        resetOnConfirmation: handleResetOnConfirmation,
-        message: "changeTypeMessage",
-        validateButtonLabel: "button.changeType",
-        "data-testid": "EquipmentTypeSelector"
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box, { sx: unscrollableDialogStyles.scrollableContent, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      watchEquipmentType && equipments[watchEquipmentType] && equipments[watchEquipmentType].fields.map((equipment, index) => {
-        const EquipmentForm = equipment.renderer;
-        const uniqueKey = `${watchEquipmentType}-${index}`;
-        return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, flexGrow: 1, children: /* @__PURE__ */ jsx(EquipmentForm, { ...equipment.props }) }, uniqueKey);
-      }),
-      children
-    ] }) })
-  ] });
-}
-export {
-  CriteriaBasedForm
-};

package/dist/components/contingencyList/criteriaBased/criteriaBasedUtils.d.ts

@@ -1,60 +0,0 @@
-import { ObjectSchema } from 'yup';
-import { FieldConstants } from '../../../utils/constants/fieldConstants';
-import { default as yup } from '../../../utils/yupConfig';
-import { RangeInputData } from '../../inputs/reactHookForm/numbers/RangeInput';
-export type CriteriaBasedData = {
-    [FieldConstants.COUNTRIES]?: string[];
-    [FieldConstants.COUNTRIES_1]?: string[];
-    [FieldConstants.COUNTRIES_2]?: string[];
-    [FieldConstants.NOMINAL_VOLTAGE]?: RangeInputData | null;
-    [FieldConstants.NOMINAL_VOLTAGE_1]?: RangeInputData | null;
-    [FieldConstants.NOMINAL_VOLTAGE_2]?: RangeInputData | null;
-    [FieldConstants.NOMINAL_VOLTAGE_3]?: RangeInputData | null;
-    [key: string]: any;
-};
-export declare function getCriteriaBasedSchema(extraFields?: Record<string, yup.AnyObject | null>): {
-    readonly criteriaBased: ObjectSchema<{
-        nominalVoltage3: {
-            type: string;
-            value1: number | null;
-            value2: number | null;
-        };
-        nominalVoltage2: {
-            type: string;
-            value1: number | null;
-            value2: number | null;
-        };
-        nominalVoltage1: {
-            type: string;
-            value1: number | null;
-            value2: number | null;
-        };
-        nominalVoltage: {
-            type: string;
-            value1: number | null;
-            value2: number | null;
-        };
-        countries: string[] | undefined;
-        countries1: string[] | undefined;
-        countries2: string[] | undefined;
-    }, yup.AnyObject, {
-        nominalVoltage3: any;
-        nominalVoltage2: any;
-        nominalVoltage1: any;
-        nominalVoltage: any;
-        countries: "";
-        countries1: "";
-        countries2: "";
-    }, "">;
-};
-export declare function getCriteriaBasedFormData(criteriaValues?: Record<string, any>, extraFields?: Record<string, yup.AnyObject | null>): {
-    readonly criteriaBased: {
-        readonly countries: any;
-        readonly countries1: any;
-        readonly countries2: any;
-        readonly nominalVoltage: any;
-        readonly nominalVoltage1: any;
-        readonly nominalVoltage2: any;
-        readonly nominalVoltage3: any;
-    };
-};

package/dist/components/contingencyList/criteriaBased/criteriaBasedUtils.js

@@ -1,36 +0,0 @@
-import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
-import "../../../utils/yupConfig.js";
-import { getRangeInputSchema, DEFAULT_RANGE_VALUE } from "../../inputs/reactHookForm/numbers/RangeInput.js";
-import * as yup from "yup";
-function getCriteriaBasedSchema(extraFields = {}) {
-  return {
-    [FieldConstants.CRITERIA_BASED]: yup.object().shape({
-      [FieldConstants.COUNTRIES]: yup.array().of(yup.string().required()),
-      [FieldConstants.COUNTRIES_1]: yup.array().of(yup.string().required()),
-      [FieldConstants.COUNTRIES_2]: yup.array().of(yup.string().required()),
-      ...getRangeInputSchema(FieldConstants.NOMINAL_VOLTAGE),
-      ...getRangeInputSchema(FieldConstants.NOMINAL_VOLTAGE_1),
-      ...getRangeInputSchema(FieldConstants.NOMINAL_VOLTAGE_2),
-      ...getRangeInputSchema(FieldConstants.NOMINAL_VOLTAGE_3),
-      ...extraFields
-    })
-  };
-}
-function getCriteriaBasedFormData(criteriaValues, extraFields = {}) {
-  return {
-    [FieldConstants.CRITERIA_BASED]: {
-      [FieldConstants.COUNTRIES]: criteriaValues?.[FieldConstants.COUNTRIES] ?? [],
-      [FieldConstants.COUNTRIES_1]: criteriaValues?.[FieldConstants.COUNTRIES_1] ?? [],
-      [FieldConstants.COUNTRIES_2]: criteriaValues?.[FieldConstants.COUNTRIES_2] ?? [],
-      [FieldConstants.NOMINAL_VOLTAGE]: criteriaValues?.[FieldConstants.NOMINAL_VOLTAGE] ?? DEFAULT_RANGE_VALUE,
-      [FieldConstants.NOMINAL_VOLTAGE_1]: criteriaValues?.[FieldConstants.NOMINAL_VOLTAGE_1] ?? DEFAULT_RANGE_VALUE,
-      [FieldConstants.NOMINAL_VOLTAGE_2]: criteriaValues?.[FieldConstants.NOMINAL_VOLTAGE_2] ?? DEFAULT_RANGE_VALUE,
-      [FieldConstants.NOMINAL_VOLTAGE_3]: criteriaValues?.[FieldConstants.NOMINAL_VOLTAGE_3] ?? DEFAULT_RANGE_VALUE,
-      ...extraFields
-    }
-  };
-}
-export {
-  getCriteriaBasedFormData,
-  getCriteriaBasedSchema
-};

package/dist/components/contingencyList/criteriaBased/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2024, 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 './CriteriaBasedForm';
-export * from './criteriaBasedUtils';

package/dist/components/contingencyList/criteriaBased/index.js

@@ -1,7 +0,0 @@
-import { CriteriaBasedForm } from "./CriteriaBasedForm.js";
-import { getCriteriaBasedFormData, getCriteriaBasedSchema } from "./criteriaBasedUtils.js";
-export {
-  CriteriaBasedForm,
-  getCriteriaBasedFormData,
-  getCriteriaBasedSchema
-};