@docusaurus/theme-classic 2.0.0-beta.fbdeefcac → 2.0.0-rc.1

package/lib/theme/NavbarItem/DefaultNavbarItem.js

@@ -1,209 +1,52 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
-
-var _router = require("@docusaurus/router");
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
-
-var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * 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.
  */
-const dropdownLinkActiveClass = 'dropdown__link--active';
-
-function NavLink({
-  activeBasePath,
-  activeBaseRegex,
-  to,
-  href,
-  label,
-  activeClassName = 'navbar__link--active',
-  prependBaseUrlToHref,
-  ...props
-}) {
-  // TODO all this seems hacky
-  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
-  const toUrl = (0, _useBaseUrl.default)(to);
-  const activeBaseUrl = (0, _useBaseUrl.default)(activeBasePath);
-  const normalizedHref = (0, _useBaseUrl.default)(href, {
-    forcePrependBaseUrl: true
-  });
-  const isExternalLink = label && href && !(0, _isInternalUrl.default)(href);
-  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
-  return <_Link.default {...href ? {
-    href: prependBaseUrlToHref ? normalizedHref : href
-  } : {
-    isNavLink: true,
-    activeClassName,
-    to: toUrl,
-    ...(activeBasePath || activeBaseRegex ? {
-      isActive: (_match, location) => activeBaseRegex ? new RegExp(activeBaseRegex).test(location.pathname) : location.pathname.startsWith(activeBaseUrl)
-    } : null)
-  }} {...props}>
-      {isExternalLink ? <span>
-          {label}
-          <_IconExternalLink.default {...isDropdownLink && {
-        width: 12,
-        height: 12
-      }} />
-        </span> : label}
-    </_Link.default>;
-}
-
-function NavItemDesktop({
-  items,
-  position,
+import React from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+function DefaultNavbarItemDesktop({
   className,
+  isDropdownItem = false,
   ...props
 }) {
-  var _props$children;
-
-  const dropdownRef = (0, _react.useRef)(null);
-  const dropdownMenuRef = (0, _react.useRef)(null);
-  const [showDropdown, setShowDropdown] = (0, _react.useState)(false);
-  (0, _react.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, isDropdownItem = false) => (0, _clsx.default)({
-    'navbar__item navbar__link': !isDropdownItem,
-    dropdown__link: isDropdownItem
-  }, extraClassName);
-
-  if (!items) {
-    return <NavLink className={navLinkClassNames(className)} {...props} />;
+  const element = (
+    <NavbarNavLink
+      className={clsx(
+        isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
+        className,
+      )}
+      isDropdownLink={isDropdownItem}
+      {...props}
+    />
+  );
+  if (isDropdownItem) {
+    return <li>{element}</li>;
   }
-
-  return <div ref={dropdownRef} className={(0, _clsx.default)('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.children) !== null && _props$children !== void 0 ? _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.nextElementSibling;
-
-            if (nextNavbarItem) {
-              nextNavbarItem.focus();
-            }
-          }
-        }} activeClassName={dropdownLinkActiveClass} className={navLinkClassNames(childItemClassName, true)} {...childItemProps} />
-          </li>)}
-      </ul>
-    </div>;
+  return element;
 }
-
-function NavItemMobile({
-  items,
-  className,
-  position: _position,
-  // Need to destructure position from props so that it doesn't get passed on.
-  ...props
-}) {
-  var _menuListRef$current, _menuListRef$current2, _props$children2;
-
-  const menuListRef = (0, _react.useRef)(null);
-  const {
-    pathname
-  } = (0, _router.useLocation)();
-  const [collapsed, setCollapsed] = (0, _react.useState)(() => {
-    var _items$some;
-
-    return (_items$some = !(items !== null && items !== void 0 && items.some(item => (0, _themeCommon.isSamePath)(item.to, pathname)))) !== null && _items$some !== void 0 ? _items$some : true;
-  });
-
-  const navLinkClassNames = (extraClassName, isSubList = false) => (0, _clsx.default)('menu__link', {
-    'menu__link--sublist': isSubList
-  }, extraClassName);
-
-  if (!items) {
-    return <li className="menu__list-item">
-        <NavLink className={navLinkClassNames(className)} {...props} />
-      </li>;
-  }
-
-  const menuListHeight = (_menuListRef$current = menuListRef.current) !== null && _menuListRef$current !== void 0 && _menuListRef$current.scrollHeight ? `${(_menuListRef$current2 = menuListRef.current) === null || _menuListRef$current2 === void 0 ? void 0 : _menuListRef$current2.scrollHeight}px` : undefined;
-  return <li className={(0, _clsx.default)('menu__list-item', {
-    'menu__list-item--collapsed': collapsed
-  })}>
-      <NavLink role="button" className={navLinkClassNames(className, true)} {...props} onClick={e => {
-      e.preventDefault();
-      setCollapsed(state => !state);
-    }}>
-        {(_props$children2 = props.children) !== null && _props$children2 !== void 0 ? _props$children2 : props.label}
-      </NavLink>
-      <ul className="menu__list" ref={menuListRef} style={{
-      height: !collapsed ? menuListHeight : undefined
-    }}>
-        {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>)}
-      </ul>
-    </li>;
+function DefaultNavbarItemMobile({className, isDropdownItem, ...props}) {
+  return (
+    <li className="menu__list-item">
+      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
+    </li>
+  );
 }
