@docusaurus/theme-classic 2.0.0-beta.18 → 2.0.0-beta.19

package/lib-next/theme/DocSidebarItem/index.js

@@ -4,26 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useEffect, useMemo} from 'react';
-import clsx from 'clsx';
-import {
-  isActiveSidebarItem,
-  usePrevious,
-  Collapsible,
-  useCollapsible,
-  findFirstCategoryLink,
-  ThemeClassNames,
-  useThemeConfig,
-  useDocSidebarItemsExpandedState,
-  isSamePath,
-} from '@docusaurus/theme-common';
-import Link from '@docusaurus/Link';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
-import IconExternalLink from '@theme/IconExternalLink';
-import DocSidebarItems from '@theme/DocSidebarItems';
-import styles from './styles.module.css';
-import useIsBrowser from '@docusaurus/useIsBrowser';
+import React from 'react';
+import DocSidebarItemCategory from '@theme/DocSidebarItem/Category';
+import DocSidebarItemLink from '@theme/DocSidebarItem/Link';
+import DocSidebarItemHtml from '@theme/DocSidebarItem/Html';
 export default function DocSidebarItem({item, ...props}) {
   switch (item.type) {
     case 'category':
@@ -36,230 +20,4 @@ export default function DocSidebarItem({item, ...props}) {
     default:
       return <DocSidebarItemLink item={item} {...props} />;
   }
-} // If we navigate to a category and it becomes active, it should automatically
-// expand itself
-
-function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
-  const wasActive = usePrevious(isActive);
-  useEffect(() => {
-    const justBecameActive = isActive && !wasActive;
-
-    if (justBecameActive && collapsed) {
-      setCollapsed(false);
-    }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
-}
-/**
- * When a collapsible category has no link, we still link it to its first child
- * during SSR as a temporary fallback. This allows to be able to navigate inside
- * the category even when JS fails to load, is delayed or simply disabled
- * React hydration becomes an optional progressive enhancement
- * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
- * see https://github.com/facebook/docusaurus/issues/3030
- */
-
-function useCategoryHrefWithSSRFallback(item) {
-  const isBrowser = useIsBrowser();
-  return useMemo(() => {
-    if (item.href) {
-      return item.href;
-    } // In these cases, it's not necessary to render a fallback
-    // We skip the "findFirstCategoryLink" computation
-
-    if (isBrowser || !item.collapsible) {
-      return undefined;
-    }
-
-    return findFirstCategoryLink(item);
-  }, [item, isBrowser]);
-}
-
-function DocSidebarItemCategory({
-  item,
-  onItemClick,
-  activePath,
-  level,
-  index,
-  ...props
-}) {
-  const {items, label, collapsible, className, href} = item;
-  const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
-  const isActive = isActiveSidebarItem(item, activePath);
-  const isCurrentPage = isSamePath(href, activePath);
-  const {collapsed, setCollapsed} = useCollapsible({
-    // active categories are always initialized as expanded
-    // the default (item.collapsed) is only used for non-active categories
-    initialState: () => {
-      if (!collapsible) {
-        return false;
-      }
-
-      return isActive ? false : item.collapsed;
-    },
-  });
-  useAutoExpandActiveCategory({
-    isActive,
-    collapsed,
-    setCollapsed,
-  });
-  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-
-  function updateCollapsed(toCollapsed = !collapsed) {
-    setExpandedItem(toCollapsed ? null : index);
-    setCollapsed(toCollapsed);
-  }
-
-  const {autoCollapseSidebarCategories} = useThemeConfig();
-  useEffect(() => {
-    if (
-      collapsible &&
-      expandedItem &&
-      expandedItem !== index &&
-      autoCollapseSidebarCategories
-    ) {
-      setCollapsed(true);
-    }
-  }, [
-    collapsible,
-    expandedItem,
-    index,
-    setCollapsed,
-    autoCollapseSidebarCategories,
-  ]);
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemCategory,
-        ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
-        'menu__list-item',
-        {
-          'menu__list-item--collapsed': collapsed,
-        },
-        className,
-      )}>
-      <div
-        className={clsx('menu__list-item-collapsible', {
-          'menu__list-item-collapsible--active': isCurrentPage,
-        })}>
-        <Link
-          className={clsx('menu__link', {
-            'menu__link--sublist': collapsible,
-            'menu__link--sublist-caret': !href,
-            'menu__link--active': isActive,
-          })}
-          onClick={
-            collapsible
-              ? (e) => {
-                  onItemClick?.(item);
-
-                  if (href) {
-                    updateCollapsed(false);
-                  } else {
-                    e.preventDefault();
-                    updateCollapsed();
-                  }
-                }
-              : () => {
-                  onItemClick?.(item);
-                }
-          }
-          aria-current={isCurrentPage ? 'page' : undefined}
-          aria-expanded={collapsible ? !collapsed : undefined}
-          href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
-          {...props}>
-          {label}
-        </Link>
-        {href && collapsible && (
-          <button
-            aria-label={translate(
-              {
-                id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
-                message: "Toggle the collapsible sidebar category '{label}'",
-                description:
-                  'The ARIA label to toggle the collapsible sidebar category',
-              },
-              {
-                label,
-              },
-            )}
-            type="button"
-            className="clean-btn menu__caret"
-            onClick={(e) => {
-              e.preventDefault();
-              updateCollapsed();
-            }}
-          />
-        )}
-      </div>
-
-      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        <DocSidebarItems
-          items={items}
-          tabIndex={collapsed ? -1 : 0}
-          onItemClick={onItemClick}
-          activePath={activePath}
-          level={level + 1}
-        />
-      </Collapsible>
-    </li>
-  );
-}
-
-function DocSidebarItemHtml({item, level, index}) {
-  const {value, defaultStyle, className} = item;
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemLink,
-        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
-        className,
-      )}
-      key={index} // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: value,
-      }}
-    />
-  );
-}
-
-function DocSidebarItemLink({
-  item,
-  onItemClick,
-  activePath,
-  level,
-  index,
-  ...props
-}) {
-  const {href, label, className} = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  const isInternalLink = isInternalUrl(href);
-  return (
-    <li
-      className={clsx(
-        ThemeClassNames.docs.docSidebarItemLink,
-        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        'menu__list-item',
-        className,
-      )}
-      key={label}>
-      <Link
-        className={clsx(
-          'menu__link',
-          !isInternalLink && styles.menuExternalLink,
-          {
-            'menu__link--active': isActive,
-          },
-        )}
-        aria-current={isActive ? 'page' : undefined}
-        to={href}
-        {...(isInternalLink && {
-          onClick: onItemClick ? () => onItemClick(item) : undefined,
-        })}
-        {...props}>
-        {label}
-        {!isInternalLink && <IconExternalLink />}
-      </Link>
-    </li>
-  );
 }

