Upgrade react and react-dom to version 19

package.json

@@ -11,15 +11,16 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@gridsuite/commons-ui": "0.132.0",
+        "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.132.0.tgz",
         "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^5.18.0",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.18.0",
         "@mui/x-charts": "^7.29.1",
         "@mui/x-tree-view": "^7.29.1",
-        "@powsybl/network-viewer": "2.0.0",
+        "@powsybl/network-map-layers": "file:../../../powsybl/powsybl-network-viewer/powsybl-network-map-layers-2.1.0-dev.0.tgz",
+        "@powsybl/network-viewer": "file:../../../powsybl/powsybl-network-viewer/powsybl-network-viewer-2.1.0-dev.0.tgz",
         "@reduxjs/toolkit": "^2.9.0",
         "@svgdotjs/svg.js": "^3.2.4",
         "@xyflow/react": "^12.8.4",
@@ -33,9 +34,9 @@
         "mui-nested-menu": "^4.0.1",
         "plotly.js-basic-dist-min": "^2.35.3",
         "qs": "^6.14.0",
-        "react": "^18.3.1",
+        "react": "^19.2.0",
         "react-csv-downloader": "^3.3.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.2.0",
         "react-grid-layout": "^1.5.2",
         "react-hook-form": "^7.62.0",
         "react-intl": "^7.1.11",
@@ -92,8 +93,8 @@
         "@types/node": "^22.18.1",
         "@types/plotly.js-basic-dist-min": "^2.12.4",
         "@types/qs": "^6.14.0",
-        "@types/react": "^18.3.24",
-        "@types/react-dom": "^18.3.7",
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.1",
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-plotly.js": "^2.6.3",
         "@types/react-resizable": "^3.0.8",

src/components/computing-status/use-computing-status.ts

