feat!: update React to v19

.ncurc.yml

@@ -4,14 +4,5 @@ reject:
   - '@playwright/test'
   # Our plugins are not all compatible with v10
   - eslint
-  # Types are deeply broken between this package and nmrium
-  - nmr-correlation
-  # We're not ready for React 19 yet
-  - react
-  - react-dom
-  - '@types/react'
-  - '@types/react-dom'
   # Not compatible with typescript-eslint
   - typescript
-  # https://github.com/react-grid-layout/react-draggable/issues/806
-  - react-draggable

knip.config.ts

@@ -5,8 +5,5 @@ export default {
   ignoreDependencies: [
     // only for dev debugging
     '@simbathesailor/use-what-changed',
-    // version fixed to 4.5.0
-    // https://github.com/react-grid-layout/react-draggable/issues/806
-    'react-draggable',
   ],
 } satisfies KnipConfig;

package.json

@@ -26,7 +26,7 @@
     "clean-lib": "rimraf lib",
     "cspell": "cspell lint \"**/*.tsx\"",
     "dev": "vite --host localhost --port 3000 --open",
-    "eslint": "eslint . --cache --max-warnings=106",
+    "eslint": "eslint . --cache --max-warnings=105",
     "eslint-fix": "node --run eslint -- --fix",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
     "knip": "knip",
@@ -56,22 +56,22 @@
     "@blueprintjs/core": "^6.0.0",
     "@blueprintjs/icons": "^6.0.0",
     "@blueprintjs/select": "^6.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hookform/resolvers": "^5.9.1",
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.1",
-    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-table": "^9.2.4",
     "@zakodium/nmr-types": "^0.5.26",
     "@zakodium/nmrium-core": "^0.7.66",
-    "@zakodium/nmrium-core-plugins": "^0.7.88",
+    "@zakodium/nmrium-core-plugins": "^0.7.89",
     "@zakodium/pdnd-esm": "^1.1.1",
     "@zakodium/utils": "^0.5.1",
-    "@zip.js/zip.js": "^2.8.53",
+    "@zip.js/zip.js": "^2.9.0",
     "cheminfo-font": "^1.28.0",
     "cheminfo-types": "^1.15.0",
     "clipboard-polyfill": "^4.1.1",
@@ -81,7 +81,7 @@
     "dlv": "^1.1.3",
     "eventemitter3": "^5.0.4",
     "fifo-logger": "^2.0.1",
-    "file-collection": "^6.6.1",
+    "file-collection": "^6.7.0",
     "file-saver": "^2.0.5",
     "get-jpaths": "^1.4.1",
     "immer": "^11.1.18",
@@ -93,18 +93,17 @@
     "ml-gsd": "^14.2.2",
     "ml-peak-shape-generator": "^5.5.0",
     "ml-signal-processing": "^2.2.2",
-    "ml-spectra-processing": "^14.33.0",
+    "ml-spectra-processing": "^14.34.0",
     "ml-tree-similarity": "^2.2.0",
-    "nmr-processing": "^22.23.2",
+    "nmr-processing": "^22.23.6",
     "numeral": "^2.0.6",
     "openchemlib": "^9.25.0",
     "openchemlib-utils": "^8.18.0",
-    "papaparse": "^5.6.0",
+    "papaparse": "^5.7.0",
     "react-d3-utils": "^3.1.2",
-    "react-draggable": "=4.5.0",
-    "react-dropzone": "^20.1.0",
-    "react-error-boundary": "^6.1.3",
-    "react-hook-form": "^7.85.0",
+    "react-dropzone": "^20.1.1",
+    "react-error-boundary": "^6.1.4",
+    "react-hook-form": "^7.87.0",
     "react-icons": "^5.7.0",
     "react-inspector": "^9.0.0",
     "react-mf": "^3.1.1",
@@ -117,7 +116,7 @@
     "ts-pattern": "^5.9.0",
     "usehooks-ts": "^3.1.1",
     "yup": "^1.7.1",
