@gridsuite/commons-ui 0.250.0 → 0.252.0

package/dist/components/index.js

@@ -42,7 +42,7 @@ import { SubmitButton } from "./ui/reactHookForm/utils/SubmitButton.js";
 import { TextFieldWithAdornment } from "./ui/reactHookForm/utils/TextFieldWithAdornment.js";
 import { genHelperError, gridItem, identity, isFieldRequired, toFloatOrNullValue } from "./ui/reactHookForm/utils/functions.js";
 import { HelperPreviousValue } from "./ui/reactHookForm/utils/HelperPreviousValue.js";
-import { DESCRIPTION, DIRECTORY_ITEM, DIRECTORY_ITEM_FULL_PATH, DIRECTORY_ITEM_ID, NAME } from "./ui/reactHookForm/constants.js";
+import { ACTIVE, DESCRIPTION, DIRECTORY_ITEM, DIRECTORY_ITEM_FULL_PATH, DIRECTORY_ITEM_ID, NAME } from "./ui/reactHookForm/constants.js";
 import { ExpandableInput } from "./ui/reactHookForm/expandableInput/ExpandableInput.js";
 import { CountrySelectionInput } from "./ui/reactHookForm/CountrySelectionInput.js";
 import { CheckboxNullableInput } from "./ui/reactHookForm/CheckboxNullableInput.js";
