@docusaurus/theme-classic 0.0.0-5492 → 0.0.0-5494

package/lib/theme/ColorModeToggle/index.d.ts

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 import type { Props } from '@theme/ColorModeToggle';
-declare function ColorModeToggle({ className, value, onChange }: Props): JSX.Element;
+declare function ColorModeToggle({ className, buttonClassName, value, onChange, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ColorModeToggle>;
 export default _default;

package/lib/theme/ColorModeToggle/index.js

@@ -11,7 +11,7 @@ import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/Icon/LightMode';
 import IconDarkMode from '@theme/Icon/DarkMode';
 import styles from './styles.module.css';
-function ColorModeToggle({className, value, onChange}) {
+function ColorModeToggle({className, buttonClassName, value, onChange}) {
   const isBrowser = useIsBrowser();
   const title = translate(
     {
@@ -41,6 +41,7 @@ function ColorModeToggle({className, value, onChange}) {
           'clean-btn',
           styles.toggleButton,
           !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
         )}
         type="button"
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}

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

@@ -7,7 +7,9 @@
 import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
+import styles from './styles.module.css';
 export default function NavbarColorModeToggle({className}) {
+  const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
   if (disabled) {
@@ -16,6 +18,9 @@ export default function NavbarColorModeToggle({className}) {
   return (
     <ColorModeToggle
       className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
       value={colorMode}
       onChange={setColorMode}
     />

package/lib/theme/Navbar/ColorModeToggle/styles.module.css

@@ -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.
+ */
+
+.darkNavbarColorModeToggle:hover {
+  background: var(--ifm-color-gray-800);
+}

package/lib/theme/NavbarItem/DropdownNavbarItem.js

@@ -47,9 +47,11 @@ function DropdownNavbarItemDesktop({
     };
     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 (
@@ -79,22 +81,6 @@ function DropdownNavbarItemDesktop({
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem
-            onKeyDown={(e) => {
-              if (i === items.length - 1 && e.key === 'Tab') {
-                e.preventDefault();
-                setShowDropdown(false);
-                const nextNavbarItem = dropdownRef.current.nextElementSibling;
-                if (nextNavbarItem) {
-                  const targetItem =
-                    nextNavbarItem instanceof HTMLAnchorElement
-                      ? nextNavbarItem
-                      : // Next item is another dropdown; focus on the inner
-                        // anchor element instead so there's outline
-                        nextNavbarItem.querySelector('a');
-                  targetItem.focus();
-                }
-              }
-            }}
             activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5492",
+  "version": "0.0.0-5494",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5492",
-    "@docusaurus/mdx-loader": "0.0.0-5492",
-    "@docusaurus/module-type-aliases": "0.0.0-5492",
-    "@docusaurus/plugin-content-blog": "0.0.0-5492",
-    "@docusaurus/plugin-content-docs": "0.0.0-5492",
-    "@docusaurus/plugin-content-pages": "0.0.0-5492",
-    "@docusaurus/theme-common": "0.0.0-5492",
-    "@docusaurus/theme-translations": "0.0.0-5492",
-    "@docusaurus/types": "0.0.0-5492",
-    "@docusaurus/utils": "0.0.0-5492",
-    "@docusaurus/utils-common": "0.0.0-5492",
-    "@docusaurus/utils-validation": "0.0.0-5492",
+    "@docusaurus/core": "0.0.0-5494",
+    "@docusaurus/mdx-loader": "0.0.0-5494",
+    "@docusaurus/module-type-aliases": "0.0.0-5494",
+    "@docusaurus/plugin-content-blog": "0.0.0-5494",
+    "@docusaurus/plugin-content-docs": "0.0.0-5494",
+    "@docusaurus/plugin-content-pages": "0.0.0-5494",
+    "@docusaurus/theme-common": "0.0.0-5494",
+    "@docusaurus/theme-translations": "0.0.0-5494",
+    "@docusaurus/types": "0.0.0-5494",
+    "@docusaurus/utils": "0.0.0-5494",
+    "@docusaurus/utils-common": "0.0.0-5494",
+    "@docusaurus/utils-validation": "0.0.0-5494",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "65900ea8e44b160f0c4663f7bc02c5d3d3c366b6"
+  "gitHead": "9b9f5f1d54df064dc515aee91dfc1af0e843df60"
 }

package/src/theme/ColorModeToggle/index.tsx

@@ -15,7 +15,12 @@ import type {Props} from '@theme/ColorModeToggle';
 
 import styles from './styles.module.css';
 
-function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
+function ColorModeToggle({
+  className,
+  buttonClassName,
+  value,
+  onChange,
+}: Props): JSX.Element {
   const isBrowser = useIsBrowser();
 
   const title = translate(
@@ -47,6 +52,7 @@ function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
           'clean-btn',
           styles.toggleButton,
           !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
         )}
         type="button"
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}

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

@@ -9,10 +9,12 @@ import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
 import type {Props} from '@theme/Navbar/ColorModeToggle';
+import styles from './styles.module.css';
 
 export default function NavbarColorModeToggle({
   className,
 }: Props): JSX.Element | null {
+  const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
 
@@ -23,6 +25,9 @@ export default function NavbarColorModeToggle({
   return (
     <ColorModeToggle
       className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
       value={colorMode}
       onChange={setColorMode}
     />

package/src/theme/Navbar/ColorModeToggle/styles.module.css

@@ -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.
+ */
+
+.darkNavbarColorModeToggle:hover {
+  background: var(--ifm-color-gray-800);
+}

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -54,7 +54,9 @@ function DropdownNavbarItemDesktop({
   const [showDropdown, setShowDropdown] = useState(false);
 
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent,
+    ) => {
       if (
         !dropdownRef.current ||
         dropdownRef.current.contains(event.target as Node)
@@ -66,10 +68,12 @@ function DropdownNavbarItemDesktop({
 
     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]);
 
@@ -100,22 +104,6 @@ function DropdownNavbarItemDesktop({
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem
-            onKeyDown={(e) => {
-              if (i === items.length - 1 && e.key === 'Tab') {
-                e.preventDefault();
-                setShowDropdown(false);
-                const nextNavbarItem = dropdownRef.current!.nextElementSibling;
-                if (nextNavbarItem) {
-                  const targetItem =
-                    nextNavbarItem instanceof HTMLAnchorElement
-                      ? nextNavbarItem
-                      : // Next item is another dropdown; focus on the inner
-                        // anchor element instead so there's outline
-                        nextNavbarItem.querySelector('a')!;
-                  targetItem.focus();
-                }
-              }
-            }}
             activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}

package/src/theme-classic.d.ts

@@ -1352,6 +1352,7 @@ declare module '@theme/ColorModeToggle' {
 
   export interface Props {
     readonly className?: string;
+    readonly buttonClassName?: string;
     readonly value: ColorMode;
     /**
      * The parameter represents the "to-be" value. For example, if currently in