@gridsuite/commons-ui 0.192.0 → 0.193.0

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

@@ -18,6 +18,8 @@ import { LimitReductionTableRow } from "./limitreductions/limit-reduction-table-
 import { LimitReductionTableCell } from "./limitreductions/limit-reduction-table-cell.js";
 import { ContingencyTable } from "./contingency-table/contingency-table.js";
 import { COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS, ParamContingencyLists, getContingencyListsInfosFormSchema, toFormValuesContingencyListsInfos } from "./contingency-table/columns-definitions.js";
+import { useTabs } from "./hook/use-tabs.js";
+import { useParametersForm } from "./hook/use-parameters-form.js";
 export {
   COLUMNS_DEFINITIONS_CONTINGENCY_LISTS_INFOS,
   COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS,
@@ -67,5 +69,7 @@ export {
   isValidComputingType,
   sanitizePercentageValue,
   toFormValuesContingencyListsInfos,
-  toFormValuesLimitReductions
+  toFormValuesLimitReductions,
+  useParametersForm,
+  useTabs
 };

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

@@ -48,6 +48,8 @@ import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "./widget/parameter-line-slider.js";
 import "./limitreductions/columns-definitions.js";
 import "./contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../filter/HeaderFilterForm.js";
 function ParameterField({ id, name, type, label, description, possibleValues, sx }) {
   const renderField = () => {
     switch (type) {

package/dist/components/parameters/common/utils.d.ts

@@ -1,6 +1,5 @@
 import { ObjectSchema } from 'yup';
-import { SyntheticEvent } from 'react';
-import { FieldErrors, UseFormReturn } from 'react-hook-form';
+import { UseFormReturn } from 'react-hook-form';
 import { SpecificParameterInfos, SpecificParametersDescription, SpecificParametersValues } from '../../../utils';
 import { default as yup } from '../../../utils/yupConfig';
 export declare const getSpecificParametersFormSchema: (specificParameters: SpecificParameterInfos[] | undefined) => ObjectSchema<{
@@ -14,13 +13,7 @@ export declare const getDefaultSpecificParamsValues: (specificParametersDescript
 export declare const formatSpecificParameters: (specificParametersDescriptionForProvider: SpecificParameterInfos[], specificParamsList: SpecificParametersValues) => SpecificParametersValues;
 export declare const getAllSpecificParametersValues: (formData: Record<string, any>, _specificParametersValues: SpecificParametersValues) => SpecificParametersValues;
 export declare const setSpecificParameters: (provider: string, specificParamsDescriptions: SpecificParametersDescription | null, formMethods: UseFormReturn) => void;
-type UseTabsReturn<TTabValue extends string> = {
-    selectedTab: TTabValue;
-    tabsWithError: TTabValue[];
-    onTabChange: (event: SyntheticEvent, newValue: TTabValue) => void;
-    onError: (errors: FieldErrors) => void;
-};
-export type UseComputationParametersFormReturn<TTabValue extends string> = UseTabsReturn<TTabValue> & {
+export type UseComputationParametersFormReturn = {
     formMethods: UseFormReturn;
     formSchema: ObjectSchema<any>;
     paramsLoaded: boolean;
@@ -29,9 +22,3 @@ export type UseComputationParametersFormReturn<TTabValue extends string> = UseTa
         label: string;
     }[];
 };
-type UseTabsProps<TTabValue extends string> = {
-    defaultTab: TTabValue;
-    tabEnum: Record<string, TTabValue>;
-};
-export declare function useTabs<TTabValue extends string>({ defaultTab, tabEnum, }: Readonly<UseTabsProps<TTabValue>>): UseTabsReturn<TTabValue>;
-export {};

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

@@ -1,8 +1,6 @@
-import { useState, useCallback } from "react";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import { ParameterType } from "../../../utils/types/parameters.type.js";
-import { isObjectEmpty } from "../../../utils/functions.js";
 import "react/jsx-runtime";
 import "@mui/icons-material";
 import "../../../utils/yupConfig.js";
@@ -82,47 +80,10 @@ const setSpecificParameters = (provider, specificParamsDescriptions, formMethods
   const specificParamsValues = getDefaultSpecificParamsValues(specificParams);
   formMethods.setValue(SPECIFIC_PARAMETERS, specificParamsValues);
 };
-function useTabs({
-  defaultTab,
-  tabEnum
-}) {
-  const [tabValue, setTabValue] = useState(defaultTab);
-  const [tabValuesWithError, setTabValuesWithError] = useState([]);
-  const handleTabChange = useCallback((event, newValue) => {
-    setTabValue(newValue);
-  }, []);
-  const onError = useCallback(
-    (errors) => {
-      if (!errors || isObjectEmpty(errors)) {
-        return;
-      }
-      const tabsInError = [];
-      Object.values(tabEnum).forEach((tab) => {
-        if (errors?.[tab] && tab !== tabValue) {
-          tabsInError.push(tab);
-        }
-      });
-      if (tabsInError.includes(tabValue)) {
-        setTabValuesWithError(tabsInError.filter((errorTab) => errorTab !== tabValue));
-      } else if (tabsInError.length > 0) {
-        setTabValue(tabsInError[0]);
-        setTabValuesWithError(tabsInError.filter((errorTab, index, arr) => errorTab !== arr[0]));
-      }
-    },
-    [tabValue, tabEnum]
-  );
-  return {
-    selectedTab: tabValue,
-    tabsWithError: tabValuesWithError,
-    onTabChange: handleTabChange,
-    onError
-  };
-}
 export {
   formatSpecificParameters,
   getAllSpecificParametersValues,
   getDefaultSpecificParamsValues,
   getSpecificParametersFormSchema,
-  setSpecificParameters,
-  useTabs
+  setSpecificParameters
 };

package/dist/components/parameters/dynamic-margin-calculation/dynamic-margin-calculation-form.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import { UseDynamicMarginCalculationParametersFormReturn } from './use-dynamic-margin-calculation-parameters-form';
+import { FieldErrors } from 'react-hook-form';
+import { UseComputationParametersFormReturn } from '../common/utils';
 type DynamicMarginCalculationFormProps = {
-    dynamicMarginCalculationMethods: UseDynamicMarginCalculationParametersFormReturn;
+    dynamicMarginCalculationMethods: UseComputationParametersFormReturn;
     renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
+    renderActions?: (onSubmitError: (errors: FieldErrors) => void) => ReactNode;
 };
 export declare function DynamicMarginCalculationForm({ dynamicMarginCalculationMethods, renderTitleFields, renderActions, }: Readonly<DynamicMarginCalculationFormProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/parameters/dynamic-margin-calculation/dynamic-margin-calculation-form.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Grid, Tabs, Tab, LinearProgress } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
@@ -6,16 +6,20 @@ import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { mergeSx } from "../../../utils/styles.js";
 import "../../../utils/yupConfig.js";
-import "../../overflowableText/OverflowableText.js";
+import { TabPanel } from "../common/parameters.js";
 import "react";
-import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import { CustomFormProvider } from "../../inputs/reactHookForm/provider/CustomFormProvider.js";
-import "yup";
+import "react-hook-form";
+import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../treeViewFinder/TreeViewFinder.js";
+import { ProviderParam } from "../common/ProviderParam.js";
+import "../../overflowableText/OverflowableText.js";
+import "yup";
 import "../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
 import "../../customAGGrid/customAggrid.js";
 import "ag-grid-community";
@@ -26,7 +30,6 @@ 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/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
-import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
 import "@react-querybuilder/material";
 import "../../filter/expert/expertFilterConstants.js";
@@ -34,13 +37,13 @@ import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "uuid";
 import "../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
-import { TabPanel } from "../common/parameters.js";
-import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
-import { ProviderParam } from "../common/ProviderParam.js";
 import { getTabStyle, parametersStyles } from "../parameters-style.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/columns-definitions.js";
+import { useTabs } from "../common/hook/use-tabs.js";
+import "@hookform/resolvers/yup";
+import "../../filter/HeaderFilterForm.js";
 import TimeDelayParameters from "./time-delay-parameters.js";
 import LoadsVariationsParameters from "./loads-variations-parameters.js";
 import { TabValues } from "./dynamic-margin-calculation.type.js";
@@ -49,8 +52,12 @@ function DynamicMarginCalculationForm({
   renderTitleFields,
   renderActions
 }) {
-  const { formMethods, formSchema, paramsLoaded, formattedProviders, selectedTab, onTabChange, tabsWithError } = dynamicMarginCalculationMethods;
-  return /* @__PURE__ */ jsxs(CustomFormProvider, { validationSchema: formSchema, ...formMethods, children: [
+  const { paramsLoaded, formattedProviders } = dynamicMarginCalculationMethods;
+  const { selectedTab, tabsWithError, onTabChange, onError } = useTabs({
+    defaultTab: Object.values(TabValues)[0],
+    tabEnum: TabValues
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     renderTitleFields?.(),
     paramsLoaded ? /* @__PURE__ */ jsxs(Grid, { container: true, sx: { height: "100%" }, direction: "column", children: [
       /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders }) }),
@@ -88,7 +95,7 @@ function DynamicMarginCalculationForm({
         },
         "dmcParameters"
       ),
-      renderActions?.()
+      renderActions?.(onError)
     ] }) : /* @__PURE__ */ jsx(LinearProgress, {})
   ] });
 }

package/dist/components/parameters/dynamic-margin-calculation/dynamic-margin-calculation-inline.js

@@ -23,7 +23,7 @@ import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
-import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import { CustomFormProvider } from "../../inputs/reactHookForm/provider/CustomFormProvider.js";
 import "yup";
 import { DirectoryItemSelector } from "../../directoryItemSelector/DirectoryItemSelector.js";
 import "../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
@@ -47,6 +47,8 @@ import "react-querybuilder";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../filter/HeaderFilterForm.js";
 function DynamicMarginCalculationInline({
   studyUuid,
   parametersBackend,
@@ -64,7 +66,7 @@ function DynamicMarginCalculationInline({
   const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
   const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
-  const { formMethods, onError } = dynamicMarginCalculationMethods;
+  const { formSchema, formMethods } = dynamicMarginCalculationMethods;
   const { reset, handleSubmit, getValues, formState } = formMethods;
   const handleResetClick = useCallback(() => {
     setOpenResetConfirmation(true);
@@ -102,12 +104,13 @@ function DynamicMarginCalculationInline({
   useEffect(() => {
     setHaveDirtyFields(!!Object.keys(formState.dirtyFields).length);
   }, [formState, setHaveDirtyFields]);
-  const renderActions = () => {
+  const renderActions = (onSubmitError) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Grid, { container: true, item: true, children: /* @__PURE__ */ jsxs(
         Grid,
         {
           sx: mergeSx(parametersStyles.controlParametersItem, {
+            paddingTop: 1,
             paddingBottom: 2,
             paddingLeft: 0
           }),
@@ -122,7 +125,7 @@ function DynamicMarginCalculationInline({
             ),
             /* @__PURE__ */ jsx(LabelledButton, { disabled: true, callback: () => setOpenCreateParameterDialog(true), label: "save" }),
             /* @__PURE__ */ jsx(LabelledButton, { callback: handleResetClick, label: "resetToDefault" }),
-            /* @__PURE__ */ jsx(SubmitButton, { variant: "outlined", onClick: handleSubmit(onSubmit, onError), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
+            /* @__PURE__ */ jsx(SubmitButton, { variant: "outlined", onClick: handleSubmit(onSubmit, onSubmitError), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
           ]
         }
       ) }),
@@ -165,13 +168,13 @@ function DynamicMarginCalculationInline({
       )
     ] });
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, children: /* @__PURE__ */ jsx(
     DynamicMarginCalculationForm,
     {
       dynamicMarginCalculationMethods,
       renderActions
     }
-  );
+  ) });
 }
 export {
   DynamicMarginCalculationInline

package/dist/components/parameters/dynamic-margin-calculation/use-dynamic-margin-calculation-parameters-form.d.ts

@@ -1,14 +1,12 @@
 import { FieldValues } from 'react-hook-form';
 import { DynamicMarginCalculationParametersInfos } from '../../../utils/types/dynamic-margin-calculation.type';
-import { TabValues } from './dynamic-margin-calculation.type';
 import { UseComputationParametersFormReturn } from '../common/utils';
 export declare const toFormValues: (_params: DynamicMarginCalculationParametersInfos) => FieldValues;
 export declare const toParamsInfos: (_formData: FieldValues) => DynamicMarginCalculationParametersInfos;
-export type UseDynamicMarginCalculationParametersFormReturn = UseComputationParametersFormReturn<TabValues>;
 export type UseParametersFormProps = {
     providers: Record<string, string>;
     params: DynamicMarginCalculationParametersInfos | null;
     name: string | null;
     description: string | null;
 };
-export declare function useDynamicMarginCalculationParametersForm({ providers, params, name: initialName, description: initialDescription, }: Readonly<UseParametersFormProps>): UseDynamicMarginCalculationParametersFormReturn;
+export declare function useDynamicMarginCalculationParametersForm(props: Readonly<UseParametersFormProps>): UseComputationParametersFormReturn;

package/dist/components/parameters/dynamic-margin-calculation/use-dynamic-margin-calculation-parameters-form.js

@@ -1,6 +1,3 @@
-import { useForm } from "react-hook-form";
-import { useMemo, useEffect } from "react";
-import { yupResolver } from "@hookform/resolvers/yup";
 import "../../../utils/yupConfig.js";
 import { formSchema as formSchema$2, emptyFormData as emptyFormData$2 } from "./time-delay-parameters.js";
 import { formSchema as formSchema$1, emptyFormData as emptyFormData$1 } from "./loads-variations-parameters.js";
@@ -12,10 +9,12 @@ import "@mui/icons-material";
 import { PROVIDER } from "../common/constants.js";
 import "@mui/material";
 import "react-intl";
+import "react";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
+import "react-hook-form";
 import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
 import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -42,11 +41,9 @@ import "react-querybuilder";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/columns-definitions.js";
-import "../../filter/HeaderFilterForm.js";
-import { getNameElementEditorSchema, getNameElementEditorEmptyFormData } from "../common/name-element-editor/name-element-editor-utils.js";
+import { useParametersForm } from "../common/hook/use-parameters-form.js";
 import { LOADS_VARIATIONS, LOAD_MODELS_RULE, ACCURACY, CALCULATION_TYPE, LOAD_INCREASE_STOP_TIME, LOAD_INCREASE_START_TIME, MARGIN_CALCULATION_START_TIME, STOP_TIME, START_TIME } from "./constants.js";
 import { TabValues } from "./dynamic-margin-calculation.type.js";
-import { useTabs } from "../common/utils.js";
 const formSchema = yup.object().shape({
   [PROVIDER]: yup.string().required(),
   [TabValues.TAB_TIME_DELAY]: formSchema$2,
@@ -88,55 +85,13 @@ const toParamsInfos = (_formData) => ({
   loadModelsRule: _formData[TabValues.TAB_LOADS_VARIATIONS][LOAD_MODELS_RULE],
   loadsVariations: _formData[TabValues.TAB_LOADS_VARIATIONS][LOADS_VARIATIONS]
 });
-function useDynamicMarginCalculationParametersForm({
-  providers,
-  params,
-  name: initialName,
-  description: initialDescription
-}) {
-  const paramsLoaded = useMemo(() => !!params, [params]);
-  const formattedProviders = useMemo(
-    () => Object.entries(providers).map(([key, value]) => ({
-      id: key,
-      label: value
-    })),
-    [providers]
-  );
-  const returnFormSchema = useMemo(() => {
-    return initialName === null ? formSchema : formSchema.concat(getNameElementEditorSchema(initialName));
-  }, [initialName]);
-  const newEmptyFormData = useMemo(() => {
-    return {
-      ...initialName === null ? {} : getNameElementEditorEmptyFormData(initialName, initialDescription),
-      ...emptyFormData
-    };
-  }, [initialName, initialDescription]);
-  const returnFormMethods = useForm({
-    defaultValues: newEmptyFormData,
-    resolver: yupResolver(returnFormSchema)
+function useDynamicMarginCalculationParametersForm(props) {
+  return useParametersForm({
+    ...props,
+    formSchema,
+    emptyFormData,
+    toFormValues
   });
-  const { reset } = returnFormMethods;
-  useEffect(() => {
-    if (params) {
-      console.log("xxx Resetting form with params:", params);
-      reset(toFormValues(params));
-    }
-  }, [params, paramsLoaded, reset]);
-  const { selectedTab, tabsWithError, onTabChange, onError } = useTabs({
-    defaultTab: TabValues.TAB_TIME_DELAY,
-    tabEnum: TabValues
-  });
-  return {
-    formMethods: returnFormMethods,
-    formSchema: returnFormSchema,
-    paramsLoaded,
-    formattedProviders,
-    /* tab-related handling */
-    selectedTab,
-    tabsWithError,
-    onTabChange,
-    onError
-  };
 }
 export {
   toFormValues,

package/dist/components/parameters/dynamic-security-analysis/contingency-parameters.js

@@ -5,6 +5,7 @@ import "react";
 import "../../../utils/conversionUtils.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
+import { ParameterType } from "../../../utils/types/parameters.type.js";
 import "@mui/icons-material";
 import "../../../utils/yupConfig.js";
 import "localized-countries";
@@ -39,17 +40,23 @@ import { ParameterLineDirectoryItemsInput } from "../common/widget/parameter-lin
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/columns-definitions.js";
-import { TYPES, makeComponents } from "../util/make-component-utils.js";
+import "@hookform/resolvers/yup";
+import "../../filter/HeaderFilterForm.js";
 import { CONTINGENCIES_START_TIME, CONTINGENCIES_LIST_INFOS } from "./constants.js";
-const defParams = {
-  [CONTINGENCIES_START_TIME]: {
-    type: TYPES.FLOAT,
+import ParameterField from "../common/parameter-field.js";
+const params = [
+  {
+    name: CONTINGENCIES_START_TIME,
+    type: ParameterType.DOUBLE,
     label: "DynamicSecurityAnalysisContingenciesStartTime"
   }
-};
+];
 function ContingencyParameters({ path }) {
-  return /* @__PURE__ */ jsxs(Grid, { xl: 8, container: true, children: [
-    makeComponents(defParams, path),
+  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+    params.map((param) => {
+      const { name, type, ...otherParams } = param;
+      return /* @__PURE__ */ jsx(ParameterField, { id: path, name: param.name, type: param.type, ...otherParams }, param.name);
+    }),
     /* @__PURE__ */ jsx(
       ParameterLineDirectoryItemsInput,
       {

package/dist/components/parameters/dynamic-security-analysis/dynamic-security-analysis-inline.js

@@ -20,7 +20,7 @@ import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import { CustomFormProvider } from "../../inputs/reactHookForm/provider/CustomFormProvider.js";
 import "yup";
 import "../../treeViewFinder/TreeViewFinder.js";
 import "../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
@@ -44,6 +44,8 @@ import "react-querybuilder";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/columns-definitions.js";
+import "@hookform/resolvers/yup";
+import "../../filter/HeaderFilterForm.js";
 import { DynamicSecurityAnalysisParametersForm } from "./dynamic-security-analysis-parameters-form.js";
 function DynamicSecurityAnalysisInline({
   studyUuid,
@@ -59,7 +61,7 @@ function DynamicSecurityAnalysisInline({
   });
   const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
-  const { formMethods, onError } = dynamicSecurityAnalysisMethods;
+  const { formSchema, formMethods } = dynamicSecurityAnalysisMethods;
   const { handleSubmit, getValues, formState } = formMethods;
   const handleResetClick = useCallback(() => {
     setOpenResetConfirmation(true);
@@ -80,18 +82,19 @@ function DynamicSecurityAnalysisInline({
   useEffect(() => {
     setHaveDirtyFields(!!Object.keys(formState.dirtyFields).length);
   }, [formState, setHaveDirtyFields]);
-  const renderActions = () => {
+  const renderActions = (onSubmitError) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Grid, { container: true, item: true, children: /* @__PURE__ */ jsxs(
         Grid,
         {
           sx: mergeSx(parametersStyles.controlParametersItem, {
+            paddingTop: 1,
             paddingBottom: 2,
             paddingLeft: 0
           }),
           children: [
             /* @__PURE__ */ jsx(LabelledButton, { callback: handleResetClick, label: "resetToDefault" }),
-            /* @__PURE__ */ jsx(SubmitButton, { variant: "outlined", onClick: handleSubmit(onSubmit, onError), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
+            /* @__PURE__ */ jsx(SubmitButton, { variant: "outlined", onClick: handleSubmit(onSubmit, onSubmitError), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
           ]
         }
       ) }),
@@ -118,13 +121,13 @@ function DynamicSecurityAnalysisInline({
       )
     ] });
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, children: /* @__PURE__ */ jsx(
     DynamicSecurityAnalysisParametersForm,
     {
       dynamicSecurityAnalysisMethods,
       renderActions
     }
-  );
+  ) });
 }
 export {
   DynamicSecurityAnalysisInline

package/dist/components/parameters/dynamic-security-analysis/dynamic-security-analysis-parameters-form.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import { UseDynamicSecurityAnalysisParametersFormReturn } from './use-dynamic-security-analysis-parameters-form';
+import { FieldErrors } from 'react-hook-form';
+import { UseComputationParametersFormReturn } from '../common/utils';
 type DynamicSecurityAnalysisParametersFormProps = {
-    dynamicSecurityAnalysisMethods: UseDynamicSecurityAnalysisParametersFormReturn;
+    dynamicSecurityAnalysisMethods: UseComputationParametersFormReturn;
     renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
+    renderActions?: (onSubmitError: (errors: FieldErrors) => void) => ReactNode;
 };
 export declare function DynamicSecurityAnalysisParametersForm({ dynamicSecurityAnalysisMethods, renderTitleFields, renderActions, }: Readonly<DynamicSecurityAnalysisParametersFormProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/parameters/dynamic-security-analysis/dynamic-security-analysis-parameters-form.js

@@ -1,9 +1,8 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Grid, Tabs, Tab, LinearProgress } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import ScenarioParameters from "./scenario-parameters.js";
 import ContingencyParameters from "./contingency-parameters.js";
-import { parametersStyles } from "../util/styles.js";
 import { TabPanel } from "../common/parameters.js";
 import "react";
 import "../../../utils/conversionUtils.js";
@@ -16,7 +15,7 @@ import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
 import "react-hook-form";
-import { CustomFormProvider } from "../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import "../../inputs/reactHookForm/provider/CustomFormProvider.js";
 import "../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../treeViewFinder/TreeViewFinder.js";
@@ -40,62 +39,64 @@ import "../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "uuid";
 import "../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
-import { getTabStyle } from "../parameters-style.js";
+import { getTabStyle, parametersStyles } from "../parameters-style.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/columns-definitions.js";
-import { TabValues } from "./use-dynamic-security-analysis-parameters-form.js";
+import { useTabs } from "../common/hook/use-tabs.js";
+import "@hookform/resolvers/yup";
+import "../../filter/HeaderFilterForm.js";
+import { TabValues } from "./dynamic-security-analysis.type.js";
 function DynamicSecurityAnalysisParametersForm({
   dynamicSecurityAnalysisMethods,
   renderTitleFields,
   renderActions
 }) {
-  const { formMethods, formSchema, paramsLoaded, formattedProviders, selectedTab, onTabChange, tabsWithError } = dynamicSecurityAnalysisMethods;
-  return /* @__PURE__ */ jsxs(CustomFormProvider, { validationSchema: formSchema, ...formMethods, children: [
+  const { paramsLoaded, formattedProviders } = dynamicSecurityAnalysisMethods;
+  const { selectedTab, tabsWithError, onTabChange, onError } = useTabs({
+    defaultTab: TabValues.SCENARIO,
+    tabEnum: TabValues
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     renderTitleFields?.(),
-    paramsLoaded ? /* @__PURE__ */ jsxs(Grid, { sx: { height: "100%" }, children: [
+    paramsLoaded ? /* @__PURE__ */ jsxs(Grid, { container: true, sx: { height: "100%" }, direction: "column", children: [
       /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(ProviderParam, { options: formattedProviders }) }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, variant: "scrollable", onChange: onTabChange, "aria-label": "parameters", children: [
+        /* @__PURE__ */ jsx(
+          Tab,
+          {
+            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisScenario" }),
+            value: TabValues.SCENARIO,
+            sx: getTabStyle(tabsWithError, TabValues.SCENARIO)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tab,
+          {
+            label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisContingency" }),
+            value: TabValues.CONTINGENCY,
+            sx: getTabStyle(tabsWithError, TabValues.CONTINGENCY)
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs(
         Grid,
         {
+          container: true,
+          item: true,
+          xs: true,
           sx: mergeSx(parametersStyles.scrollableGrid, {
-            height: "100%",
-            paddingTop: 0
+            paddingTop: 0,
+            width: "100%"
           }),
-          children: /* @__PURE__ */ jsxs(Grid, { item: true, width: "100%", children: [
-            /* @__PURE__ */ jsxs(
-              Tabs,
-              {
-                value: selectedTab,
-                variant: "scrollable",
-                onChange: onTabChange,
-                "aria-label": "parameters",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Tab,
-                    {
-                      label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisScenario" }),
-                      value: TabValues.SCENARIO,
-                      sx: getTabStyle(tabsWithError, TabValues.SCENARIO)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Tab,
-                    {
-                      label: /* @__PURE__ */ jsx(FormattedMessage, { id: "DynamicSecurityAnalysisContingency" }),
-                      value: TabValues.CONTINGENCY
-                    }
-                  )
-                ]
-              }
-            ),
+          children: [
             /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.SCENARIO, children: /* @__PURE__ */ jsx(ScenarioParameters, { path: TabValues.SCENARIO }) }),
             /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: TabValues.CONTINGENCY, children: /* @__PURE__ */ jsx(ContingencyParameters, { path: TabValues.CONTINGENCY }) })
-          ] })
+          ]
         },
         "dsaParameters"
       ),
-      renderActions?.()
+      renderActions?.(onError)
     ] }) : /* @__PURE__ */ jsx(LinearProgress, {})
   ] });
 }

package/dist/components/parameters/dynamic-security-analysis/dynamic-security-analysis.type.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export declare enum TabValues {
+    SCENARIO = "scenario",
+    CONTINGENCY = "contingency"
+}