@docusaurus/theme-classic 2.0.0-beta.21 → 2.0.0-beta.22

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

@@ -8,16 +8,18 @@
 import React, {type ComponentProps, useEffect, useMemo} from 'react';
 import clsx from 'clsx';
 import {
-  isActiveSidebarItem,
+  ThemeClassNames,
+  useThemeConfig,
   usePrevious,
   Collapsible,
   useCollapsible,
+} from '@docusaurus/theme-common';
+import {
+  isActiveSidebarItem,
   findFirstCategoryLink,
-  ThemeClassNames,
-  useThemeConfig,
   useDocSidebarItemsExpandedState,
   isSamePath,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import useIsBrowser from '@docusaurus/useIsBrowser';

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

@@ -7,10 +7,11 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {isActiveSidebarItem, ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/IconExternalLink';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/DocSidebarItem/Link';
 
 import styles from './styles.module.css';

package/src/theme/DocSidebarItems/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, {memo} from 'react';
-import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
+import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common/internal';
 import DocSidebarItem from '@theme/DocSidebarItem';
 
 import type {Props} from '@theme/DocSidebarItems';

package/src/theme/DocVersionBadge/index.tsx

@@ -8,7 +8,8 @@
 import React from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
-import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsVersion} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/DocVersionBadge';
 
 export default function DocVersionBadge({

package/src/theme/DocVersionBanner/index.tsx

@@ -15,12 +15,11 @@ import {
   useDocVersionSuggestions,
   type GlobalVersion,
 } from '@docusaurus/plugin-content-docs/client';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
-  ThemeClassNames,
   useDocsPreferredVersion,
   useDocsVersion,
-} from '@docusaurus/theme-common';
-
+} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/DocVersionBanner';
 import type {
   VersionBanner,

package/src/theme/EditThisPage/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import IconEdit from '@theme/IconEdit';
+import IconEdit from '@theme/Icon/Edit';
 import type {Props} from '@theme/EditThisPage';
 
 export default function EditThisPage({editUrl}: Props): JSX.Element {

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

@@ -10,7 +10,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/IconExternalLink';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/Footer/LinkItem';
 
 export default function FooterLinkItem({item}: Props): JSX.Element {

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

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
@@ -21,18 +22,22 @@ function LogoImage({logo}: Props) {
   };
   return (
     <ThemedImage
-      className="footer__logo"
+      className={clsx('footer__logo', logo.className)}
       alt={logo.alt}
       sources={sources}
       width={logo.width}
       height={logo.height}
+      style={logo.style}
     />
   );
 }
 
 export default function FooterLogo({logo}: Props): JSX.Element {
   return logo.href ? (
-    <Link href={logo.href} className={styles.footerLogoLink}>
+    <Link
+      href={logo.href}
+      className={styles.footerLogoLink}
+      target={logo.target}>
       <LogoImage logo={logo} />
     </Link>
   ) : (

package/src/theme/{IconArrow → Icon/Arrow}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconArrow';
+import type {Props} from '@theme/Icon/Arrow';
 
 export default function IconArrow(props: Props): JSX.Element {
   return (

package/src/theme/{IconClose → Icon/Close}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconClose';
+import type {Props} from '@theme/Icon/Close';
 
 export default function IconClose({
   width = 21,

package/src/theme/{IconDarkMode → Icon/DarkMode}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconDarkMode';
+import type {Props} from '@theme/Icon/DarkMode';
 
 export default function IconDarkMode(props: Props): JSX.Element {
   return (

package/src/theme/{IconEdit → Icon/Edit}/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {Props} from '@theme/IconEdit';
+import type {Props} from '@theme/Icon/Edit';
 
 import styles from './styles.module.css';
 

package/src/theme/{IconExternalLink → Icon/ExternalLink}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconExternalLink';
+import type {Props} from '@theme/Icon/ExternalLink';
 
 import styles from './styles.module.css';
 

package/src/theme/{IconHome → Icon/Home}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconHome';
+import type {Props} from '@theme/Icon/Home';
 
 export default function IconHome(props: Props): JSX.Element {
   return (

package/src/theme/{IconLanguage → Icon/Language}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconLanguage';
+import type {Props} from '@theme/Icon/Language';
 
 export default function IconLanguage({
   width = 20,

package/src/theme/{IconLightMode → Icon/LightMode}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconLightMode';
+import type {Props} from '@theme/Icon/LightMode';
 
 export default function IconLightMode(props: Props): JSX.Element {
   return (

package/src/theme/{IconMenu → Icon/Menu}/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/IconMenu';
+import type {Props} from '@theme/Icon/Menu';
 
 export default function IconMenu({
   width = 30,

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * 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 {composeProviders} from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  TabGroupChoiceProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/Layout/Provider';
+
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  TabGroupChoiceProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+
+export default function LayoutProvider({children}: Props): JSX.Element {
+  return <Provider>{children}</Provider>;
+}

package/src/theme/Layout/index.tsx

@@ -8,19 +8,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import {
-  PageMetadata,
-  ThemeClassNames,
-  useKeyboardNavigation,
-} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
-import LayoutProviders from '@theme/LayoutProviders';
+import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
-import './styles.css';
 import type {Props} from '@theme/Layout';
+import styles from './styles.module.css';
 
 export default function Layout(props: Props): JSX.Element {
   const {
@@ -35,7 +32,7 @@ export default function Layout(props: Props): JSX.Element {
   useKeyboardNavigation();
 
   return (
-    <LayoutProviders>
+    <LayoutProvider>
       <PageMetadata title={title} description={description} />
 
       <SkipToContent />
@@ -44,13 +41,18 @@ export default function Layout(props: Props): JSX.Element {
 
       <Navbar />
 
-      <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
+      <div
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}>
         <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
           {children}
         </ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}
-    </LayoutProviders>
+    </LayoutProvider>
   );
 }

package/{lib/theme/Layout/styles.css → src/theme/Layout/styles.module.css}

@@ -5,23 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-html,
-body {
+:global(html, body) {
   height: 100%;
 }
 
-#__docusaurus {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.main-wrapper {
+.mainWrapper {
   flex: 1 0 auto;
 }
 
-/* Docusaurus-specific utility classes */
-
-.docusaurus-mt-lg {
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
   margin-top: 3rem;
 }
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}

package/src/theme/Logo/index.tsx

@@ -9,44 +9,74 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, type NavbarLogo} from '@docusaurus/theme-common';
 import ThemedImage from '@theme/ThemedImage';
 import type {Props} from '@theme/Logo';
 
-export default function Logo(props: Props): JSX.Element {
-  const {
-    siteConfig: {title},
-  } = useDocusaurusContext();
-  const {
-    navbar: {title: navbarTitle, logo = {src: ''}},
-  } = useThemeConfig();
-
-  const {imageClassName, titleClassName, ...propsRest} = props;
-  const logoLink = useBaseUrl(logo.href || '/');
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo;
+  alt: string;
+  imageClassName?: string;
+}) {
   const sources = {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
   const themedImage = (
     <ThemedImage
+      className={logo.className}
       sources={sources}
       height={logo.height}
       width={logo.width}
-      alt={logo.alt || navbarTitle || title}
+      alt={alt}
+      style={logo.style}
     />
   );
 
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props: Props): JSX.Element {
+  const {
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo},
+  } = useThemeConfig();
+
+  const {imageClassName, titleClassName, ...propsRest} = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
   return (
     <Link
       to={logoLink}
       {...propsRest}
-      {...(logo.target && {target: logo.target})}>
-      {logo.src &&
-        (imageClassName ? (
-          <div className={imageClassName}>{themedImage}</div>
-        ) : (
-          themedImage
-        ))}
+      {...(logo?.target && {target: logo.target})}>
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );

package/src/theme/MDXComponents/Code.tsx

@@ -11,7 +11,7 @@ import CodeBlock from '@theme/CodeBlock';
 import type {Props} from '@theme/MDXComponents/Code';
 
 export default function MDXCode(props: Props): JSX.Element {
-  const inlineElements = [
+  const inlineElements: (string | undefined)[] = [
     'a',
     'b',
     'big',
@@ -26,7 +26,10 @@ export default function MDXCode(props: Props): JSX.Element {
   const shouldBeInline = React.Children.toArray(props.children).every(
     (el) =>
       (typeof el === 'string' && !el.includes('\n')) ||
-      (isValidElement(el) && inlineElements.includes(el.props.mdxType)),
+      (isValidElement(el) &&
+        inlineElements.includes(
+          (el.props as {mdxType: string} | null)?.mdxType,
+        )),
   );
 
   return shouldBeInline ? (

package/src/theme/MDXComponents/Details.tsx

@@ -15,7 +15,8 @@ export default function MDXDetails(props: Props): JSX.Element {
   // Details theme component
   const summary = items.find(
     (item): item is ReactElement<ComponentProps<'summary'>> =>
-      React.isValidElement(item) && item.props?.mdxType === 'summary',
+      React.isValidElement(item) &&
+      (item.props as {mdxType: string} | null)?.mdxType === 'summary',
   );
   const children = <>{items.filter((item) => item !== summary)}</>;
 

package/src/theme/MDXComponents/Head.tsx

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactElement, type ComponentProps} from 'react';
-import Head from '@docusaurus/Head';
+import React, {type ReactElement} from 'react';
+import Head, {type Props as HeadProps} from '@docusaurus/Head';
 import type {Props} from '@theme/MDXComponents/Head';
 
 // MDX elements are wrapped through the MDX pragma. In some cases (notably usage
@@ -25,7 +25,5 @@ export default function MDXHead(props: Props): JSX.Element {
   const unwrappedChildren = React.Children.map(props.children, (child) =>
     React.isValidElement(child) ? unwrapMDXElement(child) : child,
   );
-  return (
-    <Head {...(props as ComponentProps<typeof Head>)}>{unwrappedChildren}</Head>
-  );
+  return <Head {...(props as HeadProps)}>{unwrappedChildren}</Head>;
 }

package/src/theme/MDXComponents/Pre.tsx

@@ -14,7 +14,8 @@ export default function MDXPre(props: Props): JSX.Element {
     <CodeBlock
       // If this pre is created by a ``` fenced codeblock, unwrap the children
       {...(isValidElement(props.children) &&
-      props.children.props?.originalType === 'code'
+      (props.children.props as {originalType: string} | null)?.originalType ===
+        'code'
         ? props.children.props
         : {...props})}
     />

package/src/theme/MDXComponents/index.tsx

@@ -14,6 +14,7 @@ import MDXDetails from '@theme/MDXComponents/Details';
 import MDXHeading from '@theme/MDXComponents/Heading';
 import MDXUl from '@theme/MDXComponents/Ul';
 import MDXImg from '@theme/MDXComponents/Img';
+import Admonition from '@theme/Admonition';
 
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
@@ -31,6 +32,7 @@ const MDXComponents: MDXComponentsObject = {
   h4: (props) => <MDXHeading as="h4" {...props} />,
   h5: (props) => <MDXHeading as="h5" {...props} />,
   h6: (props) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
 };
 
 export default MDXComponents;

package/src/theme/MDXPage/index.tsx

@@ -38,11 +38,13 @@ export default function MDXPage(props: Props): JSX.Element {
         <main className="container container--fluid margin-vert--lg">
           <div className={clsx('row', styles.mdxPageWrapper)}>
             <div className={clsx('col', !hideTableOfContents && 'col--8')}>
-              <MDXContent>
-                <MDXPageContent />
-              </MDXContent>
+              <article>
+                <MDXContent>
+                  <MDXPageContent />
+                </MDXContent>
+              </article>
             </div>
-            {!hideTableOfContents && MDXPageContent.toc && (
+            {!hideTableOfContents && MDXPageContent.toc.length > 0 && (
               <div className="col col--2">
                 <TOC
                   toc={MDXPageContent.toc}

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

@@ -6,11 +6,11 @@
  */
 
 import React, {type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
-  useThemeConfig,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import SearchBar from '@theme/SearchBar';

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

@@ -7,11 +7,11 @@
 
 import React, {type ComponentProps} from 'react';
 import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
-  useThemeConfig,
   useHideableNavbar,
   useNavbarMobileSidebar,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
 import type {Props} from '@theme/Navbar/Layout';
 

package/src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import IconClose from '@theme/IconClose';
+import IconClose from '@theme/Icon/Close';
 import NavbarLogo from '@theme/Navbar/Logo';
 
 function CloseButton() {

package/src/theme/Navbar/MobileSidebar/Layout/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useNavbarSecondaryMenu} from '@docusaurus/theme-common';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
 
 export default function NavbarMobileSidebarLayout({

package/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import {useNavbarMobileSidebar, useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 
 function useNavbarItems() {

package/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx

@@ -6,7 +6,8 @@
  */
 
 import React, {type ComponentProps} from 'react';
-import {useNavbarSecondaryMenu, useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import Translate from '@docusaurus/Translate';
 
 function SecondaryMenuBackButton(props: ComponentProps<'button'>) {

package/src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
-import IconMenu from '@theme/IconMenu';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import IconMenu from '@theme/Icon/Menu';
 
 export default function MobileSidebarToggle(): JSX.Element {
   const mobileSidebar = useNavbarMobileSidebar();

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

@@ -9,7 +9,7 @@ import React from 'react';
 import {
   useLockBodyScroll,
   useNavbarMobileSidebar,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
 import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
 import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';

package/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
-import {useLayoutDoc} from '@docusaurus/theme-common';
+import {useLayoutDoc} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';