@gridsuite/commons-ui 0.240.0 → 0.241.0

package/dist/components/composite/customAGGrid/custom-aggrid-filters/custom-aggrid-comparator-filter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Stack, IconButton } from "@mui/material";
 import { Close } from "@mui/icons-material";
 import { CustomAggridComparatorSelector } from "./custom-aggrid-comparator-selector.js";
 import { CustomAggridTextFilter } from "./custom-aggrid-text-filter.js";
@@ -23,7 +23,7 @@ function CustomAggridComparatorFilter({ colId, filterParams }) {
     // used for text filter as a UI type (examples: contains, startsWith..)
   } = filterParams;
   const isComparatorWithoutValue = selectedFilterComparator === FilterTextComparators.IS_EMPTY || selectedFilterComparator === FilterTextComparators.IS_NOT_EMPTY;
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", gap: 0.8, sx: { padding: "8px" }, children: [
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0.8, sx: { padding: "8px" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
       /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
         CustomAggridComparatorSelector,

package/dist/components/composite/customAGGrid/custom-aggrid-filters/custom-aggrid-text-filter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Grid, TextField, InputAdornment, IconButton } from "@mui/material";
+import { Stack, Grid2, TextField, InputAdornment, IconButton } from "@mui/material";
 import { Clear } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import "../../../../utils/conversionUtils.js";
@@ -31,8 +31,8 @@ function CustomAggridTextFilter({
 }) {
   const intl = useIntl();
   const isRoundingDisplayed = useMemo(() => !!(isNumberInput && value), [isNumberInput, value]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", gap: 0.2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0.2, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       TextField,
       {
         size: "small",
@@ -51,7 +51,7 @@ function CustomAggridTextFilter({
         }
       }
     ) }),
