@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/network-modifications/voltageLevel/creation/tabs/structureTab/StructureTab.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
-import GridSection from "../../../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../../../components/composite/grid/grid-section.js";
 import "@mui/icons-material";
 import "react-intl";
 import "../../../../../../components/ui/overflowableText/OverflowableText.js";
@@ -44,9 +44,9 @@ function StructureTab() {
   const displayOmnibus = watchBusBarCount > 1 || watchSectionCount > 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "BusBarSections" }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.BUS_BAR_COUNT, label: "BusBarCount" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.SECTION_COUNT, label: "numberOfSections" }) })
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.BUS_BAR_COUNT, label: "BusBarCount" }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.SECTION_COUNT, label: "numberOfSections" }) })
     ] }),
     /* @__PURE__ */ jsx(SwitchesBetweenSections, {}),
     displayOmnibus && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/features/network-modifications/voltageLevel/creation/tabs/structureTab/couplingOmnibus/CouplingOmnibusCreation.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { AutocompleteInput } from "../../../../../../../components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.js";
 import { FieldConstants } from "../../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../../utils/conversionUtils.js";
@@ -24,7 +24,7 @@ function CouplingOmnibusCreation({ index, sectionOptions }) {
     return () => unsubscribe();
   }, [subscribe, trigger, getValues, index]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,
@@ -35,7 +35,7 @@ function CouplingOmnibusCreation({ index, sectionOptions }) {
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,

package/dist/features/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.js

@@ -32,7 +32,7 @@ import "../../../../../../../components/ui/snackbarProvider/SnackbarProvider.js"
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import GridSection from "../../../../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../../../../components/composite/grid/grid-section.js";
 import { SWITCH_TYPE } from "../../../voltageLevelCreation.utils.js";
 import { MAX_SECTIONS_COUNT } from "../../../voltageLevel.constants.js";
 function SwitchesBetweenSections() {

package/dist/features/network-modifications/voltageLevel/creation/tabs/substationTab/SubstationCreationSection.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { Delete } from "@mui/icons-material";
 import { CustomTooltip } from "../../../../../../components/ui/tooltip/CustomTooltip.js";
 import "../../../../../../components/ui/overflowableText/OverflowableText.js";
@@ -33,7 +33,7 @@ import "../../../../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import GridSection from "../../../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../../../components/composite/grid/grid-section.js";
 import { PropertiesForm } from "../../../../common/properties/PropertiesForm.js";
 import "../../../../common/properties/propertyUtils.js";
 import "react-dom";
@@ -71,11 +71,11 @@ function SubstationCreationSection({
   const intl = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "CreateSubstation" }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
-      showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
+      showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid2, { size: 1, children: /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
     ] }),
     /* @__PURE__ */ jsx(PropertiesForm, { id: FieldConstants.SUBSTATION_CREATION, networkElementType: "substation" })
   ] });

package/dist/features/network-modifications/voltageLevel/creation/tabs/substationTab/SubstationTab.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useWatch, useFormContext } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useCallback, useEffect } from "react";
 import { FieldConstants } from "../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../utils/conversionUtils.js";
@@ -56,8 +56,8 @@ function SubstationTab({ substationOptions, showDeleteButton }) {
       });
     }
   }, [setValue, getValues, watchAddSubstationCreation]);
-  return watchAddSubstationCreation ? /* @__PURE__ */ jsx(SubstationCreationSection, { showDeleteButton, onDelete: handleDeleteSubstationCreation }) : /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, pt: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: substationOptions ? /* @__PURE__ */ jsx(
+  return watchAddSubstationCreation ? /* @__PURE__ */ jsx(SubstationCreationSection, { showDeleteButton, onDelete: handleDeleteSubstationCreation }) : /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, pt: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: substationOptions ? /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: FieldConstants.SUBSTATION_ID,
@@ -70,8 +70,8 @@ function SubstationTab({ substationOptions, showDeleteButton }) {
         noOptionsText: ""
       }
     ) : /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_ID, label: "SUBSTATION" }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, mt: 0.75, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Or" }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(AddButton, { label: "CreateSubstation", onClick: handleCreateSubstation }) })
+    /* @__PURE__ */ jsx(Grid2, { mt: 0.75, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Or" }) }),
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(AddButton, { label: "CreateSubstation", onClick: handleCreateSubstation }) })
   ] });
 }
 export {

package/dist/features/network-modifications/voltageLevel/modification/VoltageLevelModificationForm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Grid2, TextField, Tabs, Tab, Box } from "@mui/material";
+import { Stack, Grid2, TextField, Tabs, Tab, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useWatch } from "react-hook-form";
 import { VoltageAdornment, KiloAmpereAdornment } from "../../../../utils/constants/adornments.js";
