@gridsuite/commons-ui 0.259.0 → 0.261.0

package/dist/components/ui/reactHookForm/tableInputs/table-numerical-input.js

@@ -73,34 +73,36 @@ function TableNumericalInput({
       size: "small",
       fullWidth: true,
       inputRef: ref,
-      InputProps: {
-        endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
-          transformedValue && adornment?.text,
-          clearable && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              onClick: handleClearValue,
-              style: {
-                visibility: clearable ? "visible" : "hidden"
-              },
-              children: /* @__PURE__ */ jsx(Clear, {})
-            }
-          )
-        ] }),
-        disableInjectingGlobalStyles: true,
-        // disable auto-fill animations and increase rendering perf
-        inputProps: {
-          style: {
-            fontSize: "small",
-            color: previousValue !== void 0 && previousValue === parseFloat(value) && !valueModified ? "grey" : void 0,
-            // grey out the value if it is the same as the previous one
-            textAlign: style?.textAlign ?? "left"
-          },
-          inputMode: "numeric",
-          pattern: "[0-9]*",
-          lang: "en-US",
-          // to have '.' as decimal separator
-          ...inputProps
+      slotProps: {
+        input: {
+          endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
+            transformedValue && adornment?.text,
+            clearable && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: handleClearValue,
+                style: {
+                  visibility: clearable ? "visible" : "hidden"
+                },
+                children: /* @__PURE__ */ jsx(Clear, {})
+              }
+            )
+          ] }),
+          disableInjectingGlobalStyles: true,
+          // disable auto-fill animations and increase rendering perf
+          inputProps: {
+            style: {
+              fontSize: "small",
+              color: previousValue !== void 0 && previousValue === parseFloat(value) && !valueModified ? "grey" : void 0,
+              // grey out the value if it is the same as the previous one
+              textAlign: style?.textAlign ?? "left"
+            },
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            lang: "en-US",
+            // to have '.' as decimal separator
+            ...inputProps
+          }
         }
       },
       ...hideErrorMessage ? {} : genHelperError(error?.message),

package/dist/components/ui/reactHookForm/tableInputs/table-text-input.js

