@gridsuite/commons-ui 0.250.0 → 0.251.0

package/dist/features/index.js

@@ -69,6 +69,7 @@ import { CONTINGENCIES_LIST_INFOS, CONTINGENCIES_START_TIME, SCENARIO_DURATION }
 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 { 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";
@@ -719,6 +720,8 @@ export {
   getShortCircuitEmptyFormData,
   getShortCircuitFormData,
   getShortCircuitFormSchema,
+  getTabIndicatorStyle,
+  getTabStyle,
   getVoltageRegulationEmptyFormData,
   getVoltageRegulationSchema,
   handlePostSortRows,
@@ -765,6 +768,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/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

@@ -49,6 +49,7 @@ import { CONTINGENCIES_LIST_INFOS, CONTINGENCIES_START_TIME, SCENARIO_DURATION }
 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 { DynamicMarginCalculationInline } from "./dynamic-margin-calculation/dynamic-margin-calculation-inline.js";
+import { getTabIndicatorStyle, getTabStyle, parametersStyles } from "./parameters-style.js";
 export {
   ACCURACY,
   ACTIVE,
@@ -238,11 +239,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>;

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import { Tabs, Tab } from "@mui/material";
 import "@mui/icons-material";
@@ -32,6 +32,7 @@ import "react-resizable-panels";
 import "react-papaparse";
 import "../common/parameter-layout/parameter-layout-provider.js";
 import { CONTINGENCY_LISTS_INFOS } from "../common/constants.js";
+import { getTabStyle } from "../parameters-style.js";
 import "../common/widget/parameter-line-slider.js";
 import { LimitReductionsTableForm } from "../common/limitreductions/limit-reductions-table-form.js";
 import { ContingencyTable } from "../common/contingency-table/contingency-table.js";
@@ -44,61 +45,56 @@ import "../loadflow/load-flow-advanced-parameters.js";
 import "../loadflow/load-flow-parameters-content.js";
 import { ViolationsHidingParameters } from "./security-analysis-violations-hiding.js";
 import { TabValues } from "./constants.js";
-const styles = {
-  tab: {
-    fontSize: 17,
-    fontWeight: "bold"
-  }
-};
 function SecurityAnalysisParametersContent({
-  params,
-  currentProvider,
-  defaultLimitReductions,
+  securityAnalysisMethods,
   showContingencyCount,
   fetchContingencyCount,
   contingencyTableApiRef,
   isBuiltCurrentNode
 }) {
-  const [tabSelected, setTabSelected] = useState(TabValues.Contingencies);
-  const handleTabChange = useCallback((event, newValue) => {
-    setTabSelected(newValue);
-  }, []);
-  const tabValue = useMemo(() => {
-    return tabSelected === TabValues.LimitReductions && !params?.limitReductions ? TabValues.Contingencies : tabSelected;
-  }, [params, tabSelected]);
+  const {
+    params,
+    watchProvider,
+    defaultLimitReductions,
+    selectedTab,
+    handleTabChange,
+    setSelectedTab,
+    tabIndexesWithError
+  } = securityAnalysisMethods;
+  const currentProvider = watchProvider?.trim();
   useEffect(() => {
-    if (currentProvider !== PARAM_PROVIDER_OPENLOADFLOW && tabSelected === TabValues.LimitReductions) {
-      setTabSelected(TabValues.Contingencies);
+    if (currentProvider !== PARAM_PROVIDER_OPENLOADFLOW && selectedTab === TabValues.LimitReductions) {
+      setSelectedTab(TabValues.Contingencies);
     }
-  }, [currentProvider, tabSelected]);
+  }, [currentProvider, selectedTab, setSelectedTab]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Tabs, { value: tabValue, onChange: handleTabChange, children: [
+    /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
       /* @__PURE__ */ jsx(
         Tab,
         {
-          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues[TabValues.Contingencies] }),
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.Contingencies }),
           value: TabValues.Contingencies,
-          sx: styles.tab
+          sx: getTabStyle(tabIndexesWithError, TabValues.Contingencies)
         }
       ),
       /* @__PURE__ */ jsx(
         Tab,
         {
-          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues[TabValues.Aggravation] }),
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.Aggravation }),
           value: TabValues.Aggravation,
-          sx: styles.tab
+          sx: getTabStyle(tabIndexesWithError, TabValues.Aggravation)
         }
       ),
       currentProvider === PARAM_PROVIDER_OPENLOADFLOW && params?.limitReductions && /* @__PURE__ */ jsx(
         Tab,
         {
-          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues[TabValues.LimitReductions] }),
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: TabValues.LimitReductions }),
           value: TabValues.LimitReductions,