@@ -37,7 +37,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import "../../common/properties/propertyUtils.js";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 import { BusbarSectionVoltageMeasurementsForm } from "../../common/measurements/BusbarSectionVoltageMeasurementsForm.js";
 import "../../common/regulatingTerminal/RegulatingTerminalForm.js";
 import { getTabStyle, getTabIndicatorStyle } from "../../../parameters/parameters-style.js";
@@ -78,7 +78,7 @@ function VoltageLevelModificationForm({
     0
     /* CHARACTERISTICS_TAB */
   );
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "column", spacing: 2, children: [
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
     /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
       /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
         TextField,

package/dist/features/network-modifications/voltageLevel/modification/voltageLevelModification.utils.d.ts

@@ -55,8 +55,8 @@ export declare const voltageLevelModificationWithMeasurementsFormSchema: import(
 } & {
     busbarSectionVMeasurements: {
         value: number | null;
-        busbarSectionId: string;
         validity: boolean | null;
+        busbarSectionId: string;
     }[] | null;
 }, import('yup').AnyObject, {
     equipmentID: undefined;

package/dist/features/parameters/common/contingency-table/contingency-table.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Alert, CircularProgress } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid2, Stack, Alert, CircularProgress } from "@mui/material";
 import { forwardRef, useState, useImperativeHandle, useCallback, useEffect, useMemo } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useFormContext } from "react-hook-form";
@@ -120,7 +120,7 @@ function ContingencyTableWithApiRef({ name, showContingencyCount = false, fetchC
       })
     );
   }, [intl]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", children: [
+  return /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(
       ParameterTableField,
       {
@@ -132,7 +132,7 @@ function ContingencyTableWithApiRef({ name, showContingencyCount = false, fetchC
       }
     ),
     showContingencyCount && renderContingencyCount()
-  ] });
+  ] }) });
 }
 const ContingencyTable = forwardRef(ContingencyTableWithApiRef);
 export {

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/line-separator.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid, Divider } from "@mui/material";
+import { Grid2, Divider } from "@mui/material";
 function LineSeparator() {
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Divider, {}) });
+  return /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(Divider, {}) });
 }
 export {
   LineSeparator

package/dist/features/parameters/common/name-element-editor/name-element-editor-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2, Stack } from "@mui/material";
 import { DescriptionField } from "../../../../components/ui/reactHookForm/text/DescriptionField.js";
 import { UniqueNameInput } from "../../../../components/ui/reactHookForm/text/UniqueNameInput.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -12,8 +12,8 @@ function NameElementEditorForm({
   activeDirectory,
   elementType
 }) {
-  return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, direction: "column", marginBottom: "8px", children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, marginBottom: "8px", children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       UniqueNameInput,
       {
         name: FieldConstants.NAME,
@@ -25,7 +25,7 @@ function NameElementEditorForm({
         fullWidth: false
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: filterStyles.description }) })
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: filterStyles.description }) })
   ] }) });
 }
 export {

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Typography, Chip } from "@mui/material";
+import { Grid2, Typography, Chip } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
 import { parametersStyles } from "../parameters-style.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,9 +97,9 @@ function ParameterField({ id, name, type, label, description, possibleValues, sx
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 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(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: renderField() }),
+  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, {})
   ] }, name);
 }

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/parameter-table-field/parameter-table-field.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { Info } from "@mui/icons-material";
@@ -84,8 +84,8 @@ function ParameterTableField({
     },
     [isValidRow, onChange]
   );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, sx: sxContainerProps, children: [
-    label && /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", paddingBottom: 2, paddingTop: 2, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, sx: sxContainerProps, size: 12, children: [
+    label && /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", paddingBottom: 2, paddingTop: 2, children: [
       /* @__PURE__ */ jsx(Typography, { component: "span", variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
       tooltipProps && /* @__PURE__ */ jsx(
         CustomTooltip,

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

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
-import { Typography, Box, Button, Grid, Switch } from "@mui/material";
+import { Typography, Box, Button, Grid2, Switch } from "@mui/material";
 import { parametersStyles } from "../parameters-style.js";
 function LabelledButton({ callback, label, ...props }) {
   return /* @__PURE__ */ jsx(Button, { onClick: callback, ...props, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) });
 }
 function SwitchWithLabel({ value, label, callback }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       Switch,
       {
         checked: value,

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;