@@ -156,6 +156,7 @@ import { ReportType } from "./composite/report/report.type.js";
 import { GLOBAL_REPORT_NODE_LABEL, NETWORK_MODIFICATION } from "./composite/report/report.constant.js";
 import { QuickSearch } from "./composite/report/QuickSearch.js";
 export {
+  ACTIVE,
   ActivableChip,
   AddButton,
   AddButtonMode,

package/dist/components/ui/index.js

@@ -42,7 +42,7 @@ import { SubmitButton } from "./reactHookForm/utils/SubmitButton.js";
 import { TextFieldWithAdornment } from "./reactHookForm/utils/TextFieldWithAdornment.js";
 import { genHelperError, gridItem, identity, isFieldRequired, toFloatOrNullValue } from "./reactHookForm/utils/functions.js";
 import { HelperPreviousValue } from "./reactHookForm/utils/HelperPreviousValue.js";
-import { DESCRIPTION, DIRECTORY_ITEM, DIRECTORY_ITEM_FULL_PATH, DIRECTORY_ITEM_ID, NAME } from "./reactHookForm/constants.js";
+import { ACTIVE, DESCRIPTION, DIRECTORY_ITEM, DIRECTORY_ITEM_FULL_PATH, DIRECTORY_ITEM_ID, NAME } from "./reactHookForm/constants.js";
 import { ExpandableInput } from "./reactHookForm/expandableInput/ExpandableInput.js";
 import { CountrySelectionInput } from "./reactHookForm/CountrySelectionInput.js";
 import { CheckboxNullableInput } from "./reactHookForm/CheckboxNullableInput.js";
@@ -80,6 +80,7 @@ import { doesNodeHasChildren } from "./treeViewFinder/TreeViewUtils.js";
 import { DirectoryItemSelector } from "./directoryItemSelector/DirectoryItemSelector.js";
 import { CustomTablePagination } from "./tablepagination/custom-table-pagination.js";
 export {
+  ACTIVE,
   ActivableChip,
   AddButton,
   AddButtonMode,

package/dist/components/ui/reactHookForm/constants.d.ts

@@ -9,3 +9,4 @@ export declare const DESCRIPTION = "description";
 export declare const DIRECTORY_ITEM = "directoryItem";
 export declare const DIRECTORY_ITEM_ID = "directoryItemId";
 export declare const DIRECTORY_ITEM_FULL_PATH = "directoryItemFullPath";
+export declare const ACTIVE = "active";

package/dist/components/ui/reactHookForm/constants.js

@@ -3,7 +3,9 @@ const DESCRIPTION = "description";
 const DIRECTORY_ITEM = "directoryItem";
 const DIRECTORY_ITEM_ID = "directoryItemId";
 const DIRECTORY_ITEM_FULL_PATH = "directoryItemFullPath";
+const ACTIVE = "active";
 export {
+  ACTIVE,
   DESCRIPTION,
   DIRECTORY_ITEM,
   DIRECTORY_ITEM_FULL_PATH,

package/dist/components/ui/reactHookForm/index.js

@@ -41,13 +41,14 @@ import { SubmitButton } from "./utils/SubmitButton.js";
 import { TextFieldWithAdornment } from "./utils/TextFieldWithAdornment.js";
 import { genHelperError, gridItem, identity, isFieldRequired, toFloatOrNullValue } from "./utils/functions.js";
 import { HelperPreviousValue } from "./utils/HelperPreviousValue.js";
-import { DESCRIPTION, DIRECTORY_ITEM, DIRECTORY_ITEM_FULL_PATH, DIRECTORY_ITEM_ID, NAME } from "./constants.js";
+import { ACTIVE, DESCRIPTION, DIRECTORY_ITEM, DIRECTORY_ITEM_FULL_PATH, DIRECTORY_ITEM_ID, NAME } from "./constants.js";
 import { ExpandableInput } from "./expandableInput/ExpandableInput.js";
 import { CountrySelectionInput } from "./CountrySelectionInput.js";
 import { CheckboxNullableInput } from "./CheckboxNullableInput.js";
 import { directoryItemSchema, getAbsenceLabelKeyFromType } from "./directory-item-input/directory-item-utils.js";
 import { DirectoryItemInput } from "./directory-item-input/directory-item-input.js";
 export {
+  ACTIVE,
   AutocompleteInput,
   BooleanInput,
   ButtonReadOnlyInput,

package/dist/features/index.js

@@ -67,8 +67,9 @@ import { COLUMNS_DEFINITIONS_HVDCS, COLUMNS_DEFINITIONS_INJECTIONS, COLUMNS_DEFI
 import { DynamicSimulationInline } from "./parameters/dynamic-simulation/dynamic-simulation-inline.js";
 import { CONTINGENCIES_LIST_INFOS, CONTINGENCIES_START_TIME, SCENARIO_DURATION } from "./parameters/dynamic-security-analysis/constants.js";
 import { DynamicSecurityAnalysisInline } from "./parameters/dynamic-security-analysis/dynamic-security-analysis-inline.js";
-import { ACCURACY, ACTIVE, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./parameters/dynamic-margin-calculation/constants.js";
+import { ACCURACY, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./parameters/dynamic-margin-calculation/constants.js";
 import { DynamicMarginCalculationInline } from "./parameters/dynamic-margin-calculation/dynamic-margin-calculation-inline.js";
+import { getTabIndicatorStyle, getTabStyle, parametersStyles } from "./parameters/parameters-style.js";
 import { filledTextField, italicFontTextField, standardTextField } from "./network-modifications/common/form.utils.js";
 import { PropertiesForm } from "./network-modifications/common/properties/PropertiesForm.js";
 import { PropertyForm } from "./network-modifications/common/properties/PropertyForm.js";
@@ -238,7 +239,6 @@ import { getSAProcessConfigBackendFromFormData, getSAProcessConfigFormDataFromFe
 import { ProcessType } from "./process-configs/process-configs.type.js";
 export {
   ACCURACY,
-  ACTIVE,
   ADVANCED_PARAMETERS,
   APPLICABILITY,
   AUTO_EXTENSIBLE_COLUMNS,
@@ -719,6 +719,8 @@ export {
   getShortCircuitEmptyFormData,
   getShortCircuitFormData,
   getShortCircuitFormSchema,
+  getTabIndicatorStyle,
+  getTabStyle,
   getVoltageRegulationEmptyFormData,
   getVoltageRegulationSchema,
   handlePostSortRows,
@@ -765,6 +767,7 @@ export {
   networkModificationTableStyles,
   newEquipmentDeletionDto,
   onlyStartedGeneratorsOptions,
+  parametersStyles,
   removeUuidsFromTree,
   sanitizeLimitNames,
   sanitizeLimitsGroups,

package/dist/features/parameters/common/hook/use-tabs.d.ts

@@ -2,6 +2,7 @@ import { SyntheticEvent } from 'react';
 import { FieldErrors } from 'react-hook-form';
 export type UseTabsReturn<TTabValue extends string> = {
     selectedTab: TTabValue;
+    setSelectedTab: (selectedTab: TTabValue) => void;
     tabsWithError: TTabValue[];
     onTabChange: (event: SyntheticEvent, newValue: TTabValue) => void;
     onError: (errors: FieldErrors) => void;
@@ -10,5 +11,6 @@ export type UseTabsProps<TTabValue extends string> = {
     defaultTab: TTabValue;
     tabEnum: Record<string, TTabValue>;
     errors: FieldErrors;
+    tabFields?: Record<TTabValue, string[]>;
 };
-export declare function useTabs<TTabValue extends string>({ defaultTab, tabEnum, errors, }: Readonly<UseTabsProps<TTabValue>>): UseTabsReturn<TTabValue>;
+export declare function useTabs<TTabValue extends string>({ defaultTab, tabEnum, errors, tabFields, }: Readonly<UseTabsProps<TTabValue>>): UseTabsReturn<TTabValue>;

package/dist/features/parameters/common/hook/use-tabs.js

@@ -1,43 +1,48 @@
 import { useState, useCallback } from "react";
+import { get } from "react-hook-form";
 import { isObjectEmpty } from "../../../../utils/functions.js";
 function useTabs({
   defaultTab,
   tabEnum,
-  errors
+  errors,
+  tabFields
 }) {
   const [selectedTab, setSelectedTab] = useState(defaultTab);
   const [tabsWithError, setTabsWithError] = useState([]);
+  const getTabsWithError = useCallback(
+    (_errors) => {
+      const tabsHasError = [];
+      Object.values(tabEnum).forEach((tabValue) => {
+        const fields = tabFields?.[tabValue] ?? [tabValue];
+        if (fields.some((field) => get(_errors, field))) {
+          tabsHasError.push(tabValue);
+        }
+      });
+      return tabsHasError;
+    },
+    [tabEnum, tabFields]
+  );
   const onTabChange = useCallback(
     (event, newSelectedTab) => {
       setSelectedTab(newSelectedTab);
       if (!errors || isObjectEmpty(errors)) {
         return;
       }
-      const tabsHasError = [];
-      Object.values(tabEnum).forEach((tabValue) => {
-        if (errors?.[tabValue]) {
-          tabsHasError.push(tabValue);
-        }
-      });
+      const tabsHasError = getTabsWithError(errors);
       if (tabsHasError.includes(newSelectedTab)) {
         setTabsWithError(tabsHasError.filter((errorTab) => errorTab !== newSelectedTab));
       } else {
         setTabsWithError(tabsHasError);
       }
     },
-    [errors, tabEnum]
+    [errors, getTabsWithError]
   );
   const onError = useCallback(
     (_errors) => {
       if (!_errors || isObjectEmpty(_errors)) {
         return;
       }
-      const tabsHasError = [];
-      Object.values(tabEnum).forEach((tabValue) => {
-        if (_errors?.[tabValue]) {
-          tabsHasError.push(tabValue);
-        }
-      });
+      const tabsHasError = getTabsWithError(_errors);
       if (tabsHasError.includes(selectedTab)) {
         setTabsWithError(tabsHasError.filter((errorTab) => errorTab !== selectedTab));
       } else if (tabsHasError.length > 0) {
@@ -45,10 +50,11 @@ function useTabs({
         setTabsWithError(tabsHasError.filter((errorTab, index, arr) => errorTab !== arr[0]));
       }
     },
-    [selectedTab, tabEnum]
+    [getTabsWithError, selectedTab]
   );
   return {
     selectedTab,
+    setSelectedTab,
     tabsWithError,
     onTabChange,
     onError

package/dist/features/parameters/dynamic-margin-calculation/constants.d.ts

@@ -15,4 +15,3 @@ export declare const LOAD_MODELS_RULE = "loadModelsRule";
 export declare const LOADS_VARIATIONS = "loadsVariations";
 export declare const LOAD_FILTERS = "loadFilters";
 export declare const VARIATION = "variation";
-export declare const ACTIVE = "active";

package/dist/features/parameters/dynamic-margin-calculation/constants.js

@@ -9,10 +9,8 @@ const LOAD_MODELS_RULE = "loadModelsRule";
 const LOADS_VARIATIONS = "loadsVariations";
 const LOAD_FILTERS = "loadFilters";
 const VARIATION = "variation";
-const ACTIVE = "active";
 export {
   ACCURACY,
-  ACTIVE,
   CALCULATION_TYPE,
   LOADS_VARIATIONS,
   LOAD_FILTERS,

package/dist/features/parameters/dynamic-margin-calculation/index.js

@@ -1,8 +1,7 @@
-import { ACCURACY, ACTIVE, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./constants.js";
+import { ACCURACY, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./constants.js";
 import { DynamicMarginCalculationInline } from "./dynamic-margin-calculation-inline.js";
 export {
   ACCURACY,
-  ACTIVE,
   CALCULATION_TYPE,
   DynamicMarginCalculationInline,
   LOADS_VARIATIONS,

package/dist/features/parameters/dynamic-margin-calculation/loads-variations-parameters.js

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import { Grid2 } from "@mui/material";
 import * as yup from "yup";
-import { LOADS_VARIATIONS, ACTIVE, VARIATION, LOAD_FILTERS, LOAD_MODELS_RULE, ACCURACY, CALCULATION_TYPE } from "./constants.js";
+import { LOADS_VARIATIONS, VARIATION, LOAD_FILTERS, LOAD_MODELS_RULE, ACCURACY, CALCULATION_TYPE } from "./constants.js";
 import { ID } from "../../../utils/constants/filterConstant.js";
 import { YUP_REQUIRED } from "../../../utils/constants/translationKeys.js";
 import "../../../utils/conversionUtils.js";
@@ -21,7 +21,7 @@ import "localized-countries/data/en";
 import "notistack";
 import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import { NAME } from "../../../components/ui/reactHookForm/constants.js";
+import { ACTIVE, NAME } from "../../../components/ui/reactHookForm/constants.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";

package/dist/features/parameters/index.d.ts

@@ -15,3 +15,4 @@ export * from './sensi';
 export * from './dynamic-simulation';
 export * from './dynamic-security-analysis';
 export * from './dynamic-margin-calculation';
+export * from './parameters-style';

package/dist/features/parameters/index.js

@@ -47,11 +47,11 @@ import { COLUMNS_DEFINITIONS_HVDCS, COLUMNS_DEFINITIONS_INJECTIONS, COLUMNS_DEFI
 import { DynamicSimulationInline } from "./dynamic-simulation/dynamic-simulation-inline.js";
 import { CONTINGENCIES_LIST_INFOS, CONTINGENCIES_START_TIME, SCENARIO_DURATION } from "./dynamic-security-analysis/constants.js";
 import { DynamicSecurityAnalysisInline } from "./dynamic-security-analysis/dynamic-security-analysis-inline.js";
-import { ACCURACY, ACTIVE, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./dynamic-margin-calculation/constants.js";
+import { ACCURACY, CALCULATION_TYPE, LOADS_VARIATIONS, LOAD_FILTERS, LOAD_INCREASE_START_TIME, LOAD_INCREASE_STOP_TIME, LOAD_MODELS_RULE, MARGIN_CALCULATION_START_TIME, START_TIME, STOP_TIME, VARIATION } from "./dynamic-margin-calculation/constants.js";
 import { DynamicMarginCalculationInline } from "./dynamic-margin-calculation/dynamic-margin-calculation-inline.js";
+import { getTabIndicatorStyle, getTabStyle, parametersStyles } from "./parameters-style.js";
 export {
   ACCURACY,
-  ACTIVE,
   ADVANCED_PARAMETERS,
   BALANCE_TYPE,
   CALCULATION_TYPE,
@@ -238,11 +238,14 @@ export {
   formatComputingTypeLabel,
   getContingencyListsInfosFormSchema,
   getLimitReductionsFormSchema,
+  getTabIndicatorStyle,
+  getTabStyle,
   intlInitialVoltageProfileMode,
   intlPredefinedParametersOptions,
   isValidComputingType,
   isValidContingencyRow,
   onlyStartedGeneratorsOptions,
+  parametersStyles,
   sanitizePercentageValue,
   toFormValuesContingencyListsInfos,
   toFormValuesLimitReductions,

package/dist/features/parameters/loadflow/load-flow-parameters-utils.d.ts

@@ -4,10 +4,11 @@ import { ParameterValue } from './load-flow-parameters-type';
 import * as yup from 'yup';
 export declare enum TabValues {
     GENERAL = "General",
+    LIMIT_REDUCTIONS = "LimitReductions",
     ADVANCED = "Advanced",
-    PROVIDER_SPECIFIC = "ProviderSpecific",
-    LIMIT_REDUCTIONS = "LimitReductions"
+    PROVIDER_SPECIFIC = "ProviderSpecific"
 }
+export declare const TAB_FIELDS: Record<TabValues, string[]>;
 export declare const getBasicLoadFlowParametersFormSchema: () => yup.ObjectSchema<{
     phaseShifterRegulationOn: NonNullable<boolean | undefined>;
     dc: NonNullable<boolean | undefined>;

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

@@ -30,9 +30,9 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import "../common/parameter-layout/parameter-layout-provider.js";
-import { ADVANCED_PARAMETERS, COMMON_PARAMETERS } from "../common/constants.js";
+import { ADVANCED_PARAMETERS, SPECIFIC_PARAMETERS, COMMON_PARAMETERS } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
-import { IST_FORM, LIMIT_DURATION_FORM, LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
+import { LIMIT_REDUCTIONS_FORM, IST_FORM, LIMIT_DURATION_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
@@ -41,11 +41,29 @@ import { DC_POWER_FACTOR, DC_USE_TRANSFORMER_RATIO, SHUNT_COMPENSATOR_VOLTAGE_CO
 import { advancedParams } from "./load-flow-advanced-parameters.js";
 var TabValues = /* @__PURE__ */ ((TabValues2) => {
   TabValues2["GENERAL"] = "General";
+  TabValues2["LIMIT_REDUCTIONS"] = "LimitReductions";
   TabValues2["ADVANCED"] = "Advanced";
   TabValues2["PROVIDER_SPECIFIC"] = "ProviderSpecific";
-  TabValues2["LIMIT_REDUCTIONS"] = "LimitReductions";
   return TabValues2;
 })(TabValues || {});
+const TAB_FIELDS = {
+  [
+    "General"
+    /* GENERAL */
+  ]: [COMMON_PARAMETERS],
+  [
+    "ProviderSpecific"
+    /* PROVIDER_SPECIFIC */
+  ]: [SPECIFIC_PARAMETERS],
+  [
+    "Advanced"
+    /* ADVANCED */
+  ]: [ADVANCED_PARAMETERS],
+  [
+    "LimitReductions"
+    /* LIMIT_REDUCTIONS */
+  ]: [LIMIT_REDUCTIONS_FORM]
+};
 const getBasicLoadFlowParametersFormSchema = () => {
   return yup.object().shape({
     [PHASE_SHIFTER_REGULATION_ON]: yup.boolean().required(),
@@ -133,6 +151,7 @@ function splitCommonParameters(commonParameters) {
   );
 }
 export {
+  TAB_FIELDS,
   TabValues,
   getAdvancedLoadFlowParametersFormSchema,
   getAdvancedLoadFlowParametersFormSchemaFields,

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

@@ -1,8 +1,8 @@
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useState, useRef, useCallback, useMemo, useEffect, useEffectEvent } from "react";
+import { useState, useRef, useMemo, useEffect, useCallback, useEffectEvent } from "react";
 import * as yup from "yup";
-import { TabValues, getAdvancedLoadFlowParametersFormSchema, getCommonLoadFlowParametersFormSchema, splitCommonParameters, mapLimitReductions, setLimitReductions } from "./load-flow-parameters-utils.js";
+import { getAdvancedLoadFlowParametersFormSchema, getCommonLoadFlowParametersFormSchema, splitCommonParameters, mapLimitReductions, TabValues, TAB_FIELDS, setLimitReductions } from "./load-flow-parameters-utils.js";
 import "react/jsx-runtime";
 import "@mui/material";
 import "@mui/icons-material";
@@ -41,23 +41,19 @@ import "../common/widget/parameter-line-slider.js";
 import { getLimitReductionsFormSchema, LIMIT_REDUCTIONS_FORM, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
+import { useTabs } from "../common/hook/use-tabs.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
 import { PARAM_LIMIT_REDUCTION, PARAM_PROVIDER_OPENLOADFLOW } from "./constants.js";
 import { getDefaultSpecificParamsValues, getSpecificParametersFormSchema, getAllSpecificParametersValues, formatSpecificParameters, setSpecificParameters } from "../common/utils.js";
 const useLoadFlowParametersForm = (parametersBackend, isDeveloperMode, parametersUuid, name, description) => {
   const { providers, params, updateParameters, specificParamsDescription, defaultLimitReductions } = parametersBackend;
-  const [selectedTab, setSelectedTab] = useState(TabValues.GENERAL);
   const [limitReductionNumber, setLimitReductionNumber] = useState(0);
-  const [tabIndexesWithError, setTabIndexesWithError] = useState([]);
   const [specificParametersDescriptionForProvider, setSpecificParametersDescriptionForProvider] = useState(() => {
     return params?.provider && specificParamsDescription ? specificParamsDescription[params.provider] : [];
   });
   const { snackError } = useSnackMessage();
   const previousWatchProviderRef = useRef(void 0);
-  const handleTabChange = useCallback((event, newValue) => {
-    setSelectedTab(newValue);
-  }, []);
   const specificParametersDefaultValues = useMemo(() => {
     return getDefaultSpecificParamsValues(specificParametersDescriptionForProvider);
   }, [specificParametersDescriptionForProvider]);
@@ -178,29 +174,19 @@ const useLoadFlowParametersForm = (parametersBackend, isDeveloperMode, parameter
       label: value
     }));
   }, [providers, isDeveloperMode]);
-  const onValidationError = useCallback(
-    (errors) => {
-      const tabsInError = [];
-      console.log("ERRORS", errors);
-      if (errors?.[LIMIT_REDUCTIONS_FORM] && TabValues.LIMIT_REDUCTIONS !== selectedTab) {
-        tabsInError.push(TabValues.LIMIT_REDUCTIONS);
-      }
-      if (errors?.[COMMON_PARAMETERS] && TabValues.GENERAL !== selectedTab) {
-        tabsInError.push(TabValues.GENERAL);
-      }
-      if (errors?.[SPECIFIC_PARAMETERS] && TabValues.PROVIDER_SPECIFIC !== selectedTab) {
-        tabsInError.push(TabValues.PROVIDER_SPECIFIC);
-      }
-      if (errors?.[ADVANCED_PARAMETERS] && TabValues.ADVANCED !== selectedTab) {
-        tabsInError.push(TabValues.ADVANCED);
-      }
-      setTabIndexesWithError(tabsInError);
-    },
-    [selectedTab]
-  );
+  const {
+    selectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: TabValues.GENERAL,
+    tabEnum: TabValues,
+    errors: formMethods.formState.errors,
+    tabFields: TAB_FIELDS
+  });
   const onSaveInline = useCallback(
     (formData) => {
-      setTabIndexesWithError([]);
       updateParameters(formatNewParams(formData));
     },
     [updateParameters, formatNewParams]
@@ -208,7 +194,6 @@ const useLoadFlowParametersForm = (parametersBackend, isDeveloperMode, parameter
   const onSaveDialog = useCallback(
     (formData) => {
       if (parametersUuid) {
-        setTabIndexesWithError([]);
         updateParameter(
           parametersUuid,
           formatNewParams(formData),

package/dist/features/parameters/network-visualizations/network-visualizations-parameters-dialog.js

@@ -62,6 +62,7 @@ function NetworkVisualizationsParametersEditionDialog({
       open,
       onClose,
       onSave: networkVisuMethods.onSaveDialog,
+      onValidationError: networkVisuMethods.onValidationError,
       formContext: {
         ...networkVisuMethods.formMethods,
         validationSchema: networkVisuMethods.formSchema,

package/dist/features/parameters/network-visualizations/network-visualizations-parameters-inline.js

@@ -91,7 +91,7 @@ function NetworkVisualizationParametersInline({
             parameterFormatter: (newParams) => newParams
           },
           selectParameterHandler: handleLoadParameters,
-          validateHandler: handleSubmit(networkVisuMethods.onSaveInline),
+          validateHandler: handleSubmit(networkVisuMethods.onSaveInline, networkVisuMethods.onValidationError),
           children: /* @__PURE__ */ jsx(NetworkVisualizationParametersForm, { userProfile, networkVisuMethods })
         }
       )

package/dist/features/parameters/network-visualizations/use-network-visualizations-parameters-form.d.ts

@@ -1,4 +1,4 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldErrors, UseFormReturn } from 'react-hook-form';
 import { SyntheticEvent } from 'react';
 import { UUID } from 'node:crypto';
 import { NetworkVisualizationTabValues as TabValues } from './constants';
@@ -12,6 +12,8 @@ export interface UseNetworkVisualizationParametersFormReturn {
     paramsLoading: boolean;
     onSaveInline: (formData: Record<string, any>) => void;
     onSaveDialog: (formData: Record<string, any>) => void;
+    tabIndexesWithError: TabValues[];
+    onValidationError: (errors: FieldErrors) => void;
 }
 type UseNetworkVisualizationParametersFormProps = {
     parametersUuid: UUID;

package/dist/features/parameters/network-visualizations/use-network-visualizations-parameters-form.js

@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 import * as yup from "yup";
 import "react/jsx-runtime";
 import "@mui/material";
@@ -39,6 +39,11 @@ import "react-papaparse";
 import { NetworkVisualizationTabValues, PARAM_NAD_POSITIONS_GENERATION_MODE, PARAM_STATE_ESTIMATION, PARAM_COMPONENT_LIBRARY, PARAM_SUBSTATION_LAYOUT, PARAM_CENTER_LABEL, PARAM_DIAGONAL_LABEL, PARAM_MAP_BASEMAP, PARAM_MAP_MANUAL_REFRESH, PARAM_LINE_FLOW_MODE, PARAM_LINE_PARALLEL_PATH, PARAM_LINE_FULL_PATH } from "./constants.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import "../common/widget/parameter-line-slider.js";
+import "../common/contingency-table/contingency-table.js";
+import "../common/contingency-table/columns-definitions.js";
+import { useTabs } from "../common/hook/use-tabs.js";
 const useNetworkVisualizationParametersForm = ({
   parametersUuid,
   name,
@@ -46,12 +51,8 @@ const useNetworkVisualizationParametersForm = ({
   studyUuid,
   parameters
 }) => {
-  const [selectedTab, setSelectedTab] = useState(NetworkVisualizationTabValues.MAP);
   const [paramsLoading, setParamsLoading] = useState(false);
   const { snackError } = useSnackMessage();
-  const handleTabChange = useCallback((event, newValue) => {
-    setSelectedTab(newValue);
-  }, []);
   const formSchema = useMemo(() => {
     return yup.object({
       [NetworkVisualizationTabValues.MAP]: yup.object().shape({
@@ -97,6 +98,16 @@ const useNetworkVisualizationParametersForm = ({
     resolver: yupResolver(formSchema)
   });
   const { reset } = formMethods;
+  const {
+    selectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: NetworkVisualizationTabValues.MAP,
+    tabEnum: NetworkVisualizationTabValues,
+    errors: formMethods.formState.errors
+  });
   const onSaveInline = useCallback(
     (formData) => {
       if (studyUuid) {
@@ -150,7 +161,9 @@ const useNetworkVisualizationParametersForm = ({
     handleTabChange,
     paramsLoading,
     onSaveInline,
-    onSaveDialog
+    onSaveDialog,
+    tabIndexesWithError,
+    onValidationError
   };
 };
 export {

package/dist/features/parameters/security-analysis/constants.d.ts

@@ -10,7 +10,7 @@ export declare const LOW_VOLTAGE_ABSOLUTE_THRESHOLD = "lowVoltageAbsoluteThresho
 export declare const HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD = "highVoltageProportionalThreshold";
 export declare const HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = "highVoltageAbsoluteThreshold";
 export declare enum TabValues {
-    Contingencies = 0,
-    Aggravation = 1,
-    LimitReductions = 2
+    Contingencies = "Contingencies",
+    Aggravation = "Aggravation",
+    LimitReductions = "LimitReductions"
 }

package/dist/features/parameters/security-analysis/constants.js

@@ -4,9 +4,9 @@ const LOW_VOLTAGE_ABSOLUTE_THRESHOLD = "lowVoltageAbsoluteThreshold";
 const HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD = "highVoltageProportionalThreshold";
 const HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = "highVoltageAbsoluteThreshold";
 var TabValues = /* @__PURE__ */ ((TabValues2) => {
-  TabValues2[TabValues2["Contingencies"] = 0] = "Contingencies";
-  TabValues2[TabValues2["Aggravation"] = 1] = "Aggravation";
-  TabValues2[TabValues2["LimitReductions"] = 2] = "LimitReductions";
+  TabValues2["Contingencies"] = "Contingencies";
+  TabValues2["Aggravation"] = "Aggravation";
+  TabValues2["LimitReductions"] = "LimitReductions";
   return TabValues2;
 })(TabValues || {});
 export {

package/dist/features/parameters/security-analysis/security-analysis-parameters-content.d.ts

@@ -1,12 +1,10 @@
 import { ForwardedRef } from 'react';
 import { UUID } from 'node:crypto';
-import { ILimitReductionsByVoltageLevel, ContingencyTableApi } from '../common';
+import { ContingencyTableApi } from '../common';
 import { ContingencyCount } from '../common/contingency-table/types';
-import { SAParametersEnriched } from '../../../utils/types';
-export declare function SecurityAnalysisParametersContent({ params, currentProvider, defaultLimitReductions, showContingencyCount, fetchContingencyCount, contingencyTableApiRef, isBuiltCurrentNode, }: Readonly<{
-    params: SAParametersEnriched | null;
-    currentProvider?: string;
-    defaultLimitReductions: ILimitReductionsByVoltageLevel[];
+import { UseSecurityAnalysisParametersFormReturn } from './use-security-analysis-parameters-form';
+export declare function SecurityAnalysisParametersContent({ securityAnalysisMethods, showContingencyCount, fetchContingencyCount, contingencyTableApiRef, isBuiltCurrentNode, }: Readonly<{
+    securityAnalysisMethods: UseSecurityAnalysisParametersFormReturn;
     showContingencyCount: boolean;
     fetchContingencyCount?: (contingencyListIds: UUID[] | null, abortSignal: AbortSignal) => Promise<ContingencyCount>;
     contingencyTableApiRef?: ForwardedRef<ContingencyTableApi>;