@gridsuite/commons-ui 0.259.0 → 0.261.0

package/dist/components/composite/agGridTable/BottomTableButtons.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { styled, IconButton, Grid2, Box } from "@mui/material";
+import { styled, IconButton, Grid, Box } from "@mui/material";
 import { ControlPoint, Delete, ArrowCircleUp, ArrowCircleDown } from "@mui/icons-material";
 import { ErrorInput } from "../../ui/reactHookForm/errorManagement/ErrorInput.js";
 import { FieldErrorAlert } from "../../ui/reactHookForm/errorManagement/FieldErrorAlert.js";
@@ -25,8 +25,8 @@ function BottomTableButtons({
   csvProps
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid2, { container: true, paddingTop: 1, paddingLeft: 1, alignItems: "center", spacing: 1, children: [
-      csvProps?.getTableData && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, paddingLeft: 1, alignItems: "center", spacing: 1, children: [
+      csvProps?.getTableData && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
         CsvDownloadButton,
         {
           data: csvProps.getTableData,
@@ -37,8 +37,8 @@ function BottomTableButtons({
           withExportButton: true
         }
       ) }),
-      csvProps?.extraButtons && /* @__PURE__ */ jsx(Grid2, { children: csvProps.extraButtons }),
-      /* @__PURE__ */ jsxs(Grid2, { sx: { marginLeft: "auto" }, children: [
+      csvProps?.extraButtons && /* @__PURE__ */ jsx(Grid, { children: csvProps.extraButtons }),
+      /* @__PURE__ */ jsxs(Grid, { sx: { marginLeft: "auto" }, children: [
         /* @__PURE__ */ jsx(InnerColoredButton, { onClick: handleAddRow, "aria-label": "Add row", children: /* @__PURE__ */ jsx(ControlPoint, {}) }),
         /* @__PURE__ */ jsx(
           InnerColoredButton,

package/dist/components/composite/customAGGrid/cell-renderers.js

@@ -97,7 +97,7 @@ function NetworkModificationNameCellRenderer({ value }) {
       disableFocusListener: true,
       disableTouchListener: true,
       title: value,
-      componentsProps: {
+      slotProps: {
         tooltip: {
           sx: {
             maxWidth: "none"

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Stack, Grid2, TextField, InputAdornment, IconButton } from "@mui/material";
+import { Stack, Grid, TextField, InputAdornment, IconButton } from "@mui/material";
 import { Clear } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import "../../../../utils/conversionUtils.js";
@@ -32,7 +32,7 @@ function CustomAggridTextFilter({
   const intl = useIntl();
   const isRoundingDisplayed = useMemo(() => !!(isNumberInput && value), [isNumberInput, value]);
   return /* @__PURE__ */ jsxs(Stack, { gap: 0.2, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       TextField,
       {
         size: "small",
@@ -42,16 +42,18 @@ function CustomAggridTextFilter({
         placeholder: intl.formatMessage({
           id: "filter.filterOoo"
         }),
-        inputProps: {
-          type: isNumberInput ? FilterDataTypes.NUMBER : FilterDataTypes.TEXT
-        },
         sx: mergeSx(styles.input, isNumberInput ? styles.noArrows : void 0),
-        InputProps: {
-          endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "clear filter", onClick: onClear, edge: "end", size: "small", children: /* @__PURE__ */ jsx(Clear, {}) }) }) : null
+        slotProps: {
+          input: {
+            endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "clear filter", onClick: onClear, edge: "end", size: "small", children: /* @__PURE__ */ jsx(Clear, {}) }) }) : null
+          },
+          htmlInput: {
+            type: isNumberInput ? FilterDataTypes.NUMBER : FilterDataTypes.TEXT
+          }
         }
       }
     ) }),
-    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
+    isRoundingDisplayed && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DisplayRounding, { decimalAfterDot }) })
   ] });
 }
 export {

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

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

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
-import { Grid2, Tooltip } from "@mui/material";
+import { Grid, Tooltip } from "@mui/material";
 import { WarningAmber } from "@mui/icons-material";
 import { CustomAggridSort } from "./custom-aggrid-sort.js";
 import { CustomMenu } from "./custom-aggrid-menu.js";
@@ -54,9 +54,9 @@ function CustomHeaderComponent({
   const handleMouseLeave = useCallback(() => {
     setIsHoveringColumnHeader(false);
   }, []);
-  return /* @__PURE__ */ jsx(Grid2, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", wrap: "nowrap", sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsx(Grid, { container: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", wrap: "nowrap", sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(
-      Grid2,
+      Grid,
       {
         container: true,
         sx: {
@@ -66,7 +66,7 @@ function CustomHeaderComponent({
         },
         flexBasis: forceDisplayFilterIcon ? "auto" : "100%",
         children: /* @__PURE__ */ jsx(
-          Grid2,
+          Grid,
           {
             container: true,
             sx: {
@@ -74,22 +74,22 @@ function CustomHeaderComponent({
               minWidth: 0
             },
             onClick: handleClickHeader,
-            children: /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
-              /* @__PURE__ */ jsx(Grid2, { children: displayName }),
-              isInvalid && /* @__PURE__ */ jsx(Grid2, { sx: styles.invalidIcon, children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.displayName, alignItems: "center", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(Grid, { children: displayName }),
+              isInvalid && /* @__PURE__ */ jsx(Grid, { sx: styles.invalidIcon, children: /* @__PURE__ */ jsx(
                 Tooltip,
                 {
                   title: /* @__PURE__ */ jsx(FormattedMessage, { id: "spreadsheet/column/invalid-without-loadflow" }),
                   children: /* @__PURE__ */ jsx(WarningAmber, { fontSize: "small", color: "warning" })
                 }
               ) }),
-              sortParams && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
+              sortParams && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(CustomAggridSort, { colId: column.getId(), sortParams }) })
             ] })
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, sx: styles.actions, children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, sx: styles.actions, children: [
       filterComponent && /* @__PURE__ */ jsx(
         CustomAggridFilter,
         {

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

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

package/dist/components/composite/dnd-table/dnd-table-bottom-left-buttons.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, IconButton } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { Upload, Replay } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
@@ -13,8 +13,8 @@ function DndTableBottomLeftButtons({
   disabled
 }) {
   const intl = useIntl();
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, size: "grow", spacing: 1, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, size: "grow", spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -31,7 +31,7 @@ function DndTableBottomLeftButtons({
         ) })
       }
     ) }),
-    withResetButton && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+    withResetButton && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({

package/dist/components/composite/dnd-table/dnd-table-bottom-right-buttons.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Grid2, IconButton } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { AddCircle, Delete, ArrowUpward, ArrowDownward } from "@mui/icons-material";
 import { useWatch } from "react-hook-form";
 import { useIntl } from "react-intl";
@@ -22,8 +22,8 @@ function DndTableBottomRightButtons({
   const noRowsSelected = currentRows ? !currentRows.some((row) => row[SELECTED]) : true;
   const firstRowSelected = noRowsSelected ? void 0 : currentRows[0]?.[SELECTED];
   const lastRowSelected = noRowsSelected ? void 0 : currentRows[currentRows.length - 1]?.[SELECTED];
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, size: "grow", spacing: 1, sx: { justifyContent: "flex-end" }, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, size: "grow", spacing: 1, sx: { justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -40,7 +40,7 @@ function DndTableBottomRightButtons({
         ) })
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
       CustomTooltip,
       {
         title: intl.formatMessage({
@@ -58,7 +58,7 @@ function DndTableBottomRightButtons({
       }
     ) }),
     showMoveArrow && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
         CustomTooltip,
         {
           title: intl.formatMessage({
@@ -75,7 +75,7 @@ function DndTableBottomRightButtons({
           ) })
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
         CustomTooltip,
         {
           title: intl.formatMessage({

package/dist/components/composite/dnd-table/dnd-table.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { useState, useCallback, useRef, useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
-import { Grid2, TableContainer, Table, TableHead, TableRow, TableCell, Box, IconButton, TableBody, Checkbox } from "@mui/material";
+import { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, IconButton, TableBody, Checkbox } from "@mui/material";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import { useIntl } from "react-intl";
 import { AddCircle } from "@mui/icons-material";
@@ -316,8 +316,8 @@ function DndTable(props) {
       providedDroppable.placeholder
     ] });
   }
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, size: 12, children: [
-    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, size: 12, children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, size: 12, children: [
       /* @__PURE__ */ jsx(DragDropContext, { onBeforeDragStart, onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "tapTable", isDropDisabled: disabled, children: (provided) => /* @__PURE__ */ jsx(
         TableContainer,
         {
@@ -335,7 +335,7 @@ function DndTable(props) {
       ) }) }),
       /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert })
     ] }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, size: 12, children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, size: 12, children: [
       handleResetButton && handleUploadButton && resetButtonMessageId && uploadButtonMessageId ? /* @__PURE__ */ jsx(
         DndTableBottomLeftButtons,
         {

package/dist/components/composite/elementSearch/elementSearchInput/ElementSearchInput.js

@@ -86,8 +86,10 @@ function ElementSearchInput(props) {
         return option === value;
       },
       disabled: searchTermDisabled,
-      PaperComponent,
-      filterOptions
+      filterOptions,
+      slots: {
+        paper: PaperComponent
+      }
     }
   );
 }

package/dist/components/composite/filter/HeaderFilterForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import * as yup from "yup";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import { MAX_CHAR_DESCRIPTION } from "../../../utils/constants/uiConstants.js";
@@ -42,8 +42,8 @@ const HeaderFilterSchema = {
   [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, DESCRIPTION_LIMIT_ERROR)
 };
 function HeaderFilterForm({ creation, activeDirectory }) {
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(
       UniqueNameInput,
       {
         name: FieldConstants.NAME,
@@ -55,7 +55,7 @@ function HeaderFilterForm({ creation, activeDirectory }) {
         fullWidth: false
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: elementEditionStyles.description }) })
+    /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: elementEditionStyles.description }) })
   ] });
 }
 export {

package/dist/components/composite/filter/expert/expertFilterConstants.js

@@ -1293,7 +1293,7 @@ const EXPERT_FILTER_FIELDS = {
     FIELDS_OPTIONS.TARGET_P,
     FIELDS_OPTIONS.TARGET_Q,
     FIELDS_OPTIONS.VOLTAGE_REGULATOR_ON,
-    FIELDS_OPTIONS.TARGET_V,
+    FIELDS_OPTIONS.VOLTAGE_SET_POINT,
     FIELDS_OPTIONS.PLANNED_ACTIVE_POWER_SET_POINT,
     FIELDS_OPTIONS.MARGINAL_COST,
     FIELDS_OPTIONS.PLANNED_OUTAGE_RATE,
@@ -1314,6 +1314,8 @@ const EXPERT_FILTER_FIELDS = {
     FIELDS_OPTIONS.MAX_P,
     FIELDS_OPTIONS.TARGET_P,
     FIELDS_OPTIONS.TARGET_Q,
+    FIELDS_OPTIONS.VOLTAGE_REGULATOR_ON,
+    FIELDS_OPTIONS.VOLTAGE_SET_POINT,
     FIELDS_OPTIONS.PROPERTY,
     FIELDS_OPTIONS.SUBSTATION_ID,
     FIELDS_OPTIONS.SUBSTATION_PROPERTY,

package/dist/components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useCallback, useState, useRef } from "react";
 import { useIntl } from "react-intl";
 import { useWatch } from "react-hook-form";
-import { Stack, Grid2, Alert } from "@mui/material";
+import { Stack, Grid, Alert } from "@mui/material";
 import { v4 } from "uuid";
 import * as yup from "yup";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -192,7 +192,7 @@ function ExplicitNamingFilterForm({
       padding: 1,
       sx: { flexGrow: 1, flexWrap: "nowrap", minHeight: 0 },
       children: [
-        /* @__PURE__ */ jsxs(Grid2, { children: [
+        /* @__PURE__ */ jsxs(Grid, { children: [
           /* @__PURE__ */ jsx(
             InputWithPopupConfirmation,
             {
@@ -222,8 +222,8 @@ function ExplicitNamingFilterForm({
           )
         ] }),
         watchEquipmentType && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, justifyContent: "space-between", alignItems: "center", children: [
-            /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
               CsvDownloadButton,
               {
                 data: getTemplateData,
@@ -233,7 +233,7 @@ function ExplicitNamingFilterForm({
                 variant: "contained"
               }
             ) }),
-            /* @__PURE__ */ jsx(Grid2, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
               CsvPicker,
               {
                 label: "UploadCSV",
@@ -248,8 +248,8 @@ function ExplicitNamingFilterForm({
               }
             ) })
           ] }),
-          fileErrorMessage && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: fileErrorMessage }) }),
-          /* @__PURE__ */ jsx(Grid2, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+          fileErrorMessage && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: fileErrorMessage }) }),
+          /* @__PURE__ */ jsx(Grid, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
             CustomAgGridTable,
             {
               ref: tableRef,

package/dist/components/composite/flatParameters/FlatParameters.js

@@ -193,7 +193,6 @@ function FlatParameters({
           {
             size: "small",
             sx: { width: "50%" },
-            inputProps: { style: { textAlign: "right" } },
             value: fieldValue,
             onFocus: () => onUncommitted(param, true),
             onBlur: () => onUncommitted(param, false),
@@ -204,7 +203,10 @@ function FlatParameters({
               }
             },
             error: err,
-            variant
+            variant,
+            slotProps: {
+              htmlInput: { style: { textAlign: "right" } }
+            }
           }
         );
       }
@@ -214,7 +216,6 @@ function FlatParameters({
           {
             size: "small",
             sx: { width: "50%" },
-            inputProps: { style: { textAlign: "right" } },
             value: fieldValue,
             onFocus: () => onUncommitted(param, true),
             onBlur: () => onUncommitted(param, false),
@@ -224,7 +225,10 @@ function FlatParameters({
                 onFieldChange(e.target.value, param);
               }
             },
-            variant
+            variant,
+            slotProps: {
+              htmlInput: { style: { textAlign: "right" } }
+            }
           }
         );
       case "STRING_LIST":
@@ -239,9 +243,11 @@ function FlatParameters({
                   value: getStringListValue(allOptions, fieldValue),
                   size: "small",
                   variant,
-                  InputProps: {
-                    readOnly: true,
-                    endAdornment: /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpenSelector(true), children: /* @__PURE__ */ jsx(Tune, {}) })
+                  slotProps: {
+                    input: {
+                      readOnly: true,
+                      endAdornment: /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpenSelector(true), children: /* @__PURE__ */ jsx(Tune, {}) })
+                    }
                   }
                 }
               ),
@@ -274,12 +280,12 @@ function FlatParameters({
               getOptionLabel: (option) => getTranslatedValue(param.name, option),
               onChange: (e, value) => onFieldChange(value, param),
               value: fieldValue,
-              renderTags: (values, getTagProps) => {
+              renderValue: (values, getItemProps) => {
                 return values.map((value, index) => /* @__PURE__ */ createElement(
                   Chip,
                   {
                     label: getTranslatedValue(param.name, value),
-                    ...getTagProps({ index }),
+                    ...getItemProps({ index }),
                     key: `chip_${value}`
                   }
                 ));
@@ -299,14 +305,14 @@ function FlatParameters({
             size: "small",
             onChange: (e, value) => onFieldChange(value, param),
             value: fieldValue,
-            renderTags: (values, getTagProps) => {
+            renderValue: (values, getItemProps) => {
               return values.map((value, index) => /* @__PURE__ */ createElement(
                 Chip,
                 {
                   id: `chip_${value}`,
                   size: "small",
                   label: value,
-                  ...getTagProps({ index }),
+                  ...getItemProps({ index }),
                   key: `chip_${value}`
                 }
               ));

package/dist/components/composite/grid/grid-item.d.ts

@@ -1,10 +1,10 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { Grid2Props } from '@mui/material';
+import { GridProps } from '@mui/material';
 export interface GridItemProps extends PropsWithChildren {
-    size?: Grid2Props['size'];
-    offset?: Grid2Props['offset'];
+    size?: GridProps['size'];
+    offset?: GridProps['offset'];
     alignItem?: string;
     tooltip?: ReactNode;
-    sx?: Grid2Props['sx'];
+    sx?: GridProps['sx'];
 }
 export declare function GridItem({ children, size, offset, alignItem, tooltip, sx, }: Readonly<GridItemProps>): import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { CustomTooltip } from "../../ui/tooltip/CustomTooltip.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
@@ -13,7 +13,7 @@ function GridItem({
   tooltip,
   sx
 }) {
-  return /* @__PURE__ */ jsx(Grid2, { size, offset, sx: mergeSx({ alignItems: alignItem }, sx), children: children && (tooltip ? /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, children: /* @__PURE__ */ jsx("div", { children }) }) : children) });
+  return /* @__PURE__ */ jsx(Grid, { size, offset, sx: mergeSx({ alignItems: alignItem }, sx), children: children && (tooltip ? /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, children: /* @__PURE__ */ jsx("div", { children }) }) : children) });
 }
 export {
   GridItem

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

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

package/dist/components/composite/reactQueryBuilder/PropertyValueEditor.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { Grid2, Autocomplete, TextField, FormControl, Select, MenuItem } from "@mui/material";
+import { Grid, Autocomplete, TextField, FormControl, Select, MenuItem } from "@mui/material";
 import { useIntl } from "react-intl";
 import { useValid } from "./hooks/useValid.js";
 import { OPERATOR_OPTIONS } from "../filter/expert/expertFilterConstants.js";
@@ -46,8 +46,8 @@ function PropertyValueEditor(props) {
     },
     [valueEditorProps]
   );
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, width: "100%", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, width: "100%", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
         value: propertyName ?? "",
@@ -63,7 +63,7 @@ function PropertyValueEditor(props) {
         filterOptions: createCustomFilterOptions
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { size: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsx(FormControl, { variant: "standard", sx: { mt: 1, minWidth: 160 }, children: /* @__PURE__ */ jsx(
       Select,
       {
         value: propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName,
@@ -76,7 +76,7 @@ function PropertyValueEditor(props) {
         children: PROPERTY_VALUE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(MenuItem, { value: operator.customName, children: intl.formatMessage({ id: operator.label }) }, operator.customName))
       }
     ) }) }),
-    valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.EXISTS.customName && valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.NOT_EXISTS.customName && /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
+    valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.EXISTS.customName && valueEditorProps?.value?.propertyOperator !== OPERATOR_OPTIONS.NOT_EXISTS.customName && /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
         value: propertyValues ?? [],

package/dist/components/composite/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, Typography, Select, MenuItem } from "@mui/material";
+import { Grid, Typography, Select, MenuItem } from "@mui/material";
 import { useIntl } from "react-intl";
 const styles = {
   gridItem: {
@@ -32,9 +32,9 @@ function RuleValueEditor(props) {
       operator
     });
   };
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, paddingTop: 1, children: [
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: styles.gridItem, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: fieldData.label }) }) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, size: 2.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
       Select,
       {
         value: operator,
@@ -46,7 +46,7 @@ function RuleValueEditor(props) {
         children: fieldData.operators?.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.name, children: intl.formatMessage({ id: option.label }) }, option.name))
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { container: true, size: 5.5, sx: styles.gridItem, paddingLeft: 1, children: /* @__PURE__ */ jsx(
       ValueEditorControlElement,
       {
         ...props,