@docusaurus/theme-classic 3.7.0-canary-6272 → 3.7.0-canary-6274

package/lib/theme/NavbarItem/DefaultNavbarItem/Desktop/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.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/NavbarItem/DefaultNavbarItem/Desktop';
+export default function DefaultNavbarItemDesktop({ className, isDropdownItem, ...props }: Props): ReactNode;

package/lib/theme/NavbarItem/DefaultNavbarItem/Desktop/index.js

@@ -0,0 +1,29 @@
+/**
+ * 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 clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+export default function DefaultNavbarItemDesktop({
+  className,
+  isDropdownItem = false,
+  ...props
+}) {
+  const element = (
+    <NavbarNavLink
+      className={clsx(
+        isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
+        className,
+      )}
+      isDropdownLink={isDropdownItem}
+      {...props}
+    />
+  );
+  if (isDropdownItem) {
+    return <li>{element}</li>;
+  }
+  return element;
+}

package/lib/theme/NavbarItem/DefaultNavbarItem/Mobile/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.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/NavbarItem/DefaultNavbarItem/Mobile';
+export default function DefaultNavbarItemMobile({ className, isDropdownItem, ...props }: Props): ReactNode;

package/lib/theme/NavbarItem/DefaultNavbarItem/Mobile/index.js

@@ -0,0 +1,20 @@
+/**
+ * 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 clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+export default function DefaultNavbarItemMobile({
+  className,
+  isDropdownItem,
+  ...props
+}) {
+  return (
+    <li className="menu__list-item">
+      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
+    </li>
+  );
+}

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

@@ -0,0 +1,25 @@
+/**
+ * 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 DefaultNavbarItemMobile from '@theme/NavbarItem/DefaultNavbarItem/Mobile';
+import DefaultNavbarItemDesktop from '@theme/NavbarItem/DefaultNavbarItem/Desktop';
+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 ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
+  return (
+    <Comp
+      {...props}
+      activeClassName={
+        props.activeClassName ??
+        (mobile ? 'menu__link--active' : 'navbar__link--active')
+      }
+    />
+  );
+}

package/lib/theme/NavbarItem/DropdownNavbarItem/Desktop/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.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/NavbarItem/DropdownNavbarItem/Desktop';
+export default function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }: Props): ReactNode;

package/lib/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js

@@ -0,0 +1,74 @@
+/**
+ * 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, {useState, useRef, useEffect} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme/NavbarItem';
+export default function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}) {
+  const dropdownRef = useRef(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);
+    document.addEventListener('focusin', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
+    };
+  }, [dropdownRef]);
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}>
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        // # hash permits to make the <a> tag focusable in case no link target
+        // See https://github.com/facebook/docusaurus/pull/6003
+        // There's probably a better solution though...
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            setShowDropdown(!showDropdown);
+          }
+        }}>
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ul className="dropdown__menu">
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+/**
+ * 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 { type ReactNode } from 'react';
+import type { Props } from '@theme/NavbarItem/DropdownNavbarItem/Mobile';
+export default function DropdownNavbarItemMobile({ items, className, position, // Need to destructure position from props so that it doesn't get passed on.
+onClick, ...props }: Props): ReactNode;

package/lib/theme/NavbarItem/DropdownNavbarItem/Mobile/index.js

@@ -0,0 +1,142 @@
+/**
+ * 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, {useEffect} from 'react';
+import clsx from 'clsx';
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common';
+import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme/NavbarItem';
+import styles from './styles.module.css';
+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 CollapseButton({collapsed, onClick}) {
+  return (
+    <button
+      aria-label={
+        collapsed
+          ? translate({
+              id: 'theme.navbar.mobileDropdown.collapseButton.expandAriaLabel',
+              message: 'Expand the dropdown',
+              description:
+                'The ARIA label of the button to expand the mobile dropdown navbar item',
+            })
+          : translate({
+              id: 'theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel',
+              message: 'Collapse the dropdown',
+              description:
+                'The ARIA label of the button to collapse the mobile dropdown navbar item',
+            })
+      }
+      aria-expanded={!collapsed}
+      type="button"
+      className="clean-btn menu__caret"
+      onClick={onClick}
+    />
+  );
+}
+function useItemCollapsible({active}) {
+  const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({
+    initialState: () => !active,
+  });
+  // Expand if any item active after a navigation
+  useEffect(() => {
+    if (active) {
+      setCollapsed(false);
+    }
+  }, [active, setCollapsed]);
+  return {
+    collapsed,
+    toggleCollapsed,
+  };
+}
+export default function DropdownNavbarItemMobile({
+  items,
+  className,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
+  ...props
+}) {
+  const localPathname = useLocalPathname();
+  const isActive = isSamePath(props.to, localPathname);
+  const containsActive = containsActiveItems(items, localPathname);
+  const {collapsed, toggleCollapsed} = useItemCollapsible({
+    active: isActive || containsActive,
+  });
+  // # hash permits to make the <a> tag focusable in case no link target
+  // See https://github.com/facebook/docusaurus/pull/6003
+  // There's probably a better solution though...
+  const href = props.to ? undefined : '#';
+  return (
+    <li
+      className={clsx('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}>
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isActive,
+        })}>
+        <NavbarNavLink
+          role="button"
+          className={clsx(
+            styles.dropdownNavbarItemMobile,
+            'menu__link menu__link--sublist',
+            className,
+          )}
+          href={href}
+          {...props}
+          onClick={(e) => {
+            // Prevent navigation when link is "#"
+            if (href === '#') {
+              e.preventDefault();
+            }
+            // Otherwise we let navigation eventually happen, and/or collapse
+            toggleCollapsed();
+          }}>
+          {props.children ?? props.label}
+        </NavbarNavLink>
+        <CollapseButton
+          collapsed={collapsed}
+          onClick={(e) => {
+            e.preventDefault();
+            toggleCollapsed();
+          }}
+        />
+      </div>
+
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            mobile
+            isDropdownItem
+            onClick={onClick}
+            activeClassName="menu__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </Collapsible>
+    </li>
+  );
+}

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

@@ -4,152 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useState, useRef, useEffect} from 'react';
-import clsx from 'clsx';
-import {
-  isRegexpStringMatch,
-  useCollapsible,
-  Collapsible,
-} from '@docusaurus/theme-common';
-import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
-import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import NavbarItem from '@theme/NavbarItem';
-import styles from './styles.module.css';
-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,
-  onClick,
-  ...props
-}) {
-  const dropdownRef = useRef(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);
-    document.addEventListener('focusin', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-      document.removeEventListener('focusin', handleClickOutside);
-    };
-  }, [dropdownRef]);
-  return (
-    <div
-      ref={dropdownRef}
-      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
-        'dropdown--right': position === 'right',
-        'dropdown--show': showDropdown,
-      })}>
-      <NavbarNavLink
-        aria-haspopup="true"
-        aria-expanded={showDropdown}
-        role="button"
-        // # hash permits to make the <a> tag focusable in case no link target
-        // See https://github.com/facebook/docusaurus/pull/6003
-        // There's probably a better solution though...
-        href={props.to ? undefined : '#'}
-        className={clsx('navbar__link', className)}
-        {...props}
-        onClick={props.to ? undefined : (e) => e.preventDefault()}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            setShowDropdown(!showDropdown);
-          }
-        }}>
-        {props.children ?? props.label}
-      </NavbarNavLink>
-      <ul className="dropdown__menu">
-        {items.map((childItemProps, i) => (
-          <NavbarItem
-            isDropdownItem
-            activeClassName="dropdown__link--active"
-            {...childItemProps}
-            key={i}
-          />
-        ))}
-      </ul>
-    </div>
-  );
-}
-function DropdownNavbarItemMobile({
-  items,
-  className,
-  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
-  useEffect(() => {
-    if (containsActive) {
-      setCollapsed(!containsActive);
-    }
-  }, [localPathname, containsActive, setCollapsed]);
-  return (
-    <li
-      className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
-      })}>
-      <NavbarNavLink
-        role="button"
-        className={clsx(
-          styles.dropdownNavbarItemMobile,
-          'menu__link menu__link--sublist menu__link--sublist-caret',
-          className,
-        )}
-        // # hash permits to make the <a> tag focusable in case no link target
-        // See https://github.com/facebook/docusaurus/pull/6003
-        // There's probably a better solution though...
-        href={props.to ? undefined : '#'}
-        {...props}
-        onClick={(e) => {
-          e.preventDefault();
-          toggleCollapsed();
-        }}>
-        {props.children ?? props.label}
-      </NavbarNavLink>
-      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        {items.map((childItemProps, i) => (
-          <NavbarItem
-            mobile
-            isDropdownItem
-            onClick={onClick}
-            activeClassName="menu__link--active"
-            {...childItemProps}
-            key={i}
-          />
-        ))}
-      </Collapsible>
-    </li>
-  );
-}
+import React from 'react';
+import DropdownNavbarItemMobile from '@theme/NavbarItem/DropdownNavbarItem/Mobile';
+import DropdownNavbarItemDesktop from '@theme/NavbarItem/DropdownNavbarItem/Desktop';
 export default function DropdownNavbarItem({mobile = false, ...props}) {
   const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
   return <Comp {...props} />;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.7.0-canary-6272",
+  "version": "3.7.0-canary-6274",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,19 +20,19 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0-canary-6272",
-    "@docusaurus/logger": "3.7.0-canary-6272",
-    "@docusaurus/mdx-loader": "3.7.0-canary-6272",
-    "@docusaurus/module-type-aliases": "3.7.0-canary-6272",
-    "@docusaurus/plugin-content-blog": "3.7.0-canary-6272",
-    "@docusaurus/plugin-content-docs": "3.7.0-canary-6272",
-    "@docusaurus/plugin-content-pages": "3.7.0-canary-6272",
-    "@docusaurus/theme-common": "3.7.0-canary-6272",
-    "@docusaurus/theme-translations": "3.7.0-canary-6272",
-    "@docusaurus/types": "3.7.0-canary-6272",
-    "@docusaurus/utils": "3.7.0-canary-6272",
-    "@docusaurus/utils-common": "3.7.0-canary-6272",
-    "@docusaurus/utils-validation": "3.7.0-canary-6272",
+    "@docusaurus/core": "3.7.0-canary-6274",
+    "@docusaurus/logger": "3.7.0-canary-6274",
+    "@docusaurus/mdx-loader": "3.7.0-canary-6274",
+    "@docusaurus/module-type-aliases": "3.7.0-canary-6274",
+    "@docusaurus/plugin-content-blog": "3.7.0-canary-6274",
+    "@docusaurus/plugin-content-docs": "3.7.0-canary-6274",
+    "@docusaurus/plugin-content-pages": "3.7.0-canary-6274",
+    "@docusaurus/theme-common": "3.7.0-canary-6274",
+    "@docusaurus/theme-translations": "3.7.0-canary-6274",
+    "@docusaurus/types": "3.7.0-canary-6274",
+    "@docusaurus/utils": "3.7.0-canary-6274",
+    "@docusaurus/utils-common": "3.7.0-canary-6274",
+    "@docusaurus/utils-validation": "3.7.0-canary-6274",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "aaa1860737b1378291b6f8d7f977b2d4eb5ff868"
+  "gitHead": "c46c12c65ae718bb6352556f7e34e5adfd629856"
 }

package/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import type {Props} from '@theme/NavbarItem/DefaultNavbarItem/Desktop';
+
+export default function DefaultNavbarItemDesktop({
+  className,
+  isDropdownItem = false,
+  ...props
+}: Props): ReactNode {
+  const element = (
+    <NavbarNavLink
+      className={clsx(
+        isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
+        className,
+      )}
+      isDropdownLink={isDropdownItem}
+      {...props}
+    />
+  );
+
+  if (isDropdownItem) {
+    return <li>{element}</li>;
+  }
+
+  return element;
+}

package/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import type {Props} from '@theme/NavbarItem/DefaultNavbarItem/Mobile';
+
+export default function DefaultNavbarItemMobile({
+  className,
+  isDropdownItem,
+  ...props
+}: Props): ReactNode {
+  return (
+    <li className="menu__list-item">
+      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
+    </li>
+  );
+}

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

@@ -0,0 +1,28 @@
+/**
+ * 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, {type ReactNode} from 'react';
+import DefaultNavbarItemMobile from '@theme/NavbarItem/DefaultNavbarItem/Mobile';
+import DefaultNavbarItemDesktop from '@theme/NavbarItem/DefaultNavbarItem/Desktop';
+import type {Props} from '@theme/NavbarItem/DefaultNavbarItem';
+
+export default function DefaultNavbarItem({
+  mobile = false,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  ...props
+}: Props): ReactNode {
+  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
+  return (
+    <Comp
+      {...props}
+      activeClassName={
+        props.activeClassName ??
+        (mobile ? 'menu__link--active' : 'navbar__link--active')
+      }
+    />
+  );
+}

package/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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, {useState, useRef, useEffect, type ReactNode} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme/NavbarItem';
+import type {Props} from '@theme/NavbarItem/DropdownNavbarItem/Desktop';
+
+export default function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}: Props): ReactNode {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent,
+    ) => {
+      if (
+        !dropdownRef.current ||
+        dropdownRef.current.contains(event.target as Node)
+      ) {
+        return;
+      }
+      setShowDropdown(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}>
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        // # hash permits to make the <a> tag focusable in case no link target
+        // See https://github.com/facebook/docusaurus/pull/6003
+        // There's probably a better solution though...
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            setShowDropdown(!showDropdown);
+          }
+        }}>
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ul className="dropdown__menu">
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx

@@ -0,0 +1,166 @@
+/**
+ * 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, {useEffect, type ReactNode, type ComponentProps} from 'react';
+import clsx from 'clsx';
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common';
+import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem, {type LinkLikeNavbarItemProps} from '@theme/NavbarItem';
+import type {Props} from '@theme/NavbarItem/DropdownNavbarItem/Mobile';
+import styles from './styles.module.css';
+
+function isItemActive(
+  item: LinkLikeNavbarItemProps,
+  localPathname: string,
+): boolean {
+  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: readonly LinkLikeNavbarItemProps[],
+  localPathname: string,
+): boolean {
+  return items.some((item) => isItemActive(item, localPathname));
+}
+
+function CollapseButton({
+  collapsed,
+  onClick,
+}: {
+  collapsed: boolean;
+  onClick: ComponentProps<'button'>['onClick'];
+}) {
+  return (
+    <button
+      aria-label={
+        collapsed
+          ? translate({
+              id: 'theme.navbar.mobileDropdown.collapseButton.expandAriaLabel',
+              message: 'Expand the dropdown',
+              description:
+                'The ARIA label of the button to expand the mobile dropdown navbar item',
+            })
+          : translate({
+              id: 'theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel',
+              message: 'Collapse the dropdown',
+              description:
+                'The ARIA label of the button to collapse the mobile dropdown navbar item',
+            })
+      }
+      aria-expanded={!collapsed}
+      type="button"
+      className="clean-btn menu__caret"
+      onClick={onClick}
+    />
+  );
+}
+
+function useItemCollapsible({active}: {active: boolean}) {
+  const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({
+    initialState: () => !active,
+  });
+
+  // Expand if any item active after a navigation
+  useEffect(() => {
+    if (active) {
+      setCollapsed(false);
+    }
+  }, [active, setCollapsed]);
+
+  return {
+    collapsed,
+    toggleCollapsed,
+  };
+}
+
+export default function DropdownNavbarItemMobile({
+  items,
+  className,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
+  ...props
+}: Props): ReactNode {
+  const localPathname = useLocalPathname();
+  const isActive = isSamePath(props.to, localPathname);
+  const containsActive = containsActiveItems(items, localPathname);
+
+  const {collapsed, toggleCollapsed} = useItemCollapsible({
+    active: isActive || containsActive,
+  });
+
+  // # hash permits to make the <a> tag focusable in case no link target
+  // See https://github.com/facebook/docusaurus/pull/6003
+  // There's probably a better solution though...
+  const href = props.to ? undefined : '#';
+
+  return (
+    <li
+      className={clsx('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}>
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isActive,
+        })}>
+        <NavbarNavLink
+          role="button"
+          className={clsx(
+            styles.dropdownNavbarItemMobile,
+            'menu__link menu__link--sublist',
+            className,
+          )}
+          href={href}
+          {...props}
+          onClick={(e) => {
+            // Prevent navigation when link is "#"
+            if (href === '#') {
+              e.preventDefault();
+            }
+            // Otherwise we let navigation eventually happen, and/or collapse
+            toggleCollapsed();
+          }}>
+          {props.children ?? props.label}
+        </NavbarNavLink>
+        <CollapseButton
+          collapsed={collapsed}
+          onClick={(e) => {
+            e.preventDefault();
+            toggleCollapsed();
+          }}
+        />
+      </div>
+
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            mobile
+            isDropdownItem
+            onClick={onClick}
+            activeClassName="menu__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </Collapsible>
+    </li>
+  );
+}

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

@@ -5,178 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, useEffect, type ReactNode} from 'react';
-import clsx from 'clsx';
-import {
-  isRegexpStringMatch,
-  useCollapsible,
-  Collapsible,
-} from '@docusaurus/theme-common';
-import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
-import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import NavbarItem, {type LinkLikeNavbarItemProps} from '@theme/NavbarItem';
-import type {
-  DesktopOrMobileNavBarItemProps,
-  Props,
-} from '@theme/NavbarItem/DropdownNavbarItem';
-import styles from './styles.module.css';
-
-function isItemActive(
-  item: LinkLikeNavbarItemProps,
-  localPathname: string,
-): boolean {
-  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: readonly LinkLikeNavbarItemProps[],
-  localPathname: string,
-): boolean {
-  return items.some((item) => isItemActive(item, localPathname));
-}
-
-function DropdownNavbarItemDesktop({
-  items,
-  position,
-  className,
-  onClick,
-  ...props
-}: DesktopOrMobileNavBarItemProps) {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [showDropdown, setShowDropdown] = useState(false);
-
-  useEffect(() => {
-    const handleClickOutside = (
-      event: MouseEvent | TouchEvent | FocusEvent,
-    ) => {
-      if (
-        !dropdownRef.current ||
-        dropdownRef.current.contains(event.target as Node)
-      ) {
-        return;
-      }
-      setShowDropdown(false);
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    document.addEventListener('focusin', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-      document.removeEventListener('focusin', handleClickOutside);
-    };
-  }, [dropdownRef]);
-
-  return (
-    <div
-      ref={dropdownRef}
-      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
-        'dropdown--right': position === 'right',
-        'dropdown--show': showDropdown,
-      })}>
-      <NavbarNavLink
-        aria-haspopup="true"
-        aria-expanded={showDropdown}
-        role="button"
-        // # hash permits to make the <a> tag focusable in case no link target
-        // See https://github.com/facebook/docusaurus/pull/6003
-        // There's probably a better solution though...
-        href={props.to ? undefined : '#'}
-        className={clsx('navbar__link', className)}
-        {...props}
-        onClick={props.to ? undefined : (e) => e.preventDefault()}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            setShowDropdown(!showDropdown);
-          }
-        }}>
-        {props.children ?? props.label}
-      </NavbarNavLink>
-      <ul className="dropdown__menu">
-        {items.map((childItemProps, i) => (
-          <NavbarItem
-            isDropdownItem
-            activeClassName="dropdown__link--active"
-            {...childItemProps}
-            key={i}
-          />
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-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();
-  const containsActive = containsActiveItems(items, localPathname);
-
-  const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({
-    initialState: () => !containsActive,
-  });
-
-  // Expand/collapse if any item active after a navigation
-  useEffect(() => {
-    if (containsActive) {
-      setCollapsed(!containsActive);
-    }
-  }, [localPathname, containsActive, setCollapsed]);
-
-  return (
-    <li
-      className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
-      })}>
-      <NavbarNavLink
-        role="button"
-        className={clsx(
-          styles.dropdownNavbarItemMobile,
-          'menu__link menu__link--sublist menu__link--sublist-caret',
-          className,
-        )}
-        // # hash permits to make the <a> tag focusable in case no link target
-        // See https://github.com/facebook/docusaurus/pull/6003
-        // There's probably a better solution though...
-        href={props.to ? undefined : '#'}
-        {...props}
-        onClick={(e) => {
-          e.preventDefault();
-          toggleCollapsed();
-        }}>
-        {props.children ?? props.label}
-      </NavbarNavLink>
-      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
-        {items.map((childItemProps, i) => (
-          <NavbarItem
-            mobile
-            isDropdownItem
-            onClick={onClick}
-            activeClassName="menu__link--active"
-            {...childItemProps}
-            key={i}
-          />
-        ))}
-      </Collapsible>
-    </li>
-  );
-}
+import React, {type ReactNode} from 'react';
+import DropdownNavbarItemMobile from '@theme/NavbarItem/DropdownNavbarItem/Mobile';
+import DropdownNavbarItemDesktop from '@theme/NavbarItem/DropdownNavbarItem/Desktop';
+import type {Props} from '@theme/NavbarItem/DropdownNavbarItem';
 
 export default function DropdownNavbarItem({
   mobile = false,

package/src/theme-classic.d.ts

@@ -1181,19 +1181,40 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
   import type {ReactNode} from 'react';
   import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink';
 
-  export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & {
+  export type DefaultNavbarItemProps = NavbarNavLinkProps & {
     readonly isDropdownItem?: boolean;
     readonly className?: string;
     readonly position?: 'left' | 'right';
   };
 
-  export interface Props extends DesktopOrMobileNavBarItemProps {
+  // TODO Docusaurus v4, remove old type name
+  export type DesktopOrMobileNavBarItemProps = DefaultNavbarItemProps;
+
+  export interface Props extends DefaultNavbarItemProps {
     readonly mobile?: boolean;
   }
 
   export default function DefaultNavbarItem(props: Props): ReactNode;
 }
 
+declare module '@theme/NavbarItem/DefaultNavbarItem/Mobile' {
+  import type {ReactNode} from 'react';
+  import type {DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
+
+  export interface Props extends DefaultNavbarItemProps {}
+
+  export default function DefaultNavbarItemMobile(props: Props): ReactNode;
+}
+
+declare module '@theme/NavbarItem/DefaultNavbarItem/Desktop' {
+  import type {ReactNode} from 'react';
+  import type {DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
+
+  export interface Props extends DefaultNavbarItemProps {}
+
+  export default function DefaultNavbarItemDesktop(props: Props): ReactNode;
+}
+
 declare module '@theme/NavbarItem/NavbarNavLink' {
   import type {ReactNode} from 'react';
   import type {Props as LinkProps} from '@docusaurus/Link';
@@ -1216,19 +1237,40 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' {
   import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink';
   import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 
-  export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & {
+  export type DropdownNavbarItemProps = NavbarNavLinkProps & {
     readonly position?: 'left' | 'right';
     readonly items: readonly LinkLikeNavbarItemProps[];
     readonly className?: string;
   };
 
-  export interface Props extends DesktopOrMobileNavBarItemProps {
+  // TODO Docusaurus v4, remove old type name
+  export type DesktopOrMobileNavBarItemProps = DropdownNavbarItemProps;
+
+  export interface Props extends DropdownNavbarItemProps {
     readonly mobile?: boolean;
   }
 
   export default function DropdownNavbarItem(props: Props): ReactNode;
 }
 
+declare module '@theme/NavbarItem/DropdownNavbarItem/Mobile' {
+  import type {ReactNode} from 'react';
+  import type {DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem';
+
+  export interface Props extends DropdownNavbarItemProps {}
+
+  export default function DropdownNavbarItemMobile(props: Props): ReactNode;
+}
+
+declare module '@theme/NavbarItem/DropdownNavbarItem/Desktop' {
+  import type {ReactNode} from 'react';
+  import type {DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem';
+
+  export interface Props extends DropdownNavbarItemProps {}
+
+  export default function DropdownNavbarItemDesktop(props: Props): ReactNode;
+}
+
 declare module '@theme/NavbarItem/SearchNavbarItem' {
   import type {ReactNode} from 'react';
 

package/lib/theme/NavbarItem/DefaultNavbarItem.js

@@ -1,52 +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.
- */
-import React from 'react';
-import clsx from 'clsx';
-import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-function DefaultNavbarItemDesktop({
-  className,
-  isDropdownItem = false,
-  ...props
-}) {
-  const element = (
-    <NavbarNavLink
-      className={clsx(
-        isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
-        className,
-      )}
-      isDropdownLink={isDropdownItem}
-      {...props}
-    />
-  );
-  if (isDropdownItem) {
-    return <li>{element}</li>;
-  }
-  return element;
-}
-function DefaultNavbarItemMobile({className, isDropdownItem, ...props}) {
-  return (
-    <li className="menu__list-item">
-      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
-    </li>
-  );
-}
-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 ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return (
-    <Comp
-      {...props}
-      activeClassName={
-        props.activeClassName ??
-        (mobile ? 'menu__link--active' : 'navbar__link--active')
-      }
-    />
-  );
-}