package/lib-next/theme/DocSidebarItems/index.js

@@ -14,12 +14,7 @@ function DocSidebarItems({items, ...props}) {
   return (
     <DocSidebarItemsExpandedStateProvider>
       {items.map((item, index) => (
-        <DocSidebarItem
-          key={index} // sidebar is static, the index does not change
-          item={item}
-          index={index}
-          {...props}
-        />
+        <DocSidebarItem key={index} item={item} index={index} {...props} />
       ))}
     </DocSidebarItemsExpandedStateProvider>
   );

package/lib-next/theme/DocTagDocListPage/index.js

@@ -56,8 +56,8 @@ export default function DocTagDocListPage({tag}) {
       message: '{nDocsTagged} with "{tagName}"',
     },
     {
-      nDocsTagged: nDocsTaggedPlural(tag.docs.length),
-      tagName: tag.name,
+      nDocsTagged: nDocsTaggedPlural(tag.count),
+      tagName: tag.label,
     },
   );
   return (
@@ -83,7 +83,7 @@ export default function DocTagDocListPage({tag}) {
                 </Link>
               </header>
               <section className="margin-vert--lg">
-                {tag.docs.map((doc) => (
+                {tag.items.map((doc) => (
                   <DocItem key={doc.id} doc={doc} />
                 ))}
               </section>

package/lib-next/theme/DocVersionBanner/index.js

@@ -101,8 +101,8 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
 
   const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
   const {latestDocSuggestion, latestVersionSuggestion} =
-    useDocVersionSuggestions(pluginId); // try to link to same doc in latest version (not always possible)
-  // fallback to main doc of latest version
+    useDocVersionSuggestions(pluginId); // Try to link to same doc in latest version (not always possible), falling
+  // back to main doc of latest version
 
   const latestVersionSuggestedDoc =
     latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);

package/lib-next/theme/Footer/Links/MultiColumn/index.js

@@ -27,7 +27,7 @@ function Column({column}) {
   return (
     <div className="col footer__col">
       <div className="footer__title">{column.title}</div>
-      <ul className="footer__items">
+      <ul className="footer__items clean-list">
         {column.items.map((item, i) => (
           <ColumnLinkItem key={i} item={item} />
         ))}

package/lib-next/theme/Heading/index.js

@@ -9,14 +9,13 @@ import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
-
-function AnchorHeading({as: As, id, ...props}) {
+export default function Heading({as: As, id, ...props}) {
   const {
     navbar: {hideOnScroll},
-  } = useThemeConfig();
+  } = useThemeConfig(); // H1 headings do not need an id because they don't appear in the TOC.
 
-  if (!id) {
-    return <As {...props} />;
+  if (As === 'h1' || !id) {
+    return <As {...props} id={undefined} />;
   }
 
   return (
@@ -43,18 +42,3 @@ function AnchorHeading({as: As, id, ...props}) {
     </As>
   );
 }
-
-export default function Heading({as, ...props}) {
-  if (as === 'h1') {
-    return (
-      <h1
-        {...props}
-        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-      >
-        {props.children}
-      </h1>
-    );
-  }
-
-  return <AnchorHeading as={as} {...props} />;
-}

package/lib-next/theme/IconHome/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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';
+export default function IconHome(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/lib-next/theme/LastUpdated/index.js

@@ -70,6 +70,7 @@ export default function LastUpdated({
       </Translate>
       {process.env.NODE_ENV === 'development' && (
         <div>
+          {/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
           <small> (Simulated during dev for better perf)</small>
         </div>
       )}

package/lib-next/theme/Layout/index.js

@@ -24,7 +24,7 @@ export default function Layout(props) {
     children,
     noFooter,
     wrapperClassName,
-    // not really layout-related, but kept for convenience/retro-compatibility
+    // Not really layout-related, but kept for convenience/retro-compatibility
     title,
     description,
   } = props;

package/lib-next/theme/MDXComponents/Ul.js

@@ -6,15 +6,13 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import styles from './Ul.module.css';
-const containsClassListLocalClass = styles['contains-task-list'];
 
 function transformUlClassName(className) {
   return clsx(
     className, // This class is set globally by GitHub/MDX
-    // We keep the global class, but apply scoped CSS
+    // We keep the global class, but add Infima class to get list without styling
     // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
-    className?.includes('contains-task-list') && containsClassListLocalClass,
+    className?.includes('contains-task-list') && 'clean-list',
   );
 }
 

package/lib-next/theme/Navbar/Content/index.js

@@ -15,6 +15,7 @@ import {
 } from '@docusaurus/theme-common';
 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() {
@@ -62,7 +63,11 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && <SearchBar />}
+          {autoAddSearchBar && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
         </>
       }
     />

package/lib-next/theme/Navbar/Logo/index.js

@@ -11,7 +11,7 @@ export default function NavbarLogo() {
     <Logo
       className="navbar__brand"
       imageClassName="navbar__logo"
-      titleClassName="navbar__title"
+      titleClassName="navbar__title text--truncate"
     />
   );
 }

package/lib-next/theme/Navbar/Search/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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 styles from './styles.module.css';
+export default function NavbarSearch({children}) {
+  return <div className={styles.searchBox}>{children}</div>;
+}

package/lib-next/theme/Navbar/Search/styles.module.css

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+@media (max-width: 996px) {
+  .searchBox {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+}
+
+@media (min-width: 997px) {
+  .searchBox {
+    padding: var(--ifm-navbar-item-padding-vertical)
+      var(--ifm-navbar-item-padding-horizontal);
+  }
+}

package/lib-next/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,27 @@
+/**
+ * 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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+export default ComponentTypes;

package/lib-next/theme/NavbarItem/DocNavbarItem.js

@@ -6,50 +6,33 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {
-  useLatestVersion,
-  useActiveDocContext,
-} from '@docusaurus/plugin-content-docs/client';
+import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
 import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
-import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
-
-function getDocInVersions(versions, docId) {
-  const allDocs = versions.flatMap((version) => version.docs);
-  const doc = allDocs.find((versionDoc) => versionDoc.id === docId);
-
-  if (!doc) {
-    const docIds = allDocs.map((versionDoc) => versionDoc.id).join('\n- ');
-    throw new Error(`DocNavbarItem: couldn't find any doc with id "${docId}" in version${
-      versions.length ? 's' : ''
-    } ${versions.map((version) => version.name).join(', ')}".
-Available doc ids are:\n- ${docIds}`);
-  }
-
-  return doc;
-}
-
+import {useLayoutDoc} from '@docusaurus/theme-common';
 export default function DocNavbarItem({
   docId,
   label: staticLabel,
   docsPluginId,
   ...props
 }) {
-  const {activeVersion, activeDoc} = useActiveDocContext(docsPluginId);
-  const {preferredVersion} = useDocsPreferredVersion(docsPluginId);
-  const latestVersion = useLatestVersion(docsPluginId); // Versions used to look for the doc to link to, ordered + no duplicate
+  const {activeDoc} = useActiveDocContext(docsPluginId);
+  const doc = useLayoutDoc(docId, docsPluginId); // Draft items are not displayed in the navbar.
+
+  if (doc === null) {
+    return null;
+  }
 
-  const versions = uniq(
-    [activeVersion, preferredVersion, latestVersion].filter(Boolean),
-  );
-  const doc = getDocInVersions(versions, docId);
   const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
   return (
     <DefaultNavbarItem
       exact
       {...props}
       className={clsx(props.className, {
+        // Do not make the item active if the active doc doesn't have sidebar.
         [activeDocInfimaClassName]:
+          // If `activeDoc === doc` react-router will make it active anyways,
+          // regardless of the existence of a sidebar
           activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar,
       })}
       activeClassName={activeDocInfimaClassName}

package/lib-next/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -6,57 +6,25 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {
-  useLatestVersion,
-  useActiveDocContext,
-} from '@docusaurus/plugin-content-docs/client';
+import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
 import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
-import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
-
-function getSidebarLink(versions, sidebarId) {
-  const allSidebars = versions
-    .flatMap((version) => {
-      if (version.sidebars) {
-        return Object.entries(version.sidebars);
-      }
-
-      return undefined;
-    })
-    .filter((sidebarItem) => !!sidebarItem);
-  const sidebarEntry = allSidebars.find((sidebar) => sidebar[0] === sidebarId);
-
-  if (!sidebarEntry) {
-    throw new Error(`DocSidebarNavbarItem: couldn't find any sidebar with id "${sidebarId}" in version${
-      versions.length ? 's' : ''
-    } ${versions.map((version) => version.name).join(', ')}".
-Available sidebar ids are:
-- ${Object.keys(allSidebars).join('\n- ')}`);
-  }
-
-  if (!sidebarEntry[1].link) {
-    throw new Error(
-      `DocSidebarNavbarItem: couldn't find any document for sidebar with id "${sidebarId}"`,
-    );
-  }
-
-  return sidebarEntry[1].link;
-}
-
+import {useLayoutDocsSidebar} from '@docusaurus/theme-common';
 export default function DocSidebarNavbarItem({
   sidebarId,
   label,
   docsPluginId,
   ...props
 }) {
-  const {activeVersion, activeDoc} = useActiveDocContext(docsPluginId);
-  const {preferredVersion} = useDocsPreferredVersion(docsPluginId);
-  const latestVersion = useLatestVersion(docsPluginId); // Versions used to look for the doc to link to, ordered + no duplicate
+  const {activeDoc} = useActiveDocContext(docsPluginId);
+  const sidebarLink = useLayoutDocsSidebar(sidebarId, docsPluginId).link;
+
+  if (!sidebarLink) {
+    throw new Error(
+      `DocSidebarNavbarItem: Sidebar with ID "${sidebarId}" doesn't have anything to be linked to.`,
+    );
+  }
 
-  const versions = uniq(
-    [activeVersion, preferredVersion, latestVersion].filter(Boolean),
-  );
-  const sidebarLink = getSidebarLink(versions, sidebarId);
   const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
   return (
     <DefaultNavbarItem