@@ -25,14 +25,16 @@ function TableTextInput({ name, hideErrorMessage, inputProps, ...props }) {
       size: "small",
       fullWidth: true,
       inputRef: ref,
-      InputProps: {
-        disableInjectingGlobalStyles: true,
-        // disable auto-fill animations and increase rendering perf
-        inputProps: {
-          style: {
-            fontSize: "small"
-          },
-          ...inputProps
+      slotProps: {
+        input: {
+          disableInjectingGlobalStyles: true,
+          // disable auto-fill animations and increase rendering perf
+          inputProps: {
+            style: {
+              fontSize: "small"
+            },
+            ...inputProps
+          }
         }
       },
       ...hideErrorMessage ? {} : genHelperError(error?.message),

package/dist/components/ui/reactHookForm/text/ExpandingTextField.js

@@ -44,10 +44,12 @@ function ExpandingTextField({
       inputProps: { "data-testid": "DescriptionInputField" }
     },
     helperText: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: descriptionCounter }),
-    FormHelperTextProps: {
-      sx: {
-        ml: "auto",
-        color: (theme) => isOverTheLimit ? theme.palette.error.main : theme.palette.text.secondary
+    slotProps: {
+      formHelperText: {
+        sx: {
+          ml: "auto",
+          color: (theme) => isOverTheLimit ? theme.palette.error.main : theme.palette.text.secondary
+        }
       }
     },
     ...rowsToDisplay && { rows: rowsToDisplay },

package/dist/components/ui/reactHookForm/text/TextInput.js

@@ -67,11 +67,13 @@ function TextInput({
       value: transformedValue ?? "",
       onChange: handleValueChanged,
       disabled,
-      InputProps: {
-        endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
-          clearable && transformedValue !== void 0 && transformedValue !== "" && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearValue, size: "small", children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" }) }),
-          customAdornment && { ...customAdornment }
-        ] })
+      slotProps: {
+        input: {
+          endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
+            clearable && transformedValue !== void 0 && transformedValue !== "" && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearValue, size: "small", children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" }) }),
+            customAdornment && { ...customAdornment }
+          ] })
+        }
       },
       inputRef: ref,
       ...clearable && adornment && {

package/dist/components/ui/reactHookForm/text/UniqueNameInput.js

@@ -58,10 +58,12 @@ function UniqueNameInput({
       fullWidth,
       error: !!error,
       helperText: translatedError,
-      InputProps: {
-        endAdornment,
-        inputProps: {
-          "data-testid": "NameInputField"
+      slotProps: {
+        input: {
+          endAdornment,
+          inputProps: {
+            "data-testid": "NameInputField"
+          }
         }
       },
       ...formProps

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

@@ -18,15 +18,17 @@ function HelperPreviousValue({
       CustomTooltip,
       {
         title: intl.formatMessage({ id: isNodeBuilt ? "builtNodeTooltip" : "notBuiltNodeTooltip" }),
-        PopperProps: {
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, -10]
+        slotProps: {
+          popper: {
+            modifiers: [
+              {
+                name: "offset",
+                options: {
+                  offset: [0, -10]
+                }
               }
-            }
-          ]
+            ]
+          }
         },
         children: isNodeBuilt ? /* @__PURE__ */ jsx(InfoOutlined, { color: "info", fontSize: "small" }) : /* @__PURE__ */ jsx(WarningAmberRounded, { color: "warning", fontSize: "small" })
       }

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

@@ -51,9 +51,11 @@ function TextFieldWithAdornment(props) {
       ...otherProps,
       variant,
       value,
-      InputProps: adornmentPosition === "start" ? withStartAdornmentText() : withEndAdornmentText(),
       onFocus: () => setIsFocused(true),
-      onBlur: () => setIsFocused(false)
+      onBlur: () => setIsFocused(false),
+      slotProps: {
+        input: adornmentPosition === "start" ? withStartAdornmentText() : withEndAdornmentText()
+      }
     }
   );
 }

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 { Grid2 } from "@mui/material";
+import { Grid } 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(Grid2, { size, sx: { alignItems: "start" }, children: field });
+  return /* @__PURE__ */ jsx(Grid, { size, sx: { alignItems: "start" }, children: field });
 };
 const toFloatOrNullValue = (value) => {
   if (value === "-") {

package/dist/features/authentication/AuthenticationRouterErrorDisplay.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } 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(Grid2, { children: /* @__PURE__ */ jsx(Logout, { disabled: instance === null, onLogoutClick: () => logout(dispatch, instance) }) }),
-    /* @__PURE__ */ jsxs(Grid2, { size: 4, children: [
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Logout, { disabled: instance === null, onLogoutClick: () => logout(dispatch, instance) }) }),
+    /* @__PURE__ */ jsxs(Grid, { size: 4, children: [
       errorState.logoutError && /* @__PURE__ */ jsx(ErrorInLogoutAlert, { userName: errorState.userName, message: errorState.logoutError.error.message }),
       errorState.userValidationError && /* @__PURE__ */ jsx(
         ErrorInUserValidationAlert,

package/dist/features/global-filter/ui/global-filter-dropdown-panel.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { ClickAwayListener, Paper, Grid2, Typography, Button, List, ListItemButton, ListItemText, Box } from "@mui/material";
+import { ClickAwayListener, Paper, Grid, Typography, Button, List, ListItemButton, ListItemText, Box } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { FileUpload } from "@mui/icons-material";
 import { useState, useMemo, useCallback } from "react";
@@ -159,16 +159,16 @@ function GlobalFilterDropdownPanel({
             setOpenedDropdown(false);
           }
         },
-        children: /* @__PURE__ */ jsx(Paper, { sx: resultsGlobalFilterStyles.dropdown, children: /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
-          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN1, sx: resultsGlobalFilterStyles.cellHeader, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Paper, { sx: resultsGlobalFilterStyles.dropdown, children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+          /* @__PURE__ */ jsx(Grid, { size: XS_COLUMN1, sx: resultsGlobalFilterStyles.cellHeader, children: /* @__PURE__ */ jsx(
             LabelWithInfoTooltip,
             {
               text: "results.globalFilter.categories",
               tooltipMessage: "results.globalFilter.categoriesHelp"
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN2, sx: resultsGlobalFilterStyles.cellHeader }),
-          /* @__PURE__ */ jsxs(Grid2, { size: XS_COLUMN3, sx: resultsGlobalFilterStyles.cellHeader, children: [
+          /* @__PURE__ */ jsx(Grid, { size: XS_COLUMN2, sx: resultsGlobalFilterStyles.cellHeader }),
+          /* @__PURE__ */ jsxs(Grid, { size: XS_COLUMN3, sx: resultsGlobalFilterStyles.cellHeader, children: [
             /* @__PURE__ */ jsx(Typography, { variant: "caption", children: filtersMsg }),
             /* @__PURE__ */ jsx(
               Button,
@@ -181,7 +181,7 @@ function GlobalFilterDropdownPanel({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN1, sx: resultsGlobalFilterStyles.cell, children: /* @__PURE__ */ jsx(List, { sx: resultsGlobalFilterStyles.list, children: categories.map((category) => {
+          /* @__PURE__ */ jsx(Grid, { size: XS_COLUMN1, sx: resultsGlobalFilterStyles.cell, children: /* @__PURE__ */ jsx(List, { sx: resultsGlobalFilterStyles.list, children: categories.map((category) => {
             return /* @__PURE__ */ jsx(
               ListItemButton,
               {
@@ -206,7 +206,7 @@ function GlobalFilterDropdownPanel({
               category
             );
           }) }) }),
-          /* @__PURE__ */ jsxs(Grid2, { size: XS_COLUMN2, sx: resultsGlobalFilterStyles.cell, children: [
+          /* @__PURE__ */ jsxs(Grid, { size: XS_COLUMN2, sx: resultsGlobalFilterStyles.cell, children: [
             /* @__PURE__ */ jsx(
               Box,
               {
@@ -229,7 +229,7 @@ function GlobalFilterDropdownPanel({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(Grid2, { size: XS_COLUMN3, sx: resultsGlobalFilterStyles.cell, children: /* @__PURE__ */ jsx(SelectedGlobalFilters, { translateCountryCode }) })
+          /* @__PURE__ */ jsx(Grid, { size: XS_COLUMN3, sx: resultsGlobalFilterStyles.cell, children: /* @__PURE__ */ jsx(SelectedGlobalFilters, { translateCountryCode }) })
         ] }) })
       }
     ),

package/dist/features/global-filter/ui/global-filter-panel.js

@@ -78,17 +78,19 @@ function RenderInput({
       id,
       size,
       fullWidth,
-      inputProps,
       disabled,
       label: intl.formatMessage({
         id: "results.globalFilter.fillerText"
       }),
-      InputProps: {
-        ...otherInputProps,
-        startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(FilterAlt, {}) }),
-          startAdornment
-        ] })
+      slotProps: {
+        htmlInput: inputProps,
+        input: {
+          ...otherInputProps,
+          startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(FilterAlt, {}) }),
+            startAdornment
+          ] })
+        }
       }
     }
   );
@@ -146,15 +148,17 @@ function WarningTooltip({ warningEquipmentTypeMessage }) {
       title: warningEquipmentTypeMessage,
       placement: "right",
       arrow: true,
-      PopperProps: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, -15]
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, -15]
+              }
             }
-          }
-        ]
+          ]
+        }
       },
       children: /* @__PURE__ */ jsx(IconButton, { size: "small", sx: { cursor: "default" }, children: /* @__PURE__ */ jsx(WarningAmberRounded, { color: "warning", fontSize: "medium" }) })
     }
@@ -251,7 +255,7 @@ function GlobalFilterPanel({
     ]
   );
   const inputFieldChip = useCallback(
-    (element, index, getTagsProps, filtersNumber) => {
+    (element, index, getItemProps, filtersNumber) => {
       const label = getOptionLabel(element, translateCountryCode, intl);
       const key = `inputFieldChip_${element.label}`;
       if (index < TAG_LIMIT_NUMBER) {
@@ -259,7 +263,7 @@ function GlobalFilterPanel({
           OverflowableChip,
           {
             label,
-            ...getTagsProps({ index }),
+            ...getItemProps({ index }),
             key,
             sx: getResultsGlobalFiltersChipStyle(element)
           }
@@ -336,7 +340,7 @@ function GlobalFilterPanel({
         options,
         onChange: handleOnChange,
         renderInput: RenderInput,
-        renderTags: (filters, getTagsProps) => {
+        renderValue: (filters, getItemProps) => {
           return /* @__PURE__ */ jsx(
             Box,
             {
@@ -348,7 +352,7 @@ function GlobalFilterPanel({
                 maxWidth: "90%"
               },
               children: filters.map((element, index) => {
-                return inputFieldChip(element, index, getTagsProps, filters.length);
+                return inputFieldChip(element, index, getItemProps, filters.length);
               })
             }
           );
@@ -368,16 +372,18 @@ function GlobalFilterPanel({
         },
         isOptionEqualToValue,
         filterOptions: (autocompleteOptions, state) => filterOptions(autocompleteOptions, state),
-        PaperComponent: PaperComponentMemo,
-        ListboxProps: {
-          sx: {
-            "& .MuiAutocomplete-option": {
-              paddingLeft: 0,
-              paddingRight: 0
-            },
-            height: "100%",
-            maxHeight: "100%",
-            overflowY: "auto"
+        slots: { paper: PaperComponentMemo },
+        slotProps: {
+          listbox: {
+            sx: {
+              "& .MuiAutocomplete-option": {
+                paddingLeft: 0,
+                paddingRight: 0
+              },
+              height: "100%",
+              maxHeight: "100%",
+              overflowY: "auto"
+            }
           }
         },
         noOptionsText: ""

package/dist/features/network-modification-table/network-modification-table-styles.js

@@ -1,4 +1,3 @@
-import { lighten, alpha, darken } from "@mui/material";
 const HIGHLIGHT_COLOR_BASE = "rgba(144, 202, 249, 0.16)";
 const HIGHLIGHT_COLOR_HOVER = "rgba(144, 202, 249, 0.24)";
 const ROW_HOVER_COLOR = "rgba(144, 202, 249, 0.08)";
@@ -6,7 +5,7 @@ const DRAG_OPACITY = 0.5;
 const DEACTIVATED_OPACITY = 0.4;
 const MODIFICATION_ROW_HEIGHT = 41;
 const DEPTH_CELL_WIDTH = 32;
-const createCellBorderColor = (theme) => theme.palette.mode === "light" ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
+const createCellBorderColor = (theme) => theme.palette.mode === "light" ? theme.lighten(theme.alpha(theme.palette.divider, 1), 0.88) : theme.darken(theme.alpha(theme.palette.divider, 1), 0.68);
 const networkModificationTableStyles = {
   tableWrapper: (theme) => ({
     display: "flex",
@@ -190,7 +189,7 @@ function getRowBackgroundColor(isHighlighted, isComposite, theme) {
   if (!isComposite) {
     return "transparent";
   }
-  return theme.palette.mode === "light" ? darken(theme.palette.background.paper, 0.04) : lighten(theme.palette.background.paper, 0.08);
+  return theme.palette.mode === "light" ? theme.darken(theme.palette.background.paper, 0.04) : theme.lighten(theme.palette.background.paper, 0.08);
 }
 const createRowSx = (theme, isHighlighted, isDragging, virtualRow, depth, isComposite) => ({
   position: "absolute",

package/dist/features/network-modifications/battery/creation/BatteryCreationForm.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Box, Grid2 } from "@mui/material";
+import { Box, Grid } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { useWatch } from "react-hook-form";
 import { filledTextField } from "../../common/form.utils.js";
 import { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import "react";
-import "react-hook-form";
 import { ActivePowerAdornment } from "../../../../utils/constants/adornments.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
-import "react-intl";
 import "../../../../components/ui/overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -117,23 +117,33 @@ function BatteryCreationForm({
       isGenerator: false
     }
   );
+  const watchVoltageRegulation = useWatch({
+    name: FieldConstants.VOLTAGE_REGULATION
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Grid, { 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(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivityForm }) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivityForm }) }),
     /* @__PURE__ */ jsx(GridSection, { title: "ActiveLimits" }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Grid, { 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__ */ jsxs(Grid2, { container: true, spacing: 2, paddingTop: 2, children: [
-      /* @__PURE__ */ jsx(GridItem, { size: 4, children: voltageRegulationField }),
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, paddingTop: 2, children: [
+      /* @__PURE__ */ jsx(
+        GridItem,
+        {
+          size: 4,
+          tooltip: watchVoltageRegulation !== null ? "" : /* @__PURE__ */ jsx(FormattedMessage, { id: "NoModification" }),
+          children: voltageRegulationField
+        }
+      ),
       voltageRegulationForm,
       /* @__PURE__ */ jsx(ActivePowerControlForm, {})
     ] }),

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, TextField } from "@mui/material";
+import { Grid, TextField } from "@mui/material";
 import { filledTextField } from "../../common/form.utils.js";
 import "react";
 import "react-hook-form";
@@ -65,22 +65,24 @@ import "@mui/material/colors";
 import "@mui/x-charts";
 import "../../common/currentLimits/limitsPane.utils.js";
 function BatteryDialogHeader({ batteryToModify, equipmentId }) {
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
       TextField,
       {
         size: "small",
         fullWidth: true,
         label: "ID",
         value: equipmentId ?? "",
-        InputProps: {
-          readOnly: true
+        slotProps: {
+          input: {
+            readOnly: true
+          }
         },
         disabled: true,
         ...filledTextField
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: FieldConstants.EQUIPMENT_NAME,

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

@@ -10,8 +10,10 @@ function BatteryDialogTabs({ tabIndex, tabIndexesWithError, setTabIndex }) {
       value: tabIndex,
       variant: "scrollable",
       onChange: (_event, newValue) => setTabIndex(newValue),
-      TabIndicatorProps: {
-        sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex)
+      slotProps: {
+        indicator: {
+          sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex)
+        }
       },
       children: [
         /* @__PURE__ */ jsx(

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Box, Grid2 } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { BatteryDialogTab } from "./batteryTabs.utils.js";
 import { GridSection } from "../../../../components/composite/grid/grid-section.js";
@@ -138,7 +138,7 @@ function BatteryDialogTabsContent({
     ] }),
     /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== BatteryDialogTab.LIMITS_AND_SETPOINTS_TAB, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "Setpoints" }),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
           FloatInput,
           {
@@ -160,7 +160,7 @@ function BatteryDialogTabsContent({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, paddingTop: 2, children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, paddingTop: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: voltageRegulationField }),
         voltageRegulationForm,
         /* @__PURE__ */ jsx(
@@ -171,11 +171,11 @@ function BatteryDialogTabsContent({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid2, { size: 12, children: [
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid, { size: 12, children: [
         /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Limits" }) }),
         /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ActiveLimits" }) })
       ] }) }),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
           FloatInput,
           {
@@ -197,7 +197,7 @@ function BatteryDialogTabsContent({
           }
         ) })
       ] }),
-      /* @__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(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { 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 { Stack, Grid2 } from "@mui/material";
+import { Stack, Grid } from "@mui/material";
 import { useWatch } from "react-hook-form";
 import { BatteryDialogHeader } from "./BatteryDialogHeader.js";
 import { BatteryDialogTabs } from "./BatteryDialogTabs.js";
@@ -24,8 +24,8 @@ function BatteryModificationForm({
   );
   const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(BatteryDialogHeader, { batteryToModify, equipmentId }) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(BatteryDialogHeader, { batteryToModify, equipmentId }) }),
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       BatteryDialogTabs,
       {
         tabIndex,
@@ -33,7 +33,7 @@ function BatteryModificationForm({
         setTabIndex
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       BatteryDialogTabsContent,
       {
         tabIndex,

package/dist/features/network-modifications/by-filter/assignment/assignment/assignment-constants.d.ts

@@ -7,7 +7,7 @@ export declare const EQUIPMENTS_FIELDS: {
     readonly TWO_WINDINGS_TRANSFORMER: readonly [FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType];
     readonly THREE_WINDINGS_TRANSFORMER: readonly [FieldOptionType];
     readonly GENERATOR: readonly [FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType];
-    readonly BATTERY: readonly [FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType];
+    readonly BATTERY: readonly [FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType];
     readonly LOAD: readonly [FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType];
     readonly SHUNT_COMPENSATOR: readonly [FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType, FieldOptionType];
     readonly STATIC_VAR_COMPENSATOR: readonly [FieldOptionType, FieldOptionType, FieldOptionType];