package/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -1,66 +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.
- */
-
-import React, {type ReactNode} from 'react';
-import clsx from 'clsx';
-import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import type {
-  DesktopOrMobileNavBarItemProps,
-  Props,
-} from '@theme/NavbarItem/DefaultNavbarItem';
-
-function DefaultNavbarItemDesktop({
-  className,
-  isDropdownItem = false,
-  ...props
-}: DesktopOrMobileNavBarItemProps) {
-  const element = (
-    <NavbarNavLink
-      className={clsx(
-        isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
-        className,
-      )}
-      isDropdownLink={isDropdownItem}
-      {...props}
-    />
-  );
-
-  if (isDropdownItem) {
-    return <li>{element}</li>;
-  }
-
-  return element;
-}
-
-function DefaultNavbarItemMobile({
-  className,
-  isDropdownItem,
-  ...props
-}: DesktopOrMobileNavBarItemProps) {
-  return (
-    <li className="menu__list-item">
-      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
-    </li>
-  );
-}
-
-export default function DefaultNavbarItem({
-  mobile = false,
-  position, // Need to destructure position from props so that it doesn't get passed on.
-  ...props
-}: Props): ReactNode {
-  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return (
-    <Comp
-      {...props}
-      activeClassName={
-        props.activeClassName ??
-        (mobile ? 'menu__link--active' : 'navbar__link--active')
-      }
-    />
-  );
-}