@docusaurus/theme-classic 3.6.3 → 3.7.0

package/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 = '';
   }

package/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',

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

package/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 <code {...props} />;
 }

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

package/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 (
     <Admonition
       type="caution"

package/src/theme/ContentVisibility/Unlisted/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,
@@ -27,7 +27,7 @@ function UnlistedBanner({className}: Props) {
   );
 }
 
-export default function Unlisted(props: Props): JSX.Element | null {
+export default function Unlisted(props: Props): ReactNode {
   return (
     <>
       {/*

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

package/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 (
     <DetailsGeneric
       {...props}

package/src/theme/DocBreadcrumbs/Items/Home/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 {translate} from '@docusaurus/Translate';
@@ -13,7 +13,7 @@ import IconHome from '@theme/Icon/Home';
 
 import styles from './styles.module.css';
 
-export default function HomeBreadcrumbItem(): JSX.Element {
+export default function HomeBreadcrumbItem(): ReactNode {
   const homeHref = useBaseUrl('/');
 
   return (

package/src/theme/DocBreadcrumbs/index.tsx

@@ -25,7 +25,7 @@ function BreadcrumbsItemLink({
   children: ReactNode;
   href: string | undefined;
   isLast: boolean;
-}): JSX.Element {
+}): ReactNode {
   const className = 'breadcrumbs__link';
   if (isLast) {
     return (
@@ -59,7 +59,7 @@ function BreadcrumbsItem({
   active?: boolean;
   index: number;
   addMicrodata: boolean;
-}): JSX.Element {
+}): ReactNode {
   return (
     <li
       {...(addMicrodata && {
@@ -76,7 +76,7 @@ function BreadcrumbsItem({
   );
 }
 
-export default function DocBreadcrumbs(): JSX.Element | null {
+export default function DocBreadcrumbs(): ReactNode {
   const breadcrumbs = useSidebarBreadcrumbs();
   const homePageRoute = useHomePageRoute();
 

package/src/theme/DocCard/index.tsx

@@ -48,7 +48,7 @@ function CardContainer({
 }: {
   href: string;
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   return (
     <Link
       href={href}
@@ -68,7 +68,7 @@ function CardLayout({
   icon: ReactNode;
   title: string;
   description?: string;
-}): JSX.Element {
+}): ReactNode {
   return (
     <CardContainer href={href}>
       <Heading
@@ -88,11 +88,7 @@ function CardLayout({
   );
 }
 
-function CardCategory({
-  item,
-}: {
-  item: PropSidebarItemCategory;
-}): JSX.Element | null {
+function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
   const href = findFirstSidebarItemLink(item);
   const categoryItemsPlural = useCategoryItemsPlural();
 
@@ -111,7 +107,7 @@ function CardCategory({
   );
 }
 
-function CardLink({item}: {item: PropSidebarItemLink}): JSX.Element {
+function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
   const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
   const doc = useDocById(item.docId ?? undefined);
   return (
@@ -124,7 +120,7 @@ function CardLink({item}: {item: PropSidebarItemLink}): JSX.Element {
   );
 }
 
-export default function DocCard({item}: Props): JSX.Element {
+export default function DocCard({item}: Props): ReactNode {
   switch (item.type) {
     case 'link':
       return <CardLink item={item} />;

package/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 <DocCardList items={category.items} className={className} />;
 }
 
-export default function DocCardList(props: Props): JSX.Element {
+export default function DocCardList(props: Props): ReactNode {
   const {items, className} = props;
   if (!items) {
     return <DocCardListForCurrentSidebarCategory {...props} />;

package/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 (
     <PageMetadata
       title={categoryGeneratedIndex.title}
@@ -35,7 +35,7 @@ function DocCategoryGeneratedIndexPageMetadata({
 
 function DocCategoryGeneratedIndexPageContent({
   categoryGeneratedIndex,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const category = useCurrentSidebarCategory();
   return (
     <div className={styles.generatedIndexPage}>
@@ -63,9 +63,7 @@ function DocCategoryGeneratedIndexPageContent({
   );
 }
 
-export default function DocCategoryGeneratedIndexPage(
-  props: Props,
-): JSX.Element {
+export default function DocCategoryGeneratedIndexPage(props: Props): ReactNode {
   return (
     <>
       <DocCategoryGeneratedIndexPageMetadata {...props} />

package/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 (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>

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

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

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

package/src/theme/DocItem/Paginator/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 {useDoc} from '@docusaurus/plugin-content-docs/client';
 import DocPaginator from '@theme/DocPaginator';
 
@@ -13,7 +13,7 @@ import DocPaginator from '@theme/DocPaginator';
  * This extra component is needed, because <DocPaginator> 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 <DocPaginator previous={metadata.previous} next={metadata.next} />;
 }

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

package/src/theme/DocItem/TOC/Mobile/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';
@@ -14,7 +14,7 @@ import TOCCollapsible from '@theme/TOCCollapsible';
 
 import styles from './styles.module.css';
 
-export default function DocItemTOCMobile(): JSX.Element {
+export default function DocItemTOCMobile(): ReactNode {
   const {toc, frontMatter} = useDoc();
   return (
     <TOCCollapsible

package/src/theme/DocItem/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 {HtmlClassNameProvider} from '@docusaurus/theme-common';
 import {DocProvider} from '@docusaurus/plugin-content-docs/client';
 import DocItemMetadata from '@theme/DocItem/Metadata';
 import DocItemLayout from '@theme/DocItem/Layout';
 import type {Props} from '@theme/DocItem';
 
-export default function DocItem(props: Props): JSX.Element {
+export default function DocItem(props: Props): ReactNode {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
   const MDXComponent = props.content;
   return (

package/src/theme/DocPaginator/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/DocPaginator';
 
-export default function DocPaginator(props: Props): JSX.Element {
+export default function DocPaginator(props: Props): ReactNode {
   const {previous, next} = props;
   return (
     <nav

package/src/theme/DocRoot/Layout/Main/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 {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
 import type {Props} from '@theme/DocRoot/Layout/Main';
@@ -15,7 +15,7 @@ import styles from './styles.module.css';
 export default function DocRootLayoutMain({
   hiddenSidebarContainer,
   children,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const sidebar = useDocsSidebar();
   return (
     <main

package/src/theme/DocRoot/Layout/Sidebar/ExpandButton/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 {translate} from '@docusaurus/Translate';
 import IconArrow from '@theme/Icon/Arrow';
 import type {Props} from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
@@ -14,7 +14,7 @@ import styles from './styles.module.css';
 
 export default function DocRootLayoutSidebarExpandButton({
   toggleSidebar,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <div
       className={styles.expandButton}

package/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -32,7 +32,7 @@ export default function DocRootLayoutSidebar({
   sidebar,
   hiddenSidebarContainer,
   setHiddenSidebarContainer,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {pathname} = useLocation();
 
   const [hiddenSidebar, setHiddenSidebar] = useState(false);

package/src/theme/DocRoot/Layout/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React, {type ReactNode, useState} from 'react';
 import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
 import BackToTopButton from '@theme/BackToTopButton';
 import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
@@ -14,7 +14,7 @@ import type {Props} from '@theme/DocRoot/Layout';
 
 import styles from './styles.module.css';
 
-export default function DocRootLayout({children}: Props): JSX.Element {
+export default function DocRootLayout({children}: Props): ReactNode {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   return (

package/src/theme/DocRoot/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 {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
 import {
@@ -16,7 +16,7 @@ import DocRootLayout from '@theme/DocRoot/Layout';
 import NotFoundContent from '@theme/NotFound/Content';
 import type {Props} from '@theme/DocRoot';
 
-export default function DocRoot(props: Props): JSX.Element {
+export default function DocRoot(props: Props): ReactNode {
   const currentDocRouteMetadata = useDocRootMetadata(props);
   if (!currentDocRouteMetadata) {
     // We only render the not found content to avoid a double layout

package/src/theme/DocSidebar/Desktop/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 IconArrow from '@theme/Icon/Arrow';
@@ -13,7 +13,7 @@ import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton';
 
 import styles from './styles.module.css';
 
-export default function CollapseButton({onClick}: Props): JSX.Element {
+export default function CollapseButton({onClick}: Props): ReactNode {
   return (
     <button
       type="button"

package/src/theme/DocSidebar/Desktop/Content/index.tsx

@@ -5,7 +5,7 @@
  * 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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {
@@ -37,7 +37,7 @@ export default function DocSidebarDesktopContent({
   path,
   sidebar,
   className,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const showAnnouncementBar = useShowAnnouncementBar();
 
   return (

package/src/theme/DocSidebar/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 {useWindowSize} from '@docusaurus/theme-common';
 import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
 import DocSidebarMobile from '@theme/DocSidebar/Mobile';
 import type {Props} from '@theme/DocSidebar';
 
-export default function DocSidebar(props: Props): JSX.Element {
+export default function DocSidebar(props: Props): ReactNode {
   const windowSize = useWindowSize();
 
   // Desktop sidebar visible on hydration: need SSR rendering

package/src/theme/DocSidebarItem/Category/index.tsx

@@ -5,7 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps, useEffect, useMemo} from 'react';
+import React, {
+  type ComponentProps,
+  type ReactNode,
+  useEffect,
+  useMemo,
+} from 'react';
 import clsx from 'clsx';
 import {
   ThemeClassNames,
@@ -116,7 +121,7 @@ export default function DocSidebarItemCategory({
   level,
   index,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {items, label, collapsible, className, href} = item;
   const {
     docs: {

package/src/theme/DocSidebarItem/Html/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 type {Props} from '@theme/DocSidebarItem/Html';
@@ -16,7 +16,7 @@ export default function DocSidebarItemHtml({
   item,
   level,
   index,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {value, defaultStyle, className} = item;
   return (
     <li