@docusaurus/theme-classic 3.6.3 → 3.7.0

package/src/theme/DocSidebarItem/Link/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 {isActiveSidebarItem} from '@docusaurus/plugin-content-docs/client';
@@ -23,7 +23,7 @@ export default function DocSidebarItemLink({
   level,
   index,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {href, label, className, autoAddBaseUrl} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);

package/src/theme/DocSidebarItem/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 DocSidebarItemCategory from '@theme/DocSidebarItem/Category';
 import DocSidebarItemLink from '@theme/DocSidebarItem/Link';
 import DocSidebarItemHtml from '@theme/DocSidebarItem/Html';
 import type {Props} from '@theme/DocSidebarItem';
 
-export default function DocSidebarItem({
-  item,
-  ...props
-}: Props): JSX.Element | null {
+export default function DocSidebarItem({item, ...props}: Props): ReactNode {
   switch (item.type) {
     case 'category':
       return <DocSidebarItemCategory item={item} {...props} />;

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

package/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 (
     <article className="margin-vert--lg">
       <Link to={doc.permalink}>
@@ -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 (
     <>
       <PageMetadata title={title} description={tag.description} />
@@ -76,7 +76,7 @@ function DocTagDocListPageMetadata({
 function DocTagDocListPageContent({
   tag,
   title,
-}: Props & {title: string}): JSX.Element {
+}: Props & {title: string}): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(ThemeClassNames.page.docsTagDocListPage)}>
@@ -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 (
     <>

package/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 (
     <>
       <PageMetadata title={title} />
@@ -32,7 +30,7 @@ function DocTagsListPageMetadata({
 function DocTagsListPageContent({
   tags,
   title,
-}: Props & {title: string}): JSX.Element {
+}: Props & {title: string}): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(ThemeClassNames.page.docsTagsListPage)}>
@@ -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 (
     <>

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

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

package/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 (
     <HtmlClassNameProvider className={version.className}>
@@ -41,7 +41,7 @@ function DocVersionRootContent(props: Props): JSX.Element {
     </HtmlClassNameProvider>
   );
 }
-export default function DocVersionRoot(props: Props): JSX.Element {
+export default function DocVersionRoot(props: Props): ReactNode {
   return (
     <>
       <DocVersionRootMetadata {...props} />

package/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 (
     <HtmlClassNameProvider className={clsx(ThemeClassNames.wrapper.docsPages)}>
       <Layout>{renderRoutes(props.route.routes!)}</Layout>

package/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 (
     <div className={clsx('row', className)}>
       <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>

package/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 (
     <Link to={editUrl} className={ThemeClassNames.common.editThisPage}>
       <IconEdit />

package/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 (
     <main className="container margin-vert--xl">
       <div className="row">

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

package/src/theme/Footer/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 type {Props} from '@theme/Footer/Layout';
 
@@ -14,7 +14,7 @@ export default function FooterLayout({
   links,
   logo,
   copyright,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <footer
       className={clsx('footer', {

package/src/theme/Footer/LinkItem/index.tsx

@@ -5,22 +5,22 @@
  * 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 useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/Footer/LinkItem';
 
-export default function FooterLinkItem({item}: Props): JSX.Element {
-  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+export default function FooterLinkItem({item}: Props): ReactNode {
+  const {to, href, label, prependBaseUrlToHref, className, ...props} = item;
   const toUrl = useBaseUrl(to);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
 
   return (
     <Link
-      className="footer__link-item"
+      className={clsx('footer__link-item', className)}
       {...(href
         ? {
             href: prependBaseUrlToHref ? normalizedHref : href,

package/src/theme/Footer/Links/MultiColumn/index.tsx

@@ -5,7 +5,8 @@
  * 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 LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/MultiColumn';
 
@@ -15,7 +16,7 @@ type ColumnItemType = ColumnType['items'][number];
 function ColumnLinkItem({item}: {item: ColumnItemType}) {
   return item.html ? (
     <li
-      className="footer__item"
+      className={clsx('footer__item', item.className)}
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: item.html}}
@@ -29,7 +30,7 @@ function ColumnLinkItem({item}: {item: ColumnItemType}) {
 
 function Column({column}: {column: ColumnType}) {
   return (
-    <div className="col footer__col">
+    <div className={clsx('col footer__col', column.className)}>
       <div className="footer__title">{column.title}</div>
       <ul className="footer__items clean-list">
         {column.items.map((item, i) => (
@@ -40,7 +41,7 @@ function Column({column}: {column: ColumnType}) {
   );
 }
 
-export default function FooterLinksMultiColumn({columns}: Props): JSX.Element {
+export default function FooterLinksMultiColumn({columns}: Props): ReactNode {
   return (
     <div className="row footer__links">
       {columns.map((column, i) => (

package/src/theme/Footer/Links/Simple/index.tsx

@@ -5,7 +5,8 @@
  * 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 LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/Simple';
 
@@ -16,7 +17,7 @@ function Separator() {
 function SimpleLinkItem({item}: {item: Props['links'][number]}) {
   return item.html ? (
     <span
-      className="footer__link-item"
+      className={clsx('footer__link-item', item.className)}
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: item.html}}
@@ -26,7 +27,7 @@ function SimpleLinkItem({item}: {item: Props['links'][number]}) {
   );
 }
 
-export default function FooterLinksSimple({links}: Props): JSX.Element {
+export default function FooterLinksSimple({links}: Props): ReactNode {
   return (
     <div className="footer__links text--center">
       <div className="footer__links">

package/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) ? (
     <FooterLinksMultiColumn columns={links} />
   ) : (

package/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 ? (
     <Link
       href={logo.href}

package/src/theme/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 {useThemeConfig} from '@docusaurus/theme-common';
 import FooterLinks from '@theme/Footer/Links';
@@ -13,7 +13,7 @@ import FooterLogo from '@theme/Footer/Logo';
 import FooterCopyright from '@theme/Footer/Copyright';
 import FooterLayout from '@theme/Footer/Layout';
 
-function Footer(): JSX.Element | null {
+function Footer(): ReactNode {
   const {footer} = useThemeConfig();
   if (!footer) {
     return null;

package/src/theme/Heading/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 {useThemeConfig} from '@docusaurus/theme-common';
@@ -15,7 +15,7 @@ import type {Props} from '@theme/Heading';
 
 import styles from './styles.module.css';
 
-export default function Heading({as: As, id, ...props}: Props): JSX.Element {
+export default function Heading({as: As, id, ...props}: Props): ReactNode {
   const brokenLinks = useBrokenLinks();
   const {
     navbar: {hideOnScroll},

package/src/theme/Icon/Arrow/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/Arrow';
 
-export default function IconArrow(props: Props): JSX.Element {
+export default function IconArrow(props: Props): ReactNode {
   return (
     <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">

package/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 (
     <svg viewBox="0 0 15 15" width={width} height={height} {...restProps}>
       <g stroke={color} strokeWidth={strokeWidth}>

package/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 (
     <svg viewBox="0 0 24 24" {...props}>
       <path

package/src/theme/Icon/DarkMode/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/DarkMode';
 
-export default function IconDarkMode(props: Props): JSX.Element {
+export default function IconDarkMode(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
       <path

package/src/theme/Icon/Edit/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/Icon/Edit';
 
 import styles from './styles.module.css';
 
-export default function IconEdit({
-  className,
-  ...restProps
-}: Props): JSX.Element {
+export default function IconEdit({className, ...restProps}: Props): ReactNode {
   return (
     <svg
       fill="currentColor"

package/src/theme/Icon/ExternalLink/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/ExternalLink';
 
 import styles from './styles.module.css';
@@ -13,7 +13,7 @@ import styles from './styles.module.css';
 export default function IconExternalLink({
   width = 13.5,
   height = 13.5,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <svg
       width={width}

package/src/theme/Icon/Home/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/Home';
 
-export default function IconHome(props: Props): JSX.Element {
+export default function IconHome(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 24 24" {...props}>
       <path

package/src/theme/Icon/Language/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 type {Props} from '@theme/Icon/Language';
 
 export default function IconLanguage({
   width = 20,
   height = 20,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <svg
       viewBox="0 0 24 24"

package/src/theme/Icon/LightMode/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/LightMode';
 
-export default function IconLightMode(props: Props): JSX.Element {
+export default function IconLightMode(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
       <path