-          sx: styles.tab
+          sx: getTabStyle(tabIndexesWithError, TabValues.LimitReductions)
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(TabPanel, { value: tabValue, index: TabValues.Contingencies, keepState: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.Contingencies, keepState: true, children: /* @__PURE__ */ jsx(
       ContingencyTable,
       {
         name: CONTINGENCY_LISTS_INFOS,
@@ -108,8 +104,8 @@ function SecurityAnalysisParametersContent({
         ref: contingencyTableApiRef
       }
     ) }),
-    /* @__PURE__ */ jsx(TabPanel, { value: tabValue, index: TabValues.Aggravation, children: /* @__PURE__ */ jsx(ViolationsHidingParameters, {}) }),
-    /* @__PURE__ */ jsx(TabPanel, { value: tabValue, index: TabValues.LimitReductions, children: currentProvider === PARAM_PROVIDER_OPENLOADFLOW && params?.limitReductions && /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params.limitReductions ?? defaultLimitReductions }) })
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.Aggravation, children: /* @__PURE__ */ jsx(ViolationsHidingParameters, {}) }),
+    /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.LimitReductions, children: currentProvider === PARAM_PROVIDER_OPENLOADFLOW && params?.limitReductions && /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params.limitReductions ?? defaultLimitReductions }) })
   ] });
 }
 export {

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

@@ -71,6 +71,7 @@ function SecurityAnalysisParametersDialog({
       open,
       onClose,
       onSave: securityAnalysisMethods.onSaveDialog,
+      onValidationError: securityAnalysisMethods.onValidationError,
       formContext: {
         ...securityAnalysisMethods.formMethods,
         validationSchema: securityAnalysisMethods.formSchema,
@@ -91,7 +92,7 @@ function SecurityAnalysisParametersDialog({
           {
             initialElementName: name,
             activeDirectory,
-            elementType: ElementType.LOADFLOW_PARAMETERS
+            elementType: ElementType.SECURITY_ANALYSIS_PARAMETERS
           }
         ) }),
         securityAnalysisMethods.paramsFormInitialized ? /* @__PURE__ */ jsx(

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

@@ -50,9 +50,7 @@ function SecurityAnalysisParametersForm({
     /* @__PURE__ */ jsx(
       SecurityAnalysisParametersContent,
       {
-        params: securityAnalysisMethods.params,
-        currentProvider: securityAnalysisMethods.watchProvider?.trim(),
-        defaultLimitReductions: securityAnalysisMethods.defaultLimitReductions,
+        securityAnalysisMethods,
         showContingencyCount,
         fetchContingencyCount,
         contingencyTableApiRef,

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

@@ -96,7 +96,10 @@ function SecurityAnalysisParametersInline({
           },
           selectParameterHandler: handleLoadParameter,
           resetHandler: executeResetAction,
-          validateHandler: handleSubmit(securityAnalysisMethods.onSaveInline),
+          validateHandler: handleSubmit(
+            securityAnalysisMethods.onSaveInline,
+            securityAnalysisMethods.onValidationError
+          ),
           children: /* @__PURE__ */ jsx(
             SecurityAnalysisParametersForm,
             {

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

@@ -0,0 +1,2 @@
+import { TabValues } from './constants';
+export declare const TAB_FIELDS: Record<TabValues, string[]>;

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

@@ -0,0 +1,54 @@
+import "react/jsx-runtime";
+import "@mui/material";
+import "@mui/icons-material";
+import "react";
+import "react-intl";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "react-hook-form";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "yup";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.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";
+import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
+import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+import "react-resizable-panels";
+import "react-papaparse";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import { CONTINGENCY_LISTS_INFOS } from "../common/constants.js";
+import "../common/widget/parameter-line-slider.js";
+import { LIMIT_REDUCTIONS_FORM } from "../common/limitreductions/columns-definitions.js";
+import "../common/contingency-table/contingency-table.js";
+import "../common/contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+import { TabValues, FLOW_PROPORTIONAL_THRESHOLD, LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, LOW_VOLTAGE_ABSOLUTE_THRESHOLD, HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, HIGH_VOLTAGE_ABSOLUTE_THRESHOLD } from "./constants.js";
+const TAB_FIELDS = {
+  [TabValues.Contingencies]: [CONTINGENCY_LISTS_INFOS],
+  [TabValues.Aggravation]: [
+    FLOW_PROPORTIONAL_THRESHOLD,
+    LOW_VOLTAGE_PROPORTIONAL_THRESHOLD,
+    LOW_VOLTAGE_ABSOLUTE_THRESHOLD,
+    HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD,
+    HIGH_VOLTAGE_ABSOLUTE_THRESHOLD
+  ],
+  [TabValues.LimitReductions]: [LIMIT_REDUCTIONS_FORM]
+};
+export {
+  TAB_FIELDS
+};

package/dist/features/parameters/security-analysis/use-security-analysis-parameters-form.d.ts

@@ -1,12 +1,17 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldErrors, UseFormReturn } from 'react-hook-form';
 import { ObjectSchema } from 'yup';
+import { SyntheticEvent } from 'react';
 import { UUID } from 'node:crypto';
 import { ComputingType, UseParametersBackendReturnProps } from '../../../utils';
 import { ILimitReductionsByVoltageLevel } from '../common';
 import { SAParametersEnriched } from '../../../utils/types';
+import { TabValues } from './constants';
 export interface UseSecurityAnalysisParametersFormReturn {
     formMethods: UseFormReturn;
     formSchema: ObjectSchema<any>;
+    selectedTab: TabValues;
+    setSelectedTab: (selectedTab: TabValues) => void;
+    handleTabChange: (event: SyntheticEvent, newValue: TabValues) => void;
     formattedProviders: {
         id: string;
         label: string;
@@ -19,5 +24,7 @@ export interface UseSecurityAnalysisParametersFormReturn {
     paramsFormInitialized: boolean;
     onSaveInline: (formData: Record<string, any>) => void;
     onSaveDialog: (formData: Record<string, any>) => void;
+    tabIndexesWithError: TabValues[];
+    onValidationError: (errors: FieldErrors) => void;
 }
 export declare const useSecurityAnalysisParametersForm: (parametersBackend: UseParametersBackendReturnProps<ComputingType.SECURITY_ANALYSIS>, parametersUuid: UUID | null, name: string | null, description: string | null) => UseSecurityAnalysisParametersFormReturn;

package/dist/features/parameters/security-analysis/use-security-analysis-parameters-form.js

@@ -40,12 +40,14 @@ import "../common/widget/parameter-line-slider.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 { useTabs } from "../common/hook/use-tabs.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
 import { getSAParametersFormSchema, toFormValueSaParameters } from "./columns-definitions.js";
 import { ACTIVATED, DESCRIPTION, NAME, ID } from "../common/parameter-table-field/constants.js";
 import "react-dom";
-import { HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, LOW_VOLTAGE_ABSOLUTE_THRESHOLD, LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, FLOW_PROPORTIONAL_THRESHOLD } from "./constants.js";
+import { TAB_FIELDS } from "./security-analysis-parameters-utils.js";
+import { HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, LOW_VOLTAGE_ABSOLUTE_THRESHOLD, LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, FLOW_PROPORTIONAL_THRESHOLD, TabValues } from "./constants.js";
 const useSecurityAnalysisParametersForm = (parametersBackend, parametersUuid, name, description) => {
   const { providers, params, updateParameters, defaultLimitReductions } = parametersBackend;
   const previousWatchProviderRef = useRef(void 0);
@@ -129,6 +131,18 @@ const useSecurityAnalysisParametersForm = (parametersBackend, parametersUuid, na
     },
     [toContingencyListsInfos, toLimitReductions]
   );
+  const {
+    selectedTab,
+    setSelectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: TabValues.Contingencies,
+    tabEnum: TabValues,
+    errors: formMethods.formState.errors,
+    tabFields: TAB_FIELDS
+  });
   const onSaveInline = useCallback(
     (formData) => {
       updateParameters(formatNewParams(formData));
@@ -175,6 +189,9 @@ const useSecurityAnalysisParametersForm = (parametersBackend, parametersUuid, na
   return {
     formMethods,
     formSchema,
+    selectedTab,
+    setSelectedTab,
+    handleTabChange,
     formattedProviders,
     defaultLimitReductions,
     toFormValueSaParameters,
@@ -183,7 +200,9 @@ const useSecurityAnalysisParametersForm = (parametersBackend, parametersUuid, na
     watchProvider,
     paramsFormInitialized,
     onSaveInline,
-    onSaveDialog
+    onSaveDialog,
+    tabIndexesWithError,
+    onValidationError
   };
 };
 export {

package/dist/features/parameters/sensi/sensitivity-parameters-selector.js

@@ -9,6 +9,7 @@ import { TabPanel } from "../common/parameters.js";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
@@ -32,6 +33,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import "../common/parameter-layout/parameter-layout-provider.js";
+import { parametersStyles } from "../parameters-style.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
@@ -217,14 +219,13 @@ function SensitivityParametersSelector({
           Tab,
           {
             value: subIndex,
-            sx: {
-              fontWeight: "bold",
-              textTransform: "capitalize",
-              ...subTabHasError[subIndex] && subIndex !== subTabValue && {
-                color: "error.main",
-                "&.Mui-selected": { color: "error.main" }
-              }
-            },
+            sx: mergeSx(
+              {
+                fontWeight: "bold",
+                textTransform: "capitalize"
+              },
+              subTabHasError[subIndex] && subIndex !== subTabValue ? parametersStyles.tabWithError : void 0
+            ),
             label: /* @__PURE__ */ jsx(FormattedMessage, { id: subTab.label })
           },
           subTab.label

package/dist/features/parameters/short-circuit/short-circuit-icc-cluster-table-cell.js

@@ -40,7 +40,7 @@ function ShortCircuitIccClusterTableCell({
   column,
   inputsDisabled
 }) {
-  return /* @__PURE__ */ jsxs(TableCell, { align: "center", sx: { fontWeight: "bold" }, children: [
+  return /* @__PURE__ */ jsxs(TableCell, { children: [
     column.dataKey === SHORT_CIRCUIT_ICC_CLUSTER_ACTIVE && /* @__PURE__ */ jsx(SwitchInput, { formProps: { size: "small" }, name: `${formName}[${rowIndex}].${column.dataKey}` }),
     column.dataKey === SHORT_CIRCUIT_ICC_CLUSTER_FILTERS && /* @__PURE__ */ jsx(
       DirectoryItemsInput,

package/dist/features/parameters/short-circuit/short-circuit-parameters-utils.d.ts

@@ -13,6 +13,7 @@ export declare enum ShortCircuitParametersTabValues {
     STUDY_AREA = "StudyArea",
     POWER_ELECTRONICS = "PowerElectronics"
 }
+export declare const TAB_FIELDS: Record<ShortCircuitParametersTabValues, string[]>;
 export declare const getCommonShortCircuitParametersFormSchema: () => yup.ObjectSchema<{
     commonParameters: {
         withFeederResult: NonNullable<boolean | undefined>;

package/dist/features/parameters/short-circuit/short-circuit-parameters-utils.js

@@ -1,5 +1,5 @@
 import * as yup from "yup";
-import { SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, NODE_CLUSTER, NODE_CLUSTER_FILTER_IDS, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, InitialVoltage, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_FEEDER_RESULT } from "./constants.js";
+import { SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS, SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, NODE_CLUSTER_FILTER_IDS, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, STARTED_GENERATORS_IN_CALCULATION_CLUSTER_THRESHOLD, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER_THRESHOLD, SHORT_CIRCUIT_PREDEFINED_PARAMS, NODE_CLUSTER, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, InitialVoltage, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_FEEDER_RESULT } from "./constants.js";
 import "react/jsx-runtime";
 import "@mui/material";
 import "@mui/icons-material";
@@ -35,7 +35,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import "../common/parameter-layout/parameter-layout-provider.js";
-import { COMMON_PARAMETERS, SPECIFIC_PARAMETERS } from "../common/constants.js";
+import { SPECIFIC_PARAMETERS, PROVIDER, COMMON_PARAMETERS } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
@@ -48,6 +48,30 @@ var ShortCircuitParametersTabValues = /* @__PURE__ */ ((ShortCircuitParametersTa
   ShortCircuitParametersTabValues2["POWER_ELECTRONICS"] = "PowerElectronics";
   return ShortCircuitParametersTabValues2;
 })(ShortCircuitParametersTabValues || {});
+const TAB_FIELDS = {
+  [
+    "General"
+    /* GENERAL */
+  ]: [PROVIDER, SHORT_CIRCUIT_PREDEFINED_PARAMS, COMMON_PARAMETERS],
+  [
+    "StudyArea"
+    /* STUDY_AREA */
+  ]: [
+    `${SPECIFIC_PARAMETERS}.${NODE_CLUSTER_FILTER_IDS}`,
+    `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER}`,
+    `${SPECIFIC_PARAMETERS}.${STARTED_GENERATORS_IN_CALCULATION_CLUSTER_THRESHOLD}`,
+    `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER}`,
+    `${SPECIFIC_PARAMETERS}.${STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER_THRESHOLD}`
+  ],
+  [
+    "PowerElectronics"
+    /* POWER_ELECTRONICS */
+  ]: [
+    `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS}`,
+    `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS}`,
+    `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS}`
+  ]
+};
 const getCommonShortCircuitParametersFormSchema = () => {
   return yup.object().shape({
     [COMMON_PARAMETERS]: yup.object().shape({
@@ -289,6 +313,7 @@ const formatShortCircuitSpecificParameters = (specificParametersDescriptionForPr
 };
 export {
   ShortCircuitParametersTabValues,
+  TAB_FIELDS,
   formatShortCircuitSpecificParameters,
   getCommonShortCircuitParametersFormSchema,
   getDefaultShortCircuitSpecificParamsValues,

package/dist/features/parameters/short-circuit/use-short-circuit-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";
@@ -34,7 +34,7 @@ import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { SHORT_CIRCUIT_PREDEFINED_PARAMS, PredefinedParameters, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, InitialVoltage, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, SHORT_CIRCUIT_VOLTAGE_RANGES, SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, NODE_CLUSTER_FILTER_IDS } from "./constants.js";
+import { SHORT_CIRCUIT_PREDEFINED_PARAMS, PredefinedParameters, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, InitialVoltage, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, SHORT_CIRCUIT_VOLTAGE_RANGES } 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";
@@ -42,7 +42,8 @@ import { SPECIFIC_PARAMETERS, COMMON_PARAMETERS, VERSION_PARAMETER, PROVIDER } f
 import "../common/widget/parameter-line-slider.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
-import { ShortCircuitParametersTabValues, getDefaultShortCircuitSpecificParamsValues, getSpecificShortCircuitParametersFormSchema, getCommonShortCircuitParametersFormSchema, getShortCircuitSpecificParametersValues, formatShortCircuitSpecificParameters } from "./short-circuit-parameters-utils.js";
+import { useTabs } from "../common/hook/use-tabs.js";
+import { getDefaultShortCircuitSpecificParamsValues, getSpecificShortCircuitParametersFormSchema, getCommonShortCircuitParametersFormSchema, getShortCircuitSpecificParametersValues, formatShortCircuitSpecificParameters, ShortCircuitParametersTabValues, TAB_FIELDS } from "./short-circuit-parameters-utils.js";
 const useShortCircuitParametersForm = ({
   parametersBackend,
   parametersUuid,
@@ -51,15 +52,8 @@ const useShortCircuitParametersForm = ({
 }) => {
   const { params, updateParameters, specificParamsDescription } = parametersBackend;
   const provider = params?.provider;
-  const [selectedTab, setSelectedTab] = useState(
-    ShortCircuitParametersTabValues.GENERAL
-  );
-  const [tabIndexesWithError, setTabIndexesWithError] = useState([]);
   const [paramsLoaded, setParamsLoaded] = useState(false);
   const { snackError } = useSnackMessage();
-  const handleTabChange = useCallback((event, newValue) => {
-    setSelectedTab(newValue);
-  }, []);
   const specificParametersDescriptionForProvider = useMemo(() => {
     return provider && specificParamsDescription?.[provider] ? specificParamsDescription[provider] : [];
   }, [provider, specificParamsDescription]);
@@ -181,20 +175,17 @@ const useShortCircuitParametersForm = ({
     },
     [provider, snackError, specificParametersDescriptionForProvider]
   );
-  const onValidationError = useCallback(
-    (_errors) => {
-      console.error("onValidationError: ", _errors);
-      const tabsInError = [];
-      if ((_errors?.[SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS] || _errors?.[SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS]) && ShortCircuitParametersTabValues.POWER_ELECTRONICS !== selectedTab) {
-        tabsInError.push(ShortCircuitParametersTabValues.POWER_ELECTRONICS);
-      }
-      if ((_errors?.[SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER] || _errors?.[SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER] || _errors?.[NODE_CLUSTER_FILTER_IDS]) && ShortCircuitParametersTabValues.STUDY_AREA !== selectedTab) {
-        tabsInError.push(ShortCircuitParametersTabValues.STUDY_AREA);
-      }
-      setTabIndexesWithError(tabsInError);
-    },
-    [selectedTab]
-  );
+  const {
+    selectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: ShortCircuitParametersTabValues.GENERAL,
+    tabEnum: ShortCircuitParametersTabValues,
+    errors: formMethods.formState.errors,
+    tabFields: TAB_FIELDS
+  });
   const onSaveInline = useCallback(
     (formData) => {
       const data = formatNewParams(formData);

package/dist/features/parameters/voltage-init/use-voltage-init-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";
@@ -38,12 +38,17 @@ import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { VoltageInitTabValues, VARIABLE_SHUNT_COMPENSATORS, SHUNT_COMPENSATORS_SELECTION_TYPE, VARIABLE_TRANSFORMERS, TRANSFORMERS_SELECTION_TYPE, VARIABLE_Q_GENERATORS, GENERATORS_SELECTION_TYPE, VOLTAGE_LIMITS_DEFAULT, HIGH_VOLTAGE_LIMIT, LOW_VOLTAGE_LIMIT, VOLTAGE_LIMITS_MODIFICATION, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, REACTIVE_SLACKS_THRESHOLD, UPDATE_BUS_VOLTAGE, GENERAL_APPLY_MODIFICATIONS, DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, DEFAULT_REACTIVE_SLACKS_THRESHOLD, DEFAULT_UPDATE_BUS_VOLTAGE, DEFAULT_GENERAL_APPLY_MODIFICATIONS, GENERAL } from "./constants.js";
+import { VARIABLE_SHUNT_COMPENSATORS, SHUNT_COMPENSATORS_SELECTION_TYPE, VARIABLE_TRANSFORMERS, TRANSFORMERS_SELECTION_TYPE, VARIABLE_Q_GENERATORS, GENERATORS_SELECTION_TYPE, VOLTAGE_LIMITS_DEFAULT, HIGH_VOLTAGE_LIMIT, LOW_VOLTAGE_LIMIT, VOLTAGE_LIMITS_MODIFICATION, VoltageInitTabValues, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, REACTIVE_SLACKS_THRESHOLD, UPDATE_BUS_VOLTAGE, GENERAL_APPLY_MODIFICATIONS, DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, DEFAULT_REACTIVE_SLACKS_THRESHOLD, DEFAULT_UPDATE_BUS_VOLTAGE, DEFAULT_GENERAL_APPLY_MODIFICATIONS } from "./constants.js";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
-import { fromVoltageInitParametersFormToParamValues, fromVoltageInitParamsDataToFormValues, fromStudyVoltageInitParamsDataToFormValues } from "./voltage-init-form-utils.js";
+import { TAB_FIELDS, fromVoltageInitParametersFormToParamValues, fromVoltageInitParamsDataToFormValues, fromStudyVoltageInitParamsDataToFormValues } from "./voltage-init-form-utils.js";
 import "react-dom";
 import { SELECTED } from "../../../components/composite/dnd-table/dnd-table.type.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 useVoltageInitParametersForm = ({
   parametersUuid,
   name,
@@ -51,13 +56,8 @@ const useVoltageInitParametersForm = ({
   studyUuid,
   parameters
 }) => {
-  const [selectedTab, setSelectedTab] = useState(VoltageInitTabValues.GENERAL);
   const [paramsLoading, setParamsLoading] = useState(false);
-  const [tabIndexesWithError, setTabIndexesWithError] = useState([]);
   const { snackError } = useSnackMessage();
-  const handleTabChange = useCallback((_event, newValue) => {
-    setSelectedTab(newValue);
-  }, []);
   const formSchema = useMemo(() => {
     return yup.object({
       [VoltageInitTabValues.GENERAL]: yup.object().shape({
@@ -140,16 +140,17 @@ const useVoltageInitParametersForm = ({
     resolver: yupResolver(formSchema)
   });
   const { reset } = formMethods;
-  const onValidationError = useCallback(
-    (errors) => {
-      const tabsInError = [];
-      if (errors?.[GENERAL] && VoltageInitTabValues.GENERAL !== selectedTab) {
-        tabsInError.push(VoltageInitTabValues.GENERAL);
-      }
-      setTabIndexesWithError(tabsInError);
-    },
-    [selectedTab]
-  );
+  const {
+    selectedTab,
+    onTabChange: handleTabChange,
+    tabsWithError: tabIndexesWithError,
+    onError: onValidationError
+  } = useTabs({
+    defaultTab: VoltageInitTabValues.GENERAL,
+    tabEnum: VoltageInitTabValues,
+    errors: formMethods.formState.errors,
+    tabFields: TAB_FIELDS
+  });
   const onSaveInline = useCallback(
     (formData) => {
       if (studyUuid) {

package/dist/features/parameters/voltage-init/voltage-init-form-utils.d.ts

@@ -1,4 +1,6 @@
 import { VoltageInitParameters, VoltageInitStudyParameters } from './voltage-init.type';
+import { VoltageInitTabValues as TabValues } from './constants';
+export declare const TAB_FIELDS: Record<TabValues, string[]>;
 export declare const fromVoltageInitParametersFormToParamValues: (newParams: Record<string, any>) => VoltageInitStudyParameters;
 export declare const fromVoltageInitParamsDataToFormValues: (parameters: VoltageInitParameters) => Record<string, any>;
 export declare const fromStudyVoltageInitParamsDataToFormValues: (parameters: VoltageInitStudyParameters) => Record<string, any>;

package/dist/features/parameters/voltage-init/voltage-init-form-utils.js

@@ -1,5 +1,5 @@
 import { EquipmentsSelectionType } from "./voltage-init.type.js";
-import { DEFAULT_UPDATE_BUS_VOLTAGE, VARIABLE_SHUNT_COMPENSATORS, SHUNT_COMPENSATORS_SELECTION_TYPE, VARIABLE_TRANSFORMERS, TRANSFORMERS_SELECTION_TYPE, VARIABLE_Q_GENERATORS, GENERATORS_SELECTION_TYPE, VOLTAGE_LIMITS_DEFAULT, HIGH_VOLTAGE_LIMIT, LOW_VOLTAGE_LIMIT, VOLTAGE_LIMITS_MODIFICATION, VoltageInitTabValues, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, REACTIVE_SLACKS_THRESHOLD, UPDATE_BUS_VOLTAGE, GENERAL_APPLY_MODIFICATIONS, DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, DEFAULT_REACTIVE_SLACKS_THRESHOLD, DEFAULT_GENERAL_APPLY_MODIFICATIONS, PRIORITY } from "./constants.js";
+import { VoltageInitTabValues, TRANSFORMERS_SELECTION_TYPE, VARIABLE_TRANSFORMERS, SHUNT_COMPENSATORS_SELECTION_TYPE, VARIABLE_SHUNT_COMPENSATORS, GENERATORS_SELECTION_TYPE, VARIABLE_Q_GENERATORS, VOLTAGE_LIMITS_MODIFICATION, VOLTAGE_LIMITS_DEFAULT, DEFAULT_UPDATE_BUS_VOLTAGE, HIGH_VOLTAGE_LIMIT, LOW_VOLTAGE_LIMIT, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, REACTIVE_SLACKS_THRESHOLD, UPDATE_BUS_VOLTAGE, GENERAL_APPLY_MODIFICATIONS, DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD, DEFAULT_REACTIVE_SLACKS_THRESHOLD, DEFAULT_GENERAL_APPLY_MODIFICATIONS, PRIORITY } from "./constants.js";
 import "react/jsx-runtime";
 import "@mui/material";
 import "@mui/icons-material";
@@ -35,6 +35,18 @@ import "react-resizable-panels";
 import "react-papaparse";
 import "react-dom";
 import { SELECTED } from "../../../components/composite/dnd-table/dnd-table.type.js";
+const TAB_FIELDS = {
+  [VoltageInitTabValues.GENERAL]: [VoltageInitTabValues.GENERAL],
+  [VoltageInitTabValues.VOLTAGE_LIMITS]: [VOLTAGE_LIMITS_MODIFICATION, VOLTAGE_LIMITS_DEFAULT],
+  [VoltageInitTabValues.EQUIPMENTS_SELECTION]: [
+    TRANSFORMERS_SELECTION_TYPE,
+    VARIABLE_TRANSFORMERS,
+    SHUNT_COMPENSATORS_SELECTION_TYPE,
+    VARIABLE_SHUNT_COMPENSATORS,
+    GENERATORS_SELECTION_TYPE,
+    VARIABLE_Q_GENERATORS
+  ]
+};
 const fromVoltageInitParametersFormToParamValues = (newParams) => {
   return {
     applyModifications: newParams?.[VoltageInitTabValues.GENERAL]?.[GENERAL_APPLY_MODIFICATIONS] ?? DEFAULT_GENERAL_APPLY_MODIFICATIONS,
@@ -209,6 +221,7 @@ const fromStudyVoltageInitParamsDataToFormValues = (parameters) => {
   };
 };
 export {
+  TAB_FIELDS,
   fromStudyVoltageInitParamsDataToFormValues,
   fromVoltageInitParametersFormToParamValues,
   fromVoltageInitParamsDataToFormValues

package/dist/features/parameters/voltage-init/voltage-init-parameters-dialog.js

@@ -61,6 +61,7 @@ function VoltageInitParametersEditionDialog({
       open,
       onClose,
       onSave: voltageInitMethods.onSaveDialog,
+      onValidationError: voltageInitMethods.onValidationError,
       titleId,
       formContext: {
         ...voltageInitMethods.formMethods,

package/dist/features/parameters/voltage-init/voltage-init-parameters-form.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Tabs, Tab, Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
-import { parametersStyles, getTabStyle, getTabIndicatorStyle } from "../parameters-style.js";
+import { parametersStyles, getTabStyle } from "../parameters-style.js";
 import "@mui/icons-material";
 import "react";
 import { TabPanel } from "../common/parameters.js";
@@ -47,43 +47,32 @@ function VoltageInitParametersForm({
 }) {
   const { selectedTab, handleTabChange, tabIndexesWithError } = voltageInitMethods;
   return /* @__PURE__ */ jsxs(Stack, { sx: parametersStyles.scrollableGrid, children: [
-    /* @__PURE__ */ jsxs(
-      Tabs,
-      {
-        value: selectedTab,
-        variant: "scrollable",
-        onChange: handleTabChange,
-        TabIndicatorProps: {
-          sx: getTabIndicatorStyle(tabIndexesWithError, selectedTab)
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Tab,
-            {
-              label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersGeneralTabLabel" }),
-              value: VoltageInitTabValues.GENERAL,
-              sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.GENERAL)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tab,
-            {
-              label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageLimits" }),
-              value: VoltageInitTabValues.VOLTAGE_LIMITS,
-              sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.VOLTAGE_LIMITS)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tab,
-            {
-              label: /* @__PURE__ */ jsx(FormattedMessage, { id: "EquipmentSelection" }),
-              value: VoltageInitTabValues.EQUIPMENTS_SELECTION,
-              sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.EQUIPMENTS_SELECTION)
-            }
-          )
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: handleTabChange, children: [
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersGeneralTabLabel" }),
+          value: VoltageInitTabValues.GENERAL,
+          sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.GENERAL)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageLimits" }),
+          value: VoltageInitTabValues.VOLTAGE_LIMITS,
+          sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.VOLTAGE_LIMITS)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(FormattedMessage, { id: "EquipmentSelection" }),
+          value: VoltageInitTabValues.EQUIPMENTS_SELECTION,
+          sx: getTabStyle(tabIndexesWithError, VoltageInitTabValues.EQUIPMENTS_SELECTION)
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
       /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.GENERAL, children: /* @__PURE__ */ jsx(GeneralParameters, { withApplyModifications: !!showActionsButtons }) }),
       /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.VOLTAGE_LIMITS, children: /* @__PURE__ */ jsx(VoltageLimitsParameters, {}) }),

package/dist/features/parameters/voltage-init/voltage-init-parameters-inline.js

@@ -104,7 +104,7 @@ function VoltageInitParametersInLine({
           },
           selectParameterHandler: handleLoadParameters,
           resetHandler: resetVoltageInitParameters,
-          validateHandler: handleSubmit(voltageInitMethods.onSaveInline),
+          validateHandler: handleSubmit(voltageInitMethods.onSaveInline, voltageInitMethods.onValidationError),
           children: /* @__PURE__ */ jsx(VoltageInitParametersForm, { voltageInitMethods, showActionsButtons: true })
         }
       )

package/dist/features/process-configs/security-analysis/update-sa-process-config.js

@@ -44,7 +44,9 @@ import "../../parameters/loadflow/load-flow-parameters-context.js";
 import "../../parameters/loadflow/load-flow-advanced-parameters.js";
 import "../../parameters/loadflow/load-flow-parameters-content.js";
 import "../../parameters/short-circuit/short-circuit-parameters-content.js";
+import "../../parameters/voltage-init/voltage-init-form-utils.js";
 import "react-dom";
+import "../../parameters/security-analysis/security-analysis-parameters-utils.js";
 import "../../parameters/sensi/utils.js";
 import "../../parameters/sensi/columns-definitions.js";
 import "../../parameters/dynamic-simulation/use-dynamic-simulation-parameters-form.js";

package/dist/index.js

@@ -227,6 +227,7 @@ import { CONTINGENCIES_LIST_INFOS, CONTINGENCIES_START_TIME, SCENARIO_DURATION }
 import { DynamicSecurityAnalysisInline } from "./features/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 "./features/parameters/dynamic-margin-calculation/constants.js";
 import { DynamicMarginCalculationInline } from "./features/parameters/dynamic-margin-calculation/dynamic-margin-calculation-inline.js";
+import { getTabIndicatorStyle, getTabStyle, parametersStyles } from "./features/parameters/parameters-style.js";
 import { filledTextField, italicFontTextField, standardTextField } from "./features/network-modifications/common/form.utils.js";
 import { PropertiesForm } from "./features/network-modifications/common/properties/PropertiesForm.js";
 import { PropertyForm } from "./features/network-modifications/common/properties/PropertyForm.js";
@@ -1438,6 +1439,8 @@ export {
   getStudyUrlWithNodeUuid,
   getStudyUrlWithNodeUuidAndRootNetworkUuid,
   getSystemLanguage,
+  getTabIndicatorStyle,
+  getTabStyle,
   getUser,
   getUserToken,
   getVoltageInitParameters,
@@ -1528,6 +1531,7 @@ export {
   onlyStartedGeneratorsOptions,
   parametersEn,
   parametersFr,
+  parametersStyles,
   parseError,
   parseIntData,
   processConfigEn,

package/package.json

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