@gridsuite/commons-ui 0.260.0 → 0.261.0

package/dist/components/composite/report/report-viewer/log-table/log-table.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useIntl } from "react-intl";
-import { useTheme, Box, Chip, alpha } from "@mui/material";
+import { useTheme, Box, Chip } from "@mui/material";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import { getDefaultSeverityFilter, REPORT_SEVERITY } from "../../report-severity.js";
 import { QuickSearch } from "../../QuickSearch.js";
@@ -65,7 +65,7 @@ const chipStyle = (severity, severityFilter, theme) => ({
   cursor: "pointer",
   border: `1px solid ${theme.palette.divider}`,
   "&:hover": {
-    backgroundColor: alpha(REPORT_SEVERITY[severity].colorHexCode, 0.5)
+    backgroundColor: theme.alpha(REPORT_SEVERITY[severity].colorHexCode, 0.5)
   },
   "& .MuiChip-deleteIcon": {
     color: theme.palette.text.primary,

package/dist/components/ui/csvPicker/csv-picker.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Grid2, Tooltip, Typography, Button } from "@mui/material";
+import { Grid, Tooltip, Typography, Button } from "@mui/material";
 import { useCSVReader } from "react-papaparse";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
@@ -74,9 +74,9 @@ function CsvPicker({
           ...parseConfig
         },
         onUploadAccepted: handleUploadAccepted,
-        children: ({ getRootProps }) => /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, alignItems: "center", justifyContent: "right", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Tooltip, { title: selectedFile?.name, children: /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", overflow: "hidden", textOverflow: "ellipsis" }, children: selectedFile ? selectedFile.name : /* @__PURE__ */ jsx(FormattedMessage, { id: "uploadMessage" }) }) }) }),
-          /* @__PURE__ */ jsx(Grid2, { size: "auto", children: /* @__PURE__ */ jsx(
+        children: ({ getRootProps }) => /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "center", justifyContent: "right", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Tooltip, { title: selectedFile?.name, children: /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", overflow: "hidden", textOverflow: "ellipsis" }, children: selectedFile ? selectedFile.name : /* @__PURE__ */ jsx(FormattedMessage, { id: "uploadMessage" }) }) }) }),
+          /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsx(
             Button,
             {
               ...getRootProps(),

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 { Stack, Grid2, Button, Typography, Box, CircularProgress } from "@mui/material";
+import { Stack, Grid, Button, Typography, Box, CircularProgress } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -187,13 +187,13 @@ function ElementSaveDialog({
   );
   const renderChooser = () => {
     if (isCreateMode) {
-      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" }) }) }),
+      return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+        /* @__PURE__ */ jsx(Grid, { 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(Grid2, { container: true, children: [
-      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Button, { onClick: handleChangeFolder, variant: "contained", size: "small", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "showSelectDirectoryItemDialog" }) }) }),
+    return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+      /* @__PURE__ */ jsx(Grid, { 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 }) })
     ] });
   };
@@ -208,7 +208,7 @@ function ElementSaveDialog({
       formContext: { ...formMethods, validationSchema: schema },
       children: [
         /* @__PURE__ */ jsxs(Stack, { spacing: 2, marginTop: "auto", children: [
-          !createOnlyMode && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+          !createOnlyMode && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
             RadioInput,
             {
               name: FieldConstants.OPERATION_TYPE,
@@ -225,7 +225,7 @@ function ElementSaveDialog({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
             UniqueNameInput,
             {
               name: FieldConstants.NAME,
@@ -236,7 +236,7 @@ function ElementSaveDialog({
               autoFocus: true
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(DescriptionField, {}) }),
+          /* @__PURE__ */ jsx(Grid, { 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 { Grid2, Typography, Box, Button } from "@mui/material";
+import { Grid, 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(
-    Grid2,
+    Grid,
     {
       sx: {
         marginTop: "10px",
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+        /* @__PURE__ */ jsxs(Grid, { 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/dialogs/name-element-editor/name-element-editor-form.js

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

package/dist/components/ui/inputs/SelectClearable.js

@@ -28,7 +28,9 @@ function SelectClearable(props) {
               label
             })
           },
-          inputProps: { ...inputProps, readOnly: true }
+          slotProps: {
+            htmlInput: { ...inputProps, readOnly: true }
+          }
         }
       ),
       options,

package/dist/components/ui/inputs/checkbox-autocomplete/checkbox-autocomplete.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { styled, Popper, autocompleteClasses, Autocomplete, TextField, lighten } from "@mui/material";
+import { styled, Popper, autocompleteClasses, Autocomplete, TextField } from "@mui/material";
 import { useIntl } from "react-intl";
 import VirtualizedList from "./virtualized-list.js";
 import CheckboxItem from "./checkbox-item.js";
@@ -17,7 +17,7 @@ const styles = {
       height: "inherit",
       zIndex: 20,
       // jump up to avoid input zone pushed down below component
-      backgroundColor: lighten(theme.palette.background.default, 0.16)
+      backgroundColor: theme.lighten(theme.palette.background.default, 0.16)
     },
     "&.Mui-focused": {
       ".MuiInputLabel-root": {
@@ -105,19 +105,21 @@ function CheckboxAutocomplete({
       disableCloseOnSelect: true,
       size: "small",
       disableListWrap: true,
-      PopperComponent: StyledPopper,
       options,
       noOptionsText: intl.formatMessage({ id: "noOption" }),
       getOptionLabel,
       ...otherProps,
       limitTags: 1,
       multiple: true,
-      ListboxComponent: virtualize ? VirtualizedList : void 0,
       renderInput,
       renderOption,
       inputValue,
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      slots: { popper: StyledPopper },
+      slotProps: {
+        listbox: { component: virtualize ? VirtualizedList : void 0 }
+      }
     }
   );
 }

package/dist/components/ui/reactHookForm/CheckboxNullableInput.js

@@ -48,8 +48,10 @@ function CheckboxNullableInput({
             indeterminate: nullDisabled ? void 0 : value === null,
             onChange: handleChangeValue,
             value: "checked",
-            inputProps: {
-              "aria-label": "primary checkbox"
+            slotProps: {
+              input: {
+                "aria-label": "primary checkbox"
+              }
             },
             ...formProps
           }

package/dist/components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.js

@@ -78,7 +78,9 @@ function AutocompleteInput({
             })
           },
           inputRef: ref,
-          inputProps: { ...inputProps, readOnly },
+          slotProps: {
+            htmlInput: { ...inputProps, readOnly }
+          },
           helperText: previousValue && /* @__PURE__ */ jsx(
             HelperPreviousValue,
             {

package/dist/components/ui/reactHookForm/autocompleteInputs/MultipleAutocompleteInput.js

@@ -34,7 +34,7 @@ function MultipleAutocompleteInput({ name, ...props }) {
       onBlur: handleOnBlur,
       blurOnSelect: false,
       multiple: true,
-      ChipProps: { size: "small" },
+      slotProps: { chip: { size: "small" } },
       ...props
     }
   );

package/dist/components/ui/reactHookForm/booleans/BooleanInput.js

@@ -28,7 +28,7 @@ function BooleanInput({
       checked: value,
       onChange: handleChangeValue,
       inputRef: ref,
-      inputProps: { "aria-label": "primary checkbox" },
+      slotProps: { input: { "aria-label": "primary checkbox" } },
       ...otherFormProps,
       ...props
     }

package/dist/components/ui/reactHookForm/chip-items-input.js

@@ -111,18 +111,20 @@ function ChipItemsInput({ label, name, hideErrorMessage }) {
         TextField,
         {
           variant: "standard",
-          InputProps: {
-            disableUnderline: true,
-            style: {
-              marginTop: "5px",
-              height: "30px",
-              marginLeft: "10px"
-            }
-          },
           value: textEntered,
           onKeyDown: keyPress,
           onChange: handleChange,
-          onBlur
+          onBlur,
+          slotProps: {
+            input: {
+              disableUnderline: true,
+              style: {
+                marginTop: "5px",
+                height: "30px",
+                marginLeft: "10px"
+              }
+            }
+          }
         }
       )
     ] }),

package/dist/components/ui/reactHookForm/directory-item-input/directory-item-input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Box, Stack, Grid2, Tooltip, Typography, FormHelperText, Button } from "@mui/material";
+import { Box, Stack, Grid, Tooltip, Typography, FormHelperText, Button } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useState, useMemo, useCallback } from "react";
 import { useController } from "react-hook-form";
@@ -37,9 +37,9 @@ function DirectoryItemInput({ name, types, ...props }) {
   );
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Grid2, { paddingTop: 1, children: /* @__PURE__ */ jsx(FolderOutlined, {}) }),
-        /* @__PURE__ */ jsx(Grid2, { paddingTop: 1, paddingLeft: 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Grid, { paddingTop: 1, children: /* @__PURE__ */ jsx(FolderOutlined, {}) }),
+        /* @__PURE__ */ jsx(Grid, { paddingTop: 1, paddingLeft: 1, children: /* @__PURE__ */ jsx(
           Tooltip,
           {
             title: nodeInfos?.[DIRECTORY_ITEM_FULL_PATH] ?? "",
@@ -54,7 +54,7 @@ function DirectoryItemInput({ name, types, ...props }) {
             children: /* @__PURE__ */ jsx(Typography, { fontWeight: breadcrumb ? void 0 : "bold", noWrap: true, children: breadcrumb || /* @__PURE__ */ jsx(FormattedMessage, { id: getAbsenceLabelKeyFromType(types?.[0]) }) })
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid2, { paddingTop: 1, paddingLeft: 1, children: error?.message && /* @__PURE__ */ jsx(FormHelperText, { error: true, children: intl.formatMessage({ id: error?.message }) }) })
+        /* @__PURE__ */ jsx(Grid, { paddingTop: 1, paddingLeft: 1, children: error?.message && /* @__PURE__ */ jsx(FormHelperText, { error: true, children: intl.formatMessage({ id: error?.message }) }) })
       ] }),
       /* @__PURE__ */ jsx(Button, { onClick: () => setIsOpen(true), variant: "contained", color: "primary", component: "label", children: /* @__PURE__ */ jsx(FormattedMessage, { id: breadcrumb ? "edit" : "Select" }) })
     ] }),

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2, Alert } from "@mui/material";
+import { Grid, Alert } from "@mui/material";
 function FieldErrorAlert({ message }) {
-  return /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: message }) });
+  return /* @__PURE__ */ jsx(Grid, { 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 { Grid2, IconButton } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { RestoreFromTrash, Delete } from "@mui/icons-material";
 import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 function DeletableRow({
@@ -14,7 +14,7 @@ function DeletableRow({
   const intl = useIntl();
   const [isMouseHover, setIsMouseHover] = useState(false);
   return /* @__PURE__ */ jsxs(
-    Grid2,
+    Grid,
     {
       container: true,
       spacing: 2,
@@ -24,7 +24,7 @@ function DeletableRow({
       onMouseLeave: () => setIsMouseHover(false),
       children: [
         children,
-        /* @__PURE__ */ jsx(Grid2, { size: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { 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 { Grid2 } from "@mui/material";
+import { Grid } 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(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: MidFormError }) }),
+    return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { 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(Grid2, { children: /* @__PURE__ */ jsx(AddButton, { disabled, onClick: () => append(initialValue), label: addButtonLabel }) })
+      addButtonLabel && /* @__PURE__ */ jsx(Grid, { 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, Grid2 } from "@mui/material";
+import { FormControl, InputLabel, Grid } 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(Grid2, { container: true, spacing: 0, children: [
-      /* @__PURE__ */ jsx(Grid2, { style: isOperationTypeRange ? { flex: "min-content" } : {}, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0, children: [
+      /* @__PURE__ */ jsx(Grid, { 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(Grid2, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           label: "",
@@ -72,7 +72,7 @@ function RangeInput({ name, label }) {
           }
         }
       ) }),
-      isOperationTypeRange && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+      isOperationTypeRange && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: `${name}.${FieldConstants.VALUE_2}`,

package/dist/components/ui/reactHookForm/readOnly/ButtonReadOnlyInput.js

@@ -14,33 +14,35 @@ function ButtonReadOnlyInput({ name, isNumerical = false, children }) {
   return /* @__PURE__ */ jsx(
     TextField,
     {
-      InputProps: {
-        readOnly: true,
-        sx: isNumerical ? {
-          "& input": {
-            textAlign: "right"
-          }
-        } : {},
-        endAdornment: /* @__PURE__ */ jsx(
-          InputAdornment,
-          {
-            sx: {
-              "& button": {
-                borderRadius: 0,
-                borderLeft: "1px solid",
-                borderColor: theme.palette.action.disabled,
-                marginRight: "-14px",
-                marginLeft: "-8px"
-              }
-            },
-            position: "end",
-            children
-          }
-        )
-      },
       size: "small",
       fullWidth: true,
       value,
+      slotProps: {
+        input: {
+          readOnly: true,
+          sx: isNumerical ? {
+            "& input": {
+              textAlign: "right"
+            }
+          } : {},
+          endAdornment: /* @__PURE__ */ jsx(
+            InputAdornment,
+            {
+              sx: {
+                "& button": {
+                  borderRadius: 0,
+                  borderLeft: "1px solid",
+                  borderColor: theme.palette.action.disabled,
+                  marginRight: "-14px",
+                  marginLeft: "-8px"
+                }
+              },
+              position: "end",
+              children
+            }
+          )
+        }
+      },
       ...genHelperError(error?.message)
     }
   );

package/dist/components/ui/reactHookForm/readOnly/ReadOnlyInput.js

@@ -13,18 +13,20 @@ function ReadOnlyInput({ name, isNumerical = false }) {
   return /* @__PURE__ */ jsx(
     TextField,
     {
-      InputProps: {
-        readOnly: true,
-        disableUnderline: true,
-        sx: isNumerical ? {
-          "& input": {
-            textAlign: "right"
-          }
-        } : {}
-      },
       fullWidth: true,
       value,
       variant: "standard",
+      slotProps: {
+        input: {
+          readOnly: true,
+          disableUnderline: true,
+          sx: isNumerical ? {
+            "& input": {
+              textAlign: "right"
+            }
+          } : {}
+        }
+      },
       ...genHelperError(error?.message)
     }
   );

package/dist/components/ui/reactHookForm/selectInputs/CountriesInput.js

@@ -26,8 +26,8 @@ function CountriesInput({ name, label, dataTestId }) {
       getOptionLabel: translateOption,
       fullWidth: true,
       multiple: true,
-      renderTags: (val, getTagsProps) => val.map((code, index) => {
-        const { key, ...tagProps } = getTagsProps({ index });
+      renderValue: (val, getItemProps) => val.map((code, index) => {
+        const { key, ...tagProps } = getItemProps({ index });
         return /* @__PURE__ */ jsx(
           Chip,
           {

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 },