feat: add support for React 19

Changes have been verified with React 18 in `react-plot`.

Author: targos

package.json

@@ -37,14 +37,14 @@
     "@storybook/addon-docs": "^9.0.8",
     "@storybook/addon-links": "^9.0.8",
     "@storybook/react-vite": "^9.0.8",
-    "@types/react": "^18.3.11",
+    "@types/react": "^19.1.7",
     "@zakodium/tsconfig": "^1.0.1",
     "eslint": "^9.28.0",
     "eslint-config-zakodium": "^15.0.1",
     "eslint-plugin-storybook": "^9.0.8",
     "prettier": "^3.5.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "storybook": "^9.0.8",
     "typescript": "^5.8.3"

src/hooks/useBBoxObserver.ts

@@ -11,7 +11,7 @@ export function useBBoxObserver<ElementType extends SVGGraphicsElement>() {
   const previousSize = useRef(initialSize);
 
   // Contains a function to cleanup the previous observer when the observed element changes.
-  const cleanupPrevious = useRef<() => void>();
+  const cleanupPrevious = useRef<() => void>(null);
 
   // Ref callback to do the observation.
   const ref: RefCallback<ElementType> = useCallback((element) => {

src/hooks/useLinearPrimaryTicks.ts

@@ -1,5 +1,5 @@
 import type { ScaleContinuousNumeric } from 'd3-scale';
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import { useState } from 'react';
 
 import type { Tick } from './useTicks.js';
@@ -34,7 +34,7 @@ interface Options {
 export function useLinearPrimaryTicks(
   scale: ScaleContinuousNumeric<number, number>,
   direction: Directions,
-  ref: MutableRefObject<SVGGElement | null>,
+  ref: RefObject<SVGGElement | null>,
   options: Options = {},
 ): UseLinearPrimaryTicksResult {
   const [ticks, setTicks] = useState<UseLinearPrimaryTicksResult>(() => ({

src/hooks/useLogTicks.ts

@@ -1,5 +1,5 @@
 import type { ScaleContinuousNumeric } from 'd3-scale';
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { textDimensions } from '../utils.js';
@@ -54,7 +54,7 @@ function formatTicks(
 export function useLogTicks(
   scale: ScaleContinuousNumeric<number, number>,
   direction: Directions,
-  ref: MutableRefObject<SVGGElement | null>,
+  ref: RefObject<SVGGElement | null>,
   options: Options = {},
 ): PrimaryLogTicks[] {
   const [maxStrSize, setMaxStrSize] = useState(40);

src/hooks/useTicks.ts

@@ -1,5 +1,5 @@
 import type { ScaleContinuousNumeric, ScaleTime } from 'd3-scale';
-import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import type { Dispatch, RefObject, SetStateAction } from 'react';
 import { useEffect } from 'react';
 
 import { textDimensions } from '../utils.js';
@@ -40,7 +40,7 @@ export function useTicks<T extends number | Date>(
     ? ScaleContinuousNumeric<number, number>
     : ScaleTime<number, number>,
   direction: Directions,
-  ref: MutableRefObject<SVGGElement | null>,
+  ref: RefObject<SVGGElement | null>,
   options: Options<T>,
 ) {
   const range = scale.range() as [number, number];

src/hooks/useTimeTicks.ts

@@ -1,5 +1,5 @@
 import type { ScaleTime } from 'd3-scale';
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import { useState } from 'react';
 
 import type { Tick } from './useTicks.js';
@@ -34,7 +34,7 @@ interface Options {
 export function useTimeTicks(
   scale: ScaleTime<number, number>,
   direction: Directions,
-  ref: MutableRefObject<SVGGElement | null>,
+  ref: RefObject<SVGGElement | null>,
   options: Options,
 ): UseTimeTicksResult {
   const { tickFormat = scale.tickFormat() } = options;

src/hooks/use_resize_observer.ts

@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from 'react';
 
 export function useResizeObserver() {
   const [size, setSize] = useState<DOMRect>();
-  const observerRef = useRef<ResizeObserver | null>(null);
+  const observerRef = useRef<ResizeObserver>(null);
 
   const refCallback = useCallback((node: HTMLElement | null) => {
     if (observerRef.current) {

src/utils.ts

@@ -1,8 +1,8 @@
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 
 export function textDimensions(
   word: string,
-  ref: MutableRefObject<SVGGElement | null>,
+  ref: RefObject<SVGGElement | null>,
 ) {
   const textContent = document.createTextNode(word);
   const textElement = document.createElementNS(