@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/components/index.js

@@ -100,9 +100,8 @@ import { ExplicitNamingFilterForm, explicitNamingFilterSchema, getExplicitNaming
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from "./composite/filter/explicitNaming/ExplicitNamingFilterConstants.js";
 import { saveExpertFilter, saveExplicitNamingFilter } from "./composite/filter/utils/filterApi.js";
 import { CONTINGENCY_LIST_EQUIPMENTS, FILTER_EQUIPMENTS } from "./composite/filter/utils/filterFormUtils.js";
-import "react/jsx-runtime";
-import "@mui/material";
-import "react-intl";
+import { GridItem } from "./composite/grid/grid-item.js";
+import { GridSection } from "./composite/grid/grid-section.js";
 import { OverflowableTableCell } from "./composite/muiTable/OverflowableTableCell.js";
 import { OverflowableTableCellWithCheckbox } from "./composite/muiTable/OverflowableTableCellWithCheckbox.js";
 import { AutocompleteWithFavorites } from "./composite/reactQueryBuilder/AutocompleteWithFavorites.js";
@@ -258,6 +257,8 @@ export {
   FlatParameters,
   FloatInput,
   GLOBAL_REPORT_NODE_LABEL,
+  GridItem,
+  GridSection,
   GroupValueEditor,
   HelperPreviousValue,
   InputWithPopupConfirmation,

package/dist/components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useState, useCallback, useEffect } from "react";
-import { Grid, Button, Typography, Box, CircularProgress } from "@mui/material";
+import { Stack, Grid2, Button, Typography, Box, CircularProgress } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -186,13 +186,13 @@ function ElementSaveDialog({
   );
   const renderChooser = () => {
     if (isCreateMode) {
-      return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryDialog" }) }) }),
+      return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+        /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryDialog" }) }) }),
         /* @__PURE__ */ jsx(Typography, { m: 1, component: "span", children: /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightBold", children: destinationFolder ? destinationFolder.name : /* @__PURE__ */ jsx(CircularProgress, {}) }) })
       ] });
     }
-    return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryItemDialog" }) }) }),
+    return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryItemDialog" }) }) }),
       /* @__PURE__ */ jsx(Typography, { m: 1, component: "span", children: /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightBold", children: selectedItem ? selectedItem.fullPath : null }) })
     ] });
   };
