feat(v2): allow any type of NavbarItem to be passed in dropdown

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -8,7 +8,7 @@
 /* eslint-disable camelcase */
 
 declare module '@docusaurus/plugin-content-docs-types' {
-  import type {VersionBanner} from './types';
+  type VersionBanner = import('./types').VersionBanner;
 
   export type PropVersionMetadata = {
     pluginId: string;

packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx

@@ -58,7 +58,7 @@ function UnmaintainedVersionLabel({
 }
 
 const BannerLabelComponents: Record<
-  Props['versionMetadata']['banner'],
+  Exclude<Props['versionMetadata']['banner'], 'none'>,
   ComponentType<BannerLabelComponentProps>
 > = {
   unreleased: UnreleasedVersionLabel,

packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx

@@ -19,7 +19,7 @@ import {
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
 import useWindowSize from '@theme/hooks/useWindowSize';
-import NavbarItem from '@theme/NavbarItem';
+import NavbarItem, {Props as NavbarItemConfig} from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
 
@@ -28,9 +28,14 @@ import styles from './styles.module.css';
 // retrocompatible with v1
 const DefaultNavItemPosition = 'right';
 
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
 // If split links by left/right
 // if position is unspecified, fallback to right (as v1)
-function splitNavItemsByPosition(items) {
+function splitNavItemsByPosition(items: NavbarItemConfig[]) {
   const leftItems = items.filter(
     (item) => (item.position ?? DefaultNavItemPosition) === 'left',
   );
@@ -132,9 +137,7 @@ function NavbarMobileSidebar({
   toggleSidebar,
 }: NavbarMobileSidebarProps) {
   useLockBodyScroll(sidebarShown);
-  const {
-    navbar: {items},
-  } = useThemeConfig();
+  const items = useNavbarItems();
 
   const colorModeToggle = useColorModeToggle();
 
@@ -166,12 +169,7 @@ function NavbarMobileSidebar({
         <div className="menu">
           <ul className="menu__list">
             {items.map((item, i) => (
-              <NavbarItem
-                mobile
-                {...(item as any)} // TODO fix typing
-                onClick={toggleSidebar}
-                key={i}
-              />
+              <NavbarItem mobile {...item} onClick={toggleSidebar} key={i} />
             ))}
           </ul>
         </div>
@@ -196,14 +194,15 @@ function NavbarMobileSidebar({
 
 function Navbar(): JSX.Element {
   const {
-    navbar: {items, hideOnScroll, style},
+    navbar: {hideOnScroll, style},
   } = useThemeConfig();
 
   const mobileSidebar = useMobileSidebar();
   const colorModeToggle = useColorModeToggle();
 
   const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
 
+  const items = useNavbarItems();
   const hasSearchNavbarItem = items.some((item) => item.type === 'search');
   const {leftItems, rightItems} = splitNavItemsByPosition(items);
 

packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -5,16 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, useEffect} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import {useLocation} from '@docusaurus/router';
-import {
-  isSamePath,
-  useCollapsible,
-  Collapsible,
-} from '@docusaurus/theme-common';
 import type {
   NavLinkProps,
   DesktopOrMobileNavBarItemProps,
@@ -25,7 +19,7 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 
 const dropdownLinkActiveClass = 'dropdown__link--active';
 
-function NavLink({
+export function NavLink({
   activeBasePath,
   activeBaseRegex,
   to,
@@ -34,7 +28,7 @@ function NavLink({
   activeClassName = 'navbar__link--active',
   prependBaseUrlToHref,
   ...props
-}: NavLinkProps) {
+}: NavLinkProps): JSX.Element {
   // TODO all this seems hacky
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
   const toUrl = useBaseUrl(to);
@@ -75,159 +69,36 @@ function NavLink({
   );
 }
 
-function NavItemDesktop({
-  items,
-  position,
+function DefaultNavbarItemDesktop({
   className,
+  isDropdownItem = false,
   ...props
 }: DesktopOrMobileNavBarItemProps) {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const dropdownMenuRef = useRef<HTMLUListElement>(null);
-  const [showDropdown, setShowDropdown] = useState(false);
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
-        return;
-      }
-
-      setShowDropdown(false);
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [dropdownRef]);
-
-  const navLinkClassNames = (extraClassName?: string, isDropdownItem = false) =>
-    clsx(
-      {
-        'navbar__item navbar__link': !isDropdownItem,
-        dropdown__link: isDropdownItem,
-      },
-      extraClassName,
-    );
-
-  if (!items) {
-    return <NavLink className={navLinkClassNames(className)} {...props} />;
-  }
-
   return (
-    <div
-      ref={dropdownRef}
-      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
-        'dropdown--left': position === 'left',
-        'dropdown--right': position === 'right',
-        'dropdown--show': showDropdown,
-      })}>
-      <NavLink
-        className={navLinkClassNames(className)}
-        {...props}
-        onClick={props.to ? undefined : (e) => e.preventDefault()}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            setShowDropdown(!showDropdown);
-          }
-        }}>
-        {props.children ?? props.label}
-      </NavLink>
-      <ul ref={dropdownMenuRef} className="dropdown__menu">
-        {items.map(({className: childItemClassName, ...childItemProps}, i) => (
-          <li key={i}>
-            <NavLink
-              onKeyDown={(e) => {
-                if (i === items.length - 1 && e.key === 'Tab') {
-                  e.preventDefault();
-
-                  setShowDropdown(false);
-
-                  const nextNavbarItem = (dropdownRef.current as HTMLElement)
-                    .nextElementSibling;
-
-                  if (nextNavbarItem) {
-                    (nextNavbarItem as HTMLElement).focus();
-                  }
-                }
-              }}
-              activeClassName={dropdownLinkActiveClass}
-              className={navLinkClassNames(childItemClassName, true)}
-              {...childItemProps}
-            />
-          </li>
-        ))}
-      </ul>
-    </div>
+    <NavLink
+      className={clsx(
+        isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
-function NavItemMobile({
-  items,
+function DefaultNavbarItemMobile({
   className,
-  position: _position, // Need to destructure position from props so that it doesn't get passed on.
+  isDropdownItem: _isDropdownItem,
   ...props
 }: DesktopOrMobileNavBarItemProps) {
-  const {pathname} = useLocation();
-  const {collapsed, toggleCollapsed} = useCollapsible({
-    initialState: () =>
-      !items?.some((item) => isSamePath(item.to, pathname)) ?? true,
-  });
-
-  const navLinkClassNames = (extraClassName?: string, isSubList = false) =>
-    clsx(
-      'menu__link',
-      {
-        'menu__link--sublist': isSubList,
-      },
-      extraClassName,
-    );
-
-  if (!items) {
-    return (
-      <li className="menu__list-item">
-        <NavLink className={navLinkClassNames(className)} {...props} />
-      </li>
-    );
-  }
-
   return (
-    <li
-      className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
-      })}>
-      <NavLink
-        role="button"
-        className={navLinkClassNames(className, true)}
-        {...props}
-        onClick={(e) => {
-          e.preventDefault();
-          toggleCollapsed();
-        }}>
-        {props.children ?? props.label}
-      </NavLink>
-
-      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        {items.map(({className: childItemClassName, ...childItemProps}, i) => (
-          <li className="menu__list-item" key={i}>
-            <NavLink
-              activeClassName="menu__link--active"
-              className={navLinkClassNames(childItemClassName)}
-              {...childItemProps}
-              onClick={props.onClick}
-            />
-          </li>
-        ))}
-      </Collapsible>
+    <li className="menu__list-item">
+      <NavLink className={clsx('menu__link', className)} {...props} />
     </li>
   );
 }
 
 function DefaultNavbarItem({mobile = false, ...props}: Props): JSX.Element {
-  const Comp = mobile ? NavItemMobile : NavItemDesktop;
+  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
   return <Comp {...props} />;
 }
 

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -12,17 +12,10 @@ import clsx from 'clsx';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {uniq} from '@docusaurus/utils-common';
-import type {
-  GlobalDataVersion,
-  GlobalDataDoc,
-} from '@docusaurus/plugin-content-docs-types';
+import type {GlobalDataVersion} from '@docusaurus/plugin-content-docs-types';
 
 function getDocInVersions(versions: GlobalDataVersion[], docId: string) {
-  // vanilla-js flatten, TODO replace soon by ES flat() / flatMap()
-  const allDocs: GlobalDataDoc[] = [].concat(
-    ...versions.map((version) => version.docs),
-  );
-
+  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- ');

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import {
   useVersions,
   useLatestVersion,
@@ -52,20 +53,7 @@ export default function DocsVersionDropdownNavbarItem({
       };
     });
 
-    const items = [
-      ...dropdownItemsBefore,
-      ...versionLinks,
-      ...dropdownItemsAfter,
-    ];
-
-    // 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 undefined;
-    }
-
-    return items;
+    return [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter];
   }
 
   const items = getItems();
@@ -78,8 +66,23 @@ export default function DocsVersionDropdownNavbarItem({
   const dropdownTo =
     mobile && items ? undefined : 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
+        {...props}
+        mobile={mobile}
+        label={dropdownLabel}
+        to={dropdownTo}
+        isActive={dropdownActiveClassDisabled ? () => false : undefined}
+      />
+    );
+  }
+
   return (
-    <DefaultNavbarItem
+    <DropdownNavbarItem
       {...props}
       mobile={mobile}
       label={dropdownLabel}