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

package/{lib-next → lib}/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -5,11 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
-import clsx from 'clsx';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import {useLayoutDocsSidebar} from '@docusaurus/theme-common';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 export default function DocSidebarNavbarItem({
   sidebarId,
   label,
@@ -18,22 +16,16 @@ export default function DocSidebarNavbarItem({
 }) {
   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 activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
   return (
     <DefaultNavbarItem
       exact
       {...props}
-      className={clsx(props.className, {
-        [activeDocInfimaClassName]: activeDoc?.sidebar === sidebarId,
-      })}
-      activeClassName={activeDocInfimaClassName}
+      isActive={() => activeDoc?.sidebar === sidebarId}
       label={label ?? sidebarLink.label}
       to={sidebarLink.path}
     />

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+export default function DocsVersionDropdownNavbarItem({ mobile, docsPluginId, dropdownActiveClassDisabled, dropdownItemsBefore, dropdownItemsAfter, ...props }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import {
   useVersions,
   useActiveDocContext,
@@ -16,10 +14,10 @@ import {
   useDocsVersionCandidates,
 } from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
-
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 const getVersionMainDoc = (version) =>
   version.docs.find((doc) => doc.id === version.mainDocId);
-
 export default function DocsVersionDropdownNavbarItem({
   mobile,
   docsPluginId,
@@ -35,13 +33,12 @@ export default function DocsVersionDropdownNavbarItem({
     // We try to link to the same doc, in another version
     // When not possible, fallback to the "main doc" of the version
     const versionDoc =
-      activeDocContext?.alternateDocVersions[version.name] ??
+      activeDocContext.alternateDocVersions[version.name] ??
       getVersionMainDoc(version);
     return {
-      isNavLink: true,
       label: version.label,
       to: versionDoc.path,
-      isActive: () => version === activeDocContext?.activeVersion,
+      isActive: () => version === activeDocContext.activeVersion,
       onClick: () => savePreferredVersionName(version.name),
     };
   });
@@ -50,8 +47,8 @@ export default function DocsVersionDropdownNavbarItem({
     ...versionLinks,
     ...dropdownItemsAfter,
   ];
-  const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0]; // Mobile dropdown is handled a bit differently
-
+  const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0];
+  // Mobile dropdown is handled a bit differently
   const dropdownLabel =
     mobile && items.length > 1
       ? translate({
@@ -64,10 +61,10 @@ export default function DocsVersionDropdownNavbarItem({
   const dropdownTo =
     mobile && items.length > 1
       ? undefined
-      : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item. If we build
+      : getVersionMainDoc(dropdownVersion).path;
+  // We don't want to render a version dropdown with 0 or 1 item. If we build
   // the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
   // We'd rather render a button instead of a dropdown
-
   if (items.length <= 1) {
     return (
       <DefaultNavbarItem
@@ -79,7 +76,6 @@ export default function DocsVersionDropdownNavbarItem({
       />
     );
   }
-
   return (
     <DropdownNavbarItem
       {...props}

package/lib/theme/NavbarItem/DocsVersionNavbarItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/DocsVersionNavbarItem';
+export default function DocsVersionNavbarItem({ label: staticLabel, to: staticTo, docsPluginId, ...props }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/DocsVersionNavbarItem.js

@@ -5,12 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {useDocsVersionCandidates} from '@docusaurus/theme-common';
-
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 const getVersionMainDoc = (version) =>
   version.docs.find((doc) => doc.id === version.mainDocId);
-
 export default function DocsVersionNavbarItem({
   label: staticLabel,
   to: staticTo,

package/lib/theme/NavbarItem/DropdownNavbarItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/DropdownNavbarItem';
+export default function DropdownNavbarItem({ mobile, ...props }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/DropdownNavbarItem.js

@@ -15,29 +15,28 @@ import {
 } from '@docusaurus/theme-common';
 import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import NavbarItem from '@theme/NavbarItem';
-const dropdownLinkActiveClass = 'dropdown__link--active';
-
 function isItemActive(item, localPathname) {
   if (isSamePath(item.to, localPathname)) {
     return true;
   }
-
   if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
     return true;
   }
-
   if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
     return true;
   }
-
   return false;
 }
-
 function containsActiveItems(items, localPathname) {
   return items.some((item) => isItemActive(item, localPathname));
 }
-
-function DropdownNavbarItemDesktop({items, position, className, ...props}) {
+function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}) {
   const dropdownRef = useRef(null);
   const [showDropdown, setShowDropdown] = useState(false);
   useEffect(() => {
@@ -45,10 +44,8 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
       if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
         return;
       }
-
       setShowDropdown(false);
     };
-
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return () => {
@@ -88,18 +85,18 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
                 e.preventDefault();
                 setShowDropdown(false);
                 const nextNavbarItem = dropdownRef.current.nextElementSibling;
-
                 if (nextNavbarItem) {
                   const targetItem =
                     nextNavbarItem instanceof HTMLAnchorElement
-                      ? nextNavbarItem // Next item is another dropdown; focus on the inner
-                      : // anchor element instead so there's outline
+                      ? nextNavbarItem
+                      : // Next item is another dropdown; focus on the inner
+                        // anchor element instead so there's outline
                         nextNavbarItem.querySelector('a');
                   targetItem.focus();
                 }
               }
             }}
-            activeClassName={dropdownLinkActiveClass}
+            activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}
           />
@@ -108,20 +105,19 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
     </div>
   );
 }
-
 function DropdownNavbarItemMobile({
   items,
   className,
-  position,
-  // Need to destructure position from props so that it doesn't get passed on.
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
   ...props
 }) {
   const localPathname = useLocalPathname();
   const containsActive = containsActiveItems(items, localPathname);
   const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({
     initialState: () => !containsActive,
-  }); // Expand/collapse if any item active after a navigation
-
+  });
+  // Expand/collapse if any item active after a navigation
   useEffect(() => {
     if (containsActive) {
       setCollapsed(!containsActive);
@@ -150,7 +146,7 @@ function DropdownNavbarItemMobile({
           <NavbarItem
             mobile
             isDropdownItem
-            onClick={props.onClick}
+            onClick={onClick}
             activeClassName="menu__link--active"
             {...childItemProps}
             key={i}
@@ -160,7 +156,6 @@ function DropdownNavbarItemMobile({
     </li>
   );
 }
-
 export default function DropdownNavbarItem({mobile = false, ...props}) {
   const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
   return <Comp {...props} />;

package/lib/theme/NavbarItem/HtmlNavbarItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/HtmlNavbarItem';
+export default function HtmlNavbarItem({ value, className, mobile, isDropdownItem, }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/HtmlNavbarItem.js

@@ -22,9 +22,7 @@ export default function HtmlNavbarItem({
         },
         className,
       )}
-      dangerouslySetInnerHTML={{
-        __html: value,
-      }}
+      dangerouslySetInnerHTML={{__html: value}}
     />
   );
 }

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+export default function LocaleDropdownNavbarItem({ mobile, dropdownItemsBefore, dropdownItemsAfter, ...props }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
-import IconLanguage from '@theme/IconLanguage';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import IconLanguage from '@theme/IconLanguage';
 import styles from './styles.module.css';
 export default function LocaleDropdownNavbarItem({
   mobile,
@@ -27,16 +27,24 @@ export default function LocaleDropdownNavbarItem({
       fullyQualified: false,
     })}`;
     return {
-      isNavLink: true,
       label: localeConfigs[locale].label,
       to,
       target: '_self',
       autoAddBaseUrl: false,
-      className: locale === currentLocale ? 'dropdown__link--active' : '',
+      className:
+        // eslint-disable-next-line no-nested-ternary
+        locale === currentLocale
+          ? // Similar idea as DefaultNavbarItem: select the right Infima active
+            // class name. This cannot be substituted with isActive, because the
+            // target URLs contain `pathname://` and therefore are not NavLinks!
+            mobile
+            ? 'menu__link--active'
+            : 'dropdown__link--active'
+          : '',
     };
   });
-  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; // Mobile is handled a bit differently
-
+  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+  // Mobile is handled a bit differently
   const dropdownLabel = mobile
     ? translate({
         message: 'Languages',

package/lib/theme/NavbarItem/NavbarNavLink.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/NavbarNavLink';
+export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, isDropdownLink, prependBaseUrlToHref, ...props }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/NavbarNavLink.js

@@ -7,10 +7,9 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import IconExternalLink from '@theme/IconExternalLink';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
-const dropdownLinkActiveClass = 'dropdown__link--active';
+import IconExternalLink from '@theme/IconExternalLink';
 export default function NavbarNavLink({
   activeBasePath,
   activeBaseRegex,
@@ -18,7 +17,7 @@ export default function NavbarNavLink({
   href,
   label,
   html,
-  activeClassName = '',
+  isDropdownLink,
   prependBaseUrlToHref,
   ...props
 }) {
@@ -26,34 +25,23 @@ export default function NavbarNavLink({
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
   const toUrl = useBaseUrl(to);
   const activeBaseUrl = useBaseUrl(activeBasePath);
-  const normalizedHref = useBaseUrl(href, {
-    forcePrependBaseUrl: true,
-  });
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
-  const isDropdownLink = activeClassName === dropdownLinkActiveClass; // Link content is set through html XOR label
-
+  // Link content is set through html XOR label
   const linkContentProps = html
-    ? {
-        dangerouslySetInnerHTML: {
-          __html: html,
-        },
-      }
+    ? {dangerouslySetInnerHTML: {__html: html}}
     : {
         children: (
           <>
             {label}
             {isExternalLink && (
               <IconExternalLink
-                {...(isDropdownLink && {
-                  width: 12,
-                  height: 12,
-                })}
+                {...(isDropdownLink && {width: 12, height: 12})}
               />
             )}
           </>
         ),
       };
-
   if (href) {
     return (
       <Link
@@ -63,14 +51,10 @@ export default function NavbarNavLink({
       />
     );
   }
-
   return (
     <Link
       to={toUrl}
       isNavLink
-      activeClassName={
-        !props.className?.includes(activeClassName) ? activeClassName : ''
-      }
       {...((activeBasePath || activeBaseRegex) && {
         isActive: (_match, location) =>
           activeBaseRegex

package/lib/theme/NavbarItem/SearchNavbarItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem/SearchNavbarItem';
+export default function SearchNavbarItem({ mobile, className, }: Props): JSX.Element | null;

package/{lib-next → lib}/theme/NavbarItem/SearchNavbarItem.js

@@ -7,13 +7,12 @@
 import React from 'react';
 import SearchBar from '@theme/SearchBar';
 import NavbarSearch from '@theme/Navbar/Search';
-export default function SearchNavbarItem({mobile}) {
+export default function SearchNavbarItem({mobile, className}) {
   if (mobile) {
     return null;
   }
-
   return (
-    <NavbarSearch>
+    <NavbarSearch className={className}>
       <SearchBar />
     </NavbarSearch>
   );

package/lib/theme/NavbarItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/NavbarItem';
+export default function NavbarItem({ type, ...props }: Props): JSX.Element;

package/{lib-next → lib}/theme/NavbarItem/index.js

@@ -6,29 +6,19 @@
  */
 import React from 'react';
 import ComponentTypes from '@theme/NavbarItem/ComponentTypes';
-
-const getNavbarItemComponent = (type) => {
-  const component = ComponentTypes[type];
-
-  if (!component) {
-    throw new Error(`No NavbarItem component found for type "${type}".`);
-  }
-
-  return component;
-};
-
-function getComponentType(type, isDropdown) {
+function normalizeComponentType(type, props) {
   // Backward compatibility: navbar item with no type set
   // but containing dropdown items should use the type "dropdown"
   if (!type || type === 'default') {
-    return isDropdown ? 'dropdown' : 'default';
+    return 'items' in props ? 'dropdown' : 'default';
   }
-
   return type;
 }
-
 export default function NavbarItem({type, ...props}) {
-  const componentType = getComponentType(type, props.items !== undefined);
-  const NavbarItemComponent = getNavbarItemComponent(componentType);
+  const componentType = normalizeComponentType(type, props);
+  const NavbarItemComponent = ComponentTypes[componentType];
+  if (!NavbarItemComponent) {
+    throw new Error(`No NavbarItem component found for type "${type}".`);
+  }
   return <NavbarItemComponent {...props} />;
 }

package/lib/theme/NotFound.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+export default function NotFound(): JSX.Element;

package/{lib-next → lib}/theme/NotFound.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
 import Translate, {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
 export default function NotFound() {
   return (
     <>

package/lib/theme/PaginatorNavLink/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/PaginatorNavLink';
+export default function PaginatorNavLink(props: Props): JSX.Element;

package/lib/theme/SearchBar.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { default } from '@docusaurus/Noop';

package/lib/theme/SearchMetadata/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/SearchMetadata';
+export default function SearchMetadata({ locale, version, tag, }: Props): JSX.Element;

package/{lib-next → lib}/theme/SearchMetadata/index.js

@@ -18,9 +18,9 @@ export default function SearchMetadata({locale, version, tag}) {
   return (
     <Head>
       {/*
-      Docusaurus metadata, used by third-party search plugin
-      See https://github.com/cmfcmf/docusaurus-search-local/issues/99
-      */}
+        Docusaurus metadata, used by third-party search plugin
+        See https://github.com/cmfcmf/docusaurus-search-local/issues/99
+        */}
       {locale && <meta name="docusaurus_locale" content={locale} />}
       {version && <meta name="docusaurus_version" content={version} />}
       {tag && <meta name="docusaurus_tag" content={tag} />}

package/lib/theme/SiteMetadata/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+export default function SiteMetadata(): JSX.Element;