chore(monorepo): upgrade React monorepo types to v19

package.json

@@ -85,7 +85,7 @@
     "@types/lodash": "^4.14.197",
     "@types/node": "^18.16.19",
     "@types/prompts": "^2.4.4",
-    "@types/react": "^18.2.15",
+    "@types/react": "^19.2.10",
     "@types/react-test-renderer": "^18.0.0",
     "@types/semver": "^7.5.0",
     "@types/shelljs": "^0.8.12",

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -1745,11 +1745,11 @@ declare module '@theme/Icon/LightMode' {
 }
 
 declare module '@theme/Icon/SystemColorMode' {
-  import type {ComponentProps} from 'react';
+  import type {ComponentProps, ReactNode} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  export default function IconSystemColorMode(props: Props): JSX.Element;
+  export default function IconSystemColorMode(props: Props): ReactNode;
 }
 
 declare module '@theme/Icon/Menu' {

packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx

@@ -17,7 +17,8 @@ import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
 function inertProps(inert: boolean) {
   const isBeforeReact19 = parseInt(version!.split('.')[0]!, 10) < 19;
   if (isBeforeReact19) {
-    return {inert: inert ? '' : undefined};
+    // TODO Docusaurus v4: remove temporary inert workaround
+    return {inert: inert ? '' : undefined} as unknown as {inert: boolean};
   }
   return {inert};
 }

packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts

@@ -11,7 +11,7 @@ import {useMutationObserver} from './useMutationObserver';
 // Callback fires when the "hidden" attribute of a tabpanel changes
 // See https://github.com/facebook/docusaurus/pull/7485
 function useTabBecameVisibleCallback(
-  codeBlockRef: RefObject<HTMLPreElement>,
+  codeBlockRef: RefObject<HTMLPreElement | null>,
   callback: () => void,
 ) {
   const [hiddenTabElement, setHiddenTabElement] = useState<
@@ -53,7 +53,7 @@ function useTabBecameVisibleCallback(
 }
 
 export type WordWrap = {
-  readonly codeBlockRef: RefObject<HTMLPreElement>;
+  readonly codeBlockRef: RefObject<HTMLPreElement | null>;
   readonly isEnabled: boolean;
   readonly isCodeScrollable: boolean;
   readonly toggle: () => void;

packages/docusaurus-theme-common/src/utils/reactUtils.tsx

@@ -44,7 +44,7 @@ export function useEvent<T extends (...args: never[]) => unknown>(
  * Gets `value` from the last render.
  */
 export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useIsomorphicLayoutEffect(() => {
     ref.current = value;

packages/docusaurus-theme-common/src/utils/skipToContentUtils.tsx

@@ -52,7 +52,7 @@ function useSkipToContent(): {
    * so that keyboard navigators can instantly interact with the link and jump
    * to content.
    */
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
   /**
    * Callback fired when the skip to content link has been clicked.
    * It will programmatically focus the main content.

packages/docusaurus/src/client/exports/Link.tsx

@@ -100,7 +100,7 @@ function Link(
 
   const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;
 
-  const ioRef = useRef<IntersectionObserver>();
+  const ioRef = useRef<IntersectionObserver>(undefined);
 
   const handleRef = (el: HTMLAnchorElement | null) => {
     innerRef.current = el;

website/src/components/APITable/index.tsx

@@ -26,7 +26,9 @@ interface Props {
 function getRowName(node: ReactElement): string {
   let curNode: ReactNode = node;
   while (isValidElement(curNode)) {
-    [curNode] = React.Children.toArray(curNode.props.children);
+    [curNode] = React.Children.toArray(
+      (curNode.props as {children: ReactNode}).children,
+    );
   }
   if (typeof curNode !== 'string') {
     throw new Error(
@@ -99,6 +101,7 @@ export default function APITable({children, name}: Props): ReactNode {
     highlightedRow.current?.focus();
   }, [highlightedRow]);
   const rows = React.Children.map(
+    // @ts-expect-error: TODO fix typing
     tbody.props.children,
     (row: ReactElement<ComponentProps<'tr'>>) => (
       <APITableRowComp name={name} ref={highlightedRow}>

website/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This is a bad workaround to make our site typecheck under React 19
+// We run our site with "skipLibCheck=false", unfortunately some libraries
+// are still using the global JSX namespace, that has been removed in v19
+// See https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript
+// See https://github.com/mdx-js/mdx/issues/2487
+import type {JSX as Jsx} from 'react/jsx-runtime';
+
+declare global {
+  namespace JSX {
+    type ElementClass = Jsx.ElementClass;
+    type Element = Jsx.Element;
+    type ElementType = Jsx.ElementType;
+    type IntrinsicElements = Jsx.IntrinsicElements;
+  }
+}

yarn.lock

@@ -4562,11 +4562,6 @@
     "@types/node" "*"
     kleur "^3.0.3"
 
-"@types/prop-types@*":
-  version "15.7.13"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
-  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
-
 "@types/qs@*":
   version "6.9.16"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.16.tgz#52bba125a07c0482d26747d5d4947a64daf8f794"
@@ -4617,13 +4612,12 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.15":
-  version "18.3.12"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"
-  integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
+"@types/react@*", "@types/react@^19.2.10":
+  version "19.2.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.10.tgz#f3ea799e6b4cebad6dfd231c238fc9de7652e2d2"
+  integrity sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==
   dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
+    csstype "^3.2.2"
 
 "@types/resolve@1.20.2":
   version "1.20.2"
@@ -7267,10 +7261,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
-  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+csstype@^3.2.2:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
 cytoscape-cose-bilkent@^4.1.0:
   version "4.1.0"