@docusaurus/theme-classic 0.0.0-5050 → 0.0.0-5053

package/lib/getSwizzleConfig.js

@@ -199,13 +199,6 @@ function getSwizzleConfig() {
                 },
                 description: 'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
             },
-            // TODO should probably not even appear here
-            'NavbarItem/utils': {
-                actions: {
-                    eject: 'forbidden',
-                    wrap: 'forbidden',
-                },
-            },
             NotFound: {
                 actions: {
                     eject: 'safe',

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

@@ -42,7 +42,7 @@ export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar();
   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
       left={
@@ -59,7 +59,7 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && (
+          {!searchBarItem && (
             <NavbarSearch>
               <SearchBar />
             </NavbarSearch>

package/lib/theme/Navbar/Search/index.d.ts

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/Navbar/Search';
-export default function NavbarSearch({ children }: Props): JSX.Element;
+export default function NavbarSearch({ children, className, }: Props): JSX.Element;

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

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import styles from './styles.module.css';
-export default function NavbarSearch({children}) {
-  return <div className={styles.searchBox}>{children}</div>;
+export default function NavbarSearch({children, className}) {
+  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
 }

package/lib/theme/NavbarItem/DefaultNavbarItem.js

@@ -7,7 +7,6 @@
 import React from 'react';
 import clsx from 'clsx';
 import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 function DefaultNavbarItemDesktop({
   className,
   isDropdownItem = false,
@@ -19,6 +18,7 @@ function DefaultNavbarItemDesktop({
         isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
         className,
       )}
+      isDropdownLink={isDropdownItem}
       {...props}
     />
   );
@@ -44,7 +44,8 @@ export default function DefaultNavbarItem({
     <Comp
       {...props}
       activeClassName={
-        props.activeClassName ?? getInfimaActiveClassName(mobile)
+        props.activeClassName ??
+        (mobile ? 'menu__link--active' : 'navbar__link--active')
       }
     />
   );

package/lib/theme/NavbarItem/DocNavbarItem.js

@@ -5,11 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 import {useLayoutDoc} from '@docusaurus/theme-common';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 export default function DocNavbarItem({
   docId,
   label: staticLabel,
@@ -22,19 +20,14 @@ export default function DocNavbarItem({
   if (doc === null) {
     return null;
   }
-  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
   return (
     <DefaultNavbarItem
       exact
       {...props}
-      className={clsx(props.className, {
-        [activeDocInfimaClassName]:
-          // Do not make the item active if the active doc doesn't have sidebar.
-          // 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}
+      isActive={() =>
+        activeDoc?.path === doc.path ||
+        (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)
+      }
       label={staticLabel ?? doc.id}
       to={doc.path}
     />

package/lib/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -5,11 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 import {useLayoutDocsSidebar} from '@docusaurus/theme-common';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 export default function DocSidebarNavbarItem({
   sidebarId,
   label,
@@ -23,15 +21,11 @@ export default function DocSidebarNavbarItem({
       `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.js

@@ -36,7 +36,6 @@ export default function DocsVersionDropdownNavbarItem({
       activeDocContext.alternateDocVersions[version.name] ??
       getVersionMainDoc(version);
     return {
-      isNavLink: true,
       label: version.label,
       to: versionDoc.path,
       isActive: () => version === activeDocContext.activeVersion,

package/lib/theme/NavbarItem/DropdownNavbarItem.js

@@ -15,7 +15,6 @@ 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;
@@ -31,7 +30,13 @@ function isItemActive(item, localPathname) {
 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(() => {
@@ -91,7 +96,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
                 }
               }
             }}
-            activeClassName={dropdownLinkActiveClass}
+            activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}
           />
@@ -104,6 +109,7 @@ function DropdownNavbarItemMobile({
   items,
   className,
   position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
   ...props
 }) {
   const localPathname = useLocalPathname();
@@ -140,7 +146,7 @@ function DropdownNavbarItemMobile({
           <NavbarItem
             mobile
             isDropdownItem
-            onClick={props.onClick}
+            onClick={onClick}
             activeClassName="menu__link--active"
             {...childItemProps}
             key={i}

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -27,12 +27,20 @@ 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];

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

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/NavbarItem/NavbarNavLink';
-export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, activeClassName, prependBaseUrlToHref, ...props }: Props): JSX.Element;
+export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, isDropdownLink, prependBaseUrlToHref, ...props }: Props): JSX.Element;

package/lib/theme/NavbarItem/NavbarNavLink.js

@@ -10,7 +10,6 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
 import IconExternalLink from '@theme/IconExternalLink';
-const dropdownLinkActiveClass = 'dropdown__link--active';
 export default function NavbarNavLink({
   activeBasePath,
   activeBaseRegex,
@@ -18,7 +17,7 @@ export default function NavbarNavLink({
   href,
   label,
   html,
-  activeClassName = '',
+  isDropdownLink,
   prependBaseUrlToHref,
   ...props
 }) {
@@ -28,7 +27,6 @@ export default function NavbarNavLink({
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
-  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
   // Link content is set through html XOR label
   const linkContentProps = html
     ? {dangerouslySetInnerHTML: {__html: html}}
@@ -57,9 +55,6 @@ export default function NavbarNavLink({
     <Link
       to={toUrl}
       isNavLink
-      activeClassName={
-        !props.className?.includes(activeClassName) ? activeClassName : ''
-      }
       {...((activeBasePath || activeBaseRegex) && {
         isActive: (_match, location) =>
           activeBaseRegex

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

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

package/lib/theme/NavbarItem/SearchNavbarItem.js

@@ -7,12 +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/validateThemeConfig.js

@@ -177,6 +177,7 @@ const LocaleDropdownNavbarItemSchema = NavbarItemBaseSchema.append({
 });
 const SearchItemSchema = utils_validation_1.Joi.object({
     type: utils_validation_1.Joi.string().equal('search').required(),
+    className: utils_validation_1.Joi.string(),
 });
 const NavbarItemSchema = utils_validation_1.Joi.object({
     position: NavbarItemPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5050",
+  "version": "0.0.0-5053",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,15 +20,15 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5050",
-    "@docusaurus/plugin-content-blog": "0.0.0-5050",
-    "@docusaurus/plugin-content-docs": "0.0.0-5050",
-    "@docusaurus/plugin-content-pages": "0.0.0-5050",
-    "@docusaurus/theme-common": "0.0.0-5050",
-    "@docusaurus/theme-translations": "0.0.0-5050",
-    "@docusaurus/utils": "0.0.0-5050",
-    "@docusaurus/utils-common": "0.0.0-5050",
-    "@docusaurus/utils-validation": "0.0.0-5050",
+    "@docusaurus/core": "0.0.0-5053",
+    "@docusaurus/plugin-content-blog": "0.0.0-5053",
+    "@docusaurus/plugin-content-docs": "0.0.0-5053",
+    "@docusaurus/plugin-content-pages": "0.0.0-5053",
+    "@docusaurus/theme-common": "0.0.0-5053",
+    "@docusaurus/theme-translations": "0.0.0-5053",
+    "@docusaurus/utils": "0.0.0-5053",
+    "@docusaurus/utils-common": "0.0.0-5053",
+    "@docusaurus/utils-validation": "0.0.0-5053",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -43,8 +43,8 @@
     "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-5050",
-    "@docusaurus/types": "0.0.0-5050",
+    "@docusaurus/module-type-aliases": "0.0.0-5053",
+    "@docusaurus/types": "0.0.0-5053",
     "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "1e14a127a30082891b24582362a69bca2f8d4b0d"
+  "gitHead": "5aaad8c6db7c7c72a1e9514cf31749ae7e2de0a8"
 }

package/src/getSwizzleConfig.ts

@@ -214,13 +214,6 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
       },
-      // TODO should probably not even appear here
-      'NavbarItem/utils': {
-        actions: {
-          eject: 'forbidden',
-          wrap: 'forbidden',
-        },
-      },
       NotFound: {
         actions: {
           eject: 'safe',

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

@@ -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/Search/index.tsx

@@ -6,10 +6,14 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import type {Props} from '@theme/Navbar/Search';
 
 import styles from './styles.module.css';
 
-export default function NavbarSearch({children}: Props): JSX.Element {
-  return <div className={styles.searchBox}>{children}</div>;
+export default function NavbarSearch({
+  children,
+  className,
+}: Props): JSX.Element {
+  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
 }

package/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -8,7 +8,6 @@
 import React from 'react';
 import clsx from 'clsx';
 import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import type {
   DesktopOrMobileNavBarItemProps,
   Props,
@@ -25,6 +24,7 @@ function DefaultNavbarItemDesktop({
         isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
         className,
       )}
+      isDropdownLink={isDropdownItem}
       {...props}
     />
   );
@@ -58,7 +58,8 @@ export default function DefaultNavbarItem({
     <Comp
       {...props}
       activeClassName={
-        props.activeClassName ?? getInfimaActiveClassName(mobile)
+        props.activeClassName ??
+        (mobile ? 'menu__link--active' : 'navbar__link--active')
       }
     />
   );

package/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -6,11 +6,9 @@
  */
 
 import React from 'react';
-import clsx from 'clsx';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 import {useLayoutDoc} from '@docusaurus/theme-common';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';
 
 export default function DocNavbarItem({
@@ -27,20 +25,14 @@ export default function DocNavbarItem({
     return null;
   }
 
-  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
-
   return (
     <DefaultNavbarItem
       exact
       {...props}
-      className={clsx(props.className, {
-        [activeDocInfimaClassName]:
-          // Do not make the item active if the active doc doesn't have sidebar.
-          // 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}
+      isActive={() =>
+        activeDoc?.path === doc.path ||
+        (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)
+      }
       label={staticLabel ?? doc.id}
       to={doc.path}
     />

package/src/theme/NavbarItem/DocSidebarNavbarItem.tsx

@@ -6,11 +6,9 @@
  */
 
 import React from 'react';
-import clsx from 'clsx';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 import {useLayoutDocsSidebar} from '@docusaurus/theme-common';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem';
 
 export default function DocSidebarNavbarItem({
@@ -26,16 +24,11 @@ export default function DocSidebarNavbarItem({
       `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/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -41,7 +41,6 @@ export default function DocsVersionDropdownNavbarItem({
       activeDocContext.alternateDocVersions[version.name] ??
       getVersionMainDoc(version);
     return {
-      isNavLink: true,
       label: version.label,
       to: versionDoc.path,
       isActive: () => version === activeDocContext.activeVersion,

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -21,8 +21,6 @@ import type {
   Props,
 } from '@theme/NavbarItem/DropdownNavbarItem';
 
-const dropdownLinkActiveClass = 'dropdown__link--active';
-
 function isItemActive(
   item: LinkLikeNavbarItemProps,
   localPathname: string,
@@ -50,6 +48,7 @@ function DropdownNavbarItemDesktop({
   items,
   position,
   className,
+  onClick,
   ...props
 }: DesktopOrMobileNavBarItemProps) {
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -113,12 +112,12 @@ function DropdownNavbarItemDesktop({
                       ? nextNavbarItem
                       : // Next item is another dropdown; focus on the inner
                         // anchor element instead so there's outline
-                        nextNavbarItem.querySelector('a');
-                  (targetItem as HTMLElement).focus();
+                        nextNavbarItem.querySelector('a')!;
+                  targetItem.focus();
                 }
               }
             }}
-            activeClassName={dropdownLinkActiveClass}
+            activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}
           />
@@ -132,6 +131,7 @@ function DropdownNavbarItemMobile({
   items,
   className,
   position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
   ...props
 }: DesktopOrMobileNavBarItemProps) {
   const localPathname = useLocalPathname();
@@ -171,7 +171,7 @@ function DropdownNavbarItemMobile({
           <NavbarItem
             mobile
             isDropdownItem
-            onClick={props.onClick}
+            onClick={onClick}
             activeClassName="menu__link--active"
             {...childItemProps}
             key={i}

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -33,12 +33,20 @@ 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'
+          : '',
     };
   });
 

package/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -13,8 +13,6 @@ import {isRegexpStringMatch} from '@docusaurus/theme-common';
 import IconExternalLink from '@theme/IconExternalLink';
 import type {Props} from '@theme/NavbarItem/NavbarNavLink';
 
-const dropdownLinkActiveClass = 'dropdown__link--active';
-
 export default function NavbarNavLink({
   activeBasePath,
   activeBaseRegex,
@@ -22,7 +20,7 @@ export default function NavbarNavLink({
   href,
   label,
   html,
-  activeClassName = '',
+  isDropdownLink,
   prependBaseUrlToHref,
   ...props
 }: Props): JSX.Element {
@@ -32,7 +30,6 @@ export default function NavbarNavLink({
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
-  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
 
   // Link content is set through html XOR label
   const linkContentProps = html
@@ -64,9 +61,6 @@ export default function NavbarNavLink({
     <Link
       to={toUrl}
       isNavLink
-      activeClassName={
-        !props.className?.includes(activeClassName) ? activeClassName : ''
-      }
       {...((activeBasePath || activeBaseRegex) && {
         isActive: (_match, location) =>
           activeBaseRegex

package/src/theme/NavbarItem/SearchNavbarItem.tsx

@@ -10,13 +10,16 @@ import SearchBar from '@theme/SearchBar';
 import NavbarSearch from '@theme/Navbar/Search';
 import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 
-export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
+export default function SearchNavbarItem({
+  mobile,
+  className,
+}: Props): JSX.Element | null {
   if (mobile) {
     return null;
   }
 
   return (
-    <NavbarSearch>
+    <NavbarSearch className={className}>
       <SearchBar />
     </NavbarSearch>
   );

package/src/theme-classic.d.ts

@@ -777,6 +777,7 @@ declare module '@theme/Navbar/Search' {
 
   export interface Props {
     readonly children: ReactNode;
+    readonly className?: string;
   }
 
   export default function NavbarSearch(props: Props): JSX.Element;
@@ -808,7 +809,8 @@ declare module '@theme/NavbarItem/NavbarNavLink' {
     readonly exact?: boolean;
     readonly label?: ReactNode;
     readonly html?: string;
-    readonly prependBaseUrlToHref?: string;
+    readonly prependBaseUrlToHref?: boolean;
+    readonly isDropdownLink?: boolean;
   }
 
   export default function NavbarNavLink(props: Props): JSX.Element;
@@ -834,6 +836,7 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' {
 declare module '@theme/NavbarItem/SearchNavbarItem' {
   export interface Props {
     readonly mobile?: boolean;
+    readonly className?: string;
   }
 
   export default function SearchNavbarItem(props: Props): JSX.Element;
@@ -980,17 +983,6 @@ declare module '@theme/NavbarItem' {
   export default function NavbarItem(props: Props): JSX.Element;
 }
 
-declare module '@theme/NavbarItem/utils' {
-  /**
-   * On desktop and mobile, we would apply different class names for dropdown
-   * items.
-   * @see https://github.com/facebook/docusaurus/pull/5431
-   */
-  export function getInfimaActiveClassName(
-    mobile?: boolean,
-  ): `${'menu' | 'navbar'}__link--active`;
-}
-
 declare module '@theme/PaginatorNavLink' {
   import type {ReactNode} from 'react';
   import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';

package/src/validateThemeConfig.ts

@@ -200,6 +200,7 @@ const LocaleDropdownNavbarItemSchema = NavbarItemBaseSchema.append({
 
 const SearchItemSchema = Joi.object({
   type: Joi.string().equal('search').required(),
+  className: Joi.string(),
 });
 
 const NavbarItemSchema = Joi.object({

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

@@ -1,7 +0,0 @@
-/**
- * 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 declare const getInfimaActiveClassName: (mobile?: boolean | undefined) => `${'menu' | 'navbar'}__link--active`;

package/lib/theme/NavbarItem/utils.js

@@ -1,9 +0,0 @@
-/**
- * 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.
- */
-/* eslint-disable import/no-named-export */
-export const getInfimaActiveClassName = (mobile) =>
-  mobile ? 'menu__link--active' : 'navbar__link--active';

package/src/theme/NavbarItem/utils.ts

@@ -1,13 +0,0 @@
-/**
- * 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.
- */
-
-/* eslint-disable import/no-named-export */
-
-export const getInfimaActiveClassName = (
-  mobile?: boolean,
-): `${'menu' | 'navbar'}__link--active` =>
-  mobile ? 'menu__link--active' : 'navbar__link--active';