Upgrade react and react-dom to version 19

package.json

@@ -22,7 +22,7 @@
     "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",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^5.18.0",
         "@mui/lab": "5.0.0-alpha.175",
@@ -37,8 +37,8 @@
         "mui-nested-menu": "^4.0.1",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
         "react-hook-form": "^7.62.0",
         "react-intl": "^7.1.11",
         "react-papaparse": "^4.4.0",
@@ -66,8 +66,8 @@
         "@types/localized-countries": "^2.0.3",
         "@types/node": "^22.18.1",
         "@types/prop-types": "^15.7.15",
-        "@types/react": "^18.3.24",
-        "@types/react-dom": "^18.3.7",
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.1",
         "@types/react-window": "^1.8.8",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@typescript-eslint/parser": "^7.18.0",

src/components/directory-content-table.tsx

@@ -25,7 +25,7 @@ import { AGGRID_LOCALES } from '../translations/not-intl/aggrid-locales';
 
 export interface DirectoryContentTableProps
     extends Pick<AgGridReactProps<ElementAttributes>, 'getRowStyle' | 'onGridReady'> {
-    gridRef: RefObject<AgGridReact<ElementAttributes>>;
+    gridRef: RefObject<AgGridReact<ElementAttributes> | null>;
     rows: ElementAttributes[];
     handleCellContextualMenu: (event: CellContextMenuEvent) => void;
     handleRowSelected: () => void;

src/components/search/search-bar.tsx

@@ -33,7 +33,7 @@ export function SearchBar({ inputRef }: Readonly<SearchBarProps>) {
     const dispatch = useDispatch<AppDispatch>();
     const { snackError } = useSnackMessage();
     const treeData = useSelector((state: AppState) => state.treeData);
-    const treeDataRef = useRef<ITreeData>();
+    const treeDataRef = useRef<ITreeData>(null);
     const selectedDirectory = useSelector((state: AppState) => state.selectedDirectory);
     treeDataRef.current = treeData;
 

src/components/search/use-highlight-searched-element.tsx

@@ -18,7 +18,7 @@ const SEARCH_HIGHLIGHT_DURATION_S = 4;
 export function useHighlightSearchedElement(gridApi: GridApi<ElementAttributes> | null) {
     const searchedElement = useSelector((state: AppState) => state.searchedElement);
     const dispatch = useDispatch<AppDispatch>();
-    const timeout = useRef<ReturnType<typeof setTimeout>>();
+    const timeout = useRef<ReturnType<typeof setTimeout>>(null);
 
     const highlightElement = useCallback(
         (api: GridApi<ElementAttributes>) => {
@@ -27,7 +27,7 @@ export function useHighlightSearchedElement(gridApi: GridApi<ElementAttributes>
                 return;
             }
             const searchedElementRow = api.getRowNode(searchedElement.id);
-            if (searchedElementRow?.rowIndex != null && searchedElementRow?.rowIndex >= 0) {
+            if (searchedElementRow?.rowIndex != null && searchedElementRow?.rowIndex >= 0 && timeout.current) {
                 api.ensureIndexVisible(searchedElementRow.rowIndex, 'top');
                 clearTimeout(timeout.current);
                 timeout.current = setTimeout(() => {

src/components/tree-views-container.tsx

@@ -112,7 +112,7 @@ export default function TreeViewsContainer() {
 
     const treeData = useSelector((state: AppState) => state.treeData);
 
-    const treeDataRef = useRef<ITreeData>();
+    const treeDataRef = useRef<ITreeData>(null);
     treeDataRef.current = treeData;
 
     const handleOpenDirectoryMenu = useCallback(

src/components/utils/directory-content-utils.ts

@@ -8,7 +8,7 @@
 import { IntlShape } from 'react-intl';
 import type { UUID } from 'node:crypto';
 import { AgGridReact } from 'ag-grid-react';
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import { ColDef, IRowNode } from 'ag-grid-community';
 import type { ElementAttributes } from '@gridsuite/commons-ui';
 import { NameCellRenderer } from './renderers/name-cell-renderer';
@@ -28,7 +28,7 @@ export const formatMetadata = (
 });
 
 export const computeCheckedElements = (
-    gridRef: MutableRefObject<AgGridReact | null>,
+    gridRef: RefObject<AgGridReact | null>,
     childrenMetadata: Record<UUID, ElementAttributes>
 ): ElementAttributes[] =>
     gridRef.current?.api?.getSelectedRows().map((row: ElementAttributes) => formatMetadata(row, childrenMetadata)) ??

src/hooks/useDirectoryContent.ts

@@ -34,7 +34,7 @@ export const useDirectoryContent = () => {
     const knownUsersIdentitiesRef = useRef<UsersIdentitiesMap>({});
     const [childrenMetadata, setChildrenMetadata] = useState<Record<UUID, ElementAttributes>>({});
     const { snackError } = useSnackMessage();
-    const previousData = useRef<ElementAttributes[]>();
+    const previousData = useRef<ElementAttributes[]>(undefined);
     previousData.current = currentChildren;
 
     const handleError = useCallback(