@@ -206,8 +206,8 @@ function ElementSaveDialog({
       disabledSave: disableSave,
       formContext: { ...formMethods, validationSchema: schema },
       children: [
-        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, marginTop: "auto", direction: "column", children: [
-          !createOnlyMode && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Stack, { spacing: 2, marginTop: "auto", children: [
+          !createOnlyMode && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
             RadioInput,
             {
               name: FieldConstants.OPERATION_TYPE,
@@ -224,7 +224,7 @@ function ElementSaveDialog({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
             UniqueNameInput,
             {
               name: FieldConstants.NAME,
@@ -235,7 +235,7 @@ function ElementSaveDialog({
               autoFocus: true
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
+          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
           renderChooser()
         ] }),
         /* @__PURE__ */ jsx(

package/dist/components/ui/dialogs/modifyElementSelection/ModifyElementSelection.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Grid, Typography, Box, Button } from "@mui/material";
+import { Grid2, Typography, Box, Button } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useController } from "react-hook-form";
 import { FolderOutlined } from "@mui/icons-material";
@@ -47,14 +47,14 @@ function ModifyElementSelection(props) {
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       sx: {
         marginTop: "10px",
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+        /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
           /* @__PURE__ */ jsx(Typography, { m: 1, component: "span", children: /* @__PURE__ */ jsxs(Box, { fontWeight: "fontWeightBold", display: "flex", justifyContent: "center", alignItems: "center", children: [
             /* @__PURE__ */ jsx(FolderOutlined, {}),
             /* @__PURE__ */ jsxs("span", { children: [

package/dist/components/ui/reactHookForm/errorManagement/FieldErrorAlert.js

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

package/dist/components/ui/reactHookForm/expandableInput/DeletableRow.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { RestoreFromTrash, Delete } from "@mui/icons-material";
 import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 function DeletableRow({
@@ -14,17 +14,17 @@ function DeletableRow({
   const intl = useIntl();
   const [isMouseHover, setIsMouseHover] = useState(false);
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       container: true,
       spacing: 2,
-      item: true,
+      size: 12,
       alignItems,
       onMouseEnter: () => setIsMouseHover(true),
       onMouseLeave: () => setIsMouseHover(false),
       children: [
         children,
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid2, { size: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
           CustomTooltip,
           {
             title: intl.formatMessage({

package/dist/components/ui/reactHookForm/expandableInput/ExpandableInput.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useFieldArray } from "react-hook-form";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { forwardRef, useImperativeHandle } from "react";
 import { DeletableRow } from "./DeletableRow.js";
 import { ErrorInput } from "../errorManagement/ErrorInput.js";
@@ -40,8 +40,8 @@ const ExpandableInput = forwardRef(
       }),
       [append, replace]
     );
-    return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
+    return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
       watchProps && values.map((value, idx) => /* @__PURE__ */ jsx(
         DeletableRow,
         {
@@ -58,7 +58,7 @@ const ExpandableInput = forwardRef(
         },
         value.id
       )),
-      addButtonLabel && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(AddButton, { disabled, onClick: () => append(initialValue), label: addButtonLabel }) })
+      addButtonLabel && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(AddButton, { disabled, onClick: () => append(initialValue), label: addButtonLabel }) })
     ] });
   }
 );

package/dist/components/ui/reactHookForm/numbers/RangeInput.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useWatch } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
 import { useMemo } from "react";
-import { FormControl, InputLabel, Grid } from "@mui/material";
+import { FormControl, InputLabel, Grid2 } from "@mui/material";
 import * as yup from "yup";
 import { FloatInput } from "./FloatInput.js";
 import { MuiSelectInput } from "../selectInputs/MuiSelectInput.js";
@@ -51,8 +51,8 @@ function RangeInput({ name, label }) {
   const isOperationTypeRange = useMemo(() => watchOperationType === RangeType.RANGE.id, [watchOperationType]);
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
     /* @__PURE__ */ jsx(InputLabel, { sx: style.inputLegend, shrink: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, style: isOperationTypeRange ? { flex: "min-content" } : {}, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 0, children: [
+      /* @__PURE__ */ jsx(Grid2, { style: isOperationTypeRange ? { flex: "min-content" } : {}, children: /* @__PURE__ */ jsx(
         MuiSelectInput,
         {
           name: `${name}.${FieldConstants.OPERATION_TYPE}`,
@@ -60,7 +60,7 @@ function RangeInput({ name, label }) {
           fullWidth: true
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           label: "",
@@ -72,7 +72,7 @@ function RangeInput({ name, label }) {
           }
         }
       ) }),
-      isOperationTypeRange && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      isOperationTypeRange && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: `${name}.${FieldConstants.VALUE_2}`,

package/dist/components/ui/reactHookForm/utils/functions.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
 import { getIn } from "yup";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 function genHelperError(...errors) {
   const inError = errors.find((e) => e);
   if (inError) {
@@ -20,7 +20,7 @@ const isFieldRequired = (fieldName, schema, values) => {
   return fieldSchema.describe({ parent: parentValues })?.optional === false;
 };
 const gridItem = (field, size = 6) => {
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: size, alignItems: "start", children: field });
+  return /* @__PURE__ */ jsx(Grid2, { size, sx: { alignItems: "start" }, children: field });
 };
 const toFloatOrNullValue = (value) => {
   if (value === "-") {

package/dist/features/authentication/AuthenticationRouter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useCallback } from "react";
 import { Routes, Route, Navigate } from "react-router";
 import { Login } from "./Login.js";
@@ -26,7 +26,7 @@ function AuthenticationRouter({
       handleSilentRenewCallback(userManager.instance);
     }
   }, [userManager.instance]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, alignContent: "center", alignItems: "center", direction: "column", children: [
+  return /* @__PURE__ */ jsxs(Stack, { alignItems: "center", sx: { width: "100%" }, children: [
     userManager.error !== null && /* @__PURE__ */ jsxs("h1", { children: [
       "Error : Getting userManager; ",
       userManager.error

package/dist/features/authentication/AuthenticationRouterErrorDisplay.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { Logout } from "./Logout.js";
 import { logout } from "./utils/authService.js";
 import "./utils/userManagerMock.js";
@@ -8,8 +8,8 @@ import { ErrorInUserValidationAlert } from "./alert/ErrorInUserValidationAlert.j
 import { UnauthorizedAccessAlert } from "./alert/UnauthorizedAccessAlert.js";
 function AuthenticationRouterErrorDisplay({ errorState, instance, dispatch }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Logout, { disabled: instance === null, onLogoutClick: () => logout(dispatch, instance) }) }),
-    /* @__PURE__ */ jsxs(Grid, { item: true, xs: 4, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Logout, { disabled: instance === null, onLogoutClick: () => logout(dispatch, instance) }) }),
+    /* @__PURE__ */ jsxs(Grid2, { size: 4, children: [
       errorState.logoutError && /* @__PURE__ */ jsx(ErrorInLogoutAlert, { userName: errorState.userName, message: errorState.logoutError.error.message }),
       errorState.userValidationError && /* @__PURE__ */ jsx(
         ErrorInUserValidationAlert,

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/battery/creation/BatteryCreationForm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { filledTextField } from "../../common/form.utils.js";
 import { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import "react";
@@ -36,7 +36,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 "react-dom";
 import "autosuggest-highlight/match";
 import "autosuggest-highlight/parse";
@@ -51,7 +51,7 @@ import "react-querybuilder";
 import "uuid";
 import "../../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
 import "../../../../components/composite/filter/utils/filterFormUtils.js";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import "@react-querybuilder/material";
 import "../../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "../../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
@@ -103,21 +103,21 @@ function BatteryCreationForm({
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: batteryIdField }),
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: batteryNameField })
     ] }),
     /* @__PURE__ */ jsx(GridSection, { title: "Connectivity" }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivityForm }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivityForm }) }),
     /* @__PURE__ */ jsx(GridSection, { title: "ActiveLimits" }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: minimumActivePowerField }),
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: maximumActivePowerField })
     ] }),
     /* @__PURE__ */ jsx(GridSection, { title: "ReactiveLimits" }),
     /* @__PURE__ */ jsx(ReactiveLimitsForm, {}),
     /* @__PURE__ */ jsx(SetPointsForm, {}),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(ActivePowerControlForm, {}) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(ActivePowerControlForm, {}) }),
     /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuit" }),
     /* @__PURE__ */ jsx(ShortCircuitForm, {}),
     /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "battery" })

package/dist/features/network-modifications/battery/modification/BatteryDialogHeader.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, TextField } from "@mui/material";
+import { Grid2, TextField } from "@mui/material";
 import { filledTextField } from "../../common/form.utils.js";
 import "react";
 import "react-hook-form";
@@ -62,8 +62,8 @@ import "../../../../components/composite/report/report-treeview/treeview-item.js
 import "../../../../components/composite/report/report-viewer/context/report-viewer-context.js";
 import "../../common/regulatingTerminal/RegulatingTerminalForm.js";
 function BatteryDialogHeader({ batteryToModify, equipmentId }) {
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextField,
       {
         size: "small",
@@ -77,7 +77,7 @@ function BatteryDialogHeader({ batteryToModify, equipmentId }) {
         ...filledTextField
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: FieldConstants.EQUIPMENT_NAME,

package/dist/features/network-modifications/battery/modification/BatteryDialogTabsContent.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { BatteryDialogTab } from "./batteryTabs.utils.js";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import "react";
 import "react-hook-form";
@@ -99,7 +99,7 @@ function BatteryDialogTabsContent({
     ] }),
     /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== BatteryDialogTab.LIMITS_AND_SETPOINTS_TAB, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "Setpoints" }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
           FloatInput,
           {
@@ -121,18 +121,18 @@ function BatteryDialogTabsContent({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(
         ActivePowerControlForm,
         {
           isEquipmentModification: true,
           previousValues: batteryToModify?.activePowerControl
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid2, { size: 12, children: [
         /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Limits" }) }),
         /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ActiveLimits" }) })
       ] }) }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
           FloatInput,
           {
@@ -154,7 +154,7 @@ function BatteryDialogTabsContent({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ReactiveLimits" }) }) }) }),
+      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ReactiveLimits" }) }) }) }),
       /* @__PURE__ */ jsx(
         ReactiveLimitsForm,
         {

package/dist/features/network-modifications/battery/modification/BatteryModificationForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Stack, Grid2 } from "@mui/material";
 import { useWatch } from "react-hook-form";
 import { BatteryDialogHeader } from "./BatteryDialogHeader.js";
 import { BatteryDialogTabs } from "./BatteryDialogTabs.js";
@@ -22,9 +22,9 @@ function BatteryModificationForm({
     BatteryDialogTab.CONNECTIVITY_TAB
   );
   const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(BatteryDialogHeader, { batteryToModify, equipmentId }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(BatteryDialogHeader, { batteryToModify, equipmentId }) }),
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       BatteryDialogTabs,
       {
         tabIndex,
@@ -32,7 +32,7 @@ function BatteryModificationForm({
         setTabIndex
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       BatteryDialogTabsContent,
       {
         tabIndex,

package/dist/features/network-modifications/by-filter/assignment/assignment/assignment-form.js

@@ -43,7 +43,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import { DataType } from "./assignment.type.js";
-import GridItem from "../../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../../components/composite/grid/grid-item.js";
 import { EQUIPMENTS_FIELDS } from "./assignment-constants.js";
 import { EMPTY_FIELD_VALUE } from "./assignment-utils.js";
 const comparatorStrIgnoreCase = (str1, str2) => {

package/dist/features/network-modifications/by-filter/assignment/modification-by-assignment-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import "@mui/icons-material";
 import "react-intl";
@@ -34,7 +34,7 @@ import "../../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import AssignmentForm from "./assignment/assignment-form.js";
 import { getAssignmentInitialValue } from "./assignment/assignment-utils.js";
 import { EQUIPMENTS_FIELDS } from "./assignment/assignment-constants.js";
@@ -75,8 +75,8 @@ function ModificationByAssignmentForm() {
     }
   );
   return /* @__PURE__ */ jsxs(Box, { sx: mergeSx(unscrollableDialogStyles.unscrollableContainer, { height: "100%" }), children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, sx: unscrollableDialogStyles.unscrollableHeader, children: /* @__PURE__ */ jsx(GridItem, { size: 3.15, children: equipmentTypeField }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, sx: unscrollableDialogStyles.scrollableContent, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: assignmentsField }) })
+    /* @__PURE__ */ jsx(Grid2, { container: true, sx: unscrollableDialogStyles.unscrollableHeader, children: /* @__PURE__ */ jsx(GridItem, { size: 3.15, children: equipmentTypeField }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, sx: unscrollableDialogStyles.scrollableContent, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: assignmentsField }) })
   ] });
 }
 export {

package/dist/features/network-modifications/by-filter/deletion/ByFilterDeletionForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useCallback } from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 import "@mui/icons-material";
@@ -45,8 +45,8 @@ function ByFilterDeletionForm() {
   const handleEquipmentTypeChange = useCallback(() => {
     setValue(FieldConstants.FILTERS, []);
   }, [setValue]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, pt: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, pt: 1, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         isOptionEqualToValue: richTypeEquals,
@@ -58,7 +58,7 @@ function ByFilterDeletionForm() {
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       DirectoryItemsInput,
       {
         name: FieldConstants.FILTERS,

package/dist/features/network-modifications/common/activePowerControl/ActivePowerControlForm.js

@@ -8,7 +8,7 @@ import { CustomTooltip } from "../../../../components/ui/tooltip/CustomTooltip.j
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import "../../../../components/ui/overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";

package/dist/features/network-modifications/common/connectivity/BranchConnectivityForm.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";

package/dist/features/network-modifications/common/connectivity/ConnectivityForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -54,8 +54,8 @@ function ConnectivityForm({
     return previousValues.terminalConnected ? intl.formatMessage({ id: "connected" }) : intl.formatMessage({ id: "disconnected" });
   }, [intl, previousValues, isEquipmentModification]);
   const previousConnectionDirectionLabel = isEquipmentModification ? getConnectionDirectionLabel(previousValues?.connectablePosition?.connectionDirection) ?? null : null;
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(
       VoltageLevelConnectivityForm,
       {
         id,
@@ -67,7 +67,7 @@ function ConnectivityForm({
         fetchBusesOrBusbarSections
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: isEquipmentModification ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: isEquipmentModification ? /* @__PURE__ */ jsx(
       CheckboxNullableInput,
       {
         name: `${id}.${FieldConstants.CONNECTED}`,
@@ -75,7 +75,7 @@ function ConnectivityForm({
         previousValue: previousConnectedField ?? void 0
       }
     ) : /* @__PURE__ */ jsx(SwitchInput, { name: `${id}.${FieldConstants.CONNECTED}`, label: "connected" }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: `${id}.${FieldConstants.CONNECTION_NAME}`,
@@ -83,7 +83,7 @@ function ConnectivityForm({
         previousValue: isEquipmentModification ? previousValues?.connectablePosition?.connectionName ?? void 0 : void 0
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       SelectInput,
       {
         name: `${id}.${FieldConstants.CONNECTION_DIRECTION}`,
@@ -96,7 +96,7 @@ function ConnectivityForm({
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       PositionForm,
       {
         id,

package/dist/features/network-modifications/common/connectivity/PositionForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { ExploreOutlined, ExploreOffOutlined } from "@mui/icons-material";
 import { useState, useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
@@ -64,8 +64,8 @@ function PositionForm({
     }
     return "NoVoltageLevelPositionMessage";
   }, [isNodeBuilt, voltageLevelForPositionIcon]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       IntegerInput,
       {
         name: `${id}.${FieldConstants.CONNECTION_POSITION}`,
@@ -75,7 +75,7 @@ function PositionForm({
       }
     ) }),
     PositionDiagramPane && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { size: 1, children: /* @__PURE__ */ jsx(
         IconButton,
         {
           ...isNodeBuilt && voltageLevelForPositionIcon && { onClick: handleClickOpenDiagramPane },