-    "zod": "^4.4.3"
+    "zod": "^4.5.4"
   },
   "devDependencies": {
     "@blueprintjs/core": "^6.18.0",
@@ -131,34 +130,34 @@
     "@types/dlv": "^1.1.5",
     "@types/file-saver": "^2.0.7",
     "@types/lodash": "^4.17.25",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.4.1",
     "@types/numeral": "^2.0.5",
     "@types/papaparse": "^5.5.2",
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^6.0.5",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "^4.1.11",
     "@zakodium/tsconfig": "^1.0.5",
     "cross-env": "^10.1.0",
-    "cspell": "^10.0.1",
+    "cspell": "^10.2.0",
     "eslint": "^9.39.2",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
-    "knip": "^6.32.2",
+    "knip": "^6.34.0",
     "modern-normalize": "^3.0.1",
     "postcss": "^8.5.26",
     "postcss-styled-syntax": "^0.7.2",
     "prettier": "^3.9.6",
     "rc-menu": "^9.16.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.18.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.3",
     "rimraf": "^6.1.3",
     "serve": "^14.2.6",
     "stylelint": "^17.14.1",
     "stylelint-config-standard": "^40.0.0",
     "typescript": "~6.0.3",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
   "volta": {

src/component/EventsTrackers/BrushTracker.tsx

@@ -3,7 +3,6 @@ import type {
   KeyboardEvent,
   MouseEvent,
   PointerEvent,
-  Reducer,
   WheelEvent,
 } from 'react';
 import {
@@ -103,9 +102,7 @@ export function BrushTracker(options: BrushTrackerProps) {
     clickTriggerMode = 'native',
   } = options;
 
-  const [state, dispatch] = useReducer<
-    Reducer<BrushTrackerState, BrushTrackerAction>
-  >(reducer, initialState);
+  const [state, dispatch] = useReducer(reducer, initialState);
   const clickCountRef = useRef(0);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastPointRef = useRef<number>(0);

src/component/EventsTrackers/KeysListenerTracker.tsx

@@ -20,7 +20,7 @@ import SaveAsModal from '../modal/SaveAsModal.js';
 import { options } from '../toolbar/ToolTypes.js';
 
 interface KeysListenerTrackerProps {
-  mainDivRef: RefObject<HTMLDivElement>;
+  mainDivRef: RefObject<HTMLDivElement | null>;
 }
 
 function KeysListenerTracker(props: KeysListenerTrackerProps) {

src/component/context/LoggerContext.tsx

@@ -57,7 +57,7 @@ export function LoggerProvider({ children }: LoggerProviderProps) {
   const [lastReadLogId, setLastLogId] = useState(0);
   const [logsHistory, setLogsHistory] = useState<LogEntry[]>([]);
   const [isLogHistoryOpened, openLogHistory] = useState(false);
-  const popupLoggingLevelRef = useRef<LogEntry['levelLabel']>();
+  const popupLoggingLevelRef = useRef<LogEntry['levelLabel']>(undefined);
   const [logger] = useState(() => new FifoLogger());
 
   useEffect(() => {

src/component/elements/Anchor.tsx

@@ -39,7 +39,7 @@ interface AnchorPosition {
 interface AnchorProps {
   position: AnchorPosition;
   shape?: AnchorShape;
-  containerRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement | null>;
   anchorStyle?: AnchorStyle;
   restoreFocusOnLeave?: boolean;
   onDragMove: (newX: number) => void;

src/component/elements/DraggableDialog.tsx

@@ -57,7 +57,7 @@ interface DraggableDialogProps
 }
 
 interface InnerDraggableDialogProps extends DraggableDialogProps {
-  innerDialogRef: RefObject<HTMLDivElement>;
+  innerDialogRef: RefObject<HTMLDivElement | null>;
 }
 export function DraggableDialog(props: DraggableDialogProps) {
   const {
@@ -84,7 +84,7 @@ export function DraggableDialog(props: DraggableDialogProps) {
       />
       <Overlay2
         {...otherProps}
-        childRef={dialogRef}
+        childRef={dialogRef as RefObject<HTMLDivElement>}
         onClose={onClose}
         className="draggable-portal"
         hasBackdrop={hasBackdrop}

src/component/elements/ResizerWithScale.tsx

@@ -21,7 +21,7 @@ export function ResizerWithScale(props: ResizerWithScaleProps) {
   const x2 = scaleX()(from);
   const x1 = scaleX()(to);
   const [position, setPosition] = useState({ x1, x2 });
-  const startPositionRef = useRef<Position>();
+  const startPositionRef = useRef<Position>(undefined);
 
   useEffect(() => {
     const x2 = scaleX()(from);

src/component/elements/export/ExportManager.tsx

@@ -33,7 +33,7 @@ interface ExportManagerState {
 }
 
 const ExportManagerContext =
-  createContext<RefObject<ExportManagerState> | null>(null);
+  createContext<RefObject<ExportManagerState | null> | null>(null);
 
 export function useExportManagerAPI() {
   const context = useContext(ExportManagerContext);

src/component/elements/tanstack_table/table.tsx

@@ -137,7 +137,7 @@ function TanStackTableInner<TData extends TanStackRowData>(
   const isSortedEventTriggered = useRef<boolean>(false);
   const virtualBoundary = useTanStackTableContext();
   const [rowIndex, setRowIndex] = useState<number>();
-  const timeoutIdRef = useRef<NodeJS.Timeout>();
+  const timeoutIdRef = useRef<NodeJS.Timeout>(undefined);
   const [isCounterVisible, setCounterVisibility] = useState(false);
 
   const memoColumns = useMemo(() => {

src/component/hooks/useCombinedRefs.ts

@@ -1,10 +1,10 @@
-import type { ForwardedRef, MutableRefObject, RefCallback } from 'react';
+import type { ForwardedRef, RefCallback, RefObject } from 'react';
 import { useEffect, useRef } from 'react';
 
 export default function useCombinedRefs<T>(
-  refs: Array<RefCallback<T> | MutableRefObject<T> | ForwardedRef<T>>,
+  refs: Array<RefCallback<T> | RefObject<T> | ForwardedRef<T>>,
 ) {
-  const targetRef = useRef<any>();
+  const targetRef = useRef<any>(undefined);
 
   // eslint-disable-next-line react-hooks/immutability
   useEffect(() => {

src/component/hooks/useSaveSettings.tsx

@@ -21,7 +21,7 @@ const schema = z.object({
 export function useSaveSettings() {
   const toaster = useToaster();
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
-  const settingsRef = useRef<Workspace>();
+  const settingsRef = useRef<Workspace>(undefined);
   const { current } = usePreferences();
 
   const { saveWorkspace, addNewWorkspace } = useWorkspaceAction();

src/component/main/InnerNMRiumContents.tsx

@@ -68,10 +68,10 @@ const NMRiumContainer = styled.div`
 
 interface InnerNMRiumContentsProps {
   emptyText: NMRiumProps['emptyText'];
-  mainDivRef: RefObject<HTMLDivElement>;
-  elementsWrapperRef: RefObject<HTMLDivElement>;
-  rootRef: RefObject<HTMLDivElement>;
-  viewerRef: RefObject<HTMLDivElement>;
+  mainDivRef: RefObject<HTMLDivElement | null>;
+  elementsWrapperRef: RefObject<HTMLDivElement | null>;
+  rootRef: RefObject<HTMLDivElement | null>;
+  viewerRef: RefObject<HTMLDivElement | null>;
   apiRef: ForwardedRef<NMRiumRefAPI>;
 }
 

src/component/main/NMRiumRefAPI.ts

@@ -17,7 +17,7 @@ export interface NMRiumRefAPI {
 
 export function useNMRiumRefAPI(
   ref: ForwardedRef<NMRiumRefAPI>,
-  rootRef: RefObject<HTMLDivElement>,
+  rootRef: RefObject<HTMLDivElement | null>,
 ) {
   const loadFiles = useLoadFiles();
   const createNmriumZip = useCreateNmriumZip();

src/component/main/NMRiumStateProvider.tsx

@@ -74,7 +74,7 @@ export default function NMRiumStateProvider(props: NMRiumStateProviderProps) {
     view,
   } = state;
 
-  const stateRef = useRef<NmriumState>();
+  const stateRef = useRef<NmriumState>(undefined);
 
   const handleChange = useRef<NMRiumChangeCb | undefined>(onChange);
   useEffect(() => {

src/component/main/NMRiumViewer.tsx

@@ -19,7 +19,7 @@ import {
 import type { NMRiumProps } from './NMRium.js';
 
 interface NMRiumViewerProps {
-  viewerRef: RefObject<HTMLDivElement>;
+  viewerRef: RefObject<HTMLDivElement | null>;
   style?: CSSProperties;
   onRender?: () => void;
   emptyText: NMRiumProps['emptyText'];

src/component/main/NMRiumViewerWrapper.tsx

@@ -11,7 +11,7 @@ import type { NMRiumProps } from './NMRium.js';
 import { NMRiumViewer } from './NMRiumViewer.js';
 
 interface NMRiumViewerWrapperProps {
-  viewerRef: RefObject<HTMLDivElement>;
+  viewerRef: RefObject<HTMLDivElement | null>;
   emptyText: NMRiumProps['emptyText'];
 }
 

src/component/modal/changeSum/SelectMolecule.tsx

@@ -73,12 +73,12 @@ export default function SelectMolecule<
 
   useEffect(() => {
     if (molecules && molecules.length > 0) {
-      const index = value
+      const index = value?.id
         ? molecules.findIndex((molecule) => molecule.id === value.id)
         : -1;
       setValue(index !== -1 ? index : 0);
     }
-  }, [molecules, setValue, value]);
+  }, [molecules, setValue, value?.id]);
 
   const onChangeMoleculeSelectionHandler = useCallback(
     (index: number) => {

src/component/panels/AutomaticAssignment/useAutoAssignments.ts

@@ -49,7 +49,7 @@ function mapSpectra(data: Spectrum[]): SpectraData[] {
 export function useAutoAssignments() {
   const dispatch = useDispatch();
   const { data, molecules } = useChartData();
-  const originData = useRef<SpectraData[]>();
+  const originData = useRef<SpectraData[]>(undefined);
   const toaster = useToaster();
   const [assignments, setAssignments] = useState<AutoAssignmentsData[]>([]);
 

src/component/panels/MoleculesPanel/hooks/useExtractAtomAssignmentLabel.ts

@@ -6,7 +6,7 @@ import { useTopicMolecule } from '../../../context/TopicMoleculeContext.js';
 
 export function useExtractAtomAssignmentLabel() {
   const topicMolecule = useTopicMolecule();
-  const lastHoverAtomIdRef = useRef<DiaIDAndInfo>();
+  const lastHoverAtomIdRef = useRef<DiaIDAndInfo>(undefined);
 
   function getLastHoverAtom() {
     return lastHoverAtomIdRef.current;

src/component/panels/SpectraPanel/SpectrumListPanel.tsx

@@ -16,7 +16,7 @@ const styles: CSSProperties = {
 };
 
 function SpectrumListPanel() {
-  const settingsRef = useRef<any>();
+  const settingsRef = useRef<any>(undefined);
   const [isFlipped, setFlipStatus] = useState(false);
 
   function settingsPanelHandler() {

src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx

@@ -188,7 +188,7 @@ function FiltersInner(props: FiltersInnerProps) {
 
   const dispatch = useDispatch();
   const toaster = useToaster();
-  const selectedFilterIndex = useRef<number | null>();
+  const selectedFilterIndex = useRef<number | null>(null);
   const activeSpectrum = useActiveSpectrum();
 
   function filterSnapShotHandler(filter: FilterEntry, index: number) {

src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrection.tsx

@@ -47,8 +47,8 @@ export function usePhaseCorrection(
   const [value, setValue] = useState({ ph0: 0, ph1: 0 });
   const valueRef = useRef({ ph0: 0, ph1: 0 });
 
-  const ph0Ref = useRef<any>();
-  const ph1Ref = useRef<any>();
+  const ph0Ref = useRef<any>(undefined);
+  const ph1Ref = useRef<any>(undefined);
   const { value: phaseCorrectionTypeItem, ...defaultSelectProps } =
     useSelect<AlgorithmItem>({
       defaultSelectedItem: defaultPhasingTypeItem,

src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.tsx

@@ -46,8 +46,8 @@ export function usePhaseCorrectionTwoDimensions(filter: Filter2DEntry | null) {
   const [value, setValue] = useState<PhaseOptions>(defaultPhaseOptions);
   const valueRef = useRef<PhaseOptions>(defaultPhaseOptions);
 
-  const ph0Ref = useRef<any>();
-  const ph1Ref = useRef<any>();
+  const ph0Ref = useRef<any>(undefined);
+  const ph1Ref = useRef<any>(undefined);
 
   const { data } = useSpectrum(emptyData) as Spectrum2D;
   const debounceCalculation = useRef(

src/component/utility/filterDatabaseInfoEntry.ts

@@ -5,6 +5,6 @@ export function filterDatabaseInfoEntry(input: DatabaseNMREntry) {
   return getJPathsAsObject(input, {
     maxArrayElements: 5,
     maxDepth: 10,
-    includeJPathRegexps: [/^(smiles|names|meta)\./],
+    includeJPathRegexps: [/^(?:smiles|names|meta)\./],
   });
 }