From f9825af43e1bbce6cf9761a21d477e8b13bd8cb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 6 Dec 2024 18:03:04 +0100 Subject: [PATCH] refactor: prepare types for React 19 (#10746) --- .../src/components/HomepageFeatures/index.tsx | 5 +- .../classic-typescript/src/pages/index.tsx | 3 +- packages/docusaurus-mdx-loader/src/index.ts | 4 +- .../src/index.d.ts | 40 +- .../src/client/contexts.tsx | 2 +- .../src/plugin-content-blog.d.ts | 32 +- .../src/client/doc.tsx | 2 +- .../client/docSidebarItemsExpandedState.tsx | 2 +- .../src/client/docsPreferredVersion.tsx | 4 +- .../src/client/docsSidebar.tsx | 2 +- .../src/client/docsUtils.tsx | 4 +- .../src/client/docsVersion.tsx | 2 +- .../src/plugin-content-docs.d.ts | 27 +- .../src/plugin-content-pages.d.ts | 3 +- .../src/plugin-debug.d.ts | 31 +- .../src/theme/DebugConfig/index.tsx | 4 +- .../src/theme/DebugContent/index.tsx | 4 +- .../src/theme/DebugGlobalData/index.tsx | 4 +- .../src/theme/DebugJsonView/index.tsx | 7 +- .../src/theme/DebugLayout/index.tsx | 2 +- .../src/theme/DebugRegistry/index.tsx | 4 +- .../src/theme/DebugRoutes/index.tsx | 4 +- .../src/theme/DebugSiteMetadata/index.tsx | 4 +- .../src/deps.d.ts | 9 +- .../src/plugin-ideal-image.d.ts | 4 +- .../src/theme/IdealImage/index.tsx | 4 +- .../docusaurus-plugin-pwa/src/plugin-pwa.d.ts | 4 +- .../src/theme/PwaReloadPopup/index.tsx | 4 +- .../src/theme-classic.d.ts | 572 +++++++++++------- .../src/theme/Admonition/Icon/Danger.tsx | 4 +- .../src/theme/Admonition/Icon/Info.tsx | 4 +- .../src/theme/Admonition/Icon/Note.tsx | 4 +- .../src/theme/Admonition/Icon/Tip.tsx | 4 +- .../src/theme/Admonition/Icon/Warning.tsx | 4 +- .../src/theme/Admonition/Layout/index.tsx | 2 +- .../src/theme/Admonition/Type/Caution.tsx | 4 +- .../src/theme/Admonition/Type/Danger.tsx | 4 +- .../src/theme/Admonition/Type/Info.tsx | 4 +- .../src/theme/Admonition/Type/Note.tsx | 4 +- .../src/theme/Admonition/Type/Tip.tsx | 4 +- .../src/theme/Admonition/Type/Warning.tsx | 4 +- .../src/theme/Admonition/index.tsx | 4 +- .../AnnouncementBar/CloseButton/index.tsx | 6 +- .../theme/AnnouncementBar/Content/index.tsx | 6 +- .../src/theme/AnnouncementBar/index.tsx | 4 +- .../src/theme/BackToTopButton/index.tsx | 4 +- .../Blog/Components/Author/Socials/index.tsx | 4 +- .../theme/Blog/Components/Author/index.tsx | 6 +- .../Blog/Pages/BlogAuthorsPostsPage/index.tsx | 8 +- .../src/theme/BlogArchivePage/index.tsx | 4 +- .../src/theme/BlogLayout/index.tsx | 4 +- .../BlogListPage/StructuredData/index.tsx | 4 +- .../src/theme/BlogListPage/index.tsx | 8 +- .../src/theme/BlogListPaginator/index.tsx | 4 +- .../theme/BlogPostItem/Container/index.tsx | 4 +- .../src/theme/BlogPostItem/Content/index.tsx | 4 +- .../Footer/ReadMoreLink/index.tsx | 4 +- .../src/theme/BlogPostItem/Footer/index.tsx | 4 +- .../BlogPostItem/Header/Authors/index.tsx | 4 +- .../theme/BlogPostItem/Header/Info/index.tsx | 6 +- .../theme/BlogPostItem/Header/Title/index.tsx | 6 +- .../src/theme/BlogPostItem/Header/index.tsx | 4 +- .../src/theme/BlogPostItem/index.tsx | 7 +- .../src/theme/BlogPostItems/index.tsx | 4 +- .../src/theme/BlogPostPage/Metadata/index.tsx | 4 +- .../BlogPostPage/StructuredData/index.tsx | 4 +- .../src/theme/BlogPostPage/index.tsx | 4 +- .../src/theme/BlogPostPaginator/index.tsx | 4 +- .../src/theme/BlogSidebar/Mobile/index.tsx | 6 +- .../src/theme/BlogSidebar/index.tsx | 4 +- .../src/theme/BlogTagsListPage/index.tsx | 4 +- .../src/theme/BlogTagsPostsPage/index.tsx | 8 +- .../src/theme/CodeBlock/Container/index.tsx | 4 +- .../src/theme/CodeBlock/Content/Element.tsx | 7 +- .../src/theme/CodeBlock/Content/String.tsx | 4 +- .../src/theme/CodeBlock/CopyButton/index.tsx | 10 +- .../src/theme/CodeBlock/Line/index.tsx | 4 +- .../theme/CodeBlock/WordWrapButton/index.tsx | 4 +- .../src/theme/CodeBlock/index.tsx | 2 +- .../src/theme/CodeInline/index.tsx | 4 +- .../src/theme/ColorModeToggle/index.tsx | 4 +- .../theme/ContentVisibility/Draft/index.tsx | 4 +- .../ContentVisibility/Unlisted/index.tsx | 4 +- .../src/theme/ContentVisibility/index.tsx | 6 +- .../src/theme/Details/index.tsx | 4 +- .../theme/DocBreadcrumbs/Items/Home/index.tsx | 4 +- .../src/theme/DocBreadcrumbs/index.tsx | 6 +- .../src/theme/DocCard/index.tsx | 14 +- .../src/theme/DocCardList/index.tsx | 4 +- .../DocCategoryGeneratedIndexPage/index.tsx | 10 +- .../src/theme/DocItem/Content/index.tsx | 4 +- .../src/theme/DocItem/Footer/index.tsx | 4 +- .../src/theme/DocItem/Layout/index.tsx | 4 +- .../src/theme/DocItem/Metadata/index.tsx | 4 +- .../src/theme/DocItem/Paginator/index.tsx | 4 +- .../src/theme/DocItem/TOC/Desktop/index.tsx | 4 +- .../src/theme/DocItem/TOC/Mobile/index.tsx | 4 +- .../src/theme/DocItem/index.tsx | 4 +- .../src/theme/DocPaginator/index.tsx | 4 +- .../src/theme/DocRoot/Layout/Main/index.tsx | 4 +- .../Layout/Sidebar/ExpandButton/index.tsx | 4 +- .../theme/DocRoot/Layout/Sidebar/index.tsx | 2 +- .../src/theme/DocRoot/Layout/index.tsx | 4 +- .../src/theme/DocRoot/index.tsx | 4 +- .../Desktop/CollapseButton/index.tsx | 4 +- .../DocSidebar/Desktop/Content/index.tsx | 4 +- .../src/theme/DocSidebar/index.tsx | 4 +- .../theme/DocSidebarItem/Category/index.tsx | 9 +- .../src/theme/DocSidebarItem/Html/index.tsx | 4 +- .../src/theme/DocSidebarItem/Link/index.tsx | 4 +- .../src/theme/DocSidebarItem/index.tsx | 7 +- .../src/theme/DocSidebarItems/index.tsx | 4 +- .../src/theme/DocTagDocListPage/index.tsx | 10 +- .../src/theme/DocTagsListPage/index.tsx | 10 +- .../src/theme/DocVersionBadge/index.tsx | 6 +- .../src/theme/DocVersionBanner/index.tsx | 8 +- .../src/theme/DocVersionRoot/index.tsx | 8 +- .../src/theme/DocsRoot/index.tsx | 4 +- .../src/theme/EditMetaRow/index.tsx | 4 +- .../src/theme/EditThisPage/index.tsx | 4 +- .../src/theme/ErrorPageContent.tsx | 7 +- .../src/theme/Footer/Copyright/index.tsx | 4 +- .../src/theme/Footer/Layout/index.tsx | 4 +- .../src/theme/Footer/LinkItem/index.tsx | 4 +- .../theme/Footer/Links/MultiColumn/index.tsx | 4 +- .../src/theme/Footer/Links/Simple/index.tsx | 4 +- .../src/theme/Footer/Links/index.tsx | 4 +- .../src/theme/Footer/Logo/index.tsx | 4 +- .../src/theme/Footer/index.tsx | 4 +- .../src/theme/Heading/index.tsx | 4 +- .../src/theme/Icon/Arrow/index.tsx | 4 +- .../src/theme/Icon/Close/index.tsx | 4 +- .../src/theme/Icon/Copy/index.tsx | 4 +- .../src/theme/Icon/DarkMode/index.tsx | 4 +- .../src/theme/Icon/Edit/index.tsx | 7 +- .../src/theme/Icon/ExternalLink/index.tsx | 4 +- .../src/theme/Icon/Home/index.tsx | 4 +- .../src/theme/Icon/Language/index.tsx | 4 +- .../src/theme/Icon/LightMode/index.tsx | 4 +- .../src/theme/Icon/Menu/index.tsx | 4 +- .../src/theme/Icon/Socials/Default/index.tsx | 4 +- .../src/theme/Icon/Socials/GitHub/index.tsx | 4 +- .../src/theme/Icon/Socials/LinkedIn/index.tsx | 4 +- .../Icon/Socials/StackOverflow/index.tsx | 4 +- .../src/theme/Icon/Socials/Twitter/index.tsx | 4 +- .../src/theme/Icon/Socials/X/index.tsx | 4 +- .../src/theme/Icon/Success/index.tsx | 4 +- .../src/theme/Icon/WordWrap/index.tsx | 4 +- .../src/theme/LastUpdated/index.tsx | 8 +- .../src/theme/Layout/Provider/index.tsx | 4 +- .../src/theme/Layout/index.tsx | 4 +- .../src/theme/Logo/index.tsx | 4 +- .../src/theme/MDXComponents/A.tsx | 4 +- .../src/theme/MDXComponents/Code.tsx | 4 +- .../src/theme/MDXComponents/Details.tsx | 8 +- .../src/theme/MDXComponents/Heading.tsx | 4 +- .../src/theme/MDXComponents/Img/index.tsx | 4 +- .../src/theme/MDXComponents/Ul/index.tsx | 4 +- .../src/theme/MDXContent/index.tsx | 4 +- .../src/theme/MDXPage/index.tsx | 4 +- .../theme/Navbar/ColorModeToggle/index.tsx | 6 +- .../src/theme/Navbar/Content/index.tsx | 4 +- .../src/theme/Navbar/Layout/index.tsx | 4 +- .../src/theme/Navbar/Logo/index.tsx | 4 +- .../Navbar/MobileSidebar/Header/index.tsx | 4 +- .../Navbar/MobileSidebar/Layout/index.tsx | 4 +- .../MobileSidebar/PrimaryMenu/index.tsx | 4 +- .../MobileSidebar/SecondaryMenu/index.tsx | 4 +- .../Navbar/MobileSidebar/Toggle/index.tsx | 4 +- .../src/theme/Navbar/MobileSidebar/index.tsx | 4 +- .../src/theme/Navbar/Search/index.tsx | 7 +- .../src/theme/Navbar/index.tsx | 4 +- .../theme/NavbarItem/DefaultNavbarItem.tsx | 4 +- .../src/theme/NavbarItem/DocNavbarItem.tsx | 4 +- .../theme/NavbarItem/DocSidebarNavbarItem.tsx | 4 +- .../DocsVersionDropdownNavbarItem.tsx | 4 +- .../NavbarItem/DocsVersionNavbarItem.tsx | 4 +- .../NavbarItem/DropdownNavbarItem/index.tsx | 4 +- .../src/theme/NavbarItem/HtmlNavbarItem.tsx | 4 +- .../LocaleDropdownNavbarItem/index.tsx | 4 +- .../src/theme/NavbarItem/NavbarNavLink.tsx | 4 +- .../src/theme/NavbarItem/SearchNavbarItem.tsx | 4 +- .../src/theme/NavbarItem/index.tsx | 4 +- .../src/theme/NotFound/Content/index.tsx | 4 +- .../src/theme/NotFound/index.tsx | 4 +- .../src/theme/PaginatorNavLink/index.tsx | 4 +- .../src/theme/SearchMetadata/index.tsx | 4 +- .../src/theme/SiteMetadata/index.tsx | 6 +- .../src/theme/SkipToContent/index.tsx | 4 +- .../src/theme/TOC/index.tsx | 4 +- .../TOCCollapsible/CollapseButton/index.tsx | 4 +- .../src/theme/TOCCollapsible/index.tsx | 4 +- .../src/theme/TOCInline/index.tsx | 4 +- .../src/theme/TOCItems/Tree.tsx | 4 +- .../src/theme/TOCItems/index.tsx | 4 +- .../src/theme/TabItem/index.tsx | 4 +- .../src/theme/Tabs/index.tsx | 10 +- .../src/theme/Tag/index.tsx | 4 +- .../src/theme/TagsListByLetter/index.tsx | 4 +- .../src/theme/TagsListInline/index.tsx | 4 +- .../src/theme/ThemedImage/index.tsx | 4 +- .../src/components/Collapsible/index.tsx | 4 +- .../src/components/Details/index.tsx | 3 +- .../src/components/ThemedComponent/index.tsx | 4 +- .../src/contexts/announcementBar.tsx | 2 +- .../src/contexts/colorMode.tsx | 2 +- .../src/contexts/navbarMobileSidebar.tsx | 2 +- .../contexts/navbarSecondaryMenu/content.tsx | 4 +- .../contexts/navbarSecondaryMenu/display.tsx | 6 +- .../contentVisibilityTranslations.tsx | 12 +- .../src/utils/admonitionUtils.tsx | 4 +- .../src/utils/errorBoundaryUtils.tsx | 8 +- .../src/utils/metadataUtils.tsx | 6 +- .../src/utils/navbarUtils.tsx | 2 +- .../src/utils/scrollUtils.tsx | 4 +- .../src/utils/skipToContentUtils.tsx | 9 +- .../src/theme-live-codeblock.d.ts | 3 +- .../src/theme/Playground/index.tsx | 6 +- .../src/theme-mermaid.d.ts | 4 +- .../src/theme/Mermaid/index.tsx | 7 +- .../src/theme-search-algolia.d.ts | 8 +- .../src/theme/SearchBar/index.tsx | 16 +- .../src/theme/SearchPage/index.tsx | 12 +- packages/docusaurus-types/src/swizzle.d.ts | 2 +- packages/docusaurus/src/client/App.tsx | 4 +- .../src/client/BaseUrlIssueBanner/index.tsx | 4 +- .../src/client/BrokenLinksContext.tsx | 2 +- .../src/client/ClientLifecyclesDispatcher.tsx | 4 +- .../src/client/PendingNavigation.tsx | 6 +- .../src/client/SiteMetadataDefaults.tsx | 4 +- .../docusaurus/src/client/browserContext.tsx | 2 +- .../src/client/docusaurusContext.tsx | 2 +- .../src/client/exports/BrowserOnly.tsx | 7 +- .../src/client/exports/ComponentCreator.tsx | 2 +- .../docusaurus/src/client/exports/Head.tsx | 4 +- .../src/client/exports/Interpolate.tsx | 2 +- .../docusaurus/src/client/exports/Link.tsx | 3 +- .../src/client/exports/Translate.tsx | 4 +- .../src/client/hasHydratedDataAttribute.tsx | 3 +- .../docusaurus/src/client/routeContext.tsx | 2 +- .../src/client/theme-fallback/Error/index.tsx | 6 +- .../client/theme-fallback/Layout/index.tsx | 4 +- .../client/theme-fallback/Loading/index.tsx | 4 +- .../client/theme-fallback/NotFound/index.tsx | 4 +- .../src/client/theme-fallback/Root/index.tsx | 4 +- .../theme-fallback/SiteMetadata/index.tsx | 3 +- .../__fixtures__/theme/JsComponent/index.d.ts | 4 +- .../_dogfooding/_pages tests/analytics.tsx | 4 +- .../_dogfooding/_pages tests/crashTest.tsx | 4 +- website/_dogfooding/_pages tests/embeds.tsx | 4 +- .../_pages tests/error-boundary-tests.tsx | 4 +- .../_pages tests/hydration-tests.tsx | 4 +- .../_pages tests/layout-no-children.tsx | 4 +- .../_dogfooding/_pages tests/link-tests.tsx | 4 +- .../react-18/_components/heavyComponent.tsx | 4 +- .../_pages tests/react-18/index.tsx | 4 +- .../_pages tests/z-index-tests.tsx | 4 +- .../ShowcaseCarousel.tsx | 10 +- website/src/components/APITable/index.tsx | 2 +- .../components/BrowserWindow/IframeWindow.tsx | 4 +- .../src/components/BrowserWindow/index.tsx | 2 +- .../src/components/ColorGenerator/index.tsx | 4 +- website/src/components/ConfigTabs.tsx | 4 +- .../ErrorBoundaryTestButton/index.tsx | 2 +- website/src/components/HackerNewsIcon.tsx | 4 +- website/src/components/Highlight.tsx | 2 +- .../NavbarItems/CustomDogfoodNavbarItem.tsx | 4 +- website/src/components/Playground/index.tsx | 6 +- website/src/components/ProductHuntCard.tsx | 4 +- website/src/components/Svg/index.tsx | 2 +- .../src/components/TeamProfileCards/index.tsx | 6 +- website/src/components/Tweet/index.tsx | 2 +- website/src/components/TweetQuote/index.tsx | 2 +- website/src/components/UpgradeGuide/index.tsx | 4 +- website/src/components/Versions.tsx | 24 +- website/src/data/features.tsx | 4 +- website/src/pages/index.tsx | 3 +- website/src/pages/showcase/index.tsx | 3 +- website/src/pages/versions.tsx | 3 +- .../ChangelogItem/Header/Author/index.tsx | 7 +- .../ChangelogItem/Header/Authors/index.tsx | 6 +- .../theme/ChangelogItem/Header/index.tsx | 4 +- .../changelog/theme/ChangelogItem/index.tsx | 4 +- .../theme/ChangelogList/Header/index.tsx | 4 +- .../changelog/theme/ChangelogList/index.tsx | 8 +- .../changelog/theme/ChangelogPage/index.tsx | 4 +- .../theme/ChangelogPaginator/index.tsx | 4 +- .../changelog/theme/Icon/Expand/index.tsx | 4 +- .../src/plugins/changelog/theme/types.d.ts | 4 +- .../featureRequests/FeatureRequestsPage.tsx | 4 +- website/src/theme/Admonition/Types.tsx | 4 +- website/src/theme/CodeBlock/index.tsx | 4 +- website/src/theme/ColorModeToggle.tsx | 4 +- .../DocCategoryGeneratedIndexPage/index.tsx | 4 +- website/src/theme/Layout/index.tsx | 4 +- .../src/theme/ReactLiveScope/components.tsx | 4 +- 296 files changed, 1105 insertions(+), 915 deletions(-) diff --git a/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx b/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx index 50a9e6f4c7ad..c2551fb9b804 100644 --- a/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx +++ b/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx @@ -1,3 +1,4 @@ +import type {ReactNode} from 'react'; import clsx from 'clsx'; import Heading from '@theme/Heading'; import styles from './styles.module.css'; @@ -5,7 +6,7 @@ import styles from './styles.module.css'; type FeatureItem = { title: string; Svg: React.ComponentType>; - description: JSX.Element; + description: ReactNode; }; const FeatureList: FeatureItem[] = [ @@ -55,7 +56,7 @@ function Feature({title, Svg, description}: FeatureItem) { ); } -export default function HomepageFeatures(): JSX.Element { +export default function HomepageFeatures(): ReactNode { return (
diff --git a/packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx b/packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx index 400a3e19a814..2e006d153b47 100644 --- a/packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx +++ b/packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx @@ -1,3 +1,4 @@ +import type {ReactNode} from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -28,7 +29,7 @@ function HomepageHeader() { ); } -export default function Home(): JSX.Element { +export default function Home(): ReactNode { const {siteConfig} = useDocusaurusContext(); return ( = { * in priority. */ readonly assets: Assets; - (): JSX.Element; + (): ReactNode; }; export type {MDXPlugin} from './loader'; diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts index 8b4a2701676d..176ca2ec52d6 100644 --- a/packages/docusaurus-module-type-aliases/src/index.d.ts +++ b/packages/docusaurus-module-type-aliases/src/index.d.ts @@ -84,10 +84,11 @@ declare module '@theme-original/*'; declare module '@theme-init/*'; declare module '@theme/Error' { + import type {ReactNode} from 'react'; import type {FallbackParams} from '@docusaurus/ErrorBoundary'; export interface Props extends FallbackParams {} - export default function Error(props: Props): JSX.Element; + export default function Error(props: Props): ReactNode; } declare module '@theme/Layout' { @@ -96,17 +97,20 @@ declare module '@theme/Layout' { export interface Props { readonly children?: ReactNode; } - export default function Layout(props: Props): JSX.Element; + export default function Layout(props: Props): ReactNode; } declare module '@theme/Loading' { + import type {ReactNode} from 'react'; import type {LoadingComponentProps} from 'react-loadable'; - export default function Loading(props: LoadingComponentProps): JSX.Element; + export default function Loading(props: LoadingComponentProps): ReactNode; } declare module '@theme/NotFound' { - export default function NotFound(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NotFound(): ReactNode; } declare module '@theme/Root' { @@ -115,11 +119,13 @@ declare module '@theme/Root' { export interface Props { readonly children: ReactNode; } - export default function Root({children}: Props): JSX.Element; + export default function Root({children}: Props): ReactNode; } declare module '@theme/SiteMetadata' { - export default function SiteMetadata(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function SiteMetadata(): ReactNode; } declare module '@docusaurus/constants' { @@ -134,13 +140,13 @@ declare module '@docusaurus/ErrorBoundary' { readonly tryAgain: () => void; }; - export type FallbackFunction = (params: FallbackParams) => JSX.Element; + export type FallbackFunction = (params: FallbackParams) => ReactNode; export interface Props { readonly fallback?: FallbackFunction; readonly children: ReactNode; } - export default function ErrorBoundary(props: Props): JSX.Element; + export default function ErrorBoundary(props: Props): ReactNode; } declare module '@docusaurus/Head' { @@ -149,11 +155,11 @@ declare module '@docusaurus/Head' { export type Props = HelmetProps & {children: ReactNode}; - export default function Head(props: Props): JSX.Element; + export default function Head(props: Props): ReactNode; } declare module '@docusaurus/Link' { - import type {CSSProperties, ComponentProps} from 'react'; + import type {CSSProperties, ComponentProps, ReactNode} from 'react'; import type {NavLinkProps as RRNavLinkProps} from 'react-router-dom'; type NavLinkProps = Partial; @@ -169,7 +175,7 @@ declare module '@docusaurus/Link' { /** Escape hatch in case broken links check doesn't make sense. */ readonly 'data-noBrokenLinkCheck'?: boolean; }; - export default function Link(props: Props): JSX.Element; + export default function Link(props: Props): ReactNode; } declare module '@docusaurus/Interpolate' { @@ -203,7 +209,7 @@ declare module '@docusaurus/Interpolate' { export default function Interpolate( props: InterpolateProps, - ): JSX.Element; + ): ReactNode; } declare module '@docusaurus/Translate' { @@ -241,7 +247,7 @@ declare module '@docusaurus/Translate' { export default function Translate( props: TranslateProps, - ): JSX.Element; + ): ReactNode; } declare module '@docusaurus/router' { @@ -318,11 +324,13 @@ declare module '@docusaurus/ComponentCreator' { } declare module '@docusaurus/BrowserOnly' { + import type {ReactNode} from 'react'; + export interface Props { - readonly children?: () => JSX.Element; - readonly fallback?: JSX.Element; + readonly children?: () => ReactNode; + readonly fallback?: ReactNode; } - export default function BrowserOnly(props: Props): JSX.Element | null; + export default function BrowserOnly(props: Props): ReactNode | null; } declare module '@docusaurus/isInternalUrl' { diff --git a/packages/docusaurus-plugin-content-blog/src/client/contexts.tsx b/packages/docusaurus-plugin-content-blog/src/client/contexts.tsx index 2493deb64302..7c96f288602f 100644 --- a/packages/docusaurus-plugin-content-blog/src/client/contexts.tsx +++ b/packages/docusaurus-plugin-content-blog/src/client/contexts.tsx @@ -74,7 +74,7 @@ export function BlogPostProvider({ children: ReactNode; content: PropBlogPostContent; isBlogPostPage?: boolean; -}): JSX.Element { +}): ReactNode { const contextValue = useContextValue({content, isBlogPostPage}); return {children}; } diff --git a/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts b/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts index 9e8c3850add1..f13f42ec1df2 100644 --- a/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts +++ b/packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts @@ -663,6 +663,7 @@ declare module '@docusaurus/plugin-content-blog' { } declare module '@theme/BlogPostPage' { + import type {ReactNode} from 'react'; import type { BlogPostFrontMatter, BlogSidebar, @@ -683,18 +684,23 @@ declare module '@theme/BlogPostPage' { readonly blogMetadata: BlogMetadata; } - export default function BlogPostPage(props: Props): JSX.Element; + export default function BlogPostPage(props: Props): ReactNode; } declare module '@theme/BlogPostPage/Metadata' { - export default function BlogPostPageMetadata(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function BlogPostPageMetadata(): ReactNode; } declare module '@theme/BlogPostPage/StructuredData' { - export default function BlogPostStructuredData(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function BlogPostStructuredData(): ReactNode; } declare module '@theme/BlogListPage' { + import type {ReactNode} from 'react'; import type {Content} from '@theme/BlogPostPage'; import type { BlogSidebar, @@ -713,10 +719,11 @@ declare module '@theme/BlogListPage' { readonly items: readonly {readonly content: Content}[]; } - export default function BlogListPage(props: Props): JSX.Element; + export default function BlogListPage(props: Props): ReactNode; } declare module '@theme/BlogListPage/StructuredData' { + import type {ReactNode} from 'react'; import type {Content} from '@theme/BlogPostPage'; import type { BlogSidebar, @@ -735,10 +742,11 @@ declare module '@theme/BlogListPage/StructuredData' { readonly items: readonly {readonly content: Content}[]; } - export default function BlogListPageStructuredData(props: Props): JSX.Element; + export default function BlogListPageStructuredData(props: Props): ReactNode; } declare module '@theme/BlogTagsListPage' { + import type {ReactNode} from 'react'; import type {BlogSidebar} from '@docusaurus/plugin-content-blog'; import type {TagsListItem} from '@docusaurus/utils'; @@ -749,10 +757,11 @@ declare module '@theme/BlogTagsListPage' { readonly tags: TagsListItem[]; } - export default function BlogTagsListPage(props: Props): JSX.Element; + export default function BlogTagsListPage(props: Props): ReactNode; } declare module '@theme/Blog/Pages/BlogAuthorsListPage' { + import type {ReactNode} from 'react'; import type { AuthorItemProp, BlogSidebar, @@ -765,10 +774,11 @@ declare module '@theme/Blog/Pages/BlogAuthorsListPage' { readonly authors: AuthorItemProp[]; } - export default function BlogAuthorsListPage(props: Props): JSX.Element; + export default function BlogAuthorsListPage(props: Props): ReactNode; } declare module '@theme/Blog/Pages/BlogAuthorsPostsPage' { + import type {ReactNode} from 'react'; import type {Content} from '@theme/BlogPostPage'; import type { AuthorItemProp, @@ -790,10 +800,11 @@ declare module '@theme/Blog/Pages/BlogAuthorsPostsPage' { readonly items: readonly {readonly content: Content}[]; } - export default function BlogAuthorsPostsPage(props: Props): JSX.Element; + export default function BlogAuthorsPostsPage(props: Props): ReactNode; } declare module '@theme/BlogTagsPostsPage' { + import type {ReactNode} from 'react'; import type {Content} from '@theme/BlogPostPage'; import type { BlogSidebar, @@ -815,10 +826,11 @@ declare module '@theme/BlogTagsPostsPage' { readonly items: readonly {readonly content: Content}[]; } - export default function BlogTagsPostsPage(props: Props): JSX.Element; + export default function BlogTagsPostsPage(props: Props): ReactNode; } declare module '@theme/BlogArchivePage' { + import type {ReactNode} from 'react'; import type {Content} from '@theme/BlogPostPage'; /** We may add extra metadata or prune some metadata from here */ @@ -832,5 +844,5 @@ declare module '@theme/BlogArchivePage' { }; } - export default function BlogArchivePage(props: Props): JSX.Element; + export default function BlogArchivePage(props: Props): ReactNode; } diff --git a/packages/docusaurus-plugin-content-docs/src/client/doc.tsx b/packages/docusaurus-plugin-content-docs/src/client/doc.tsx index 6f4ce492e445..8d2710b63163 100644 --- a/packages/docusaurus-plugin-content-docs/src/client/doc.tsx +++ b/packages/docusaurus-plugin-content-docs/src/client/doc.tsx @@ -50,7 +50,7 @@ export function DocProvider({ }: { children: ReactNode; content: PropDocContent; -}): JSX.Element { +}): ReactNode { const contextValue = useContextValue(content); return {children}; } diff --git a/packages/docusaurus-plugin-content-docs/src/client/docSidebarItemsExpandedState.tsx b/packages/docusaurus-plugin-content-docs/src/client/docSidebarItemsExpandedState.tsx index 3aa0d47594f6..417827700c5c 100644 --- a/packages/docusaurus-plugin-content-docs/src/client/docSidebarItemsExpandedState.tsx +++ b/packages/docusaurus-plugin-content-docs/src/client/docSidebarItemsExpandedState.tsx @@ -36,7 +36,7 @@ export function DocSidebarItemsExpandedStateProvider({ children, }: { children: ReactNode; -}): JSX.Element { +}): ReactNode { const [expandedItem, setExpandedItem] = useState(null); const contextValue = useMemo( () => ({expandedItem, setExpandedItem}), diff --git a/packages/docusaurus-plugin-content-docs/src/client/docsPreferredVersion.tsx b/packages/docusaurus-plugin-content-docs/src/client/docsPreferredVersion.tsx index 91dcd3a19ccd..1c9c8b6b6960 100644 --- a/packages/docusaurus-plugin-content-docs/src/client/docsPreferredVersion.tsx +++ b/packages/docusaurus-plugin-content-docs/src/client/docsPreferredVersion.tsx @@ -163,7 +163,7 @@ function DocsPreferredVersionContextProviderUnsafe({ children, }: { children: ReactNode; -}): JSX.Element { +}): ReactNode { const value = useContextValue(); return {children}; } @@ -176,7 +176,7 @@ export function DocsPreferredVersionContextProvider({ children, }: { children: ReactNode; -}): JSX.Element { +}): ReactNode { return ( {children} diff --git a/packages/docusaurus-plugin-content-docs/src/client/docsSidebar.tsx b/packages/docusaurus-plugin-content-docs/src/client/docsSidebar.tsx index 4679ce4e638e..d6a61682dbb7 100644 --- a/packages/docusaurus-plugin-content-docs/src/client/docsSidebar.tsx +++ b/packages/docusaurus-plugin-content-docs/src/client/docsSidebar.tsx @@ -30,7 +30,7 @@ export function DocsSidebarProvider({ children: ReactNode; name: string | undefined; items: PropSidebar | undefined; -}): JSX.Element { +}): ReactNode { const stableValue: ContextValue | null = useMemo( () => (name && items ? {name, items} : null), [name, items], diff --git a/packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx b/packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx index 61ef935e09df..cb8500eccc00 100644 --- a/packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx +++ b/packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {useMemo} from 'react'; +import {type ReactNode, useMemo} from 'react'; import {matchPath, useLocation} from '@docusaurus/router'; import renderRoutes from '@docusaurus/renderRoutes'; import { @@ -363,7 +363,7 @@ Available doc ids are: */ export function useDocRootMetadata({route}: DocRootProps): null | { /** The element that should be rendered at the current location. */ - docElement: JSX.Element; + docElement: ReactNode; /** * The name of the sidebar associated with the current doc. `sidebarName` and * `sidebarItems` correspond to the value of {@link useDocsSidebar}. diff --git a/packages/docusaurus-plugin-content-docs/src/client/docsVersion.tsx b/packages/docusaurus-plugin-content-docs/src/client/docsVersion.tsx index d89f9827198c..340b92708ebd 100644 --- a/packages/docusaurus-plugin-content-docs/src/client/docsVersion.tsx +++ b/packages/docusaurus-plugin-content-docs/src/client/docsVersion.tsx @@ -20,7 +20,7 @@ export function DocsVersionProvider({ }: { children: ReactNode; version: PropVersionMetadata | null; -}): JSX.Element { +}): ReactNode { return {children}; } diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts index 806cf280ce51..e11340aa5b66 100644 --- a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts +++ b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts @@ -562,10 +562,11 @@ declare module '@docusaurus/plugin-content-docs' { } declare module '@theme/DocItem' { + import type {ReactNode} from 'react'; import type {PropDocContent} from '@docusaurus/plugin-content-docs'; export type DocumentRoute = { - readonly component: () => JSX.Element; + readonly component: () => ReactNode; readonly exact: boolean; readonly path: string; readonly sidebar?: string; @@ -576,10 +577,11 @@ declare module '@theme/DocItem' { readonly content: PropDocContent; } - export default function DocItem(props: Props): JSX.Element; + export default function DocItem(props: Props): ReactNode; } declare module '@theme/DocCategoryGeneratedIndexPage' { + import type {ReactNode} from 'react'; import type {PropCategoryGeneratedIndex} from '@docusaurus/plugin-content-docs'; export interface Props { @@ -588,39 +590,45 @@ declare module '@theme/DocCategoryGeneratedIndexPage' { export default function DocCategoryGeneratedIndexPage( props: Props, - ): JSX.Element; + ): ReactNode; } declare module '@theme/DocTagsListPage' { + import type {ReactNode} from 'react'; import type {PropTagsListPage} from '@docusaurus/plugin-content-docs'; export interface Props extends PropTagsListPage {} - export default function DocTagsListPage(props: Props): JSX.Element; + export default function DocTagsListPage(props: Props): ReactNode; } declare module '@theme/DocTagDocListPage' { + import type {ReactNode} from 'react'; import type {PropTagDocList} from '@docusaurus/plugin-content-docs'; export interface Props { readonly tag: PropTagDocList; } - export default function DocTagDocListPage(props: Props): JSX.Element; + export default function DocTagDocListPage(props: Props): ReactNode; } declare module '@theme/DocBreadcrumbs' { - export default function DocBreadcrumbs(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocBreadcrumbs(): ReactNode; } declare module '@theme/DocsRoot' { + import type {ReactNode} from 'react'; import type {RouteConfigComponentProps} from 'react-router-config'; import type {Required} from 'utility-types'; export interface Props extends Required {} - export default function DocsRoot(props: Props): JSX.Element; + export default function DocsRoot(props: Props): ReactNode; } declare module '@theme/DocVersionRoot' { + import type {ReactNode} from 'react'; import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs'; import type {RouteConfigComponentProps} from 'react-router-config'; import type {Required} from 'utility-types'; @@ -629,14 +637,15 @@ declare module '@theme/DocVersionRoot' { readonly version: PropVersionMetadata; } - export default function DocVersionRoot(props: Props): JSX.Element; + export default function DocVersionRoot(props: Props): ReactNode; } declare module '@theme/DocRoot' { + import type {ReactNode} from 'react'; import type {RouteConfigComponentProps} from 'react-router-config'; import type {Required} from 'utility-types'; export interface Props extends Required {} - export default function DocRoot(props: Props): JSX.Element; + export default function DocRoot(props: Props): ReactNode; } diff --git a/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts b/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts index 1c7b03743786..e66659f8ea4c 100644 --- a/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts +++ b/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts @@ -85,6 +85,7 @@ declare module '@docusaurus/plugin-content-pages' { } declare module '@theme/MDXPage' { + import type {ReactNode} from 'react'; import type {LoadedMDXContent} from '@docusaurus/mdx-loader'; import type { MDXPageMetadata, @@ -100,5 +101,5 @@ declare module '@theme/MDXPage' { >; } - export default function MDXPage(props: Props): JSX.Element; + export default function MDXPage(props: Props): ReactNode; } diff --git a/packages/docusaurus-plugin-debug/src/plugin-debug.d.ts b/packages/docusaurus-plugin-debug/src/plugin-debug.d.ts index f66d093a1ba7..f59d95f85dab 100644 --- a/packages/docusaurus-plugin-debug/src/plugin-debug.d.ts +++ b/packages/docusaurus-plugin-debug/src/plugin-debug.d.ts @@ -14,46 +14,57 @@ declare module '@docusaurus/plugin-debug' { } declare module '@theme/DebugConfig' { - export default function DebugMetadata(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DebugMetadata(): ReactNode; } declare module '@theme/DebugContent' { + import type {ReactNode} from 'react'; import type {AllContent} from '@docusaurus/types'; export interface Props { readonly allContent: AllContent; } - export default function DebugContent(props: Props): JSX.Element; + export default function DebugContent(props: Props): ReactNode; } declare module '@theme/DebugGlobalData' { - export default function DebugGlobalData(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DebugGlobalData(): ReactNode; } declare module '@theme/DebugJsonView' { + import type {ReactNode} from 'react'; + export interface Props { readonly src: unknown; readonly collapseDepth?: number; } - export default function DebugJsonView(props: Props): JSX.Element; + export default function DebugJsonView(props: Props): ReactNode; } declare module '@theme/DebugLayout' { import type {ReactNode} from 'react'; - export default function DebugLayout(props: { - children: ReactNode; - }): JSX.Element; + export default function DebugLayout(props: {children: ReactNode}): ReactNode; } declare module '@theme/DebugRegistry' { - export default function DebugRegistry(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DebugRegistry(): ReactNode; } declare module '@theme/DebugRoutes' { - export default function DebugRoutes(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DebugRoutes(): ReactNode; } declare module '@theme/DebugSiteMetadata' { - export default function DebugSiteMetadata(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DebugSiteMetadata(): ReactNode; } diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.tsx index 6b110b8ab198..1245ec6121c1 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.tsx @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import DebugLayout from '@theme/DebugLayout'; import DebugJsonView from '@theme/DebugJsonView'; -export default function DebugMetadata(): JSX.Element { +export default function DebugMetadata(): ReactNode { const {siteConfig} = useDocusaurusContext(); return ( diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.tsx index 185c453d7cba..9cd6773de642 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugContent/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 DebugLayout from '@theme/DebugLayout'; import DebugJsonView from '@theme/DebugJsonView'; @@ -52,7 +52,7 @@ function PluginContent({ ); } -export default function DebugContent({allContent}: Props): JSX.Element { +export default function DebugContent({allContent}: Props): ReactNode { return (

Plugin content

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.tsx index f66df5b7dd8d..139cc382cef2 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.tsx @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import useGlobalData from '@docusaurus/useGlobalData'; import DebugLayout from '@theme/DebugLayout'; import DebugJsonView from '@theme/DebugJsonView'; -export default function DebugMetadata(): JSX.Element { +export default function DebugMetadata(): ReactNode { const globalData = useGlobalData(); return ( diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx index c89445e702dc..7b5e37d2e77a 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/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 { JsonView, defaultStyles, @@ -32,10 +32,7 @@ const paraisoStyles: JsonViewProps['style'] = { collapsedContent: styles.collapseContentParaiso!, }; -export default function DebugJsonView({ - src, - collapseDepth, -}: Props): JSX.Element { +export default function DebugJsonView({src, collapseDepth}: Props): ReactNode { return ( diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx index 59cd4c7c2145..c7e8272325b7 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import registry from '@generated/registry'; import DebugLayout from '@theme/DebugLayout'; import styles from './styles.module.css'; -export default function DebugRegistry(): JSX.Element { +export default function DebugRegistry(): ReactNode { return (

Registry

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx index 43b922ba91ac..8c771e076be8 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx @@ -5,13 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import routes from '@generated/routes'; import DebugLayout from '@theme/DebugLayout'; import DebugJsonView from '@theme/DebugJsonView'; import styles from './styles.module.css'; -export default function DebugRoutes(): JSX.Element { +export default function DebugRoutes(): ReactNode { return (

Routes

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx index c366475762f8..4f24972834d7 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import DebugLayout from '@theme/DebugLayout'; import styles from './styles.module.css'; -export default function DebugMetadata(): JSX.Element { +export default function DebugMetadata(): ReactNode { const {siteMetadata} = useDocusaurusContext(); return ( diff --git a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts index 654dd1622128..13f80f4841f5 100644 --- a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts @@ -13,7 +13,12 @@ * full state object. */ declare module '@slorber/react-ideal-image' { - import type {ComponentProps, ComponentType, CSSProperties} from 'react'; + import type { + ComponentProps, + ComponentType, + CSSProperties, + ReactNode, + } from 'react'; export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error'; @@ -115,5 +120,5 @@ declare module '@slorber/react-ideal-image' { width: number; } - export default function IdealImage(props: ImageProps): JSX.Element; + export default function IdealImage(props: ImageProps): ReactNode; } diff --git a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts index 561cbfb18ae7..28191e9816d2 100644 --- a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts @@ -52,7 +52,7 @@ declare module '@docusaurus/plugin-ideal-image' { } declare module '@theme/IdealImage' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export type SrcType = { width: number; @@ -72,5 +72,5 @@ declare module '@theme/IdealImage' { export interface Props extends ComponentProps<'img'> { readonly img: {default: string} | {src: SrcImage; preSrc: string} | string; } - export default function IdealImage(props: Props): JSX.Element; + export default function IdealImage(props: Props): ReactNode; } diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx index 63d40cf63c6e..a983927ec4a3 100644 --- a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/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 ReactIdealImage, { type IconKey, type State, @@ -80,7 +80,7 @@ function getMessage(icon: IconKey, state: State) { } } -export default function IdealImage(props: Props): JSX.Element { +export default function IdealImage(props: Props): ReactNode { const {img, ...propsRest} = props; // In dev env just use regular img with original file diff --git a/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts b/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts index 85d6aa088441..b6c0205d1663 100644 --- a/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts +++ b/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts @@ -76,6 +76,8 @@ declare module '@docusaurus/plugin-pwa' { } declare module '@theme/PwaReloadPopup' { + import type {ReactNode} from 'react'; + export interface Props { /** * The popup should call this callback when the `reload` button is clicked. @@ -84,5 +86,5 @@ declare module '@theme/PwaReloadPopup' { */ readonly onReload: () => void; } - export default function PwaReloadPopup(props: Props): JSX.Element; + export default function PwaReloadPopup(props: Props): ReactNode; } diff --git a/packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.tsx b/packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.tsx index 66d63d70e096..54222c66e5f8 100644 --- a/packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.tsx +++ b/packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.tsx @@ -5,14 +5,14 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useState} from 'react'; +import React, {type ReactNode, useState} from 'react'; import clsx from 'clsx'; import Translate, {translate} from '@docusaurus/Translate'; import type {Props} from '@theme/PwaReloadPopup'; import styles from './styles.module.css'; -export default function PwaReloadPopup({onReload}: Props): JSX.Element | false { +export default function PwaReloadPopup({onReload}: Props): ReactNode { const [isVisible, setIsVisible] = useState(true); return ( diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index e0d5f47a8e13..6b5c40d73047 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -50,51 +50,57 @@ declare module '@theme/Admonition' { readonly className?: string; } - export default function Admonition(props: Props): JSX.Element; + export default function Admonition(props: Props): ReactNode; } declare module '@theme/Admonition/Type/Note' { + import type {ReactNode} from 'react'; import type {Props as AdmonitionProps} from '@theme/Admonition'; export interface Props extends AdmonitionProps {} - export default function AdmonitionTypeNote(props: Props): JSX.Element; + export default function AdmonitionTypeNote(props: Props): ReactNode; } declare module '@theme/Admonition/Type/Info' { + import type {ReactNode} from 'react'; import type {Props as AdmonitionProps} from '@theme/Admonition'; export interface Props extends AdmonitionProps {} - export default function AdmonitionTypeInfo(props: Props): JSX.Element; + export default function AdmonitionTypeInfo(props: Props): ReactNode; } declare module '@theme/Admonition/Type/Tip' { + import type {ReactNode} from 'react'; import type {Props as AdmonitionProps} from '@theme/Admonition'; export interface Props extends AdmonitionProps {} - export default function AdmonitionTypeTip(props: Props): JSX.Element; + export default function AdmonitionTypeTip(props: Props): ReactNode; } // TODO remove before v4: Caution replaced by Warning // see https://github.com/facebook/docusaurus/issues/7558 declare module '@theme/Admonition/Type/Caution' { + import type {ReactNode} from 'react'; import type {Props as AdmonitionProps} from '@theme/Admonition'; export interface Props extends AdmonitionProps {} - export default function AdmonitionTypeCaution(props: Props): JSX.Element; + export default function AdmonitionTypeCaution(props: Props): ReactNode; } declare module '@theme/Admonition/Type/Warning' { + import type {ReactNode} from 'react'; import type {Props as AdmonitionProps} from '@theme/Admonition'; export interface Props extends AdmonitionProps {} - export default function AdmonitionTypeWarning(props: Props): JSX.Element; + export default function AdmonitionTypeWarning(props: Props): ReactNode; } declare module '@theme/Admonition/Type/Danger' { + import type {ReactNode} from 'react'; import type {Props as AdmonitionProps} from '@theme/Admonition'; export interface Props extends AdmonitionProps {} - export default function AdmonitionTypeDanger(props: Props): JSX.Element; + export default function AdmonitionTypeDanger(props: Props): ReactNode; } declare module '@theme/Admonition/Types' { @@ -118,74 +124,79 @@ declare module '@theme/Admonition/Layout' { readonly title?: ReactNode; readonly className?: string; } - export default function AdmonitionLayout(props: Props): JSX.Element; + export default function AdmonitionLayout(props: Props): ReactNode; } declare module '@theme/Admonition/Icon/Note' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function AdmonitionIconNote(props: Props): JSX.Element; + export default function AdmonitionIconNote(props: Props): ReactNode; } declare module '@theme/Admonition/Icon/Tip' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function AdmonitionIconTip(props: Props): JSX.Element; + export default function AdmonitionIconTip(props: Props): ReactNode; } declare module '@theme/Admonition/Icon/Warning' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function AdmonitionIconWarning(props: Props): JSX.Element; + export default function AdmonitionIconWarning(props: Props): ReactNode; } declare module '@theme/Admonition/Icon/Danger' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function AdmonitionIconDanger(props: Props): JSX.Element; + export default function AdmonitionIconDanger(props: Props): ReactNode; } declare module '@theme/Admonition/Icon/Info' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function AdmonitionIconInfo(props: Props): JSX.Element; + export default function AdmonitionIconInfo(props: Props): ReactNode; } declare module '@theme/AnnouncementBar' { - export default function AnnouncementBar(): JSX.Element | null; + import type {ReactNode} from 'react'; + + export default function AnnouncementBar(): ReactNode | null; } declare module '@theme/AnnouncementBar/Content' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'div'> {} - export default function AnnouncementBarContent(props: Props): JSX.Element; + export default function AnnouncementBarContent(props: Props): ReactNode; } declare module '@theme/AnnouncementBar/CloseButton' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'button'> {} - export default function AnnouncementBarCloseButton(props: Props): JSX.Element; + export default function AnnouncementBarCloseButton(props: Props): ReactNode; } declare module '@theme/BackToTopButton' { - export default function BackToTopButton(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function BackToTopButton(): ReactNode; } declare module '@theme/Blog/Components/Author' { + import type {ReactNode} from 'react'; import type {Author} from '@docusaurus/plugin-content-blog'; export interface Props { @@ -195,10 +206,11 @@ declare module '@theme/Blog/Components/Author' { readonly count?: number; } - export default function BlogAuthor(props: Props): JSX.Element; + export default function BlogAuthor(props: Props): ReactNode; } declare module '@theme/Blog/Components/Author/Socials' { + import type {ReactNode} from 'react'; import type {Author} from '@docusaurus/plugin-content-blog'; export interface Props { @@ -206,16 +218,17 @@ declare module '@theme/Blog/Components/Author/Socials' { readonly className?: string; } - export default function BlogAuthorSocials(props: Props): JSX.Element; + export default function BlogAuthorSocials(props: Props): ReactNode; } declare module '@theme/BlogListPaginator' { + import type {ReactNode} from 'react'; import type {BlogPaginatedMetadata} from '@docusaurus/plugin-content-blog'; export interface Props { readonly metadata: BlogPaginatedMetadata; } - export default function BlogListPaginator(props: Props): JSX.Element; + export default function BlogListPaginator(props: Props): ReactNode; } declare module '@theme/BlogSidebar/Content' { @@ -232,33 +245,36 @@ declare module '@theme/BlogSidebar/Content' { } declare module '@theme/BlogSidebar/Desktop' { + import type {ReactNode} from 'react'; import type {BlogSidebar} from '@docusaurus/plugin-content-blog'; export interface Props { readonly sidebar: BlogSidebar; } - export default function BlogSidebarDesktop(props: Props): JSX.Element; + export default function BlogSidebarDesktop(props: Props): ReactNode; } declare module '@theme/BlogSidebar/Mobile' { + import type {ReactNode} from 'react'; import type {BlogSidebar} from '@docusaurus/plugin-content-blog'; export interface Props { readonly sidebar: BlogSidebar; } - export default function BlogSidebarMobile(props: Props): JSX.Element; + export default function BlogSidebarMobile(props: Props): ReactNode; } declare module '@theme/BlogSidebar' { + import type {ReactNode} from 'react'; import type {BlogSidebar} from '@docusaurus/plugin-content-blog'; export interface Props { readonly sidebar?: BlogSidebar; } - export default function BlogSidebar(props: Props): JSX.Element; + export default function BlogSidebar(props: Props): ReactNode; } declare module '@theme/BlogPostItem' { @@ -269,7 +285,7 @@ declare module '@theme/BlogPostItem' { className?: string; } - export default function BlogPostItem(props: Props): JSX.Element; + export default function BlogPostItem(props: Props): ReactNode; } declare module '@theme/BlogPostItems' { @@ -281,7 +297,7 @@ declare module '@theme/BlogPostItems' { component?: ComponentType<{children: ReactNode}>; } - export default function BlogPostItem(props: Props): JSX.Element; + export default function BlogPostItem(props: Props): ReactNode; } declare module '@theme/BlogPostItem/Container' { @@ -292,35 +308,43 @@ declare module '@theme/BlogPostItem/Container' { className?: string; } - export default function BlogPostItemContainer(props: Props): JSX.Element; + export default function BlogPostItemContainer(props: Props): ReactNode; } declare module '@theme/BlogPostItem/Header' { - export default function BlogPostItemHeader(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function BlogPostItemHeader(): ReactNode; } declare module '@theme/BlogPostItem/Header/Title' { + import type {ReactNode} from 'react'; + export interface Props { className?: string; } - export default function BlogPostItemHeaderTitle(props: Props): JSX.Element; + export default function BlogPostItemHeaderTitle(props: Props): ReactNode; } declare module '@theme/BlogPostItem/Header/Info' { + import type {ReactNode} from 'react'; + export interface Props { className?: string; } - export default function BlogPostItemHeaderInfo(): JSX.Element; + export default function BlogPostItemHeaderInfo(): ReactNode; } declare module '@theme/BlogPostItem/Header/Authors' { + import type {ReactNode} from 'react'; + export interface Props { readonly className?: string; } - export default function BlogPostItemHeaderAuthors(props: Props): JSX.Element; + export default function BlogPostItemHeaderAuthors(props: Props): ReactNode; } declare module '@theme/BlogPostItem/Content' { @@ -331,14 +355,17 @@ declare module '@theme/BlogPostItem/Content' { className?: string; } - export default function BlogPostItemContent(props: Props): JSX.Element; + export default function BlogPostItemContent(props: Props): ReactNode; } declare module '@theme/BlogPostItem/Footer' { - export default function BlogPostItemFooter(): JSX.Element | null; + import type {ReactNode} from 'react'; + + export default function BlogPostItemFooter(): ReactNode | null; } declare module '@theme/BlogPostItem/Footer/ReadMoreLink' { + import type {ReactNode} from 'react'; import type {Props as LinkProps} from '@docusaurus/Link'; export type Props = LinkProps & { @@ -347,10 +374,12 @@ declare module '@theme/BlogPostItem/Footer/ReadMoreLink' { export default function BlogPostItemFooterReadMoreLink( props: Props, - ): JSX.Element | null; + ): ReactNode | null; } declare module '@theme/BlogPostPaginator' { + import type {ReactNode} from 'react'; + type Item = {readonly title: string; readonly permalink: string}; export interface Props { @@ -358,7 +387,7 @@ declare module '@theme/BlogPostPaginator' { readonly prevItem?: Item; } - export default function BlogPostPaginator(props: Props): JSX.Element; + export default function BlogPostPaginator(props: Props): ReactNode; } declare module '@theme/BlogLayout' { @@ -371,7 +400,7 @@ declare module '@theme/BlogLayout' { readonly toc?: ReactNode; } - export default function BlogLayout(props: Props): JSX.Element; + export default function BlogLayout(props: Props): ReactNode; } declare module '@theme/CodeBlock' { @@ -386,54 +415,60 @@ declare module '@theme/CodeBlock' { readonly showLineNumbers?: boolean; } - export default function CodeBlock(props: Props): JSX.Element; + export default function CodeBlock(props: Props): ReactNode; } declare module '@theme/CodeInline' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'code'> {} - export default function CodeInline(props: Props): JSX.Element; + export default function CodeInline(props: Props): ReactNode; } declare module '@theme/CodeBlock/CopyButton' { + import type {ReactNode} from 'react'; + export interface Props { readonly code: string; readonly className?: string; } - export default function CopyButton(props: Props): JSX.Element; + export default function CopyButton(props: Props): ReactNode; } declare module '@theme/CodeBlock/Container' { + import type {ReactNode} from 'react'; import type {ComponentProps} from 'react'; export default function CodeBlockContainer({ as: As, ...props - }: {as: T} & ComponentProps): JSX.Element; + }: {as: T} & ComponentProps): ReactNode; } declare module '@theme/CodeBlock/Content/Element' { + import type {ReactNode} from 'react'; import type {Props} from '@theme/CodeBlock'; export type {Props}; - export default function CodeBlockElementContent(props: Props): JSX.Element; + export default function CodeBlockElementContent(props: Props): ReactNode; } declare module '@theme/CodeBlock/Content/String' { + import type {ReactNode} from 'react'; import type {Props as CodeBlockProps} from '@theme/CodeBlock'; export interface Props extends Omit { readonly children: string; } - export default function CodeBlockStringContent(props: Props): JSX.Element; + export default function CodeBlockStringContent(props: Props): ReactNode; } declare module '@theme/CodeBlock/Line' { + import type {ReactNode} from 'react'; import type { LineInputProps, LineOutputProps, @@ -450,30 +485,34 @@ declare module '@theme/CodeBlock/Line' { readonly getTokenProps: (input: TokenInputProps) => TokenOutputProps; } - export default function CodeBlockLine(props: Props): JSX.Element; + export default function CodeBlockLine(props: Props): ReactNode; } declare module '@theme/CodeBlock/WordWrapButton' { + import type {ReactNode} from 'react'; + export interface Props { readonly className?: string; readonly onClick: React.MouseEventHandler; readonly isEnabled: boolean; } - export default function WordWrapButton(props: Props): JSX.Element; + export default function WordWrapButton(props: Props): ReactNode; } declare module '@theme/DocCard' { + import type {ReactNode} from 'react'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; export interface Props { readonly item: PropSidebarItem; } - export default function DocCard(props: Props): JSX.Element; + export default function DocCard(props: Props): ReactNode; } declare module '@theme/DocCardList' { + import type {ReactNode} from 'react'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; export interface Props { @@ -481,43 +520,57 @@ declare module '@theme/DocCardList' { readonly className?: string; } - export default function DocCardList(props: Props): JSX.Element; + export default function DocCardList(props: Props): ReactNode; } declare module '@theme/DocItem/Layout' { + import type {ReactNode} from 'react'; + export interface Props { - readonly children: JSX.Element; + readonly children: ReactNode; } - export default function DocItemLayout(props: Props): JSX.Element; + export default function DocItemLayout(props: Props): ReactNode; } declare module '@theme/DocItem/Metadata' { - export default function DocItemMetadata(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocItemMetadata(): ReactNode; } declare module '@theme/DocItem/Content' { + import type {ReactNode} from 'react'; + export interface Props { - readonly children: JSX.Element; + readonly children: ReactNode; } - export default function DocItemContent(props: Props): JSX.Element; + export default function DocItemContent(props: Props): ReactNode; } declare module '@theme/DocItem/TOC/Mobile' { - export default function DocItemTOCMobile(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocItemTOCMobile(): ReactNode; } declare module '@theme/DocItem/TOC/Desktop' { - export default function DocItemTOCDesktop(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocItemTOCDesktop(): ReactNode; } declare module '@theme/DocItem/Paginator' { - export default function DocItemPaginator(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocItemPaginator(): ReactNode; } declare module '@theme/DocItem/Footer' { - export default function DocItemFooter(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocItemFooter(): ReactNode; } declare module '@theme/DocRoot/Layout' { @@ -527,11 +580,11 @@ declare module '@theme/DocRoot/Layout' { readonly children: ReactNode; } - export default function DocRootLayout(props: Props): JSX.Element; + export default function DocRootLayout(props: Props): ReactNode; } declare module '@theme/DocRoot/Layout/Sidebar' { - import type {Dispatch, SetStateAction} from 'react'; + import type {Dispatch, SetStateAction, ReactNode} from 'react'; import type {PropSidebar} from '@docusaurus/plugin-content-docs'; export interface Props { @@ -540,17 +593,19 @@ declare module '@theme/DocRoot/Layout/Sidebar' { readonly setHiddenSidebarContainer: Dispatch>; } - export default function DocRootLayoutSidebar(props: Props): JSX.Element; + export default function DocRootLayoutSidebar(props: Props): ReactNode; } declare module '@theme/DocRoot/Layout/Sidebar/ExpandButton' { + import type {ReactNode} from 'react'; + export interface Props { toggleSidebar: () => void; } export default function DocRootLayoutSidebarExpandButton( props: Props, - ): JSX.Element; + ): ReactNode; } declare module '@theme/DocRoot/Layout/Main' { @@ -561,19 +616,21 @@ declare module '@theme/DocRoot/Layout/Main' { readonly children: ReactNode; } - export default function DocRootLayoutMain(props: Props): JSX.Element; + export default function DocRootLayoutMain(props: Props): ReactNode; } declare module '@theme/DocPaginator' { + import type {ReactNode} from 'react'; import type {PropNavigation} from '@docusaurus/plugin-content-docs'; // May be simpler to provide a {navigation: PropNavigation} prop? export interface Props extends PropNavigation {} - export default function DocPaginator(props: Props): JSX.Element; + export default function DocPaginator(props: Props): ReactNode; } declare module '@theme/DocSidebar' { + import type {ReactNode} from 'react'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; export interface Props { @@ -583,26 +640,29 @@ declare module '@theme/DocSidebar' { readonly isHidden: boolean; } - export default function DocSidebar(props: Props): JSX.Element; + export default function DocSidebar(props: Props): ReactNode; } declare module '@theme/DocSidebar/Mobile' { + import type {ReactNode} from 'react'; import type {Props as DocSidebarProps} from '@theme/DocSidebar'; export interface Props extends DocSidebarProps {} - export default function DocSidebarMobile(props: Props): JSX.Element; + export default function DocSidebarMobile(props: Props): ReactNode; } declare module '@theme/DocSidebar/Desktop' { + import type {ReactNode} from 'react'; import type {Props as DocSidebarProps} from '@theme/DocSidebar'; export interface Props extends DocSidebarProps {} - export default function DocSidebarDesktop(props: Props): JSX.Element; + export default function DocSidebarDesktop(props: Props): ReactNode; } declare module '@theme/DocSidebar/Desktop/Content' { + import type {ReactNode} from 'react'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; export interface Props { @@ -611,18 +671,21 @@ declare module '@theme/DocSidebar/Desktop/Content' { readonly sidebar: readonly PropSidebarItem[]; } - export default function Content(props: Props): JSX.Element; + export default function Content(props: Props): ReactNode; } declare module '@theme/DocSidebar/Desktop/CollapseButton' { + import type {ReactNode} from 'react'; + export interface Props { readonly onClick: React.MouseEventHandler; } - export default function CollapseButton(props: Props): JSX.Element; + export default function CollapseButton(props: Props): ReactNode; } declare module '@theme/DocSidebarItem' { + import type {ReactNode} from 'react'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; export interface Props { @@ -634,10 +697,11 @@ declare module '@theme/DocSidebarItem' { readonly index: number; } - export default function DocSidebarItem(props: Props): JSX.Element; + export default function DocSidebarItem(props: Props): ReactNode; } declare module '@theme/DocSidebarItem/Link' { + import type {ReactNode} from 'react'; import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem'; import type {PropSidebarItemLink} from '@docusaurus/plugin-content-docs'; @@ -646,10 +710,11 @@ declare module '@theme/DocSidebarItem/Link' { readonly item: PropSidebarItemLink; } - export default function DocSidebarItemLink(props: Props): JSX.Element; + export default function DocSidebarItemLink(props: Props): ReactNode; } declare module '@theme/DocSidebarItem/Html' { + import type {ReactNode} from 'react'; import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem'; import type {PropSidebarItemHtml} from '@docusaurus/plugin-content-docs'; @@ -657,10 +722,11 @@ declare module '@theme/DocSidebarItem/Html' { readonly item: PropSidebarItemHtml; } - export default function DocSidebarItemHtml(props: Props): JSX.Element; + export default function DocSidebarItemHtml(props: Props): ReactNode; } declare module '@theme/DocSidebarItem/Category' { + import type {ReactNode} from 'react'; import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem'; import type {PropSidebarItemCategory} from '@docusaurus/plugin-content-docs'; @@ -668,10 +734,11 @@ declare module '@theme/DocSidebarItem/Category' { readonly item: PropSidebarItemCategory; } - export default function DocSidebarItemCategory(props: Props): JSX.Element; + export default function DocSidebarItemCategory(props: Props): ReactNode; } declare module '@theme/DocSidebarItems' { + import type {ReactNode} from 'react'; import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem'; import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; @@ -679,44 +746,54 @@ declare module '@theme/DocSidebarItems' { readonly items: readonly PropSidebarItem[]; } - export default function DocSidebarItems(props: Props): JSX.Element; + export default function DocSidebarItems(props: Props): ReactNode; } declare module '@theme/DocVersionBanner' { + import type {ReactNode} from 'react'; + export interface Props { readonly className?: string; } - export default function DocVersionBanner(props: Props): JSX.Element; + export default function DocVersionBanner(props: Props): ReactNode; } declare module '@theme/DocVersionBadge' { + import type {ReactNode} from 'react'; + export interface Props { readonly className?: string; } - export default function DocVersionBadge(props: Props): JSX.Element; + export default function DocVersionBadge(props: Props): ReactNode; } declare module '@theme/DocVersionSuggestions' { - export default function DocVersionSuggestions(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function DocVersionSuggestions(): ReactNode; } declare module '@theme/EditMetaRow' { + import type {ReactNode} from 'react'; + export interface Props { readonly className: string; readonly editUrl: string | null | undefined; readonly lastUpdatedAt: number | undefined; readonly lastUpdatedBy: string | undefined; } - export default function EditMetaRow(props: Props): JSX.Element; + export default function EditMetaRow(props: Props): ReactNode; } declare module '@theme/EditThisPage' { + import type {ReactNode} from 'react'; + export interface Props { readonly editUrl: string; } - export default function EditThisPage(props: Props): JSX.Element; + export default function EditThisPage(props: Props): ReactNode; } declare module '@theme/ErrorPageContent' { @@ -727,35 +804,43 @@ declare module '@theme/ErrorPageContent' { } declare module '@theme/Footer' { - export default function Footer(): JSX.Element | null; + import type {ReactNode} from 'react'; + + export default function Footer(): ReactNode | null; } declare module '@theme/Footer/Logo' { + import type {ReactNode} from 'react'; + import type {FooterLogo} from '@docusaurus/theme-common'; export interface Props { readonly logo: FooterLogo; } - export default function FooterLogo(props: Props): JSX.Element; + export default function FooterLogo(props: Props): ReactNode; } declare module '@theme/Footer/Copyright' { + import type {ReactNode} from 'react'; + export interface Props { readonly copyright: string; } - export default function FooterCopyright(props: Props): JSX.Element; + export default function FooterCopyright(props: Props): ReactNode; } declare module '@theme/Footer/LinkItem' { + import type {ReactNode} from 'react'; + import type {FooterLinkItem} from '@docusaurus/theme-common'; export interface Props { readonly item: FooterLinkItem; } - export default function FooterLinkItem(props: Props): JSX.Element; + export default function FooterLinkItem(props: Props): ReactNode; } declare module '@theme/Footer/Layout' { @@ -768,41 +853,44 @@ declare module '@theme/Footer/Layout' { readonly copyright: ReactNode; } - export default function FooterLayout(props: Props): JSX.Element; + export default function FooterLayout(props: Props): ReactNode; } declare module '@theme/Footer/Links' { + import type {ReactNode} from 'react'; import type {Footer} from '@docusaurus/theme-common'; export interface Props { readonly links: Footer['links']; } - export default function FooterLinks(props: Props): JSX.Element; + export default function FooterLinks(props: Props): ReactNode; } declare module '@theme/Footer/Links/MultiColumn' { + import type {ReactNode} from 'react'; import type {MultiColumnFooter} from '@docusaurus/theme-common'; export interface Props { readonly columns: MultiColumnFooter['links']; } - export default function FooterLinksMultiColumn(props: Props): JSX.Element; + export default function FooterLinksMultiColumn(props: Props): ReactNode; } declare module '@theme/Footer/Links/Simple' { + import type {ReactNode} from 'react'; import type {SimpleFooter} from '@docusaurus/theme-common'; export interface Props { readonly links: SimpleFooter['links']; } - export default function FooterLinksSimple(props: Props): JSX.Element; + export default function FooterLinksSimple(props: Props): ReactNode; } declare module '@theme/Heading' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; @@ -810,15 +898,17 @@ declare module '@theme/Heading' { readonly as: HeadingType; } - export default function Heading(props: Props): JSX.Element; + export default function Heading(props: Props): ReactNode; } declare module '@theme/NotFound/Content' { + import type {ReactNode} from 'react'; + export interface Props { readonly className?: string; } - export default function NotFoundContent(props: Props): JSX.Element; + export default function NotFoundContent(props: Props): ReactNode; } declare module '@theme/Layout' { @@ -834,7 +924,7 @@ declare module '@theme/Layout' { readonly description?: string; } - export default function Layout(props: Props): JSX.Element; + export default function Layout(props: Props): ReactNode; } declare module '@theme/Layout/Provider' { @@ -844,99 +934,105 @@ declare module '@theme/Layout/Provider' { readonly children: ReactNode; } - export default function LayoutProvider(props: Props): JSX.Element; + export default function LayoutProvider(props: Props): ReactNode; } declare module '@theme/SearchMetadata' { + import type {ReactNode} from 'react'; + export interface Props { readonly locale?: string; readonly version?: string; readonly tag?: string; } - export default function SearchMetadata(props: Props): JSX.Element; + export default function SearchMetadata(props: Props): ReactNode; } declare module '@theme/LastUpdated' { + import type {ReactNode} from 'react'; + export interface Props { readonly lastUpdatedAt?: number; readonly lastUpdatedBy?: string; } - export default function LastUpdated(props: Props): JSX.Element; + export default function LastUpdated(props: Props): ReactNode; } declare module '@theme/SkipToContent' { - export default function SkipToContent(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function SkipToContent(): ReactNode; } declare module '@theme/MDXComponents/A' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'a'> {} - export default function MDXA(props: Props): JSX.Element; + export default function MDXA(props: Props): ReactNode; } declare module '@theme/MDXComponents/Code' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'code'> {} - export default function MDXCode(props: Props): JSX.Element; + export default function MDXCode(props: Props): ReactNode; } declare module '@theme/MDXComponents/Details' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'details'> {} - export default function MDXDetails(props: Props): JSX.Element; + export default function MDXDetails(props: Props): ReactNode; } declare module '@theme/MDXComponents/Ul' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'ul'> {} - export default function MDXUl(props: Props): JSX.Element; + export default function MDXUl(props: Props): ReactNode; } declare module '@theme/MDXComponents/Li' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'li'> {} - export default function MDXLi(props: Props): JSX.Element; + export default function MDXLi(props: Props): ReactNode; } declare module '@theme/MDXComponents/Img' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'img'> {} - export default function MDXImg(props: Props): JSX.Element; + export default function MDXImg(props: Props): ReactNode; } declare module '@theme/MDXComponents/Heading' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; import type Heading from '@theme/Heading'; export interface Props extends ComponentProps {} - export default function MDXHeading(props: Props): JSX.Element; + export default function MDXHeading(props: Props): ReactNode; } declare module '@theme/MDXComponents/Pre' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'pre'> {} - export default function MDXPre(props: Props): JSX.Element; + export default function MDXPre(props: Props): ReactNode; } declare module '@theme/MDXComponents' { - import type {ComponentType, ComponentProps} from 'react'; + import type {ComponentType, ComponentProps, ReactNode} from 'react'; import type MDXCode from '@theme/MDXComponents/Code'; import type MDXA from '@theme/MDXComponents/A'; @@ -962,12 +1058,12 @@ declare module '@theme/MDXComponents' { readonly pre: typeof MDXPre; readonly ul: typeof MDXUl; readonly img: typeof MDXImg; - readonly h1: (props: ComponentProps<'h1'>) => JSX.Element; - readonly h2: (props: ComponentProps<'h2'>) => JSX.Element; - readonly h3: (props: ComponentProps<'h3'>) => JSX.Element; - readonly h4: (props: ComponentProps<'h4'>) => JSX.Element; - readonly h5: (props: ComponentProps<'h5'>) => JSX.Element; - readonly h6: (props: ComponentProps<'h6'>) => JSX.Element; + readonly h1: (props: ComponentProps<'h1'>) => ReactNode; + readonly h2: (props: ComponentProps<'h2'>) => ReactNode; + readonly h3: (props: ComponentProps<'h3'>) => ReactNode; + readonly h4: (props: ComponentProps<'h4'>) => ReactNode; + readonly h5: (props: ComponentProps<'h5'>) => ReactNode; + readonly h6: (props: ComponentProps<'h6'>) => ReactNode; readonly admonition: typeof Admonition; readonly mermaid: typeof Mermaid; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -985,41 +1081,51 @@ declare module '@theme/MDXContent' { readonly children: ReactNode; } - export default function MDXContent(props: Props): JSX.Element; + export default function MDXContent(props: Props): ReactNode; } declare module '@theme/Navbar' { - export default function Navbar(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function Navbar(): ReactNode; } declare module '@theme/Navbar/ColorModeToggle' { + import type {ReactNode} from 'react'; + export interface Props { readonly className?: string; } - export default function NavbarColorModeToggle( - props: Props, - ): JSX.Element | null; + export default function NavbarColorModeToggle(props: Props): ReactNode | null; } declare module '@theme/Navbar/Logo' { - export default function NavbarLogo(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarLogo(): ReactNode; } declare module '@theme/Navbar/Content' { - export default function NavbarContent(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarContent(): ReactNode; } declare module '@theme/Navbar/Layout' { + import type {ReactNode} from 'react'; + export interface Props { readonly children: React.ReactNode; } - export default function NavbarLayout(props: Props): JSX.Element; + export default function NavbarLayout(props: Props): ReactNode; } declare module '@theme/Navbar/MobileSidebar' { - export default function NavbarMobileSidebar(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarMobileSidebar(): ReactNode; } declare module '@theme/Navbar/MobileSidebar/Layout' { @@ -1031,23 +1137,31 @@ declare module '@theme/Navbar/MobileSidebar/Layout' { readonly secondaryMenu: ReactNode; } - export default function NavbarMobileSidebarLayout(props: Props): JSX.Element; + export default function NavbarMobileSidebarLayout(props: Props): ReactNode; } declare module '@theme/Navbar/MobileSidebar/Toggle' { - export default function NavbarMobileSidebarToggle(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarMobileSidebarToggle(): ReactNode; } declare module '@theme/Navbar/MobileSidebar/PrimaryMenu' { - export default function NavbarMobileSidebarPrimaryMenu(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarMobileSidebarPrimaryMenu(): ReactNode; } declare module '@theme/Navbar/MobileSidebar/SecondaryMenu' { - export default function NavbarMobileSidebarSecondaryMenu(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarMobileSidebarSecondaryMenu(): ReactNode; } declare module '@theme/Navbar/MobileSidebar/Header' { - export default function NavbarMobileSidebarHeader(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function NavbarMobileSidebarHeader(): ReactNode; } declare module '@theme/Navbar/Search' { @@ -1058,10 +1172,11 @@ declare module '@theme/Navbar/Search' { readonly className?: string; } - export default function NavbarSearch(props: Props): JSX.Element; + export default function NavbarSearch(props: Props): ReactNode; } declare module '@theme/NavbarItem/DefaultNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink'; export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & { @@ -1074,7 +1189,7 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' { readonly mobile?: boolean; } - export default function DefaultNavbarItem(props: Props): JSX.Element; + export default function DefaultNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/NavbarNavLink' { @@ -1091,10 +1206,11 @@ declare module '@theme/NavbarItem/NavbarNavLink' { readonly isDropdownLink?: boolean; } - export default function NavbarNavLink(props: Props): JSX.Element; + export default function NavbarNavLink(props: Props): ReactNode; } declare module '@theme/NavbarItem/DropdownNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink'; import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; @@ -1108,19 +1224,22 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' { readonly mobile?: boolean; } - export default function DropdownNavbarItem(props: Props): JSX.Element; + export default function DropdownNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/SearchNavbarItem' { + import type {ReactNode} from 'react'; + export interface Props { readonly mobile?: boolean; readonly className?: string; } - export default function SearchNavbarItem(props: Props): JSX.Element; + export default function SearchNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/LocaleDropdownNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem'; import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; @@ -1130,10 +1249,11 @@ declare module '@theme/NavbarItem/LocaleDropdownNavbarItem' { readonly queryString?: string; } - export default function LocaleDropdownNavbarItem(props: Props): JSX.Element; + export default function LocaleDropdownNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem'; import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; @@ -1146,20 +1266,22 @@ declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' { export default function DocsVersionDropdownNavbarItem( props: Props, - ): JSX.Element; + ): ReactNode; } declare module '@theme/NavbarItem/DocsVersionNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; export interface Props extends DefaultNavbarItemProps { readonly docsPluginId?: string; } - export default function DocsVersionNavbarItem(props: Props): JSX.Element; + export default function DocsVersionNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/DocNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; export interface Props extends DefaultNavbarItemProps { @@ -1167,12 +1289,11 @@ declare module '@theme/NavbarItem/DocNavbarItem' { readonly docsPluginId?: string; } - export default function DocsSidebarNavbarItem( - props: Props, - ): JSX.Element | null; + export default function DocsSidebarNavbarItem(props: Props): ReactNode | null; } declare module '@theme/NavbarItem/DocSidebarNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; export interface Props extends DefaultNavbarItemProps { @@ -1180,17 +1301,18 @@ declare module '@theme/NavbarItem/DocSidebarNavbarItem' { readonly docsPluginId?: string; } - export default function DocSidebarNavbarItem(props: Props): JSX.Element; + export default function DocSidebarNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/HtmlNavbarItem' { + import type {ReactNode} from 'react'; import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; export interface Props extends DefaultNavbarItemProps { readonly value: string; } - export default function HtmlNavbarItem(props: Props): JSX.Element; + export default function HtmlNavbarItem(props: Props): ReactNode; } declare module '@theme/NavbarItem/ComponentTypes' { @@ -1225,7 +1347,7 @@ declare module '@theme/NavbarItem/ComponentTypes' { } declare module '@theme/NavbarItem' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; import type {Props as DocNavbarItemProps} from '@theme/NavbarItem/DocNavbarItem'; import type {Props as DocSidebarNavbarItemProps} from '@theme/NavbarItem/DocSidebarNavbarItem'; @@ -1259,7 +1381,7 @@ declare module '@theme/NavbarItem' { export type NavbarItemType = Props['type']; - export default function NavbarItem(props: Props): JSX.Element; + export default function NavbarItem(props: Props): ReactNode; } declare module '@theme/PaginatorNavLink' { @@ -1268,43 +1390,50 @@ declare module '@theme/PaginatorNavLink' { export interface Props extends Omit { readonly title: ReactNode; - readonly subLabel?: JSX.Element; + readonly subLabel?: ReactNode; readonly isNext?: boolean; } - export default function PaginatorNavLink(props: Props): JSX.Element; + export default function PaginatorNavLink(props: Props): ReactNode; } declare module '@theme/SearchBar' { - export default function SearchBar(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function SearchBar(): ReactNode; } declare module '@theme/Mermaid' { + import type {ReactNode} from 'react'; + export interface Props { value: string; } - export default function Mermaid(props: Props): JSX.Element; + export default function Mermaid(props: Props): ReactNode; } declare module '@theme/TabItem' { + import type {ReactNode} from 'react'; + import type {TabItemProps} from '@docusaurus/theme-common/internal'; export interface Props extends TabItemProps {} - export default function TabItem(props: Props): JSX.Element; + export default function TabItem(props: Props): ReactNode; } declare module '@theme/Tabs' { + import type {ReactNode} from 'react'; import type {TabsProps} from '@docusaurus/theme-common/internal'; export interface Props extends TabsProps {} - export default function Tabs(props: Props): JSX.Element; + export default function Tabs(props: Props): ReactNode; } declare module '@theme/ThemedImage' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends Omit, 'src'> { readonly sources: { @@ -1313,7 +1442,7 @@ declare module '@theme/ThemedImage' { }; } - export default function ThemedImage(props: Props): JSX.Element; + export default function ThemedImage(props: Props): ReactNode; } declare module '@theme/Details' { @@ -1324,6 +1453,7 @@ declare module '@theme/Details' { } declare module '@theme/TOCItems' { + import type {ReactNode} from 'react'; import type {TOCItem} from '@docusaurus/mdx-loader'; export interface Props { @@ -1335,10 +1465,11 @@ declare module '@theme/TOCItems' { readonly linkActiveClassName?: string; } - export default function TOCItems(props: Props): JSX.Element; + export default function TOCItems(props: Props): ReactNode; } declare module '@theme/TOCItems/Tree' { + import type {ReactNode} from 'react'; import type {TOCTreeNode} from '@docusaurus/theme-common/internal'; export interface Props { @@ -1348,10 +1479,11 @@ declare module '@theme/TOCItems/Tree' { readonly isChild?: boolean; } - export default function TOCItems(props: Props): JSX.Element; + export default function TOCItems(props: Props): ReactNode; } declare module '@theme/TOC' { + import type {ReactNode} from 'react'; import type {TOCItem} from '@docusaurus/mdx-loader'; // `minHeadingLevel` only comes from doc/post front matter, and won't have a @@ -1363,10 +1495,11 @@ declare module '@theme/TOC' { readonly className?: string; } - export default function TOC(props: Props): JSX.Element; + export default function TOC(props: Props): ReactNode; } declare module '@theme/TOCInline' { + import type {ReactNode} from 'react'; import type {TOCItem} from '@docusaurus/mdx-loader'; export interface Props { @@ -1375,10 +1508,11 @@ declare module '@theme/TOCInline' { readonly maxHeadingLevel?: number; } - export default function TOCInline(props: Props): JSX.Element; + export default function TOCInline(props: Props): ReactNode; } declare module '@theme/TOCCollapsible' { + import type {ReactNode} from 'react'; import type {TOCItem} from '@docusaurus/mdx-loader'; export interface Props { @@ -1388,22 +1522,21 @@ declare module '@theme/TOCCollapsible' { readonly toc: readonly TOCItem[]; } - export default function TOCCollapsible(props: Props): JSX.Element; + export default function TOCCollapsible(props: Props): ReactNode; } declare module '@theme/TOCCollapsible/CollapseButton' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'button'> { collapsed: boolean; } - export default function TOCCollapsibleCollapseButton( - props: Props, - ): JSX.Element; + export default function TOCCollapsibleCollapseButton(props: Props): ReactNode; } declare module '@theme/ColorModeToggle' { + import type {ReactNode} from 'react'; import type {ColorMode} from '@docusaurus/theme-common'; export interface Props { @@ -1417,192 +1550,197 @@ declare module '@theme/ColorModeToggle' { readonly onChange: (colorMode: ColorMode) => void; } - export default function ColorModeToggle(props: Props): JSX.Element; + export default function ColorModeToggle(props: Props): ReactNode; } declare module '@theme/Logo' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'a'> { readonly imageClassName?: string; readonly titleClassName?: string; } - export default function Logo(props: Props): JSX.Element; + export default function Logo(props: Props): ReactNode; } declare module '@theme/Icon/Arrow' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconArrow(props: Props): JSX.Element; + export default function IconArrow(props: Props): ReactNode; } declare module '@theme/Icon/DarkMode' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconDarkMode(props: Props): JSX.Element; + export default function IconDarkMode(props: Props): ReactNode; } declare module '@theme/Icon/Edit' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconEdit(props: Props): JSX.Element; + export default function IconEdit(props: Props): ReactNode; } declare module '@theme/Icon/Home' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconHome(props: Props): JSX.Element; + export default function IconHome(props: Props): ReactNode; } declare module '@theme/Icon/LightMode' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconLightMode(props: Props): JSX.Element; + export default function IconLightMode(props: Props): ReactNode; } declare module '@theme/Icon/Menu' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconMenu(props: Props): JSX.Element; + export default function IconMenu(props: Props): ReactNode; } declare module '@theme/Icon/Close' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconClose(props: Props): JSX.Element; + export default function IconClose(props: Props): ReactNode; } declare module '@theme/Icon/Copy' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconCopy(props: Props): JSX.Element; + export default function IconCopy(props: Props): ReactNode; } declare module '@theme/Icon/Language' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconLanguage(props: Props): JSX.Element; + export default function IconLanguage(props: Props): ReactNode; } declare module '@theme/Icon/Success' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconSuccess(props: Props): JSX.Element; + export default function IconSuccess(props: Props): ReactNode; } declare module '@theme/Icon/ExternalLink' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconExternalLink(props: Props): JSX.Element; + export default function IconExternalLink(props: Props): ReactNode; } declare module '@theme/Icon/WordWrap' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function IconWordWrap(props: Props): JSX.Element; + export default function IconWordWrap(props: Props): ReactNode; } declare module '@theme/Icon/Socials/Twitter' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function Twitter(props: Props): JSX.Element; + export default function Twitter(props: Props): ReactNode; } declare module '@theme/Icon/Socials/GitHub' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function Github(props: Props): JSX.Element; + export default function Github(props: Props): ReactNode; } declare module '@theme/Icon/Socials/X' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function X(props: Props): JSX.Element; + export default function X(props: Props): ReactNode; } declare module '@theme/Icon/Socials/LinkedIn' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function LinkedIn(props: Props): JSX.Element; + export default function LinkedIn(props: Props): ReactNode; } declare module '@theme/Icon/Socials/Default' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function DefaultSocialIcon(props: Props): JSX.Element; + export default function DefaultSocialIcon(props: Props): ReactNode; } declare module '@theme/Icon/Socials/StackOverflow' { - import type {ComponentProps} from 'react'; + import type {ComponentProps, ReactNode} from 'react'; export interface Props extends ComponentProps<'svg'> {} - export default function StackOverflow(props: Props): JSX.Element; + export default function StackOverflow(props: Props): ReactNode; } declare module '@theme/TagsListByLetter' { + import type {ReactNode} from 'react'; import type {TagsListItem} from '@docusaurus/utils'; export interface Props { readonly tags: readonly TagsListItem[]; } - export default function TagsListByLetter(props: Props): JSX.Element; + export default function TagsListByLetter(props: Props): ReactNode; } declare module '@theme/TagsListInline' { + import type {ReactNode} from 'react'; import type {Tag} from '@docusaurus/utils'; export interface Props { readonly tags: readonly Tag[]; } - export default function TagsListInline(props: Props): JSX.Element; + export default function TagsListInline(props: Props): ReactNode; } declare module '@theme/Tag' { + import type {ReactNode} from 'react'; import type {TagsListItem} from '@docusaurus/utils'; import type {Optional} from 'utility-types'; export interface Props extends Optional {} - export default function Tag(props: Props): JSX.Element; + export default function Tag(props: Props): ReactNode; } declare module '@theme/ContentVisibility' { + import type {ReactNode} from 'react'; + export interface Props { readonly metadata: { // the visibility metadata our 3 content plugins share in common @@ -1611,23 +1749,27 @@ declare module '@theme/ContentVisibility' { }; } - export default function ContentVisibility(props: Props): JSX.Element; + export default function ContentVisibility(props: Props): ReactNode; } declare module '@theme/ContentVisibility/Unlisted' { + import type {ReactNode} from 'react'; + export interface Props { className?: string; } - export default function Unlisted(props: Props): JSX.Element; + export default function Unlisted(props: Props): ReactNode; } declare module '@theme/ContentVisibility/Draft' { + import type {ReactNode} from 'react'; + export interface Props { className?: string; } - export default function Draft(props: Props): JSX.Element; + export default function Draft(props: Props): ReactNode; } declare module '@theme/prism-include-languages' { @@ -1639,5 +1781,7 @@ declare module '@theme/prism-include-languages' { } declare module '@theme/DocBreadcrumbs/Items/Home' { - export default function HomeBreadcrumbItem(): JSX.Element; + import type {ReactNode} from 'react'; + + export default function HomeBreadcrumbItem(): ReactNode; } diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Danger.tsx b/packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Danger.tsx index 90d4a5515fc4..5ef416dc58f2 100644 --- a/packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Danger.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Danger.tsx @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import type {Props} from '@theme/Admonition/Icon/Danger'; -export default function AdmonitionIconDanger(props: Props): JSX.Element { +export default function AdmonitionIconDanger(props: Props): ReactNode { return ( ) { ) : null; } -export default function AdmonitionLayout(props: Props): JSX.Element { +export default function AdmonitionLayout(props: Props): ReactNode { const {type, icon, title, children, className} = props; return ( diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/Type/Caution.tsx b/packages/docusaurus-theme-classic/src/theme/Admonition/Type/Caution.tsx index 35e6a19e81fe..48ac08878df2 100644 --- a/packages/docusaurus-theme-classic/src/theme/Admonition/Type/Caution.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Admonition/Type/Caution.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 Translate from '@docusaurus/Translate'; import type {Props} from '@theme/Admonition/Type/Caution'; @@ -27,7 +27,7 @@ const defaultProps = { // TODO remove before v4: Caution replaced by Warning // see https://github.com/facebook/docusaurus/issues/7558 -export default function AdmonitionTypeCaution(props: Props): JSX.Element { +export default function AdmonitionTypeCaution(props: Props): ReactNode { return ( { return AdmonitionTypes.info!; } -export default function Admonition(unprocessedProps: Props): JSX.Element { +export default function Admonition(unprocessedProps: Props): ReactNode { const props = processAdmonitionProps(unprocessedProps); const AdmonitionTypeComponent = getAdmonitionTypeComponent(props.type); return ; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx index 5ae3135bf9f7..6fde5e09accc 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx @@ -5,16 +5,14 @@ * 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 {translate} from '@docusaurus/Translate'; import IconClose from '@theme/Icon/Close'; import type {Props} from '@theme/AnnouncementBar/CloseButton'; import styles from './styles.module.css'; -export default function AnnouncementBarCloseButton( - props: Props, -): JSX.Element | null { +export default function AnnouncementBarCloseButton(props: Props): ReactNode { return ( diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx index 563327a8a2a2..270773327fb8 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogListPage/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 useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -21,7 +21,7 @@ import type {Props} from '@theme/BlogListPage'; import BlogPostItems from '@theme/BlogPostItems'; import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData'; -function BlogListPageMetadata(props: Props): JSX.Element { +function BlogListPageMetadata(props: Props): ReactNode { const {metadata} = props; const { siteConfig: {title: siteTitle}, @@ -37,7 +37,7 @@ function BlogListPageMetadata(props: Props): JSX.Element { ); } -function BlogListPageContent(props: Props): JSX.Element { +function BlogListPageContent(props: Props): ReactNode { const {metadata, items, sidebar} = props; return ( @@ -47,7 +47,7 @@ function BlogListPageContent(props: Props): JSX.Element { ); } -export default function BlogListPage(props: Props): JSX.Element { +export default function BlogListPage(props: Props): ReactNode { return ( {children}; } diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Content/index.tsx index 5f0bc798c13b..dbc6f4db00c7 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Content/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Content/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 {blogPostContainerID} from '@docusaurus/utils-common'; import {useBlogPost} from '@docusaurus/plugin-content-blog/client'; @@ -15,7 +15,7 @@ import type {Props} from '@theme/BlogPostItem/Content'; export default function BlogPostItemContent({ children, className, -}: Props): JSX.Element { +}: Props): ReactNode { const {isBlogPostPage} = useBlogPost(); return (
{' · '}; } -export default function BlogPostItemHeaderInfo({ - className, -}: Props): JSX.Element { +export default function BlogPostItemHeaderInfo({className}: Props): ReactNode { const {metadata} = useBlogPost(); const {date, readingTime} = metadata; diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/index.tsx index dc799713a300..0c604143c10e 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/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 Link from '@docusaurus/Link'; import {useBlogPost} from '@docusaurus/plugin-content-blog/client'; @@ -13,9 +13,7 @@ import type {Props} from '@theme/BlogPostItem/Header/Title'; import styles from './styles.module.css'; -export default function BlogPostItemHeaderTitle({ - className, -}: Props): JSX.Element { +export default function BlogPostItemHeaderTitle({className}: Props): ReactNode { const {metadata, isBlogPostPage} = useBlogPost(); const {permalink, title} = metadata; const TitleHeading = isBlogPostPage ? 'h1' : 'h2'; diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/index.tsx index 77acbaf563af..0ff0ccb04ca0 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/index.tsx @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title'; import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info'; import BlogPostItemHeaderAuthors from '@theme/BlogPostItem/Header/Authors'; -export default function BlogPostItemHeader(): JSX.Element { +export default function BlogPostItemHeader(): ReactNode { return (
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx index be86b2816f8e..cbdcaf443a4e 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/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 {useBlogPost} from '@docusaurus/plugin-content-blog/client'; import BlogPostItemContainer from '@theme/BlogPostItem/Container'; @@ -20,10 +20,7 @@ function useContainerClassName() { return !isBlogPostPage ? 'margin-bottom--xl' : undefined; } -export default function BlogPostItem({ - children, - className, -}: Props): JSX.Element { +export default function BlogPostItem({children, className}: Props): ReactNode { const containerClassName = useContainerClassName(); return ( diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItems/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItems/index.tsx index 60ad9a06a3bc..8e97348b456c 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItems/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItems/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 {BlogPostProvider} from '@docusaurus/plugin-content-blog/client'; import BlogPostItem from '@theme/BlogPostItem'; import type {Props} from '@theme/BlogPostItems'; @@ -13,7 +13,7 @@ import type {Props} from '@theme/BlogPostItems'; export default function BlogPostItems({ items, component: BlogPostItemComponent = BlogPostItem, -}: Props): JSX.Element { +}: Props): ReactNode { return ( <> {items.map(({content: BlogPostContent}) => ( diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/Metadata/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/Metadata/index.tsx index 2eb2eeb33b0e..abe5d74a1240 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/Metadata/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/Metadata/index.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 {PageMetadata} from '@docusaurus/theme-common'; import {useBlogPost} from '@docusaurus/plugin-content-blog/client'; -export default function BlogPostPageMetadata(): JSX.Element { +export default function BlogPostPageMetadata(): ReactNode { const {assets, metadata} = useBlogPost(); const {title, description, date, tags, authors, frontMatter} = metadata; diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/index.tsx index ef7df81fd416..1f8aabc9a39c 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/index.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 Head from '@docusaurus/Head'; import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client'; -export default function BlogPostStructuredData(): JSX.Element { +export default function BlogPostStructuredData(): ReactNode { const structuredData = useBlogPostStructuredData(); return ( diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx index 07c96d47a548..28f37a421b79 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx @@ -28,7 +28,7 @@ function BlogPostPageContent({ }: { sidebar: BlogSidebar; children: ReactNode; -}): JSX.Element { +}): ReactNode { const {metadata, toc} = useBlogPost(); const {nextItem, prevItem, frontMatter} = metadata; const { @@ -59,7 +59,7 @@ function BlogPostPageContent({ ); } -export default function BlogPostPage(props: Props): JSX.Element { +export default function BlogPostPage(props: Props): ReactNode { const BlogPostContent = props.content; return ( diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx index 22c7bcd12c69..bf49ec144669 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import Translate, {translate} from '@docusaurus/Translate'; import PaginatorNavLink from '@theme/PaginatorNavLink'; import type {Props} from '@theme/BlogPostPaginator'; -export default function BlogPostPaginator(props: Props): JSX.Element { +export default function BlogPostPaginator(props: Props): ReactNode { const {nextItem, prevItem} = props; return ( diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx index 4e50a9c32d9e..27549b06c60e 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, {memo} from 'react'; +import React, {memo, type ReactNode} from 'react'; import { useVisibleBlogSidebarItems, BlogSidebarItemList, @@ -29,7 +29,7 @@ const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => { ); }; -function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element { +function BlogSidebarMobileSecondaryMenu({sidebar}: Props): ReactNode { const items = useVisibleBlogSidebarItems(sidebar.items); return ( @@ -38,7 +38,7 @@ function BlogTagsPostsPageContent({ items, sidebar, listMetadata, -}: Props): JSX.Element { +}: Props): ReactNode { const title = useBlogTagsPostsPageTitle(tag); return ( @@ -59,7 +59,7 @@ function BlogTagsPostsPageContent({ ); } -export default function BlogTagsPostsPage(props: Props): JSX.Element { +export default function BlogTagsPostsPage(props: Props): ReactNode { return ( ({ as: As, ...props -}: {as: T} & ComponentProps): JSX.Element { +}: {as: T} & ComponentProps): ReactNode { const prismTheme = usePrismTheme(); const prismCssVariables = getPrismCssVariables(prismTheme); return ( diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx index a31cd85731ac..a856aee703d4 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.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 Container from '@theme/CodeBlock/Container'; import type {Props} from '@theme/CodeBlock/Content/Element'; @@ -15,10 +15,7 @@ import styles from './styles.module.css'; // 
 tags in markdown map to CodeBlocks. They may contain JSX children. When
 // the children is not a simple string, we just return a styled block without
 // actually highlighting.
-export default function CodeBlockJSX({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function CodeBlockJSX({children, className}: Props): ReactNode {
   return (
     (undefined);
   const handleCopyCode = useCallback(() => {
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
index 0bbc1c3635f0..c6352efc694c 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/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 type {Props} from '@theme/CodeBlock/Line';
 
@@ -17,7 +17,7 @@ export default function CodeBlockLine({
   showLineNumbers,
   getLineProps,
   getTokenProps,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   if (line.length === 1 && line[0]!.content === '\n') {
     line[0]!.content = '';
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx
index 0adb3d8d4b01..eddb120c9b02 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/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 {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/CodeBlock/WordWrapButton';
@@ -17,7 +17,7 @@ export default function WordWrapButton({
   className,
   onClick,
   isEnabled,
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   const title = translate({
     id: 'theme.CodeBlock.wordWrapToggle',
     message: 'Toggle word wrap',
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
index e672185a515f..e94add8e12f7 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -28,7 +28,7 @@ function maybeStringifyChildren(children: ReactNode): ReactNode {
 export default function CodeBlock({
   children: rawChildren,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   // The Prism theme on SSR is always the default theme but the site theme can
   // be in a different mode. React hydration doesn't update DOM styles that come
   // from SSR. Hence force a re-render after mounting to apply the current
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx
index 066ab2e61c5d..3fbff5700ad9 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx
@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import type {Props} from '@theme/CodeInline';
 
 // Simple component used to render inline code blocks
 // its purpose is to be swizzled and customized
 // MDX 1 used to have a inlineCode comp, see https://mdxjs.com/migrating/v2/
-export default function CodeInline(props: Props): JSX.Element {
+export default function CodeInline(props: Props): ReactNode {
   return ;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index 5e0f020ce5c4..9be18f739cd6 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/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 {translate} from '@docusaurus/Translate';
@@ -20,7 +20,7 @@ function ColorModeToggle({
   buttonClassName,
   value,
   onChange,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const isBrowser = useIsBrowser();
 
   const title = translate(
diff --git a/packages/docusaurus-theme-classic/src/theme/ContentVisibility/Draft/index.tsx b/packages/docusaurus-theme-classic/src/theme/ContentVisibility/Draft/index.tsx
index 6595e2295fe8..63ce3ea1b610 100644
--- a/packages/docusaurus-theme-classic/src/theme/ContentVisibility/Draft/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ContentVisibility/Draft/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 {
   ThemeClassNames,
@@ -15,7 +15,7 @@ import {
 import Admonition from '@theme/Admonition';
 import type {Props} from '@theme/ContentVisibility/Draft';
 
-export default function Draft({className}: Props): JSX.Element | null {
+export default function Draft({className}: Props): ReactNode {
   return (
     
       {/*
diff --git a/packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx b/packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx
index f9c570e02c54..0915c9e4e11b 100644
--- a/packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx
@@ -5,15 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 
 import type {Props} from '@theme/ContentVisibility';
 import Draft from '@theme/ContentVisibility/Draft';
 import Unlisted from '@theme/ContentVisibility/Unlisted';
 
-export default function ContentVisibility({
-  metadata,
-}: Props): JSX.Element | null {
+export default function ContentVisibility({metadata}: Props): ReactNode {
   const {unlisted, frontMatter} = metadata;
   // Reading draft/unlisted status from frontMatter is useful to display
   // the banners in dev mode (in dev, metadata.unlisted is always false)
diff --git a/packages/docusaurus-theme-classic/src/theme/Details/index.tsx b/packages/docusaurus-theme-classic/src/theme/Details/index.tsx
index b6e7b06f6bd7..11da776988b4 100644
--- a/packages/docusaurus-theme-classic/src/theme/Details/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Details/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 {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
 import type {Props} from '@theme/Details';
@@ -16,7 +16,7 @@ import styles from './styles.module.css';
 // alert classes?
 const InfimaClasses = 'alert alert--info';
 
-export default function Details({...props}: Props): JSX.Element {
+export default function Details({...props}: Props): ReactNode {
   return (
     
       ;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
index 97b903c0030a..a45ee6e9801f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCardList/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 {
   useCurrentSidebarCategory,
@@ -19,7 +19,7 @@ function DocCardListForCurrentSidebarCategory({className}: Props) {
   return ;
 }
 
-export default function DocCardList(props: Props): JSX.Element {
+export default function DocCardList(props: Props): ReactNode {
   const {items, className} = props;
   if (!items) {
     return ;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
index 9fd576f5369a..901ce392bac9 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/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 {PageMetadata} from '@docusaurus/theme-common';
 import {useCurrentSidebarCategory} from '@docusaurus/plugin-content-docs/client';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -21,7 +21,7 @@ import styles from './styles.module.css';
 
 function DocCategoryGeneratedIndexPageMetadata({
   categoryGeneratedIndex,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     
@@ -63,9 +63,7 @@ function DocCategoryGeneratedIndexPageContent({
   );
 }
 
-export default function DocCategoryGeneratedIndexPage(
-  props: Props,
-): JSX.Element {
+export default function DocCategoryGeneratedIndexPage(props: Props): ReactNode {
   return (
     <>
       
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx
index b1b36cb63677..97aba92df553 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/Content/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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -33,7 +33,7 @@ function useSyntheticTitle(): string | null {
   return metadata.title;
 }
 
-export default function DocItemContent({children}: Props): JSX.Element {
+export default function DocItemContent({children}: Props): ReactNode {
   const syntheticTitle = useSyntheticTitle();
   return (
     

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx
index 718aa5d45073..e497c85c0cee 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -13,7 +13,7 @@ import TagsListInline from '@theme/TagsListInline';
 
 import EditMetaRow from '@theme/EditMetaRow';
 
-export default function DocItemFooter(): JSX.Element | null {
+export default function DocItemFooter(): ReactNode {
   const {metadata} = useDoc();
   const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
 
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx
index 138b6ad45fbc..8322d71956c3 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/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 {useWindowSize} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -46,7 +46,7 @@ function useDocTOC() {
   };
 }
 
-export default function DocItemLayout({children}: Props): JSX.Element {
+export default function DocItemLayout({children}: Props): ReactNode {
   const docTOC = useDocTOC();
   const {metadata} = useDoc();
   return (
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Metadata/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Metadata/index.tsx
index 3296fa747900..f0f22f17103e 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/Metadata/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/Metadata/index.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 {PageMetadata} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
 
-export default function DocItemMetadata(): JSX.Element {
+export default function DocItemMetadata(): ReactNode {
   const {metadata, frontMatter, assets} = useDoc();
   return (
      should remain generic.
  * DocPaginator is used in non-docs contexts too: generated-index pages...
  */
-export default function DocItemPaginator(): JSX.Element {
+export default function DocItemPaginator(): ReactNode {
   const {metadata} = useDoc();
   return ;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/TOC/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/TOC/Desktop/index.tsx
index a2d6438a61e5..827780f459a8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/TOC/Desktop/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/TOC/Desktop/index.tsx
@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
 
 import TOC from '@theme/TOC';
 
-export default function DocItemTOCDesktop(): JSX.Element {
+export default function DocItemTOCDesktop(): ReactNode {
   const {toc, frontMatter} = useDoc();
   return (
     ;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx
index 792d589feb71..d4531ac98052 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {memo} from 'react';
+import React, {memo, type ReactNode} from 'react';
 import {
   DocSidebarItemsExpandedStateProvider,
   useVisibleSidebarItems,
@@ -14,7 +14,7 @@ import DocSidebarItem from '@theme/DocSidebarItem';
 
 import type {Props} from '@theme/DocSidebarItems';
 
-function DocSidebarItems({items, ...props}: Props): JSX.Element {
+function DocSidebarItems({items, ...props}: Props): ReactNode {
   const visibleItems = useVisibleSidebarItems(items, props.activePath);
   return (
     
diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
index 51b8c090777c..42446de2b075 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/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 Link from '@docusaurus/Link';
 import {
@@ -50,7 +50,7 @@ function usePageTitle(props: Props): string {
   );
 }
 
-function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
+function DocItem({doc}: {doc: Props['tag']['items'][number]}): ReactNode {
   return (
     

       
@@ -64,7 +64,7 @@ function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
 function DocTagDocListPageMetadata({
   title,
   tag,
-}: Props & {title: string}): JSX.Element {
+}: Props & {title: string}): ReactNode {
   return (
     <>
       
@@ -76,7 +76,7 @@ function DocTagDocListPageMetadata({
 function DocTagDocListPageContent({
   tag,
   title,
-}: Props & {title: string}): JSX.Element {
+}: Props & {title: string}): ReactNode {
   return (
     
@@ -107,7 +107,7 @@ function DocTagDocListPageContent({
   );
 }
 
-export default function DocTagDocListPage(props: Props): JSX.Element {
+export default function DocTagDocListPage(props: Props): ReactNode {
   const title = usePageTitle(props);
   return (
     <>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
index 4a5af782c6df..8197c1f40943 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/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 {
   PageMetadata,
@@ -18,9 +18,7 @@ import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocTagsListPage';
 import Heading from '@theme/Heading';
 
-function DocTagsListPageMetadata({
-  title,
-}: Props & {title: string}): JSX.Element {
+function DocTagsListPageMetadata({title}: Props & {title: string}): ReactNode {
   return (
     <>
       
@@ -32,7 +30,7 @@ function DocTagsListPageMetadata({
 function DocTagsListPageContent({
   tags,
   title,
-}: Props & {title: string}): JSX.Element {
+}: Props & {title: string}): ReactNode {
   return (
     
@@ -48,7 +46,7 @@ function DocTagsListPageContent({
   );
 }
 
-export default function DocTagsListPage(props: Props): JSX.Element {
+export default function DocTagsListPage(props: Props): ReactNode {
   const title = translateTagsPageTitle();
   return (
     <>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocVersionBadge/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocVersionBadge/index.tsx
index b1c373169342..c2dd54546e05 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocVersionBadge/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocVersionBadge/index.tsx
@@ -5,16 +5,14 @@
  * 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 Translate from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDocsVersion} from '@docusaurus/plugin-content-docs/client';
 import type {Props} from '@theme/DocVersionBadge';
 
-export default function DocVersionBadge({
-  className,
-}: Props): JSX.Element | null {
+export default function DocVersionBadge({className}: Props): ReactNode {
   const versionMetadata = useDocsVersion();
   if (versionMetadata.badge) {
     return (
diff --git a/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx
index 723efbf29d44..cc02411e0841 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentType} from 'react';
+import React, {type ComponentType, type ReactNode} from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
@@ -121,7 +121,7 @@ function DocVersionBannerEnabled({
   versionMetadata,
 }: Props & {
   versionMetadata: PropVersionMetadata;
-}): JSX.Element {
+}): ReactNode {
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
@@ -162,9 +162,7 @@ function DocVersionBannerEnabled({
   );
 }
 
-export default function DocVersionBanner({
-  className,
-}: Props): JSX.Element | null {
+export default function DocVersionBanner({className}: Props): ReactNode {
   const versionMetadata = useDocsVersion();
   if (versionMetadata.banner) {
     return (
diff --git a/packages/docusaurus-theme-classic/src/theme/DocVersionRoot/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocVersionRoot/index.tsx
index dcac550b5cc3..7e13cce3cb9f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocVersionRoot/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocVersionRoot/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 {HtmlClassNameProvider, PageMetadata} from '@docusaurus/theme-common';
 import {
   getDocsVersionSearchTag,
@@ -16,7 +16,7 @@ import SearchMetadata from '@theme/SearchMetadata';
 
 import type {Props} from '@theme/DocVersionRoot';
 
-function DocVersionRootMetadata(props: Props): JSX.Element {
+function DocVersionRootMetadata(props: Props): ReactNode {
   const {version} = props;
   return (
     <>
@@ -31,7 +31,7 @@ function DocVersionRootMetadata(props: Props): JSX.Element {
   );
 }
 
-function DocVersionRootContent(props: Props): JSX.Element {
+function DocVersionRootContent(props: Props): ReactNode {
   const {version, route} = props;
   return (
     
@@ -41,7 +41,7 @@ function DocVersionRootContent(props: Props): JSX.Element {
     
   );
 }
-export default function DocVersionRoot(props: Props): JSX.Element {
+export default function DocVersionRoot(props: Props): ReactNode {
   return (
     <>
       
diff --git a/packages/docusaurus-theme-classic/src/theme/DocsRoot/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocsRoot/index.tsx
index ea65d7414f17..12f4a435571d 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocsRoot/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocsRoot/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 {ThemeClassNames, HtmlClassNameProvider} from '@docusaurus/theme-common';
 import renderRoutes from '@docusaurus/renderRoutes';
@@ -13,7 +13,7 @@ import Layout from '@theme/Layout';
 
 import type {Props} from '@theme/DocVersionRoot';
 
-export default function DocsRoot(props: Props): JSX.Element {
+export default function DocsRoot(props: Props): ReactNode {
   return (
     
       {renderRoutes(props.route.routes!)}
diff --git a/packages/docusaurus-theme-classic/src/theme/EditMetaRow/index.tsx b/packages/docusaurus-theme-classic/src/theme/EditMetaRow/index.tsx
index c526138f9bf2..78d3206c2f77 100644
--- a/packages/docusaurus-theme-classic/src/theme/EditMetaRow/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/EditMetaRow/index.tsx
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * 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 EditThisPage from '@theme/EditThisPage';
 import type {Props} from '@theme/EditMetaRow';
@@ -17,7 +17,7 @@ export default function EditMetaRow({
   editUrl,
   lastUpdatedAt,
   lastUpdatedBy,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     

       
{editUrl && }

diff --git a/packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx
index 1fbfb173ab5f..1d0e58934914 100644
--- a/packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx
@@ -5,14 +5,14 @@
  * 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 {ThemeClassNames} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import IconEdit from '@theme/Icon/Edit';
 import type {Props} from '@theme/EditThisPage';
 
-export default function EditThisPage({editUrl}: Props): JSX.Element {
+export default function EditThisPage({editUrl}: Props): ReactNode {
   return (
     
       
diff --git a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
index b4134fa744bd..ba629d8c26d6 100644
--- a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.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 Translate from '@docusaurus/Translate';
 import {
   ErrorBoundaryError,
@@ -14,10 +14,7 @@ import {
 import type {Props} from '@theme/Error';
 import Heading from '@theme/Heading';
 
-export default function ErrorPageContent({
-  error,
-  tryAgain,
-}: Props): JSX.Element {
+export default function ErrorPageContent({error, tryAgain}: Props): ReactNode {
   return (
     

       

diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/Copyright/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/Copyright/index.tsx
index ab1657d97811..85314920b9d8 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/Copyright/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/Copyright/index.tsx
@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import type {Props} from '@theme/Footer/Copyright';
 
-export default function FooterCopyright({copyright}: Props): JSX.Element {
+export default function FooterCopyright({copyright}: Props): ReactNode {
   return (
     

       {columns.map((column, i) => (
diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/Links/Simple/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/Links/Simple/index.tsx
index e14b77f1f31d..fcb98352e6be 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/Links/Simple/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/Links/Simple/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 LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/Simple';
 
@@ -26,7 +26,7 @@ function SimpleLinkItem({item}: {item: Props['links'][number]}) {
   );
 }
 
-export default function FooterLinksSimple({links}: Props): JSX.Element {
+export default function FooterLinksSimple({links}: Props): ReactNode {
   return (
     

       

diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/Links/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/Links/index.tsx
index a4b0f3354c23..203f2b773f02 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/Links/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/Links/index.tsx
@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 
 import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
 import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
 import FooterLinksSimple from '@theme/Footer/Links/Simple';
 import type {Props} from '@theme/Footer/Links';
 
-export default function FooterLinks({links}: Props): JSX.Element {
+export default function FooterLinks({links}: Props): ReactNode {
   return isMultiColumnFooterLinks(links) ? (
     
   ) : (
diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/Logo/index.tsx
index ebd8e9fa3233..85d7b0d670d7 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/Logo/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/Logo/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 Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
@@ -32,7 +32,7 @@ function LogoImage({logo}: Props) {
   );
 }
 
-export default function FooterLogo({logo}: Props): JSX.Element {
+export default function FooterLogo({logo}: Props): ReactNode {
   return logo.href ? (
     
       
diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Close/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Close/index.tsx
index 45dee06185f1..3858c40dfbfa 100644
--- a/packages/docusaurus-theme-classic/src/theme/Icon/Close/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Icon/Close/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 type {Props} from '@theme/Icon/Close';
 
 export default function IconClose({
@@ -15,7 +15,7 @@ export default function IconClose({
   strokeWidth = 1.2,
   className,
   ...restProps
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     
       
diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Copy/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Copy/index.tsx
index 9636ea9a149d..87f954403e67 100644
--- a/packages/docusaurus-theme-classic/src/theme/Icon/Copy/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Icon/Copy/index.tsx
@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import type {Props} from '@theme/Icon/Copy';
 
-export default function IconCopy(props: Props): JSX.Element {
+export default function IconCopy(props: Props): ReactNode {
   return (
     
       
       
       
       ): JSX.Element {
+function DefaultSocial(props: SVGProps): ReactNode {
   return (
     ): JSX.Element {
+function GitHub(props: SVGProps): ReactNode {
   return (
     ): JSX.Element {
+function LinkedIn(props: SVGProps): ReactNode {
   return (
     ): JSX.Element {
+function StackOverflow(props: SVGProps): ReactNode {
   return (
     ): JSX.Element {
+function Twitter(props: SVGProps): ReactNode {
   return (
     ): JSX.Element {
+function X(props: SVGProps): ReactNode {
   return (
     
       
       
       {children};
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index cf460364766f..c51cbcc36ddc 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/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 ErrorBoundary from '@docusaurus/ErrorBoundary';
 import {
@@ -23,7 +23,7 @@ import ErrorPageContent from '@theme/ErrorPageContent';
 import type {Props} from '@theme/Layout';
 import styles from './styles.module.css';
 
-export default function Layout(props: Props): JSX.Element {
+export default function Layout(props: Props): ReactNode {
   const {
     children,
     noFooter,
diff --git a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx
index 56b695a0a8ef..096541164c6b 100644
--- a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Logo/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 Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -46,7 +46,7 @@ function LogoThemedImage({
   );
 }
 
-export default function Logo(props: Props): JSX.Element {
+export default function Logo(props: Props): ReactNode {
   const {
     siteConfig: {title},
   } = useDocusaurusContext();
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/A.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/A.tsx
index 9ee8333e6c80..75fe616e66d5 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/A.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/A.tsx
@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/MDXComponents/A';
 
-export default function MDXA(props: Props): JSX.Element {
+export default function MDXA(props: Props): ReactNode {
   return ;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
index c666174b9cef..c97949c59276 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ComponentProps} from 'react';
+import type {ComponentProps, ReactNode} from 'react';
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import CodeInline from '@theme/CodeInline';
@@ -22,7 +22,7 @@ function shouldBeInline(props: Props) {
   );
 }
 
-export default function MDXCode(props: Props): JSX.Element {
+export default function MDXCode(props: Props): ReactNode {
   return shouldBeInline(props) ? (
     
   ) : (
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Details.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Details.tsx
index 9b90d4cafb2c..946aa07bb648 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Details.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Details.tsx
@@ -5,11 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps, type ReactElement} from 'react';
+import React, {
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
 import Details from '@theme/Details';
 import type {Props} from '@theme/MDXComponents/Details';
 
-export default function MDXDetails(props: Props): JSX.Element {
+export default function MDXDetails(props: Props): ReactNode {
   const items = React.Children.toArray(props.children);
   // Split summary item from the rest to pass it as a separate prop to the
   // Details theme component
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Heading.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Heading.tsx
index 2b6c433bc5fc..ecd3612f843e 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Heading.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Heading.tsx
@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Heading from '@theme/Heading';
 import type {Props} from '@theme/MDXComponents/Heading';
 
-export default function MDXHeading(props: Props): JSX.Element {
+export default function MDXHeading(props: Props): ReactNode {
   return ;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/index.tsx
index 6eea009d0e10..a0e6c3bd8409 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/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 type {Props} from '@theme/MDXComponents/Img';
 
@@ -15,7 +15,7 @@ function transformImgClassName(className?: string): string {
   return clsx(className, styles.img);
 }
 
-export default function MDXImg(props: Props): JSX.Element {
+export default function MDXImg(props: Props): ReactNode {
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
     ;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx
index ad70107193db..3b2b7abe7563 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXContent/index.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 {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
 import type {Props} from '@theme/MDXContent';
 
-export default function MDXContent({children}: Props): JSX.Element {
+export default function MDXContent({children}: Props): ReactNode {
   return {children};
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index 737c0bccbd62..a862907dc8b8 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/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 {
   PageMetadata,
@@ -21,7 +21,7 @@ import type {Props} from '@theme/MDXPage';
 import EditMetaRow from '@theme/EditMetaRow';
 import styles from './styles.module.css';
 
-export default function MDXPage(props: Props): JSX.Element {
+export default function MDXPage(props: Props): ReactNode {
   const {content: MDXPageContent} = props;
   const {metadata, assets} = MDXPageContent;
   const {
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx
index 8e313b3a1960..0108a20e9dc0 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx
@@ -5,15 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
 import type {Props} from '@theme/Navbar/ColorModeToggle';
 import styles from './styles.module.css';
 
-export default function NavbarColorModeToggle({
-  className,
-}: Props): JSX.Element | null {
+export default function NavbarColorModeToggle({className}: Props): ReactNode {
   const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
index ddc0972c67ff..b4fcc735abf0 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
@@ -25,7 +25,7 @@ function useNavbarItems() {
   return useThemeConfig().navbar.items as NavbarItemConfig[];
 }
 
-function NavbarItems({items}: {items: NavbarItemConfig[]}): JSX.Element {
+function NavbarItems({items}: {items: NavbarItemConfig[]}): ReactNode {
   return (
     <>
       {items.map((item, i) => (
@@ -61,7 +61,7 @@ function NavbarContentLayout({
   );
 }
 
-export default function NavbarContent(): JSX.Element {
+export default function NavbarContent(): ReactNode {
   const mobileSidebar = useNavbarMobileSidebar();
 
   const items = useNavbarItems();
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx
index 6632be07a421..7ec271d9dfba 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.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 clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {
@@ -28,7 +28,7 @@ function NavbarBackdrop(props: ComponentProps<'div'>) {
   );
 }
 
-export default function NavbarLayout({children}: Props): JSX.Element {
+export default function NavbarLayout({children}: Props): ReactNode {
   const {
     navbar: {hideOnScroll, style},
   } = useThemeConfig();
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx
index 9c04ea9be729..81e0cfd9f872 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx
@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Logo from '@theme/Logo';
 
-export default function NavbarLogo(): JSX.Element {
+export default function NavbarLogo(): ReactNode {
   return (
     
       
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
index b3bbaec8fae0..27627fdbd397 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/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 {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
@@ -14,7 +14,7 @@ export default function NavbarMobileSidebarLayout({
   header,
   primaryMenu,
   secondaryMenu,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
   return (
     

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
index 5b3c180b7506..22e5622b4dc6 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/PrimaryMenu/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 {useThemeConfig} from '@docusaurus/theme-common';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
@@ -16,7 +16,7 @@ function useNavbarItems() {
 }
 
 // The primary menu displays the navbar items
-export default function NavbarMobilePrimaryMenu(): JSX.Element {
+export default function NavbarMobilePrimaryMenu(): ReactNode {
   const mobileSidebar = useNavbarMobileSidebar();
 
   // TODO how can the order be defined for mobile?
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
index 3fe85e1a9b45..4652438e625a 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.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 {useThemeConfig} from '@docusaurus/theme-common';
 import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import Translate from '@docusaurus/Translate';
@@ -24,7 +24,7 @@ function SecondaryMenuBackButton(props: ComponentProps<'button'>) {
 
 // The secondary menu slides from the right and shows contextual information
 // such as the docs sidebar
-export default function NavbarMobileSidebarSecondaryMenu(): JSX.Element | null {
+export default function NavbarMobileSidebarSecondaryMenu(): ReactNode {
   const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0;
   const secondaryMenu = useNavbarSecondaryMenu();
   return (
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Toggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
index ed7b2cfc70d8..56c3262a0442 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import IconMenu from '@theme/Icon/Menu';
 
-export default function MobileSidebarToggle(): JSX.Element {
+export default function MobileSidebarToggle(): ReactNode {
   const {toggle, shown} = useNavbarMobileSidebar();
   return (