@gridsuite/commons-ui 0.205.0 → 0.206.0

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

@@ -2,10 +2,11 @@ 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 { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, Tooltip, 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";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
 import { MAX_ROWS_NUMBER, SELECTED } from "./dnd-table.type.js";
 import { DndTableBottomLeftButtons } from "./dnd-table-bottom-left-buttons.js";
 import { DndTableBottomRightButtons } from "./dnd-table-bottom-right-buttons.js";
@@ -265,7 +266,7 @@ function DndTable(props) {
         column.dataKey
       )),
       !disableAddingRows && !multiselect && /* @__PURE__ */ jsx(TableCell, { sx: { width: "5rem", textAlign: "center" }, children: /* @__PURE__ */ jsx(
-        Tooltip,
+        CustomTooltip,
         {
           title: intl.formatMessage({
             id: "AddRows"

package/dist/components/flatParameters/FlatParameters.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { useState, useCallback, Fragment, createElement } from "react";
-import { List, ListItem, Tooltip, Typography, Divider, Select, MenuItem, TextField, IconButton, Autocomplete, Chip, Switch } from "@mui/material";
+import { List, ListItem, Typography, Divider, Select, MenuItem, TextField, IconButton, Autocomplete, Chip, Switch } from "@mui/material";
 import { Tune } from "@mui/icons-material";
 import { useIntl, FormattedMessage } from "react-intl";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
 import { MultipleSelectionDialog } from "../multipleSelectionDialog/MultipleSelectionDialog.js";
 const styles = {
   paramList: {
@@ -347,10 +348,9 @@ function FlatParameters({
   return /* @__PURE__ */ jsx(List, { sx: styles.paramList, children: paramsAsArray.map((param, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(ListItem, { sx: styles.paramListItem, children: [
       /* @__PURE__ */ jsx(
-        Tooltip,
+        CustomTooltip,
         {
           title: /* @__PURE__ */ jsx(FormattedMessage, { id: `${param.name}.desc`, defaultMessage: param.description }),
-          enterDelay: 1200,
           children: /* @__PURE__ */ jsx(Typography, { sx: styles.paramName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: param.name, defaultMessage: param.name.slice(prefix.length) }) })
         },
         param.name

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

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid, Tooltip } from "@mui/material";
+import { Grid } from "@mui/material";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
 function GridItem({ children, size = 6, alignItem = "flex-start", tooltip }) {
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: size, alignItems: alignItem, children: children && (tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx("div", { children }) }) : children) });
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: size, alignItems: alignItem, children: children && (tooltip ? /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, children: /* @__PURE__ */ jsx("div", { children }) }) : children) });
 }
 export {
   GridItem as default

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './inputs';
 export * from './multipleSelectionDialog';
 export * from './overflowableText';
 export * from './snackbarProvider';
+export * from './tooltip';
 export * from './topBar';
 export * from './treeViewFinder';
 export * from './notifications';

package/dist/components/index.js

@@ -55,6 +55,7 @@ import { CONTINGENCY_LIST_EQUIPMENTS, FILTER_EQUIPMENTS } from "./filter/utils/f
 import { FlatParameters, extractDefault } from "./flatParameters/FlatParameters.js";
 import "react/jsx-runtime";
 import "@mui/material";
+import { CustomTooltip } from "./tooltip/CustomTooltip.js";
 import "react-intl";
 import { SelectClearable } from "./inputs/SelectClearable.js";
 import { OverflowableChip } from "./inputs/reactHookForm/OverflowableChip.js";
@@ -347,6 +348,7 @@ export {
   CustomMuiDialog,
   CustomNestedMenuItem,
   CustomReactQueryBuilder,
+  CustomTooltip,
   CustomVoltageLevelTable,
   CustomVoltageLevelTableCell,
   CustomVoltageLevelTableRow,

package/dist/components/inputs/ActivableChip.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { Tooltip, Chip } from "@mui/material";
+import { Chip } from "@mui/material";
 import { CheckCircleOutline, Cancel } from "@mui/icons-material";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
 function ActivableChip(props) {
   const { isActivated, label, tooltipMessage, onClick, isDisabled } = props;
-  return /* @__PURE__ */ jsx(Tooltip, { title: tooltipMessage, arrow: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CustomTooltip, { title: tooltipMessage, children: /* @__PURE__ */ jsx(
     Chip,
     {
       label,

package/dist/components/inputs/reactHookForm/DirectoryItemsInput.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, FormControl, InputLabel, Select, Tooltip, IconButton, OutlinedInput } from "@mui/material";
+import { Box, FormControl, InputLabel, Select, IconButton, OutlinedInput } from "@mui/material";
 import { DriveFolderUpload } from "@mui/icons-material";
 import { useState, useMemo, useCallback, useEffect } from "react";
 import { useFieldArray, useWatch, useController } from "react-hook-form";
 import { useIntl } from "react-intl";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 import "./provider/CustomFormProvider.js";
 import { useCustomFormContext } from "./provider/useCustomFormContext.js";
 import { ErrorInput } from "./errorManagement/ErrorInput.js";
@@ -230,7 +231,7 @@ function DirectoryItemsInput({
                 }
               ),
               renderValue: (directoryElements) => /* @__PURE__ */ jsxs(Box, { sx: styles.renderDirectoryElements, children: [
-                /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: disable, children: /* @__PURE__ */ jsx(DriveFolderUpload, {}) }) }) }),
+                /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: titleId }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: disable, children: /* @__PURE__ */ jsx(DriveFolderUpload, {}) }) }) }),
                 directoryElements?.map((item, index) => {
                   const elementName = watchedElements?.[index]?.[NAME] ?? getValues(`${name}.${index}.${NAME}`) ?? item?.[NAME];
                   const equipmentTypeShortLabel = getEquipmentTypeShortLabel(

package/dist/components/inputs/reactHookForm/agGridTable/BottomRightButtons.js

@@ -1,8 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { styled, IconButton, Grid, Tooltip, Box } from "@mui/material";
+import { styled, IconButton, Grid, Box } from "@mui/material";
 import { Upload, ControlPoint, Delete, ArrowCircleUp, ArrowCircleDown } from "@mui/icons-material";
 import { useState } from "react";
 import { useIntl } from "react-intl";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import { ErrorInput } from "../errorManagement/ErrorInput.js";
 import { FieldErrorAlert } from "../errorManagement/FieldErrorAlert.js";
 import { CsvUploader } from "./csvUploader/CsvUploader.js";
@@ -28,12 +29,11 @@ function BottomRightButtons({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Grid, { container: true, paddingTop: 1, paddingLeft: 2, children: [
       /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: csvProps && /* @__PURE__ */ jsx(InnerColoredButton, { onClick: () => setUploaderOpen(true), children: /* @__PURE__ */ jsx(
-        Tooltip,
+        CustomTooltip,
         {
           title: intl.formatMessage({
             id: "ImportCSV"
           }),
-          placement: "bottom",
           children: /* @__PURE__ */ jsx(Upload, {})
         }
       ) }) }),

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

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Grid, Tooltip, 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({
   alignItems,
   onClick,
@@ -24,7 +25,7 @@ function DeletableRow({
       children: [
         children,
         /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: isMouseHover && !disabledDeletion && /* @__PURE__ */ jsx(
-          Tooltip,
+          CustomTooltip,
           {
             title: intl.formatMessage({
               id: deletionMark ? "button.restore" : "DeleteRows"

package/dist/components/inputs/reactHookForm/text/DescriptionInput.js

@@ -1,7 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Box, Tooltip, IconButton } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { useController } from "react-hook-form";
 import { useState, useCallback } from "react";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
@@ -55,7 +56,7 @@ function DescriptionInput({ name }) {
     descriptionLines?.join("\n"),
     " "
   ] }) : void 0;
-  const icon = /* @__PURE__ */ jsx(Tooltip, { title: tooltipBox, arrow: true, placement: "right", children: /* @__PURE__ */ jsx(IconButton, { onClick: handleModifyDescription, sx: styles.coloredButton, children: /* @__PURE__ */ jsx(EditNoteIcon, { empty: !value }) }) });
+  const icon = /* @__PURE__ */ jsx(CustomTooltip, { title: tooltipBox, children: /* @__PURE__ */ jsx(IconButton, { onClick: handleModifyDescription, sx: styles.coloredButton, children: /* @__PURE__ */ jsx(EditNoteIcon, { empty: !value }) }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     openDescModificationDialog && /* @__PURE__ */ jsx(
       DescriptionModificationDialog,

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { FormHelperText, Stack, Tooltip, Typography } from "@mui/material";
+import { FormHelperText, Stack, Typography } from "@mui/material";
 import { InfoOutlined, WarningAmberRounded } from "@mui/icons-material";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 function HelperPreviousValue({
   previousValue,
   isNodeBuilt,
@@ -14,11 +15,9 @@ function HelperPreviousValue({
   }
   return /* @__PURE__ */ jsx(FormHelperText, { error: false, sx: { marginLeft: 0 }, children: !disabledTooltip ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
     /* @__PURE__ */ jsx(
-      Tooltip,
+      CustomTooltip,
       {
         title: intl.formatMessage({ id: isNodeBuilt ? "builtNodeTooltip" : "notBuiltNodeTooltip" }),
-        placement: "right",
-        arrow: true,
         PopperProps: {
           modifiers: [
             {

package/dist/components/network-modification-table/renderers/name-cell.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
-import { useTheme, Box, IconButton, Tooltip } from "@mui/material";
+import { useTheme, Box, IconButton } from "@mui/material";
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 import { networkModificationTableStyles, createNameCellLabelBoxSx, createModificationNameCellStyle, createNameCellRootStyle } from "../network-modification-table-styles.js";
 import { DepthBox } from "./depth-box.js";
 import { isCompositeModification } from "../utils.js";
@@ -64,7 +65,7 @@ function NameCell({ row }) {
               children: row.getIsExpanded() ? /* @__PURE__ */ jsx(KeyboardArrowDown, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRight, { fontSize: "small" })
             }
           ) }),
-          /* @__PURE__ */ jsx(Box, { sx: createNameCellLabelBoxSx(row.getIsExpanded(), depth), children: /* @__PURE__ */ jsx(Tooltip, { disableFocusListener: true, disableTouchListener: true, title: label, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { sx: createNameCellLabelBoxSx(row.getIsExpanded(), depth), children: /* @__PURE__ */ jsx(CustomTooltip, { disableFocusListener: true, disableTouchListener: true, title: label, children: /* @__PURE__ */ jsx(
             Box,
             {
               sx: mergeSx(

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

@@ -2,8 +2,9 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useWatch } from "react-hook-form";
 import { useMemo } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Box, Tooltip } from "@mui/material";
+import { Box } from "@mui/material";
 import { InfoOutlined } from "@mui/icons-material";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -77,7 +78,7 @@ function ActivePowerControlForm({
     }
   );
   const descriptionTooltip = useMemo(
-    () => /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: "activePowerControlTooltip" }), children: /* @__PURE__ */ jsx(InfoOutlined, { color: "info", fontSize: "medium" }) }),
+    () => /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: "activePowerControlTooltip" }), children: /* @__PURE__ */ jsx(InfoOutlined, { color: "info", fontSize: "medium" }) }),
     [intl]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { ExploreOutlined, ExploreOffOutlined } from "@mui/icons-material";
 import { useState, useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import { useIntl } from "react-intl";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import "../../../overflowableText/OverflowableText.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
@@ -86,7 +87,7 @@ function PositionForm({
           disableRipple: !isNodeBuilt || !voltageLevelForPositionIcon,
           edge: "start",
           children: /* @__PURE__ */ jsx(
-            Tooltip,
+            CustomTooltip,
             {
               title: intl.formatMessage({
                 id: getPositionIconTooltipMessageId

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

@@ -1,7 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { Grid, Tooltip, IconButton } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { Delete } from "@mui/icons-material";
+import { CustomTooltip } from "../../../../../tooltip/CustomTooltip.js";
 import "../../../../../overflowableText/OverflowableText.js";
 import { FieldConstants } from "../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../utils/conversionUtils.js";
@@ -51,7 +52,7 @@ function SubstationCreationSection({
       /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
       /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
       /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
-      showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
+      showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
     ] }),
     /* @__PURE__ */ jsx(PropertiesForm, { id: FieldConstants.SUBSTATION_CREATION, networkElementType: "substation" })
   ] });

package/dist/components/overflowableText/OverflowableText.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useState, useCallback, useLayoutEffect } from "react";
-import { styled, Tooltip, Box } from "@mui/material";
+import { styled, Box } from "@mui/material";
+import { CustomTooltip } from "../tooltip/CustomTooltip.js";
 import "../../utils/conversionUtils.js";
 import "../../utils/types/equipmentType.js";
 import "@mui/icons-material";
@@ -81,7 +82,7 @@ const OverflowableText = styled(
     };
     const boxSx = mergeSx(isMultiLine ? multilineOverflowStyle(maxLineCount) : overflowStyle.overflow, sx);
     return /* @__PURE__ */ jsx(
-      Tooltip,
+      CustomTooltip,
       {
         title: text || "",
         disableHoverListener: !overflowed,

package/dist/components/parameters/common/limitreductions/limit-reduction-table-cell.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Tooltip, TableCell } from "@mui/material";
+import { TableCell } from "@mui/material";
 import { FormattedMessage } from "react-intl";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import { VOLTAGE_LEVELS_FORM, LIMIT_REDUCTIONS_FORM } from "./columns-definitions.js";
 import "../../../overflowableText/OverflowableText.js";
 import "../../../../utils/conversionUtils.js";
@@ -43,7 +44,7 @@ function LimitReductionTableCell({
   limits
 }) {
   return column.dataKey === VOLTAGE_LEVELS_FORM && limits[rowIndex] ? /* @__PURE__ */ jsx(
-    Tooltip,
+    CustomTooltip,
     {
       title: /* @__PURE__ */ jsx(
         FormattedMessage,

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Tooltip, Typography, Chip } from "@mui/material";
+import { Grid, Typography, Chip } from "@mui/material";
 import { FormattedMessage } from "react-intl";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 import { parametersStyles } from "../parameters-style.js";
 import { ParameterType } from "../../../utils/types/parameters.type.js";
 import "../../overflowableText/OverflowableText.js";
@@ -103,7 +104,7 @@ function ParameterField({ id, name, type, label, description, possibleValues, sx
     }
   };
   return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(Tooltip, { title: description, enterDelay: 1200, children: /* @__PURE__ */ jsx(Typography, { sx: parametersStyles.parameterName, children: label ? /* @__PURE__ */ jsx(FormattedMessage, { id: label }) : name }) }, name) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(CustomTooltip, { title: description, children: /* @__PURE__ */ jsx(Typography, { sx: parametersStyles.parameterName, children: label ? /* @__PURE__ */ jsx(FormattedMessage, { id: label }) : name }) }, name) }),
     /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: renderField() }),
     /* @__PURE__ */ jsx(LineSeparator, {})
   ] }, name);

package/dist/components/parameters/common/parameter-table/parameter-table.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { TableContainer, Table, TableHead, TableRow, TableCell, Box, Tooltip, IconButton, TableBody } from "@mui/material";
+import { TableContainer, Table, TableHead, TableRow, TableCell, Box, IconButton, TableBody } from "@mui/material";
 import { AddCircle } from "@mui/icons-material";
 import { useRef, useCallback } from "react";
 import { useIntl } from "react-intl";
 import { useFormContext } from "react-hook-form";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import { TableRowComponent } from "./table-row.js";
 import { MAX_ROWS_NUMBER } from "./constants.js";
 function ParameterTable({
@@ -67,7 +68,7 @@ function ParameterTable({
         /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
           columnsDefinition.map((column) => /* @__PURE__ */ jsx(TableCell, { sx: { width: column.width, textAlign: "center" }, children: /* @__PURE__ */ jsx(Box, { children: column.label }) }, column.dataKey)),
           /* @__PURE__ */ jsx(TableCell, { sx: { width: "5rem", textAlign: "center" }, children: /* @__PURE__ */ jsx(
-            Tooltip,
+            CustomTooltip,
             {
               title: intl.formatMessage({
                 id: "AddRows"

package/dist/components/parameters/common/parameter-table/table-row.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { TableRow, TableCell, Tooltip, IconButton } from "@mui/material";
+import { TableRow, TableCell, IconButton } from "@mui/material";
 import { useState } from "react";
 import { useIntl } from "react-intl";
 import { Delete } from "@mui/icons-material";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import EditableTableCell from "./table-cell.js";
 function TableRowComponent({
   arrayFormName,
@@ -25,7 +26,7 @@ function TableRowComponent({
       (column) => EditableTableCell(arrayFormName, index, column, handleCellChanged)
     ),
     !disableDelete && /* @__PURE__ */ jsx(TableCell, { sx: { width: "5rem", textAlign: "center" }, children: isHover && /* @__PURE__ */ jsx(
-      Tooltip,
+      CustomTooltip,
       {
         title: intl.formatMessage({
           id: "DeleteRows"

package/dist/components/parameters/common/parameter-table-field/parameter-table-field.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Typography, Tooltip } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { Info } from "@mui/icons-material";
 import { useRef, useMemo, useCallback } from "react";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import { DndTable } from "../../../dnd-table-v2/dnd-table.js";
 import { getDefaultRowData } from "../../../dnd-table-v2/dnd-table-utils.js";
 import "../../../overflowableText/OverflowableText.js";
@@ -92,10 +93,9 @@ function ParameterTableField({
     label && /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", paddingBottom: 2, paddingTop: 2, children: [
       /* @__PURE__ */ jsx(Typography, { component: "span", variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
       tooltipProps && /* @__PURE__ */ jsx(
-        Tooltip,
+        CustomTooltip,
         {
           title: typeof title === "string" ? /* @__PURE__ */ jsx(FormattedMessage, { id: title }) : title,
-          placement: "right-start",
           sx: { marginLeft: 1 },
           ...otherTooltipProps,
           children: /* @__PURE__ */ jsx(Info, {})

package/dist/components/parameters/common/parameters-edition-dialog-props.d.ts

@@ -1,5 +1,5 @@
 import { UUID } from 'node:crypto';
-import { User } from 'oidc-client';
+import { User } from 'oidc-client-ts';
 import { GsLang } from '../../../utils';
 import { BuildStatus } from '../../node/constant';
 export interface ParametersEditionDialogProps {

package/dist/components/parameters/common/voltage-level-table/custom-voltage-level-table.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { TableContainer, Table, TableHead, TableRow, Tooltip, TableCell, TableBody } from "@mui/material";
+import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
 import { useFieldArray } from "react-hook-form";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import { LIMIT_REDUCTIONS_FORM } from "../limitreductions/columns-definitions.js";
 import { LimitReductionTableRow } from "../limitreductions/limit-reduction-table-row.js";
 import { CustomVoltageLevelTableRow } from "./custom-voltage-level-table-row.js";
@@ -22,7 +23,7 @@ function CustomVoltageLevelTable({
         border: "solid 0px rgba(0,0,0,0.1)"
       },
       children: /* @__PURE__ */ jsxs(Table, { stickyHeader: true, size: "small", sx: { tableLayout: "fixed" }, children: [
-        /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columnsDefinition.map((column) => /* @__PURE__ */ jsx(Tooltip, { title: column.tooltip, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columnsDefinition.map((column) => /* @__PURE__ */ jsx(CustomTooltip, { title: column.tooltip, children: /* @__PURE__ */ jsx(
           TableCell,
           {
             sx: {

package/dist/components/parameters/common/widget/parameter-float.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
+import { CustomTooltip } from "../../../tooltip/CustomTooltip.js";
 import "../../../overflowableText/OverflowableText.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -49,7 +50,7 @@ function ParameterFloat({
     /* @__PURE__ */ jsx(Grid, { item: true, xs: inputSize, children: /* @__PURE__ */ jsx(FloatInput, { name, adornment }) })
   ] });
   if (tooltip) {
-    return /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: tooltip }), children: content });
+    return /* @__PURE__ */ jsx(CustomTooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: tooltip }), children: content });
   }
   return content;
 }

package/dist/components/parameters/dynamic-simulation/curve/common/grid-buttons.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Tooltip, IconButton } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { AddCircle, Delete } from "@mui/icons-material";
 import { useCallback } from "react";
 import { useIntl } from "react-intl";
+import { CustomTooltip } from "../../../../tooltip/CustomTooltip.js";
 function GridButtons({ onAddButton, onDeleteButton, disabledAdd, disabledDelete }) {
   const intl = useIntl();
   const handleAddButton = useCallback(() => {
@@ -13,22 +14,20 @@ function GridButtons({ onAddButton, onDeleteButton, disabledAdd, disabledDelete
   }, [onDeleteButton]);
   return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, xs: true, spacing: 1, sx: { justifyContent: "flex-end", alignItems: "flex-end" }, children: [
     /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-      Tooltip,
+      CustomTooltip,
       {
         title: intl.formatMessage({
           id: "AddRows"
         }),
-        placement: "top",
         children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => handleAddButton(), disabled: disabledAdd, children: /* @__PURE__ */ jsx(AddCircle, {}) }) })
       }
     ) }),
     /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-      Tooltip,
+      CustomTooltip,
       {
         title: intl.formatMessage({
           id: "DeleteRows"
         }),
-        placement: "top",
         children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => handleDeleteButton(), disabled: disabledDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) })
       }
     ) })

package/dist/components/parameters/dynamic-simulation/curve/dialog/curve-selector-dialog.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme, Dialog, DialogTitle, Typography, DialogContent, Grid, Tooltip, IconButton, DialogActions, Button } from "@mui/material";
+import { useTheme, Dialog, DialogTitle, Typography, DialogContent, Grid, IconButton, DialogActions, Button } from "@mui/material";
 import { useRef, useCallback } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { ArrowCircleRight, ArrowCircleLeft } from "@mui/icons-material";
+import { CustomTooltip } from "../../../../tooltip/CustomTooltip.js";
 import CurvePreview from "./curve-preview.js";
 import CurveSelector from "./curve-selector.js";
 import { mergeSx } from "../../../../../utils/styles.js";
@@ -75,12 +76,11 @@ function CurveSelectorDialog({
           ) }),
           /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", justifyContent: "center", alignItems: "center", xs: 0.5, children: [
             /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-              Tooltip,
+              CustomTooltip,
               {
                 title: intl.formatMessage({
                   id: "AddRows"
                 }),
-                placement: "top",
                 children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
                   IconButton,
                   {
@@ -93,12 +93,11 @@ function CurveSelectorDialog({
               }
             ) }),
             /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-              Tooltip,
+              CustomTooltip,
               {
                 title: intl.formatMessage({
                   id: "DeleteRows"
                 }),
-                placement: "top",
                 children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
                   IconButton,
                   {

package/dist/components/parameters/network-visualizations/network-visualizations-form.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { User } from 'oidc-client';
+import { User } from 'oidc-client-ts';
 import { UseNetworkVisualizationParametersFormReturn } from './use-network-visualizations-parameters-form';
 interface NetworkVisualizationParametersFormProps {
     networkVisuMethods: UseNetworkVisualizationParametersFormReturn;

package/dist/components/parameters/network-visualizations/network-visualizations-parameters-inline.d.ts

@@ -1,5 +1,5 @@
 import { UUID } from 'node:crypto';
-import { User } from 'oidc-client';
+import { User } from 'oidc-client-ts';
 import { NetworkVisualizationParameters } from './network-visualizations.types';
 export declare function NetworkVisualizationParametersInline({ studyUuid, setHaveDirtyFields, user, parameters, }: Readonly<{
     studyUuid: UUID | null;

package/dist/components/parameters/security-analysis/security-analysis-violations-hiding.js

@@ -1,7 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid, Typography, Tooltip } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import { useIntl } from "react-intl";
 import { Info } from "@mui/icons-material";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 import { parametersStyles } from "../parameters-style.js";
 import "../../overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
@@ -84,7 +85,7 @@ function SecurityAnalysisFields({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx(Tooltip, { title: intl.formatMessage({ id: tooltipInfoId }), placement: "left-start", children: /* @__PURE__ */ jsx(Info, {}) })
+    /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: tooltipInfoId }), children: /* @__PURE__ */ jsx(Info, {}) })
   ] });
 }
 const fieldsToShow = [
@@ -130,11 +131,10 @@ function ViolationsHidingParameters() {
         id: "securityAnalysis.violationsHiding"
       }) }),
       /* @__PURE__ */ jsx(
-        Tooltip,
+        CustomTooltip,
         {
           sx: parametersStyles.tooltip,
           title: intl.formatMessage({ id: "securityAnalysis.toolTip.violationsHiding" }),
-          placement: "left-start",
           children: /* @__PURE__ */ jsx(Info, {})
         }
       )

package/dist/components/parameters/short-circuit/short-circuit-icc-cluster-table-row.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { TableRow, TableCell, Tooltip, IconButton } from "@mui/material";
+import { TableRow, TableCell, IconButton } from "@mui/material";
 import { Delete } from "@mui/icons-material";
 import { useWatch } from "react-hook-form";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
+import { CustomTooltip } from "../../tooltip/CustomTooltip.js";
 import { SHORT_CIRCUIT_ICC_CLUSTER_ACTIVE } from "./columns-definition.js";
 import { ShortCircuitIccClusterTableCell } from "./short-circuit-icc-cluster-table-cell.js";
 function ShortCircuitIccClusterTableRow({
@@ -27,7 +28,7 @@ function ShortCircuitIccClusterTableRow({
       },
       `${column.dataKey}`
     )),
-    /* @__PURE__ */ jsx(TableCell, { align: "center", children: isHover && /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onDeleteButton(index), children: /* @__PURE__ */ jsx(Delete, { fontSize: "small" }) }) }) })
+    /* @__PURE__ */ jsx(TableCell, { align: "center", children: isHover && /* @__PURE__ */ jsx(CustomTooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onDeleteButton(index), children: /* @__PURE__ */ jsx(Delete, { fontSize: "small" }) }) }) })
   ] });
 }
 export {