-
-function DefaultNavbarItem({
+export default function DefaultNavbarItem({
   mobile = false,
+  position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }) {
-  const Comp = mobile ? NavItemMobile : NavItemDesktop;
-  return <Comp {...props} />;
+  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
+  return (
+    <Comp
+      {...props}
+      activeClassName={
+        props.activeClassName ??
+        (mobile ? 'menu__link--active' : 'navbar__link--active')
+      }
+    />
+  );
 }
-
-var _default = DefaultNavbarItem;
-exports.default = _default;

package/lib/theme/NavbarItem/DocNavbarItem.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/DocNavbarItem';
+export default function DocNavbarItem({ docId, label: staticLabel, docsPluginId, ...props }: Props): JSX.Element | null;

package/lib/theme/NavbarItem/DocNavbarItem.js

@@ -1,63 +1,35 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DocNavbarItem;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
-
-var _useDocs = require("@theme/hooks/useDocs");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _utilsCommon = require("@docusaurus/utils-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-function getDocInVersions(versions, docId) {
-  // vanilla-js flatten, TODO replace soon by ES flat() / flatMap()
-  const allDocs = [].concat(...versions.map(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;
-}
-
-function DocNavbarItem({
+import React from 'react';
+import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
+import {useLayoutDoc} from '@docusaurus/theme-common/internal';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+export default function DocNavbarItem({
   docId,
-  activeSidebarClassName,
   label: staticLabel,
   docsPluginId,
   ...props
 }) {
-  const {
-    activeVersion,
-    activeDoc
-  } = (0, _useDocs.useActiveDocContext)(docsPluginId);
-  const {
-    preferredVersion
-  } = (0, _themeCommon.useDocsPreferredVersion)(docsPluginId);
-  const latestVersion = (0, _useDocs.useLatestVersion)(docsPluginId); // Versions used to look for the doc to link to, ordered + no duplicate
-
-  const versions = (0, _utilsCommon.uniq)([activeVersion, preferredVersion, latestVersion].filter(Boolean));
-  const doc = getDocInVersions(versions, docId);
-  return <_DefaultNavbarItem.default exact {...props} className={(0, _clsx.default)(props.className, {
-    [activeSidebarClassName]: activeDoc && activeDoc.sidebar === doc.sidebar
-  })} label={staticLabel !== null && staticLabel !== void 0 ? staticLabel : doc.id} to={doc.path} />;
-}
+  const {activeDoc} = useActiveDocContext(docsPluginId);
+  const doc = useLayoutDoc(docId, docsPluginId);
+  // Draft items are not displayed in the navbar.
+  if (doc === null) {
+    return null;
+  }
+  return (
+    <DefaultNavbarItem
+      exact
+      {...props}
+      isActive={() =>
+        activeDoc?.path === doc.path ||
+        (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)
+      }
+      label={staticLabel ?? doc.id}
+      to={doc.path}
+    />
+  );
+}

package/lib/theme/NavbarItem/DocSidebarNavbarItem.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/DocSidebarNavbarItem';
+export default function DocSidebarNavbarItem({ sidebarId, label, docsPluginId, ...props }: Props): JSX.Element;

package/lib/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -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 {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
+import {useLayoutDocsSidebar} from '@docusaurus/theme-common/internal';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+export default function DocSidebarNavbarItem({
+  sidebarId,
+  label,
+  docsPluginId,
+  ...props
+}) {
+  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.`,
+    );
+  }
+  return (
+    <DefaultNavbarItem
+      exact
+      {...props}
+      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/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -1,29 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DocsVersionDropdownNavbarItem;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
-
-var _useDocs = require("@theme/hooks/useDocs");
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-const getVersionMainDoc = version => version.docs.find(doc => doc.id === version.mainDocId);
-
-function DocsVersionDropdownNavbarItem({
+import React from 'react';
+import {
+  useVersions,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
+import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
+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,
   dropdownActiveClassDisabled,
@@ -31,46 +24,64 @@ function DocsVersionDropdownNavbarItem({
   dropdownItemsAfter,
   ...props
 }) {
-  var _ref, _activeDocContext$act;
-
-  const activeDocContext = (0, _useDocs.useActiveDocContext)(docsPluginId);
-  const versions = (0, _useDocs.useVersions)(docsPluginId);
-  const latestVersion = (0, _useDocs.useLatestVersion)(docsPluginId);
-  const {
-    preferredVersion,
-    savePreferredVersionName
-  } = (0, _themeCommon.useDocsPreferredVersion)(docsPluginId);
-
-  function getItems() {
-    const versionLinks = versions.map(version => {
-      // 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 === null || activeDocContext === void 0 ? void 0 : activeDocContext.alternateDocVersions[version.name]) || getVersionMainDoc(version);
-      return {
-        isNavLink: true,
-        label: version.label,
-        to: versionDoc.path,
-        isActive: () => version === (activeDocContext === null || activeDocContext === void 0 ? void 0 : activeDocContext.activeVersion),
-        onClick: () => {
-          savePreferredVersionName(version.name);
-        }
-      };
-    });
-    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;
+  const activeDocContext = useActiveDocContext(docsPluginId);
+  const versions = useVersions(docsPluginId);
+  const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
+  const versionLinks = versions.map((version) => {
+    // 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] ??
+      getVersionMainDoc(version);
+    return {
+      label: version.label,
+      to: versionDoc.path,
+      isActive: () => version === activeDocContext.activeVersion,
+      onClick: () => savePreferredVersionName(version.name),
+    };
+  });
+  const items = [
+    ...dropdownItemsBefore,
+    ...versionLinks,
+    ...dropdownItemsAfter,
+  ];
+  const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0];
+  // Mobile dropdown is handled a bit differently
+  const dropdownLabel =
+    mobile && items.length > 1
+      ? translate({
+          id: 'theme.navbar.mobileVersionsDropdown.label',
+          message: 'Versions',
+          description:
+            'The label for the navbar versions dropdown on mobile view',
+        })
+      : dropdownVersion.label;
+  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
+  // 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}
+      />
+    );
   }
-
-  const items = getItems();
-  const dropdownVersion = (_ref = (_activeDocContext$act = activeDocContext.activeVersion) !== null && _activeDocContext$act !== void 0 ? _activeDocContext$act : preferredVersion) !== null && _ref !== void 0 ? _ref : latestVersion; // Mobile dropdown is handled a bit differently
-
-  const dropdownLabel = mobile && items ? 'Versions' : dropdownVersion.label;
-  const dropdownTo = mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path;
-  return <_DefaultNavbarItem.default {...props} mobile={mobile} label={dropdownLabel} to={dropdownTo} items={items} isActive={dropdownActiveClassDisabled ? () => false : undefined} />;
-}
+  return (
+    <DropdownNavbarItem
+      {...props}
+      mobile={mobile}
+      label={dropdownLabel}
+      to={dropdownTo}
+      items={items}
+      isActive={dropdownActiveClassDisabled ? () => false : undefined}
+    />
+  );
+}

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/theme/NavbarItem/DocsVersionNavbarItem.js

@@ -1,43 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DocsVersionNavbarItem;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
-
-var _useDocs = require("@theme/hooks/useDocs");
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-const getVersionMainDoc = version => version.docs.find(doc => doc.id === version.mainDocId);
-
-function DocsVersionNavbarItem({
+import React from 'react';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
+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,
   docsPluginId,
   ...props
 }) {
-  var _ref;
-
-  const activeVersion = (0, _useDocs.useActiveVersion)(docsPluginId);
-  const {
-    preferredVersion
-  } = (0, _themeCommon.useDocsPreferredVersion)(docsPluginId);
-  const latestVersion = (0, _useDocs.useLatestVersion)(docsPluginId);
-  const version = (_ref = activeVersion !== null && activeVersion !== void 0 ? activeVersion : preferredVersion) !== null && _ref !== void 0 ? _ref : latestVersion;
-  const label = staticLabel !== null && staticLabel !== void 0 ? staticLabel : version.label;
-  const path = staticTo !== null && staticTo !== void 0 ? staticTo : getVersionMainDoc(version).path;
-  return <_DefaultNavbarItem.default {...props} label={label} to={path} />;
-}
+  const version = useDocsVersionCandidates(docsPluginId)[0];
+  const label = staticLabel ?? version.label;
+  const path = staticTo ?? getVersionMainDoc(version).path;
+  return <DefaultNavbarItem {...props} label={label} to={path} />;
+}

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;