@@ -48,9 +48,9 @@ interface LastUpdateProps {
 function isWorthUpdate(
     studyUpdatedForce: StudyUpdated,
     computingStatusFetcher: (studyUuid: UUID, nodeUuid: UUID, currentRootNetworkUuid: UUID) => Promise<string | null>,
-    lastUpdateRef: RefObject<LastUpdateProps>,
-    nodeUuidRef: RefObject<UUID>,
-    rootNetworkUuidRef: RefObject<UUID>,
+    lastUpdateRef: RefObject<LastUpdateProps | null>,
+    nodeUuidRef: RefObject<UUID | null>,
+    rootNetworkUuidRef: RefObject<UUID | null>,
     nodeUuid: UUID,
     currentRootNetworkUuid: UUID,
     invalidations: string[]

src/components/dialogs/limits/limits-pane.tsx

@@ -50,7 +50,7 @@ export function LimitsPane({
 
     const myRef: any = useRef<any>(null);
 
-    const limitsGroups: OperationalLimitsGroupFormInfos[] = useWatch({
+    const limitsGroups = useWatch({
         name: `${id}.${OPERATIONAL_LIMITS_GROUPS}`,
     });
     const olgEditable: boolean = useWatch({
@@ -95,7 +95,7 @@ export function LimitsPane({
 
             // checks if limit sets with that name already exist
             const sameNameInLs: OperationalLimitsGroupFormInfos[] = limitsGroups
-                .filter((_ls, index: number) => index !== indexSelectedLimitSet)
+                .filter((_ls: OperationalLimitsGroupFormInfos, index: number) => index !== indexSelectedLimitSet)
                 .filter(
                     (limitsGroup: OperationalLimitsGroupFormInfos) =>
                         limitsGroup.name.trim() === editedLimitGroupName.trim()

src/components/dialogs/limits/limitsChart.tsx

@@ -9,7 +9,7 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import { useCallback, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useIntl } from 'react-intl';
-import { CurrentLimits, Limit } from '../../../services/network-modification-types';
+import { Limit, TemporaryLimit } from '../../../services/network-modification-types';
 import { BarSeriesType } from '@mui/x-charts/models/seriesType/bar';
 import { AxisValueFormatterContext } from '@mui/x-charts/models/axis';
 
@@ -43,7 +43,7 @@ const formatTempo = (tempo: number | null) => {
 };
 
 export default function LimitsChart({ limitsGroupFormName, previousPermanentLimit }: Readonly<LimitsGraphProps>) {
-    const currentLimits: CurrentLimits = useWatch({ name: `${limitsGroupFormName}` });
+    const currentLimits = useWatch({ name: `${limitsGroupFormName}` });
     const intl = useIntl();
     const permanentLimit: number | null = currentLimits.permanentLimit ?? previousPermanentLimit ?? null;
 
@@ -95,8 +95,8 @@ export default function LimitsChart({ limitsGroupFormName, previousPermanentLimi
 
         if (currentLimits?.temporaryLimits) {
             currentLimits.temporaryLimits
-                .filter((field) => field.name && (field.acceptableDuration || field.value))
-                .forEach((field) => {
+                .filter((field: TemporaryLimit) => field.name && (field.acceptableDuration || field.value))
+                .forEach((field: TemporaryLimit) => {
                     if (!field.value) {
                         noValueThresholdFound = true;
                     }

src/components/dialogs/limits/selected-operational-limit-group.tsx

@@ -29,7 +29,7 @@ export const SelectedOperationalLimitGroup = ({
     previousValue,
     isABranchModif,
 }: Readonly<SelectedOperationalLimitGroupProps>) => {
-    const optionsValues: OperationalLimitsGroupFormInfos[] = useWatch({
+    const optionsValues = useWatch({
         name: optionsFormName,
     });
     const intl = useIntl();

src/components/dialogs/line-types-catalog/limit-custom-aggrid.tsx

@@ -23,7 +23,7 @@ const defaultColDef: ColDef = {
 };
 
 interface LimitsCustomAgGridProps {
-    gridRef: RefObject<AgGridReact>;
+    gridRef: RefObject<AgGridReact | null>;
     currentTab: number;
     aerialRowData: LineTypeInfo[];
     undergroundRowData: LineTypeInfo[];

src/components/dialogs/line-types-catalog/line-types-catalog-selector-form.tsx

@@ -26,7 +26,7 @@ import { useRowData } from './use-row-data';
 import { AgGridReact } from 'ag-grid-react';
 
 interface LineTypesCatalogSelectorFormProps {
-    gridRef: React.RefObject<AgGridReact>;
+    gridRef: React.RefObject<AgGridReact | null>;
     selectedRow: LineTypeInfo | null;
     preselectedRowId: string;
     rowData: LineTypeInfo[];

src/components/dialogs/network-modifications/line/modification/line-modification-dialog-tabs.tsx

@@ -14,6 +14,7 @@ import { LimitsPane } from '../../../limits/limits-pane';
 import type { UUID } from 'node:crypto';
 import { CurrentTreeNode } from '../../../../graph/tree-node.type';
 import { BranchInfos } from '../../../../../services/study/network-map.type';
+import { JSX } from 'react';
 
 export interface LineModificationDialogTabsProps {
     studyUuid: UUID;

src/components/dialogs/parameters/dynamicsimulation/curve-parameters.tsx

@@ -86,7 +86,7 @@ const CurveParameters = ({ path }: { path: string }) => {
         setSelectedRowsLength(0);
     }, [remove, rowData]);
 
-    const quickFilterRef = useRef();
+    const quickFilterRef = useRef(null);
 
     // curve grid configuration
     const theme = useTheme();

src/components/dialogs/parameters/dynamicsimulation/global-filter.tsx

@@ -20,13 +20,13 @@ const styles = {
 } as const satisfies MuiStyles;
 
 interface GlobalFilterProps {
-    gridRef: RefObject<AgGridReact>;
+    gridRef: RefObject<AgGridReact | null>;
     disabled?: boolean;
 }
 
 export const GlobalFilter = forwardRef(({ gridRef, disabled }: GlobalFilterProps, ref) => {
     const intl = useIntl();
-    const inputRef = useRef<any>();
+    const inputRef = useRef<any>(null);
 
     const applyQuickFilter = useCallback(
         (filterValue: string) => {

src/components/graph/menus/dynamic-simulation/event-modification-scenario-editor.tsx

@@ -45,7 +45,7 @@ const EventModificationScenarioEditor = () => {
     const [events, setEvents] = useState<Event[]>([]);
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
 
-    const currentNodeIdRef = useRef<UUID>(); // initial empty to get first update
+    const currentNodeIdRef = useRef<UUID>(null); // initial empty to get first update
     const [pendingState, setPendingState] = useState(false);
 
     const [selectedItems, setSelectedItems] = useState<Event[]>([]);

src/components/graph/menus/network-modifications/network-modification-menu.type.ts

@@ -8,6 +8,7 @@
 import type { UUID } from 'node:crypto';
 import { CurrentTreeNode } from '../../tree-node.type';
 import { FetchStatus } from '../../../../services/utils.type';
+import { JSX } from 'react';
 export interface RootNetworkMetadata {
     rootNetworkUuid: UUID;
     originalCaseUuid: UUID;

src/components/graph/menus/network-modifications/network-modification-node-editor.tsx

@@ -159,14 +159,14 @@ const NetworkModificationNodeEditor = () => {
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
 
-    const currentNodeIdRef = useRef<UUID>(); // initial empty to get first update
+    const currentNodeIdRef = useRef<UUID>(null); // initial empty to get first update
     const [pendingState, setPendingState] = useState(false);
 
     const [selectedNetworkModifications, setSelectedNetworkModifications] = useState<NetworkModificationMetadata[]>([]);
 
     const [copiedModifications, setCopiedModifications] = useState<UUID[]>([]);
     const [copyInfos, setCopyInfos] = useState<NetworkModificationCopyInfo | null>(null);
-    const copyInfosRef = useRef<NetworkModificationCopyInfo | null>();
+    const copyInfosRef = useRef<NetworkModificationCopyInfo | null>(null);
     copyInfosRef.current = copyInfos;
 
     const [isDragging, setIsDragging] = useState(false);

src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx

@@ -82,9 +82,9 @@ function NetworkAreaDiagramContent(props: NetworkAreaDiagramContentProps) {
         loadingState,
         showInSpreadsheet,
     } = props;
-    const svgRef = useRef();
+    const svgRef = useRef(null);
     const { snackError, snackInfo } = useSnackMessage();
-    const diagramViewerRef = useRef<NetworkAreaDiagramViewer | null>();
+    const diagramViewerRef = useRef<NetworkAreaDiagramViewer | null>(null);
     const loadFlowStatus = useSelector((state: AppState) => state.computingStatus[ComputingType.LOAD_FLOW]);
     const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
     const [showLabels, setShowLabels] = useState(true);

src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram.tsx

@@ -42,7 +42,7 @@ const PositionDiagram = forwardRef((props: PositionDiagramProps, ref: Ref<HTMLDi
     const svgDraw = useRef<SingleLineDiagramViewer | null>(null);
     const { snackError } = useSnackMessage();
     const intlRef = useIntlRef();
-    const svgRef = useRef<HTMLDivElement>();
+    const svgRef = useRef<HTMLDivElement>(null);
     const { svgType, disabled } = props;
 
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);

src/components/grid-layout/cards/diagrams/singleLineDiagram/single-line-diagram-content.tsx

@@ -90,8 +90,8 @@ function SingleLineDiagramContent(props: SingleLineDiagramContentProps) {
     } = props;
     const theme = useTheme();
     const dispatch = useDispatch();
-    const svgRef = useRef<HTMLDivElement>();
-    const diagramViewerRef = useRef<SingleLineDiagramViewer>();
+    const svgRef = useRef<HTMLDivElement>(null);
+    const diagramViewerRef = useRef<SingleLineDiagramViewer>(null);
     const { snackError } = useSnackMessage();
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
@@ -328,6 +328,7 @@ function SingleLineDiagramContent(props: SingleLineDiagramContentProps) {
                 equipmentType={hoveredEquipmentType}
                 equipmentId={hoveredEquipmentId}
                 loadFlowStatus={loadFlowStatus}
+                anchorPosition={undefined}
             />
         );
     };

src/components/grid-layout/hooks/use-diagram-model.ts

@@ -48,10 +48,10 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx
     // context
     const studyUuid = useSelector((state: AppState) => state.studyUuid);
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
-    const prevCurrentNodeId = useRef<UUID | undefined>();
-    const prevCurrentNodeStatus = useRef<BUILD_STATUS | undefined>();
+    const prevCurrentNodeId = useRef<UUID | undefined>(undefined);
+    const prevCurrentNodeStatus = useRef<BUILD_STATUS | undefined>(undefined);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
-    const prevCurrentRootNetworkUuid = useRef<UUID | null>();
+    const prevCurrentRootNetworkUuid = useRef<UUID | null>(null);
     const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);
     const paramUseName = useSelector((state: AppState) => state[PARAM_USE_NAME]);
     const language = useSelector((state: AppState) => state[PARAM_LANGUAGE]);

src/components/network/network-map-panel.tsx

@@ -182,11 +182,11 @@ export const NetworkMapPanel = forwardRef<NetworkMapPanelRef, NetworkMapPanelPro
 
         const [filteredNominalVoltages, setFilteredNominalVoltages] = useState<number[]>();
         const [geoData, setGeoData] = useState<GeoData>();
-        const geoDataRef = useRef<any>();
+        const geoDataRef = useRef<any>(null);
 
         const basicDataReady = mapEquipments && geoData;
 
-        const lineFullPathRef = useRef<boolean>();
+        const lineFullPathRef = useRef<boolean>(null);
         const [isDialogSearchOpen, setIsDialogSearchOpen] = useState(false);
         const intl = useIntl();
 
@@ -199,13 +199,13 @@ export const NetworkMapPanel = forwardRef<NetworkMapPanelRef, NetworkMapPanelPro
         and this position would need to be requested again.
         It will be possible to have a better mechanism after we improved the notification system.
         */
-        const temporaryGeoDataIdsRef = useRef<Set<string>>();
+        const temporaryGeoDataIdsRef = useRef<Set<string>>(null);
 
         const disabled = !isNodeBuilt(currentNode);
         const reloadMapNeeded = useSelector((state: AppState) => state.reloadMapNeeded);
         const freezeMapUpdates = useSelector((state: AppState) => state.freezeMapUpdates);
         const isMapEquipmentsInitialized = useSelector((state: AppState) => state.isMapEquipmentsInitialized);
-        const refIsMapManualRefreshEnabled = useRef<boolean>();
+        const refIsMapManualRefreshEnabled = useRef<boolean>(null);
         refIsMapManualRefreshEnabled.current = networkVisuParams.mapParameters.mapManualRefresh;
         const [firstRendering, setFirstRendering] = useState<boolean>(true);
 
@@ -977,6 +977,7 @@ export const NetworkMapPanel = forwardRef<NetworkMapPanelRef, NetworkMapPanelPro
                     equipmentId={elementId}
                     equipmentType={EQUIPMENT_TYPES.LINE}
                     loadFlowStatus={loadFlowStatus}
+                    anchorPosition={undefined}
                 />
             ),
             [loadFlowStatus, studyUuid]

src/components/report-viewer/QuickSearch.tsx

@@ -17,7 +17,7 @@ interface QuickSearchProps {
     resultCount: number;
     resetSearch: () => void;
     placeholder?: string;
-    inputRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLDivElement | null>;
     sx?: SxStyle;
 }
 

src/components/report-viewer/use-treeview-scroll.ts

@@ -11,7 +11,7 @@ import { FixedSizeList } from 'react-window';
 export const useTreeViewScroll = (
     highlightedReportId: string | undefined,
     nodes: ReportItem[],
-    listRef: RefObject<FixedSizeList>
+    listRef: RefObject<FixedSizeList | null>
 ) => {
     const scrollLocked = useRef(false);
 

src/components/results/common/global-filter/global-filter-paper.tsx

@@ -37,7 +37,7 @@ const XS_COLUMN2: number = 4;
 const XS_COLUMN3: number = 4.5;
 
 type GlobalFilterPaperProps = PropsWithChildren<{
-    autocompleteRef?: RefObject<HTMLElement>;
+    autocompleteRef?: RefObject<HTMLElement | null>;
 }>;
 
 function GlobalFilterPaper({ children, autocompleteRef }: Readonly<GlobalFilterPaperProps>) {

src/components/results/dynamicsimulation/common/gridlayout/responsive-grid-layout.tsx

@@ -10,12 +10,12 @@ import './react-grid-layout.custom.css';
 // TODO place these css at global or directly into useStyles for RGLResponsive
 import { Responsive as RGLResponsive, ResponsiveProps } from 'react-grid-layout';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { MutableRefObject, useRef } from 'react';
+import { RefObject, useRef } from 'react';
 
 function getDimensions(
     width: number,
     height: number,
-    prevDimensionRef: MutableRefObject<{
+    prevDimensionRef: RefObject<{
         width: number;
         height: number;
     }>

src/components/results/securityanalysis/security-analysis-result-tab.tsx

@@ -89,7 +89,7 @@ export const SecurityAnalysisResultTab: FunctionComponent<SecurityAnalysisTabPro
     const intl = useIntl();
     const [enableDeveloperMode] = useParameterState(PARAM_DEVELOPER_MODE);
     const [tabIndex, setTabIndex] = useState(enableDeveloperMode ? N_RESULTS_TAB_INDEX : NMK_RESULTS_TAB_INDEX);
-    const tabIndexRef = useRef<number>();
+    const tabIndexRef = useRef<number>(null);
     tabIndexRef.current = tabIndex;
     const [nmkType, setNmkType] = useState(NMK_TYPE.CONSTRAINTS_FROM_CONTINGENCIES);
     const [count, setCount] = useState<number>(0);

src/components/spreadsheet-view/columns/floating-treeview-list/treeview-searchable.tsx

@@ -25,7 +25,7 @@ interface TreeviewSearchableProps {
     properties: JSONSchema4 | null;
     formMethods: UseFormReturn<any>;
     setAnchorEl: Dispatch<SetStateAction<Element | null>>;
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     equipmentType: SpreadsheetEquipmentType;
 }
 

src/components/spreadsheet-view/columns/floating-treeview-list/utils/render-tree-data.tsx

@@ -5,15 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import { TreeNode } from './json-schema-parser';
 import { TreeItem } from '@mui/x-tree-view';
 import { TreeLabel } from '../tree-label';
 
 export function renderTreeData(
     nodes: TreeNode[],
     query: string,
-    itemRefs: MutableRefObject<Record<string, HTMLLIElement | null>>,
+    itemRefs: RefObject<Record<string, HTMLLIElement | null>>,
     matches: TreeNode[],
     currentResultIndex: number
 ) {
@@ -23,7 +23,9 @@ export function renderTreeData(
             <TreeItem
                 key={`${index}${node.id}`}
                 itemId={node.id}
-                ref={(el) => (itemRefs.current[node.id] = el)}
+                ref={(el) => {
+                    itemRefs.current[node.id] = el;
+                }}
                 label={
                     <TreeLabel
                         key={`${index}${node.id}`}

src/components/spreadsheet-view/spreadsheet/spreadsheet-content/equipment-table.tsx

@@ -48,7 +48,7 @@ const defaultColDef: ColDef = {
 };
 
 interface EquipmentTableProps {
-    gridRef: React.RefObject<AgGridReact>;
+    gridRef: React.RefObject<AgGridReact | null>;
     rowData: unknown[] | undefined;
     columnData: ColDef[];
     currentNode: CurrentTreeNode;

src/components/spreadsheet-view/spreadsheet/spreadsheet-content/hooks/use-column-management.ts

@@ -17,7 +17,10 @@ import { updateTableDefinition } from 'redux/actions';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { reorderSpreadsheetColumns } from 'services/study/study-config';
 
-export function useColumnManagement(gridRef: React.RefObject<AgGridReact>, tableDefinition: SpreadsheetTabDefinition) {
+export function useColumnManagement(
+    gridRef: React.RefObject<AgGridReact | null>,
+    tableDefinition: SpreadsheetTabDefinition
+) {
     const dispatch = useDispatch();
     const { snackError } = useSnackMessage();
     const studyUuid = useSelector((state: AppState) => state.studyUuid);