@docusaurus/theme-classic 0.0.0-5051 → 0.0.0-5052

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/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-5051",
+  "version": "0.0.0-5052",
   "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-5051",
-    "@docusaurus/plugin-content-blog": "0.0.0-5051",
-    "@docusaurus/plugin-content-docs": "0.0.0-5051",
-    "@docusaurus/plugin-content-pages": "0.0.0-5051",
-    "@docusaurus/theme-common": "0.0.0-5051",
-    "@docusaurus/theme-translations": "0.0.0-5051",
-    "@docusaurus/utils": "0.0.0-5051",
-    "@docusaurus/utils-common": "0.0.0-5051",
-    "@docusaurus/utils-validation": "0.0.0-5051",
+    "@docusaurus/core": "0.0.0-5052",
+    "@docusaurus/plugin-content-blog": "0.0.0-5052",
+    "@docusaurus/plugin-content-docs": "0.0.0-5052",
+    "@docusaurus/plugin-content-pages": "0.0.0-5052",
+    "@docusaurus/theme-common": "0.0.0-5052",
+    "@docusaurus/theme-translations": "0.0.0-5052",
+    "@docusaurus/utils": "0.0.0-5052",
+    "@docusaurus/utils-common": "0.0.0-5052",
+    "@docusaurus/utils-validation": "0.0.0-5052",
     "@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-5051",
-    "@docusaurus/types": "0.0.0-5051",
+    "@docusaurus/module-type-aliases": "0.0.0-5052",
+    "@docusaurus/types": "0.0.0-5052",
     "@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": "98ecf4caa7fda660f156a1e78cff95058256ac6b"
+  "gitHead": "4a38a12418dc0d2bfa287bd38392fabf04222556"
 }

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/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;
@@ -834,6 +835,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;

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({