-    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
+    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
   ] });
 }
 export {

package/dist/components/composite/customAGGrid/custom-aggrid-filters/custom-filter-icon.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid, IconButton, Badge } from "@mui/material";
+import { Grid2, IconButton, Badge } from "@mui/material";
 import { FilterAlt } from "@mui/icons-material";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -15,7 +15,7 @@ function CustomFilterIcon({
   selectedFilterComparator
 }) {
   const isFilterActive = selectedFilterData !== void 0 && selectedFilterData !== null && (isNonEmptyStringOrArray(selectedFilterData) || selectedFilterComparator === FilterTextComparators.IS_EMPTY || selectedFilterComparator === FilterTextComparators.IS_NOT_EMPTY);
-  return /* @__PURE__ */ jsx(Grid, { item: true, sx: styles.gridRoot, children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleShowFilter, children: /* @__PURE__ */ jsx(Badge, { color: "secondary", variant: isFilterActive ? "dot" : void 0, invisible: !isFilterActive, children: /* @__PURE__ */ jsx(FilterAlt, { sx: styles.iconSize }) }) }) }) });
+  return /* @__PURE__ */ jsx(Grid2, { sx: styles.gridRoot, children: /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleShowFilter, children: /* @__PURE__ */ jsx(Badge, { color: "secondary", variant: isFilterActive ? "dot" : void 0, invisible: !isFilterActive, children: /* @__PURE__ */ jsx(FilterAlt, { sx: styles.iconSize }) }) }) }) });
 }
 export {
   CustomFilterIcon

package/dist/components/composite/customAGGrid/custom-aggrid-header.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
-import { Grid, Tooltip } from "@mui/material";
+import { Grid2, Tooltip } from "@mui/material";
 import { WarningAmber } from "@mui/icons-material";
 import { CustomAggridSort } from "./custom-aggrid-sort.js";
 import { CustomMenu } from "./custom-aggrid-menu.js";
@@ -9,13 +9,23 @@ import { useCustomAggridSort } from "./hooks/use-custom-aggrid-sort.js";
 import { CustomAggridFilter } from "./custom-aggrid-filters/custom-aggrid-filter.js";
 const styles = {
   displayName: {
+    minWidth: 0,
     overflow: "hidden",
-    textOverflow: "ellipsis"
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
   },
   invalidIcon: {
     display: "flex",
     alignItems: "center",
     ml: 0.5
+  },
+  titleContainer: {
+    minWidth: 0
+  },
+  actions: {
+    flex: "0 0 auto",
+    flexWrap: "nowrap",
+    alignItems: "center"
   }
 };
 function CustomHeaderComponent({
@@ -44,39 +54,42 @@ function CustomHeaderComponent({
   const handleMouseLeave = useCallback(() => {
     setIsHoveringColumnHeader(false);
   }, []);
-  return /* @__PURE__ */ jsx(Grid, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", wrap: "nowrap", children: [
+  return /* @__PURE__ */ jsx(Grid2, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", wrap: "nowrap", sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(
-      Grid,
+      Grid2,
       {
         container: true,
         sx: {
-          cursor: isSortable ? "pointer" : "default"
+          cursor: isSortable ? "pointer" : "default",
+          ...styles.titleContainer,
+          flex: forceDisplayFilterIcon ? "0 1 auto" : void 0
         },
-        flexBasis: forceDisplayFilterIcon ? "0%" : "100%",
+        flexBasis: forceDisplayFilterIcon ? "auto" : "100%",
         children: /* @__PURE__ */ jsx(
-          Grid,
+          Grid2,
           {
             container: true,
             sx: {
-              overflow: "hidden"
+              overflow: "hidden",
+              minWidth: 0
             },
             onClick: handleClickHeader,
-            children: /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
-              /* @__PURE__ */ jsx(Grid, { item: true, children: displayName }),
-              isInvalid && /* @__PURE__ */ jsx(Grid, { item: true, sx: styles.invalidIcon, children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(Grid2, { children: displayName }),
+              isInvalid && /* @__PURE__ */ jsx(Grid2, { sx: styles.invalidIcon, children: /* @__PURE__ */ jsx(
                 Tooltip,
                 {
                   title: /* @__PURE__ */ jsx(FormattedMessage, { id: "spreadsheet/column/invalid-without-loadflow" }),
                   children: /* @__PURE__ */ jsx(WarningAmber, { fontSize: "small", color: "warning" })
                 }
               ) }),
-              sortParams && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
+              sortParams && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
             ] })
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, flex: "1", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.actions, children: [
       filterComponent && /* @__PURE__ */ jsx(
         CustomAggridFilter,
         {

package/dist/components/composite/customAGGrid/custom-aggrid-menu.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { Grid, IconButton, Badge } from "@mui/material";
+import { Grid2, IconButton, Badge } from "@mui/material";
 import { MoreVert } from "@mui/icons-material";
 const styles = {
   iconSize: {
@@ -11,7 +11,7 @@ function CustomMenu({ Menu, menuParams }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const menuButtonRef = useRef(null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, direction: "row", children: /* @__PURE__ */ jsx(IconButton, { ref: menuButtonRef, size: "small", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Badge, { color: "secondary", children: /* @__PURE__ */ jsx(MoreVert, { sx: styles.iconSize }) }) }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, direction: "row", children: /* @__PURE__ */ jsx(IconButton, { ref: menuButtonRef, size: "small", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Badge, { color: "secondary", children: /* @__PURE__ */ jsx(MoreVert, { sx: styles.iconSize }) }) }) }),
     /* @__PURE__ */ jsx(Menu, { open: menuOpen, onClose: () => setMenuOpen(false), anchorEl: menuButtonRef.current, ...menuParams })
   ] });
 }

package/dist/components/composite/grid/grid-section.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Grid2, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 function GridSection({ title, heading = 3, size = 12, customStyle }) {
-  return /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, size: 12, children: /* @__PURE__ */ jsx(Grid2, { size, children: /* @__PURE__ */ jsx(Box, { sx: customStyle, component: `h${heading}`, children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }) });
+  return /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Grid2, { size, children: /* @__PURE__ */ jsx(Box, { sx: customStyle, component: `h${heading}`, children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }) });
 }
 export {
   GridSection

package/dist/features/index.js

@@ -18,12 +18,14 @@ import { AboutDialog } from "./topBar/AboutDialog.js";
 import { GridLogo, LogoText } from "./topBar/GridLogo.js";
 import { DevModeBanner } from "./topBar/DevModeBanner.js";
 import { TopBar } from "./topBar/TopBar.js";
+import { ParameterLayout } from "./parameters/common/parameter-layout/parameter-layout.js";
+import { ParameterLayoutProvider, useParameterLayoutContext } from "./parameters/common/parameter-layout/parameter-layout-provider.js";
 import { formatComputingTypeLabel, isValidComputingType } from "./parameters/common/computing-type.js";
 import { COMMON_PARAMETERS, CONTINGENCIES, CONTINGENCY_LISTS, CONTINGENCY_LISTS_INFOS, PARAM_SA_FLOW_PROPORTIONAL_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_LOW_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_PROVIDER, PROVIDER, SPECIFIC_PARAMETERS, VERSION_PARAMETER, VOLTAGE_LEVEL } from "./parameters/common/constants.js";
 import { LineSeparator } from "./parameters/common/line-separator.js";
 import { LabelledButton, SwitchWithLabel, TabPanel } from "./parameters/common/parameters.js";
 import { CreateParameterDialog } from "./parameters/common/parameters-creation-dialog.js";
-import { ProviderParam } from "./parameters/common/ProviderParam.js";
+import { ProviderParam } from "./parameters/common/provider-param.js";
 import { ParameterFloat } from "./parameters/common/widget/parameter-float.js";
 import { ParameterGroup } from "./parameters/common/widget/parameter-group.js";
 import { ParameterLineDirectoryItemsInput } from "./parameters/common/widget/parameter-line-directory-items-input.js";
@@ -402,6 +404,8 @@ export {
   PSTS_EQUIPMENT_TYPES,
   ParameterFloat,
   ParameterGroup,
+  ParameterLayout,
+  ParameterLayoutProvider,
   ParameterLineDirectoryItemsInput,
   ParameterLineSlider,
   ParameterSwitch,
@@ -712,6 +716,7 @@ export {
   useListenerManager,
   useModificationsDragAndDrop,
   useNotificationsListener,
+  useParameterLayoutContext,
   useParametersForm,
   useTabs,
   useTabsWithError,

package/dist/features/network-modifications/common/measurements/BranchActiveReactivePowerMeasurementsForm.js

@@ -1,10 +1,11 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
 import { PowerMeasurementsForm } from "./PowerMeasurementsForm.js";
 import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 function BranchActiveReactivePowerMeasurementsForm({
   equipmentToModify
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(GridSection, { title: "MeasurementsSection" }),
     /* @__PURE__ */ jsx(GridSection, { title: "Side1", heading: 4 }),
     /* @__PURE__ */ jsx(

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

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

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

@@ -1,11 +1,10 @@
 import { useState, useCallback } from "react";
-import { useFormState } from "react-hook-form";
 import { isObjectEmpty } from "../../../../utils/functions.js";
 function useTabs({
   defaultTab,
-  tabEnum
+  tabEnum,
+  errors
 }) {
-  const { errors } = useFormState();
   const [selectedTab, setSelectedTab] = useState(defaultTab);
   const [tabsWithError, setTabsWithError] = useState([]);
   const onTabChange = useCallback(

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

@@ -4,13 +4,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+export * from './parameter-layout';
 export * from './computing-type';
 export * from './constants';
 export * from './parameters-edition-dialog-props';
 export * from './line-separator';
 export * from './parameters';
 export * from './parameters-creation-dialog';
-export * from './ProviderParam';
+export * from './provider-param';
 export * from './widget';
 export * from './voltage-level-table';
 export * from './limitreductions';

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

@@ -1,9 +1,11 @@
+import { ParameterLayout } from "./parameter-layout/parameter-layout.js";
+import { ParameterLayoutProvider, useParameterLayoutContext } from "./parameter-layout/parameter-layout-provider.js";
 import { formatComputingTypeLabel, isValidComputingType } from "./computing-type.js";
 import { COMMON_PARAMETERS, CONTINGENCIES, CONTINGENCY_LISTS, CONTINGENCY_LISTS_INFOS, PARAM_SA_FLOW_PROPORTIONAL_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_LOW_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_PROVIDER, PROVIDER, SPECIFIC_PARAMETERS, VERSION_PARAMETER, VOLTAGE_LEVEL } from "./constants.js";
 import { LineSeparator } from "./line-separator.js";
 import { LabelledButton, SwitchWithLabel, TabPanel } from "./parameters.js";
 import { CreateParameterDialog } from "./parameters-creation-dialog.js";
-import { ProviderParam } from "./ProviderParam.js";
+import { ProviderParam } from "./provider-param.js";
 import { ParameterFloat } from "./widget/parameter-float.js";
 import { ParameterGroup } from "./widget/parameter-group.js";
 import { ParameterLineDirectoryItemsInput } from "./widget/parameter-line-directory-items-input.js";
@@ -49,6 +51,8 @@ export {
   PROVIDER,
   ParameterFloat,
   ParameterGroup,
+  ParameterLayout,
+  ParameterLayoutProvider,
   ParameterLineDirectoryItemsInput,
   ParameterLineSlider,
   ParameterSwitch,
@@ -69,6 +73,7 @@ export {
   sanitizePercentageValue,
   toFormValuesContingencyListsInfos,
   toFormValuesLimitReductions,
+  useParameterLayoutContext,
   useParametersForm,
   useTabs
 };

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

@@ -41,6 +41,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import { LineSeparator } from "./line-separator.js";
+import "./parameter-layout/parameter-layout-provider.js";
 import "./widget/parameter-line-slider.js";
 import "./limitreductions/columns-definitions.js";
 import "./contingency-table/contingency-table.js";
@@ -96,7 +97,7 @@ function ParameterField({ id, name, type, label, description, possibleValues, sx
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", size: 12, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(CustomTooltip, { title: description, children: /* @__PURE__ */ jsx(Typography, { sx: parametersStyles.parameterName, children: label ? /* @__PURE__ */ jsx(FormattedMessage, { id: label }) : name }) }, name) }),
     /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: renderField() }),
     /* @__PURE__ */ jsx(LineSeparator, {})

package/dist/features/parameters/common/parameter-layout/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export * from './parameter-layout';
+export * from './parameter-layout-provider';

package/dist/features/parameters/common/parameter-layout/index.js

@@ -0,0 +1,7 @@
+import { ParameterLayout } from "./parameter-layout.js";
+import { ParameterLayoutProvider, useParameterLayoutContext } from "./parameter-layout-provider.js";
+export {
+  ParameterLayout,
+  ParameterLayoutProvider,
+  useParameterLayoutContext
+};

package/dist/features/parameters/common/parameter-layout/parameter-layout-provider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface ParameterLayoutContextValue {
+    isXsScreen: boolean;
+}
+export declare const useParameterLayoutContext: () => ParameterLayoutContextValue;
+export declare function ParameterLayoutProvider({ isXsScreen, children, }: Readonly<{
+    isXsScreen: boolean;
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export {};

package/dist/features/parameters/common/parameter-layout/parameter-layout-provider.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useContext } from "react";
+const ParameterLayoutContext = createContext({ isXsScreen: false });
+const useParameterLayoutContext = () => useContext(ParameterLayoutContext);
+function ParameterLayoutProvider({
+  isXsScreen,
+  children
+}) {
+  const isXsScreenMemo = useMemo(() => ({ isXsScreen }), [isXsScreen]);
+  return /* @__PURE__ */ jsx(ParameterLayoutContext.Provider, { value: isXsScreenMemo, children });
+}
+export {
+  ParameterLayoutProvider,
+  useParameterLayoutContext
+};

package/dist/features/parameters/common/parameter-layout/parameter-layout.d.ts

@@ -0,0 +1,23 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { UUID } from 'node:crypto';
+import { FieldValues, UseFormGetValues } from 'react-hook-form';
+import { TreeViewFinderNodeProps } from '../../../../components/ui';
+import { ElementType } from '../../../../utils';
+export type CreateParameterDialogConfig<T extends FieldValues> = {
+    studyUuid: UUID | null;
+    getParameterValues: UseFormGetValues<T>;
+    parameterFormatter: (params: FieldValues) => any;
+};
+interface ParameterLayoutProps<T extends FieldValues> {
+    children: ReactNode;
+    title?: string;
+    isLoading?: boolean;
+    parameterType: ElementType;
+    createParameter?: CreateParameterDialogConfig<T>;
+    selectParameterHandler?: (nodes: TreeViewFinderNodeProps[]) => void;
+    resetHandler?: () => void;
+    validateHandler?: MouseEventHandler<HTMLButtonElement>;
+    validateDisabled?: boolean;
+}
+export declare function ParameterLayout<T extends FieldValues>({ children, title, isLoading, createParameter, resetHandler, validateHandler, validateDisabled, selectParameterHandler, parameterType, }: Readonly<ParameterLayoutProps<T>>): import("react").JSX.Element;
+export {};

package/dist/features/parameters/common/parameter-layout/parameter-layout.js

@@ -0,0 +1,167 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Box, Grid2, ButtonGroup, Tooltip, LinearProgress } from "@mui/material";
+import { Upload, RestartAlt } from "@mui/icons-material";
+import { useState, useCallback } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { LabelledButton } from "../parameters.js";
+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 { SubmitButton } from "../../../../components/ui/reactHookForm/utils/SubmitButton.js";
+import "yup";
+import { DirectoryItemSelector } from "../../../../components/ui/directoryItemSelector/DirectoryItemSelector.js";
+import "../../../../components/ui/reactHookForm/numbers/RangeInput.js";
+import { PopupConfirmationDialog } from "../../../../components/ui/dialogs/popupConfirmationDialog/PopupConfirmationDialog.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 "../../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import { CreateParameterDialog } from "../parameters-creation-dialog.js";
+import { LineSeparator } from "../line-separator.js";
+import { useParameterLayoutContext } from "./parameter-layout-provider.js";
+const styles = {
+  stack: {
+    height: "100%"
+  },
+  title: {
+    paddingBottom: 0
+  },
+  content: {
+    flexGrow: 1,
+    overflowY: "auto",
+    overflowX: "hidden"
+  }
+};
+function ParameterLayout({
+  children,
+  title,
+  isLoading,
+  createParameter,
+  resetHandler,
+  validateHandler,
+  validateDisabled,
+  selectParameterHandler,
+  parameterType
+}) {
+  const { isXsScreen } = useParameterLayoutContext();
+  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
+  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
+  const handlePrefillClick = useCallback(() => {
+    setOpenSelectParameterDialog(true);
+  }, []);
+  const handleSaveClick = useCallback(() => {
+    setOpenCreateParameterDialog(true);
+  }, []);
+  const handleResetClick = useCallback(() => {
+    setOpenResetConfirmation(true);
+  }, []);
+  const handleCancelReset = useCallback(() => {
+    setOpenResetConfirmation(false);
+  }, []);
+  const intl = useIntl();
+  return /* @__PURE__ */ jsxs(Stack, { sx: styles.stack, children: [
+    (title || selectParameterHandler || resetHandler) && /* @__PURE__ */ jsx(Box, { sx: styles.title, children: /* @__PURE__ */ jsxs(Grid2, { container: true, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 4, children: title && !isXsScreen && /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: "auto", children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        selectParameterHandler && /* @__PURE__ */ jsx(
+          LabelledButton,
+          {
+            callback: handlePrefillClick,
+            label: "button.prefill",
+            "data-testid": "PrefillButton",
+            startIcon: /* @__PURE__ */ jsx(Upload, {})
+          }
+        ),
+        resetHandler && /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: "tooltip.reset" }), children: /* @__PURE__ */ jsx(
+          LabelledButton,
+          {
+            callback: handleResetClick,
+            label: "button.reset",
+            "data-testid": "ResetButton",
+            startIcon: /* @__PURE__ */ jsx(RestartAlt, {})
+          }
+        ) })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { sx: styles.content, children: isLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : children }),
+    /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsx(LineSeparator, {}),
+      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, children: [
+        createParameter && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(LabelledButton, { label: "save", "data-testid": "SaveButton", callback: handleSaveClick }) }),
+        validateHandler && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+          SubmitButton,
+          {
+            variant: "contained",
+            "data-testid": "ValidateButton",
+            onClick: validateHandler,
+            disabled: validateDisabled
+          }
+        ) })
+      ] })
+    ] }),
+    openCreateParameterDialog && createParameter && /* @__PURE__ */ jsx(
+      CreateParameterDialog,
+      {
+        studyUuid: createParameter?.studyUuid,
+        open: openCreateParameterDialog,
+        onClose: () => setOpenCreateParameterDialog(false),
+        parameterValues: createParameter?.getParameterValues,
+        parameterFormatter: createParameter?.parameterFormatter,
+        parameterType
+      }
+    ),
+    openSelectParameterDialog && selectParameterHandler && /* @__PURE__ */ jsx(
+      DirectoryItemSelector,
+      {
+        open: openSelectParameterDialog,
+        onClose: (nodes) => {
+          setOpenSelectParameterDialog(false);
+          selectParameterHandler(nodes);
+        },
+        types: [parameterType],
+        title: intl.formatMessage({
+          id: "showSelectParameterDialog"
+        }),
+        onlyLeaves: true,
+        multiSelect: false,
+        validationButtonText: intl.formatMessage({
+          id: "validate"
+        })
+      }
+    ),
+    openResetConfirmation && resetHandler && /* @__PURE__ */ jsx(
+      PopupConfirmationDialog,
+      {
+        message: "resetParamsConfirmation",
+        validateButtonLabel: "validate",
+        openConfirmationPopup: openResetConfirmation,
+        setOpenConfirmationPopup: handleCancelReset,
+        handlePopupConfirmation: () => {
+          resetHandler();
+          setOpenResetConfirmation(false);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ParameterLayout
+};

package/dist/features/parameters/common/provider-param.d.ts

@@ -0,0 +1,10 @@
+import { SxProps } from '@mui/material';
+export interface ProviderParamProps {
+    options: {
+        id: string;
+        label: string;
+    }[];
+    id?: string;
+    sx?: SxProps;
+}
+export declare function ProviderParam({ options, id, sx }: Readonly<ProviderParamProps>): import("react").JSX.Element;

package/dist/features/parameters/common/{ProviderParam.js → provider-param.js}

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { LineSeparator } from "./line-separator.js";
@@ -7,6 +7,7 @@ import "@mui/icons-material";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
 import "react";
 import "react-hook-form";
 import "localized-countries";
@@ -35,17 +36,14 @@ import "react-papaparse";
 import { PROVIDER } from "./constants.js";
 const styles = {
   providerParam: {
-    height: "fit-content",
-    justifyContent: "space-between"
+    padding: 0
   }
 };
-function ProviderParam({ options }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.providerParam, paddingRight: 1, size: 12, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-      /* @__PURE__ */ jsx(Grid2, { container: true, size: 2, children: /* @__PURE__ */ jsx(MuiSelectInput, { name: PROVIDER, size: "small", fullWidth: true, options }) })
-    ] }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, paddingTop: 1, paddingRight: 1, size: 12, children: /* @__PURE__ */ jsx(LineSeparator, {}) })
+function ProviderParam({ options, id, sx }) {
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, sx: mergeSx(styles.providerParam, sx), justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: mergeSx(parametersStyles.parameterName, { paddingRight: 2 }), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(MuiSelectInput, { name: PROVIDER, size: "small", options, "data-testid": `${id}Provider` }) }),
+    /* @__PURE__ */ jsx(LineSeparator, {})
   ] });
 }
 export {

package/dist/features/parameters/common/widget/parameter-float.js

@@ -40,7 +40,7 @@ function ParameterFloat({
   labelSize,
   inputSize
 }) {
-  const content = /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "row", spacing: 1, paddingTop: 3, size: 12, children: [
+  const content = /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "row", spacing: 1, paddingTop: 3, sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(Grid2, { size: labelSize, sx: style, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
     /* @__PURE__ */ jsx(Grid2, { size: inputSize, children: /* @__PURE__ */ jsx(FloatInput, { name, adornment }) })
   ] });

package/dist/features/parameters/common/widget/parameter-line-directory-items-input.js

@@ -39,7 +39,7 @@ function ParameterLineDirectoryItemsInput({
   hideErrorMessage,
   allowMultiSelect = true
 }) {
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, paddingBottom: 1, size: 12, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, paddingBottom: 1, sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(Grid2, { size: 7, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
     /* @__PURE__ */ jsx(Grid2, { size: 5, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       DirectoryItemsInput,