refactor: prepare types for React 19 (#10746)

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -92,7 +92,7 @@ function useCollapseAnimation({
   collapsed,
   animation,
 }: {
-  collapsibleRef: RefObject<HTMLElement>;
+  collapsibleRef: RefObject<HTMLElement | null>;
   collapsed: boolean;
   animation?: CollapsibleAnimationConfig;
 }) {
@@ -263,7 +263,7 @@ type CollapsibleProps = CollapsibleBaseProps & {
  * component will be invisible (zero height) when collapsed. Doesn't provide
  * interactivity by itself: collapse state is toggled through props.
  */
-export function Collapsible({lazy, ...props}: CollapsibleProps): JSX.Element {
+export function Collapsible({lazy, ...props}: CollapsibleProps): ReactNode {
   const Comp = lazy ? CollapsibleLazy : CollapsibleBase;
   return <Comp {...props} />;
 }

packages/docusaurus-theme-common/src/components/Details/index.tsx

@@ -10,6 +10,7 @@ import React, {
   useState,
   type ComponentProps,
   type ReactElement,
+  type ReactNode,
 } from 'react';
 import clsx from 'clsx';
 import useBrokenLinks from '@docusaurus/useBrokenLinks';
@@ -47,7 +48,7 @@ export function Details({
   summary,
   children,
   ...props
-}: DetailsProps): JSX.Element {
+}: DetailsProps): ReactNode {
   useBrokenLinks().collectAnchor(props.id);
 
   const isBrowser = useIsBrowser();

packages/docusaurus-theme-common/src/components/ThemedComponent/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {useColorMode} from '../../contexts/colorMode';
@@ -44,7 +44,7 @@ type Props = {
 export default function ThemedComponent({
   className,
   children,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const isBrowser = useIsBrowser();
   const {colorMode} = useColorMode();
 

packages/docusaurus-theme-common/src/contexts/announcementBar.tsx

@@ -103,7 +103,7 @@ export function AnnouncementBarProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

packages/docusaurus-theme-common/src/contexts/colorMode.tsx

@@ -181,7 +181,7 @@ export function ColorModeProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

packages/docusaurus-theme-common/src/contexts/navbarMobileSidebar.tsx

@@ -85,7 +85,7 @@ export function NavbarMobileSidebarProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

packages/docusaurus-theme-common/src/contexts/navbarSecondaryMenu/content.tsx

@@ -43,7 +43,7 @@ export function NavbarSecondaryMenuContentProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useState({component: null, props: null});
   return (
     // @ts-expect-error: this context is hard to type
@@ -76,7 +76,7 @@ export function NavbarSecondaryMenuFiller<P extends object>({
 }: {
   component: NavbarSecondaryMenuComponent<P>;
   props: P;
-}): JSX.Element | null {
+}): ReactNode {
   const context = useContext(Context);
   if (!context) {
     throw new ReactContextError('NavbarSecondaryMenuContentProvider');

packages/docusaurus-theme-common/src/contexts/navbarSecondaryMenu/display.tsx

@@ -62,12 +62,12 @@ export function NavbarSecondaryMenuDisplayProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }
 
-function renderElement(content: Content): JSX.Element | undefined {
+function renderElement(content: Content): ReactNode {
   if (content.component) {
     const Comp = content.component;
     return <Comp {...content.props} />;
@@ -85,7 +85,7 @@ export function useNavbarSecondaryMenu(): {
    */
   hide: () => void;
   /** The content returned from the current secondary menu filler. */
-  content: JSX.Element | undefined;
+  content: ReactNode;
 } {
   const value = useContext(Context);
   if (!value) {

packages/docusaurus-theme-common/src/translations/contentVisibilityTranslations.tsx

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate from '@docusaurus/Translate';
 import Head from '@docusaurus/Head';
 
-export function UnlistedBannerTitle(): JSX.Element {
+export function UnlistedBannerTitle(): ReactNode {
   return (
     <Translate
       id="theme.contentVisibility.unlistedBanner.title"
@@ -19,7 +19,7 @@ export function UnlistedBannerTitle(): JSX.Element {
   );
 }
 
-export function UnlistedBannerMessage(): JSX.Element {
+export function UnlistedBannerMessage(): ReactNode {
   return (
     <Translate
       id="theme.contentVisibility.unlistedBanner.message"
@@ -32,7 +32,7 @@ export function UnlistedBannerMessage(): JSX.Element {
 
 // TODO Docusaurus v4 breaking change (since it's v3 public theme-common API :/)
 //  Move this to theme/ContentVisibility/Unlisted
-export function UnlistedMetadata(): JSX.Element {
+export function UnlistedMetadata(): ReactNode {
   return (
     <Head>
       <meta name="robots" content="noindex, nofollow" />
@@ -40,7 +40,7 @@ export function UnlistedMetadata(): JSX.Element {
   );
 }
 
-export function DraftBannerTitle(): JSX.Element {
+export function DraftBannerTitle(): ReactNode {
   return (
     <Translate
       id="theme.contentVisibility.draftBanner.title"
@@ -50,7 +50,7 @@ export function DraftBannerTitle(): JSX.Element {
   );
 }
 
-export function DraftBannerMessage(): JSX.Element {
+export function DraftBannerMessage(): ReactNode {
   return (
     <Translate
       id="theme.contentVisibility.draftBanner.message"

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {type ReactNode, type ReactElement} from 'react';
 
 // Workaround because it's difficult in MDX v1 to provide a MDX title as props
 // See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
@@ -16,7 +16,7 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
   const items = React.Children.toArray(children);
   const mdxAdmonitionTitleWrapper = items.find(
     (item) => React.isValidElement(item) && item.type === 'mdxAdmonitionTitle',
-  ) as JSX.Element | undefined;
+  ) as ReactElement<{children: ReactNode}> | undefined;
 
   const rest = items.filter((item) => item !== mdxAdmonitionTitleWrapper);
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps} from 'react';
+import React, {type ComponentProps, type ReactNode} from 'react';
 import Translate from '@docusaurus/Translate';
 import {getErrorCausalChain} from '@docusaurus/utils-common';
 import type {Props as ErrorProps} from '@theme/Error';
@@ -13,7 +13,7 @@ import styles from './errorBoundaryUtils.module.css';
 
 export function ErrorBoundaryTryAgainButton(
   props: ComponentProps<'button'>,
-): JSX.Element {
+): ReactNode {
   return (
     <button type="button" {...props}>
       <Translate
@@ -29,7 +29,7 @@ export function ErrorBoundaryTryAgainButton(
 export function ErrorBoundaryErrorMessageFallback({
   error,
   tryAgain,
-}: ErrorProps): JSX.Element {
+}: ErrorProps): ReactNode {
   return (
     <div className={styles.errorBoundaryFallback}>
       <p>{error.message}</p>
@@ -38,7 +38,7 @@ export function ErrorBoundaryErrorMessageFallback({
   );
 }
 
-export function ErrorBoundaryError({error}: {error: Error}): JSX.Element {
+export function ErrorBoundaryError({error}: {error: Error}): ReactNode {
   const causalChain = getErrorCausalChain(error);
   const fullMessage = causalChain.map((e) => e.message).join('\n\nCause:\n');
   return <p className={styles.errorBoundaryError}>{fullMessage}</p>;

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

@@ -30,7 +30,7 @@ export function PageMetadata({
   keywords,
   image,
   children,
-}: PageMetadataProps): JSX.Element {
+}: PageMetadataProps): ReactNode {
   const pageTitle = useTitleFormatter(title);
   const {withBaseUrl} = useBaseUrlUtils();
   const pageImage = image ? withBaseUrl(image, {absolute: true}) : undefined;
@@ -75,7 +75,7 @@ export function HtmlClassNameProvider({
 }: {
   className: string;
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const classNameContext = React.useContext(HtmlClassNameContext);
   const className = clsx(classNameContext, classNameProp);
   return (
@@ -103,7 +103,7 @@ export function PluginHtmlClassNameProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const routeContext = useRouteContext();
   const nameClass = pluginNameToClassName(routeContext.plugin.name);
   const idClass = `plugin-id-${routeContext.plugin.id}`;

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

@@ -32,7 +32,7 @@ export function splitNavbarItems<T extends {position?: 'left' | 'right'}>(
  * Composes multiple navbar state providers that are mutually dependent and
  * hence can't be re-ordered.
  */
-export function NavbarProvider({children}: {children: ReactNode}): JSX.Element {
+export function NavbarProvider({children}: {children: ReactNode}): ReactNode {
   return (
     <NavbarSecondaryMenuContentProvider>
       <NavbarMobileSidebarProvider>

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

@@ -20,7 +20,7 @@ import {useEvent, ReactContextError} from './reactUtils';
 
 type ScrollController = {
   /** A boolean ref tracking whether scroll events are enabled. */
-  scrollEventsEnabledRef: React.MutableRefObject<boolean>;
+  scrollEventsEnabledRef: React.RefObject<boolean>;
   /** Enable scroll events in `useScrollPosition`. */
   enableScrollEvents: () => void;
   /** Disable scroll events in `useScrollPosition`. */
@@ -52,7 +52,7 @@ export function ScrollControllerProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useScrollControllerContextValue();
   return (
     <ScrollMonitorContext.Provider value={value}>

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

@@ -5,7 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useCallback, useRef, type ComponentProps} from 'react';
+import React, {
+  useCallback,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
 import {useHistory} from '@docusaurus/router';
 import {translate} from '@docusaurus/Translate';
 import {useLocationChange} from './useLocationChange';
@@ -85,7 +90,7 @@ const DefaultSkipToContentLabel = translate({
 
 type SkipToContentLinkProps = Omit<ComponentProps<'a'>, 'href' | 'onClick'>;
 
-export function SkipToContentLink(props: SkipToContentLinkProps): JSX.Element {
+export function SkipToContentLink(props: SkipToContentLinkProps): ReactNode {
   const linkLabel = props.children ?? DefaultSkipToContentLabel;
   const {containerRef, onClick} = useSkipToContent();
   return (