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

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

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/IconArrow';
 import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton';
 
 import styles from './styles.module.css';

package/src/theme/DocSidebar/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 import {useWindowSize} from '@docusaurus/theme-common';
-import type {Props} from '@theme/DocSidebar';
 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 {
   const windowSize = useWindowSize();

package/src/theme/DocSidebarItem/{Category.tsx → Category/index.tsx}

@@ -20,30 +20,28 @@ import {
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
-
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import type {Props} from '@theme/DocSidebarItem/Category';
 
-import useIsBrowser from '@docusaurus/useIsBrowser';
-
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
 function useAutoExpandActiveCategory({
   isActive,
   collapsed,
-  setCollapsed,
+  updateCollapsed,
 }: {
   isActive: boolean;
   collapsed: boolean;
-  setCollapsed: (b: boolean) => void;
+  updateCollapsed: (b: boolean) => void;
 }) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
     if (justBecameActive && collapsed) {
-      setCollapsed(false);
+      updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
 }
 
 /**
@@ -105,6 +103,11 @@ export default function DocSidebarItemCategory({
   ...props
 }: Props): JSX.Element {
   const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
 
   const isActive = isActiveSidebarItem(item, activePath);
@@ -121,17 +124,13 @@ export default function DocSidebarItemCategory({
     },
   });
 
-  useAutoExpandActiveCategory({isActive, collapsed, setCollapsed});
   const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-  function updateCollapsed(toCollapsed: boolean = !collapsed) {
+  // Use this instead of `setCollapsed`, because it is also reactive
+  const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
-  }
-  const {
-    docs: {
-      sidebar: {autoCollapseCategories},
-    },
-  } = useThemeConfig();
+  };
+  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
   useEffect(() => {
     if (
       collapsible &&

package/src/theme/DocSidebarItem/{Html.tsx → Html/index.tsx}

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/DocSidebarItem/Html';
 
-import styles from './Html.module.css';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemHtml({
   item,
@@ -23,7 +23,7 @@ export default function DocSidebarItemHtml({
       className={clsx(
         ThemeClassNames.docs.docSidebarItemLink,
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
+        defaultStyle && [styles.menuHtmlItem, 'menu__list-item'],
         className,
       )}
       key={index}

package/src/theme/DocSidebarItem/{Link.tsx → Link/index.tsx}

@@ -11,10 +11,9 @@ import {isActiveSidebarItem, ThemeClassNames} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/IconExternalLink';
-
 import type {Props} from '@theme/DocSidebarItem/Link';
 
-import styles from './Link.module.css';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemLink({
   item,

package/src/theme/DocSidebarItems/index.tsx

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

package/src/theme/DocTagDocListPage/index.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import Layout from '@theme/Layout';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {
   PageMetadata,
@@ -16,9 +15,9 @@ import {
   usePluralForm,
 } from '@docusaurus/theme-common';
 import Translate, {translate} from '@docusaurus/Translate';
-import type {Props} from '@theme/DocTagDocListPage';
+import Layout from '@theme/Layout';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
+import type {Props} from '@theme/DocTagDocListPage';
 
 // Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {

package/src/theme/DocTagsListPage/index.tsx

@@ -6,18 +6,17 @@
  */
 
 import React from 'react';
-
-import Layout from '@theme/Layout';
+import clsx from 'clsx';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
 import TagsListByLetter from '@theme/TagsListByLetter';
-import type {Props} from '@theme/DocTagsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
+import type {Props} from '@theme/DocTagsListPage';
 
 export default function DocTagsListPage({tags}: Props): JSX.Element {
   const title = translateTagsPageTitle();

package/src/theme/DocVersionBadge/index.tsx

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

package/src/theme/DocVersionBanner/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ComponentType} from 'react';
+import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
@@ -21,7 +22,6 @@ import {
 } from '@docusaurus/theme-common';
 
 import type {Props} from '@theme/DocVersionBanner';
-import clsx from 'clsx';
 import type {
   VersionBanner,
   PropVersionMetadata,

package/src/theme/EditThisPage/index.tsx

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

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

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Footer/Links/MultiColumn';
 import LinkItem from '@theme/Footer/LinkItem';
+import type {Props} from '@theme/Footer/Links/MultiColumn';
 
 type ColumnType = Props['columns'][number];
 type ColumnItemType = ColumnType['items'][number];
@@ -21,7 +21,7 @@ function ColumnLinkItem({item}: {item: ColumnItemType}) {
       dangerouslySetInnerHTML={{__html: item.html}}
     />
   ) : (
-    <li key={item.href || item.to} className="footer__item">
+    <li key={item.href ?? item.to} className="footer__item">
       <LinkItem item={item} />
     </li>
   );

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

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Footer/Links/Simple';
 import LinkItem from '@theme/Footer/LinkItem';
+import type {Props} from '@theme/Footer/Links/Simple';
 
 function Separator() {
   return <span className="footer__link-separator">·</span>;

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

@@ -8,9 +8,9 @@
 import React from 'react';
 
 import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
-import type {Props} from '@theme/Footer/Links';
 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 {
   return isMultiColumnFooterLinks(links) ? (

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

@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import styles from './styles.module.css';
 import ThemedImage from '@theme/ThemedImage';
 import type {Props} from '@theme/Footer/Logo';
 
+import styles from './styles.module.css';
+
 function LogoImage({logo}: Props) {
   const {withBaseUrl} = useBaseUrlUtils();
   const sources = {

package/src/theme/Heading/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {Props} from '@theme/Heading';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Heading';
 
 import styles from './styles.module.css';
 

package/src/theme/IconEdit/index.tsx

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

package/src/theme/LastUpdated/index.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import type {Props} from '@theme/LastUpdated';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/LastUpdated';
 
 function LastUpdatedAtDate({
   lastUpdatedAt,

package/src/theme/Layout/index.tsx

@@ -8,19 +8,19 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-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 type {Props} from '@theme/Layout';
 import {
   PageMetadata,
   ThemeClassNames,
   useKeyboardNavigation,
 } from '@docusaurus/theme-common';
+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 ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
+import type {Props} from '@theme/Layout';
 
 export default function Layout(props: Props): JSX.Element {
   const {
@@ -45,7 +45,9 @@ export default function Layout(props: Props): JSX.Element {
       <Navbar />
 
       <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
-        <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}

package/src/theme/Logo/index.tsx

@@ -6,13 +6,12 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Logo';
-
 import Link from '@docusaurus/Link';
-import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import ThemedImage from '@theme/ThemedImage';
+import type {Props} from '@theme/Logo';
 
 export default function Logo(props: Props): JSX.Element {
   const {

package/src/theme/MDXComponents/Details.tsx

@@ -10,11 +10,13 @@ import Details from '@theme/Details';
 import type {Props} from '@theme/MDXComponents/Details';
 
 export default function MDXDetails(props: Props): JSX.Element {
-  const items = React.Children.toArray(props.children) as ReactElement[];
+  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
-  const summary: ReactElement<ComponentProps<'summary'>> | undefined =
-    items.find((item) => item?.props?.mdxType === 'summary');
+  const summary = items.find(
+    (item): item is ReactElement<ComponentProps<'summary'>> =>
+      React.isValidElement(item) && item.props?.mdxType === 'summary',
+  );
   const children = <>{items.filter((item) => item !== summary)}</>;
 
   return (

package/src/theme/MDXComponents/Head.tsx

@@ -11,8 +11,10 @@ import type {Props} from '@theme/MDXComponents/Head';
 
 // MDX elements are wrapped through the MDX pragma. In some cases (notably usage
 // with Head/Helmet) we need to unwrap those elements.
-function unwrapMDXElement(element: ReactElement) {
-  if (element?.props?.mdxType && element?.props?.originalType) {
+function unwrapMDXElement(
+  element: ReactElement<{mdxType?: string; originalType?: string} | undefined>,
+) {
+  if (element.props?.mdxType && element.props.originalType) {
     const {mdxType, originalType, ...newProps} = element.props;
     return React.createElement(element.props.originalType, newProps);
   }
@@ -21,7 +23,7 @@ function unwrapMDXElement(element: ReactElement) {
 
 export default function MDXHead(props: Props): JSX.Element {
   const unwrappedChildren = React.Children.map(props.children, (child) =>
-    unwrapMDXElement(child as ReactElement),
+    React.isValidElement(child) ? unwrapMDXElement(child) : child,
   );
   return (
     <Head {...(props as ComponentProps<typeof Head>)}>{unwrappedChildren}</Head>

package/src/theme/MDXComponents/{Img.tsx → Img/index.tsx}

@@ -6,9 +6,10 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/MDXComponents/Img';
-import styles from './Img.module.css';
 import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Img';
+
+import styles from './styles.module.css';
 
 function transformImgClassName(className?: string): string {
   return clsx(className, styles.img);

package/src/theme/MDXComponents/Pre.tsx

@@ -14,8 +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
+      props.children.props?.originalType === 'code'
+        ? props.children.props
         : {...props})}
     />
   );

package/src/theme/MDXComponents/{Ul.tsx → Ul/index.tsx}

@@ -9,13 +9,15 @@ import React from 'react';
 import clsx from 'clsx';
 import type {Props} from '@theme/MDXComponents/Ul';
 
+import styles from './styles.module.css';
+
 function transformUlClassName(className?: string): string {
   return clsx(
     className,
-    // This class is set globally by GitHub/MDX
-    // We keep the global class, but add Infima class to get list without styling
+    // This class is set globally by GitHub/MDX. We keep the global class, and
+    // add another class to get a task list without the default ul styling
     // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
-    className?.includes('contains-task-list') && 'clean-list',
+    className?.includes('contains-task-list') && styles.containsTaskList,
   );
 }
 

package/src/theme/MDXComponents/Ul/styles.module.css

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+.containsTaskList {
+  list-style: none;
+}
+
+:not(.containsTaskList > li) > .containsTaskList {
+  padding-left: 0;
+}

package/src/theme/MDXPage/index.tsx

@@ -7,15 +7,15 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import MDXContent from '@theme/MDXContent';
-import type {Props} from '@theme/MDXPage';
-import TOC from '@theme/TOC';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import MDXContent from '@theme/MDXContent';
+import TOC from '@theme/TOC';
+import type {Props} from '@theme/MDXPage';
 
 import styles from './styles.module.css';
 

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

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
 import type {Props} from '@theme/Navbar/ColorModeToggle';
-import React from 'react';
 
 export default function NavbarColorModeToggle({
   className,

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

@@ -6,18 +6,18 @@
  */
 
 import React, {type ReactNode} from 'react';
-import type {Props as NavbarItemConfig} from '@theme/NavbarItem';
-import NavbarItem from '@theme/NavbarItem';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import SearchBar from '@theme/SearchBar';
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
   useThemeConfig,
 } from '@docusaurus/theme-common';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarSearch from '@theme/Navbar/Search';
+
 import styles from './styles.module.css';
 
 function useNavbarItems() {
@@ -56,7 +56,7 @@ export default function NavbarContent(): JSX.Element {
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
 
-  const autoAddSearchBar = !items.some((item) => item.type === 'search');
+  const searchBarItem = items.find((item) => item.type === 'search');
 
   return (
     <NavbarContentLayout
@@ -74,7 +74,7 @@ export default function NavbarContent(): JSX.Element {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && (
+          {!searchBarItem && (
             <NavbarSearch>
               <SearchBar />
             </NavbarSearch>

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

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

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

@@ -6,10 +6,10 @@
  */
 
 import React from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import IconClose from '@theme/IconClose';
 import NavbarLogo from '@theme/Navbar/Logo';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
 
 function CloseButton() {
   const mobileSidebar = useNavbarMobileSidebar();

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

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

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

@@ -7,8 +7,7 @@
 
 import React from 'react';
 import {useNavbarMobileSidebar, useThemeConfig} from '@docusaurus/theme-common';
-import type {Props as NavbarItemConfig} from '@theme/NavbarItem';
-import NavbarItem from '../../../NavbarItem';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved

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

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

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

@@ -6,12 +6,12 @@
  */
 
 import React from 'react';
-import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
-import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
 import {
   useLockBodyScroll,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common';
+import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
+import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
 import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';
 import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu';