chore(docs): migrate documentation site to React 19 (DS-4553) (#226)

Author: KamilEmeleev

package.json

@@ -58,8 +58,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.13.13",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/coverage-v8": "^3.2.4",
@@ -87,8 +87,8 @@
     "postcss-lightningcss": "^1.0.2",
     "postcss-mixins": "^11.0.3",
     "prettier": "^3.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-hook-form": "^7.68.0",
     "remark-gfm": "^4.0.1",
     "rimraf": "^6.0.1",
@@ -164,5 +164,13 @@
     "opera > 91",
     "edge > 105"
   ],
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "overrides": {
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
+      "@types/react": "^19.0.0"
+    }
+  }
 }

packages/components/src/components/Calendar/components/CalendarGrid/CalendarGrid.tsx

@@ -60,13 +60,13 @@ export function CalendarGrid({ state, ...props }: CalendarGridProps) {
 
   // Unique nodeRef per key to avoid findDOMNode and animate enter/exit correctly
   const nodeRefs = useRef(
-    new Map<string, RefObject<HTMLTableSectionElement>>()
+    new Map<string, RefObject<HTMLTableSectionElement | null>>()
   );
 
   const k = currentKey;
 
   if (!nodeRefs.current.has(k)) {
-    nodeRefs.current.set(k, createRef<HTMLTableSectionElement>());
+    nodeRefs.current.set(k, createRef<HTMLTableSectionElement | null>());
   }
 
   const tbodyRef = nodeRefs.current.get(k)!;

packages/components/src/components/FormField/FormFieldControlGroup/FormFieldControlGroup.tsx

@@ -35,7 +35,7 @@ export const FormFieldControlGroup = forwardRef<
   const { focusProps, isFocused } = useFocusRing({ within: true });
 
   const focusManagedChildren = Children.map(children, (child: ReactNode) => {
-    if (!isValidElement(child)) return child;
+    if (!isValidElement<Record<string, unknown>>(child)) return child;
 
     const merged = mergeProps(focusProps, child.props);
 

packages/components/src/components/Tabs/Tabs.tsx

@@ -70,9 +70,9 @@ export function TabsRender<T extends object>(
   }
 
   /** To calculate the size of the prev/next buttons. */
-  const scrollButtonRef = useRef<HTMLButtonElement>(null);
-  const tabListRef = useRef<HTMLDivElement>(null);
-  const scrollBoxRef = useRef<HTMLDivElement>(null);
+  const scrollButtonRef = useRef<HTMLButtonElement | null>(null);
+  const tabListRef = useRef<HTMLDivElement | null>(null);
+  const scrollBoxRef = useRef<HTMLDivElement | null>(null);
   const { tabListProps } = useTabList(props, state, tabListRef);
   const itemsRefs = useRefs<HTMLElement>(state.collection.size);
 

packages/components/src/components/Tabs/utils.ts

@@ -30,9 +30,9 @@ export type TabsMeta = {
 };
 
 export const getTabsMeta = (
-  tabListRef: RefObject<HTMLElement>,
-  scrollBoxRef: RefObject<HTMLElement>,
-  activeTabRef: RefObject<HTMLElement>
+  tabListRef: RefObject<HTMLElement | null>,
+  scrollBoxRef: RefObject<HTMLElement | null>,
+  activeTabRef: RefObject<HTMLElement | null>
 ): TabsMeta => {
   const scrollBoxNode = scrollBoxRef.current;
   const tabsListNode = tabListRef.current;

packages/core/src/hooks/useDOMRef/useDOMRef.ts

@@ -6,7 +6,7 @@ import { useImperativeHandle, useRef } from 'react';
 export function useDOMRef<T extends HTMLElement = HTMLElement>(
   ref?: RefObject<T | null> | Ref<T | null>
 ) {
-  const domRef = useRef<T>(null);
+  const domRef = useRef<T>(null!);
 
   useImperativeHandle(ref, () => domRef.current);
 

packages/core/src/hooks/useEventListener/useEventListener.ts

@@ -50,7 +50,7 @@ export function useEventListener<
 }: UseEventListener<
   K,
   (event: HTMLElementEventMap[K]) => void,
-  RefObject<T>
+  RefObject<T | null>
 >): void;
 
 export function useEventListener<K extends keyof DocumentEventMap>({
@@ -100,7 +100,7 @@ export function useEventListener<
       | DocumentEventMap[KD]
       | Event
   ) => void,
-  RefObject<T> | undefined
+  RefObject<T | null> | undefined
 >): void {
   const savedListener = useMutableRef<typeof handler>(handler);
 

packages/core/src/hooks/useInfiniteScroll/useInfiniteScroll.tsx

@@ -30,7 +30,7 @@ export function useInfiniteScroll<T extends HTMLElement = any>({
 }: UseInfiniteScrollOptions) {
   const loadMoreRef = useRef<T>(null);
   const isFetchingRef = useRef(false);
-  const savedFetchData = useRef<typeof fetchData>();
+  const savedFetchData = useRef<typeof fetchData>(undefined);
 
   useEffect(() => {
     savedFetchData.current = fetchData;

packages/core/src/hooks/useKeyedRefs/useKeyedRefs.ts

@@ -1,18 +1,19 @@
 'use client';
 
-import { createRef, type RefObject, type Key, useRef } from 'react';
+import { createRef, useCallback, useRef } from 'react';
+import type { Key, RefObject } from 'react';
 
-export function useKeyedRefs<T>() {
-  const mapRef = useRef(new Map<Key, RefObject<T>>());
+export function useKeyedRefs<T extends HTMLElement = HTMLElement>() {
+  const mapRef = useRef<Map<Key, RefObject<T | null>>>(new Map());
 
-  return (key: Key): RefObject<T> => {
+  return useCallback((key: Key): RefObject<T | null> => {
     let ref = mapRef.current.get(key);
 
     if (!ref) {
-      ref = createRef<T>();
+      ref = createRef<T | null>();
       mapRef.current.set(key, ref);
     }
 
     return ref;
-  };
+  }, []);
 }

packages/core/src/hooks/useResizeObserverRefs/useResizeObserverRefs.ts

@@ -9,7 +9,7 @@ export const useResizeObserverRefs = <
   Element extends HTMLElement | SVGGraphicsElement,
   ReturnType,
 >(
-  refs: Array<RefObject<Element>>,
+  refs: Array<RefObject<Element | null>>,
   mapper: (el: Element | null) => ReturnType
 ): ReturnType[] => {
   const calculateDimensionsRef = useMutableRef(() =>