Update dependencies (fix)

demo/src/app.jsx

@@ -25,7 +25,7 @@ import {
     Typography,
 } from '@mui/material';
 import CommentIcon from '@mui/icons-material/Comment';
-import { BrowserRouter, useLocation, useMatch, useNavigate } from 'react-router';
+import { BrowserRouter, useLocation, useMatch, useNavigate } from 'react-router-dom';
 import { IntlProvider, useIntl } from 'react-intl';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import translations from './demo_intl';

package.json

@@ -127,6 +127,7 @@
         "react-papaparse": "^4.4.0",
         "react-resizable": "^3.0.5",
         "react-router": "^6.29.0",
+        "react-router-dom": "^6.29.0",
         "ts-node": "^10.9.2",
         "typescript": "~5.5.4",
         "vite": "^5.4.14",

src/components/checkBoxList/checkBoxList.type.ts

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
 import type { SxProps, Theme } from '@mui/material';
 
@@ -31,7 +31,7 @@ type CheckBoxListItemSxProps<T> = CheckBoxListSx & {
 export interface CheckBoxListItemProps<T> {
     item: T;
     sx?: CheckBoxListItemSx;
-    label: string;
+    label: ReactNode;
     onClick: () => void;
     secondaryAction?: (item: T, hover: string) => ReactElement | null;
     getItemId: (item: T) => string;
@@ -52,7 +52,7 @@ export interface CheckBoxListItemsProps<T> {
     selectedItems: T[];
     onSelectionChange?: (selectedItems: T[]) => void;
     getItemId: (item: T) => string;
-    getItemLabel?: (item: T) => string;
+    getItemLabel?: (item: T) => ReactNode;
     secondaryAction?: (item: T, hover: boolean) => ReactElement | null;
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;
@@ -72,7 +72,7 @@ export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
 
 export interface ClickableCheckBoxItemProps {
     sx?: CheckBoxListItemSx;
-    label: string;
+    label: ReactNode;
     onClick: () => void;
     disabled?: boolean;
     checked: boolean;

src/components/overflowableText/OverflowableText.tsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { ReactElement, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Box, BoxProps, SxProps, Theme, Tooltip, styled } from '@mui/material';
 import { Style } from 'node:util';
 
@@ -32,7 +32,7 @@ const multilineOverflowStyle = (numberOfLinesToDisplay?: number): SxProps => ({
 });
 
 export interface OverflowableTextProps extends BoxProps {
-    text?: ReactElement | string;
+    text?: ReactNode;
     maxLineCount?: number;
     tooltipStyle?: Style;
     tooltipSx?: SxProps<Theme>;

src/hooks/useModificationLabelComputer.tsx

@@ -29,18 +29,19 @@ interface ModificationValues {
     equipmentAttributeValue: string;
 }
 
-const getOperatingStatusModificationValues = (modification: ModificationValues, withFormat: boolean) => {
+const getOperatingStatusModificationValues = (modification: ModificationValues, formatBold: boolean) => {
     return {
         action: modification.action,
         energizedEnd: modification.energizedVoltageLevelId,
-        computedLabel: withFormat ? <strong>{modification.equipmentId}</strong> : modification.equipmentId,
+        computedLabel: formatBold ? <strong>{modification.equipmentId}</strong> : modification.equipmentId,
     };
 };
-const getEquipmentAttributeModificationValues = (modification: ModificationValues, withFormat: boolean) => {
+
+const getEquipmentAttributeModificationValues = (modification: ModificationValues, formatBold: boolean) => {
     return {
         equipmentAttributeName: modification.equipmentAttributeName,
         equipmentAttributeValue: modification.equipmentAttributeValue,
-        computedLabel: withFormat ? <strong>{modification.equipmentId}</strong> : modification.equipmentId,
+        computedLabel: formatBold ? <strong>{modification.equipmentId}</strong> : modification.equipmentId,
     };
 };
 
@@ -85,18 +86,16 @@ export const useModificationLabelComputer = () => {
     );
 
     const computeLabel = useCallback(
-        (modif: NetworkModificationMetadata, withFormat = true) => {
+        (modif: NetworkModificationMetadata, formatBold = true) => {
             const modificationValues = JSON.parse(modif.messageValues);
 
             switch (modif.messageType) {
                 case MODIFICATION_TYPES.OPERATING_STATUS_MODIFICATION.type:
-                    return getOperatingStatusModificationValues(modificationValues, withFormat);
+                    return getOperatingStatusModificationValues(modificationValues, formatBold);
                 case MODIFICATION_TYPES.EQUIPMENT_ATTRIBUTE_MODIFICATION.type:
-                    return getEquipmentAttributeModificationValues(modificationValues, withFormat);
+                    return getEquipmentAttributeModificationValues(modificationValues, formatBold);
                 default:
-                    return {
-                        computedLabel: withFormat ? <strong>{getLabel(modif)}</strong> : getLabel(modif),
-                    };
+                    return { computedLabel: formatBold ? <strong>{getLabel(modif)}</strong> : getLabel(modif) };
             }
         },
         [getLabel]