@docusaurus/theme-classic 3.6.3 → 3.7.0

package/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();

package/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();

package/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();

package/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 (
     <Logo
       className="navbar__brand"

package/src/theme/Navbar/MobileSidebar/Header/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 {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
@@ -29,7 +29,7 @@ function CloseButton() {
   );
 }
 
-export default function NavbarMobileSidebarHeader(): JSX.Element {
+export default function NavbarMobileSidebarHeader(): ReactNode {
   return (
     <div className="navbar-sidebar__brand">
       <NavbarLogo />

package/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 (
     <div className="navbar-sidebar">

package/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?

package/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 (

package/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 (
     <button

package/src/theme/Navbar/MobileSidebar/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 {
   useLockBodyScroll,
   useNavbarMobileSidebar,
@@ -15,7 +15,7 @@ import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
 import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';
 import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu';
 
-export default function NavbarMobileSidebar(): JSX.Element | null {
+export default function NavbarMobileSidebar(): ReactNode {
   const mobileSidebar = useNavbarMobileSidebar();
   useLockBodyScroll(mobileSidebar.shown);
 

package/src/theme/Navbar/Search/index.tsx

@@ -5,16 +5,13 @@
  * 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/Navbar/Search';
 
 import styles from './styles.module.css';
 
-export default function NavbarSearch({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function NavbarSearch({children, className}: Props): ReactNode {
   return (
     <div className={clsx(className, styles.navbarSearchContainer)}>
       {children}

package/src/theme/Navbar/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 NavbarLayout from '@theme/Navbar/Layout';
 import NavbarContent from '@theme/Navbar/Content';
 
-export default function Navbar(): JSX.Element {
+export default function Navbar(): ReactNode {
   return (
     <NavbarLayout>
       <NavbarContent />

package/src/theme/NavbarItem/DefaultNavbarItem.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 NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import type {
@@ -52,7 +52,7 @@ export default function DefaultNavbarItem({
   mobile = false,
   position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
   return (
     <Comp

package/src/theme/NavbarItem/DocNavbarItem.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 {
   useActiveDocContext,
   useLayoutDoc,
@@ -18,7 +18,7 @@ export default function DocNavbarItem({
   label: staticLabel,
   docsPluginId,
   ...props
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   const {activeDoc} = useActiveDocContext(docsPluginId);
   const doc = useLayoutDoc(docId, docsPluginId);
   const pageActive = activeDoc?.path === doc?.path;

package/src/theme/NavbarItem/DocSidebarNavbarItem.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 {
   useActiveDocContext,
   useLayoutDocsSidebar,
@@ -18,7 +18,7 @@ export default function DocSidebarNavbarItem({
   label,
   docsPluginId,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {activeDoc} = useActiveDocContext(docsPluginId);
   const sidebarLink = useLayoutDocsSidebar(sidebarId, docsPluginId).link;
   if (!sidebarLink) {

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.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 {
   useVersions,
   useActiveDocContext,
@@ -47,7 +47,7 @@ export default function DocsVersionDropdownNavbarItem({
   dropdownItemsBefore,
   dropdownItemsAfter,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {search, hash} = useLocation();
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);

package/src/theme/NavbarItem/DocsVersionNavbarItem.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 {useDocsVersionCandidates} from '@docusaurus/plugin-content-docs/client';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import type {Props} from '@theme/NavbarItem/DocsVersionNavbarItem';
@@ -19,7 +19,7 @@ export default function DocsVersionNavbarItem({
   to: staticTo,
   docsPluginId,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const version = useDocsVersionCandidates(docsPluginId)[0];
   const label = staticLabel ?? version.label;
   const path = staticTo ?? getVersionMainDoc(version).path;

package/src/theme/NavbarItem/DropdownNavbarItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, useEffect} from 'react';
+import React, {useState, useRef, useEffect, type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   isRegexpStringMatch,
@@ -177,7 +177,7 @@ function DropdownNavbarItemMobile({
 export default function DropdownNavbarItem({
   mobile = false,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
   return <Comp {...props} />;
 }

package/src/theme/NavbarItem/HtmlNavbarItem.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/NavbarItem/HtmlNavbarItem';
@@ -15,7 +15,7 @@ export default function HtmlNavbarItem({
   className,
   mobile = false,
   isDropdownItem = false,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const Comp = isDropdownItem ? 'li' : 'div';
   return (
     <Comp

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
@@ -23,7 +23,7 @@ export default function LocaleDropdownNavbarItem({
   dropdownItemsAfter,
   queryString = '',
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {
     i18n: {currentLocale, locales, localeConfigs},
   } = useDocusaurusContext();

package/src/theme/NavbarItem/NavbarNavLink.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 isInternalUrl from '@docusaurus/isInternalUrl';
@@ -23,7 +23,7 @@ export default function NavbarNavLink({
   isDropdownLink,
   prependBaseUrlToHref,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   // TODO all this seems hacky
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
   const toUrl = useBaseUrl(to);

package/src/theme/NavbarItem/SearchNavbarItem.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 SearchBar from '@theme/SearchBar';
 import NavbarSearch from '@theme/Navbar/Search';
 import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
@@ -13,7 +13,7 @@ import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 export default function SearchNavbarItem({
   mobile,
   className,
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   if (mobile) {
     return null;
   }

package/src/theme/NavbarItem/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 ComponentTypes from '@theme/NavbarItem/ComponentTypes';
 import type {NavbarItemType, Props} from '@theme/NavbarItem';
 
@@ -18,7 +18,7 @@ function normalizeComponentType(type: NavbarItemType, props: object) {
   return type;
 }
 
-export default function NavbarItem({type, ...props}: Props): JSX.Element {
+export default function NavbarItem({type, ...props}: Props): ReactNode {
   const componentType = normalizeComponentType(type, props);
   const NavbarItemComponent = ComponentTypes[componentType];
   if (!NavbarItemComponent) {

package/src/theme/NotFound/Content/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 clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/NotFound/Content';
 import Heading from '@theme/Heading';
 
-export default function NotFoundContent({className}: Props): JSX.Element {
+export default function NotFoundContent({className}: Props): ReactNode {
   return (
     <main className={clsx('container margin-vert--xl', className)}>
       <div className="row">

package/src/theme/NotFound/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 {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import NotFoundContent from '@theme/NotFound/Content';
 
-export default function Index(): JSX.Element {
+export default function Index(): ReactNode {
   const title = translate({
     id: 'theme.NotFound.title',
     message: 'Page Not Found',

package/src/theme/PaginatorNavLink/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 clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/PaginatorNavLink';
 
-export default function PaginatorNavLink(props: Props): JSX.Element {
+export default function PaginatorNavLink(props: Props): ReactNode {
   const {permalink, title, subLabel, isNext} = props;
   return (
     <Link

package/src/theme/SearchMetadata/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 Head from '@docusaurus/Head';
 import type {Props} from '@theme/SearchMetadata';
@@ -19,7 +19,7 @@ export default function SearchMetadata({
   locale,
   version,
   tag,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   // Seems safe to consider here the locale is the language, as the existing
   // docsearch:language filter is afaik a regular string-based filter
   const language = locale;

package/src/theme/SiteMetadata/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 Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -23,7 +23,7 @@ import SearchMetadata from '@theme/SearchMetadata';
 // Useful for i18n/SEO
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
 // See https://github.com/facebook/docusaurus/issues/3317
-function AlternateLangHeaders(): JSX.Element {
+function AlternateLangHeaders(): ReactNode {
   const {
     i18n: {currentLocale, defaultLocale, localeConfigs},
   } = useDocusaurusContext();
@@ -115,7 +115,7 @@ function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
   );
 }
 
-export default function SiteMetadata(): JSX.Element {
+export default function SiteMetadata(): ReactNode {
   const {
     i18n: {currentLocale},
   } = useDocusaurusContext();

package/src/theme/SkipToContent/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 {SkipToContentLink} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 
-export default function SkipToContent(): JSX.Element {
+export default function SkipToContent(): ReactNode {
   return <SkipToContentLink className={styles.skipToContent} />;
 }

package/src/theme/TOC/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 TOCItems from '@theme/TOCItems';
 import type {Props} from '@theme/TOC';
@@ -17,7 +17,7 @@ import styles from './styles.module.css';
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-export default function TOC({className, ...props}: Props): JSX.Element {
+export default function TOC({className, ...props}: Props): ReactNode {
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <TOCItems

package/src/theme/TOCCollapsible/CollapseButton/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/TOCCollapsible/CollapseButton';
@@ -15,7 +15,7 @@ import styles from './styles.module.css';
 export default function TOCCollapsibleCollapseButton({
   collapsed,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <button
       type="button"

package/src/theme/TOCCollapsible/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 {useCollapsible, Collapsible} from '@docusaurus/theme-common';
 import TOCItems from '@theme/TOCItems';
@@ -19,7 +19,7 @@ export default function TOCCollapsible({
   className,
   minHeadingLevel,
   maxHeadingLevel,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });

package/src/theme/TOCInline/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 TOCItems from '@theme/TOCItems';
 import type {Props} from '@theme/TOCInline';
 
@@ -15,7 +15,7 @@ export default function TOCInline({
   toc,
   minHeadingLevel,
   maxHeadingLevel,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <div className={styles.tableOfContentsInline}>
       <TOCItems

package/src/theme/TOCItems/Tree.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 type {Props} from '@theme/TOCItems/Tree';
 
@@ -15,7 +15,7 @@ function TOCItemTree({
   className,
   linkClassName,
   isChild,
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   if (!toc.length) {
     return null;
   }

package/src/theme/TOCItems/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useMemo} from 'react';
+import React, {type ReactNode, useMemo} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {
   useTOCHighlight,
@@ -23,7 +23,7 @@ export default function TOCItems({
   minHeadingLevel: minHeadingLevelOption,
   maxHeadingLevel: maxHeadingLevelOption,
   ...props
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   const themeConfig = useThemeConfig();
 
   const minHeadingLevel =