@docusaurus/theme-classic 3.8.1-canary-6372 → 3.8.1-canary-6374

package/lib/theme/DocSidebarItem/Category/index.js

@@ -25,14 +25,29 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
-function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
+function useAutoExpandActiveCategory({
+  isActive,
+  collapsed,
+  updateCollapsed,
+  activePath,
+}) {
   const wasActive = usePrevious(isActive);
+  const previousActivePath = usePrevious(activePath);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
-    if (justBecameActive && collapsed) {
+    const stillActiveButPathChanged =
+      isActive && wasActive && activePath !== previousActivePath;
+    if ((justBecameActive || stillActiveButPathChanged) && collapsed) {
       updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, updateCollapsed]);
+  }, [
+    isActive,
+    wasActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+    previousActivePath,
+  ]);
 }
 /**
  * When a collapsible category has no link, we still link it to its first child
@@ -118,7 +133,12 @@ export default function DocSidebarItemCategory({
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
   };
-  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
+  useAutoExpandActiveCategory({
+    isActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+  });
   useEffect(() => {
     if (
       collapsible &&

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

@@ -8,34 +8,79 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
-import {useHistorySelector} from '@docusaurus/theme-common';
+import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import styles from './styles.module.css';
+function useLocaleDropdownUtils() {
+  const {
+    siteConfig,
+    i18n: {localeConfigs},
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
+  const getLocaleConfig = (locale) => {
+    const localeConfig = localeConfigs[locale];
+    if (!localeConfig) {
+      throw new Error(
+        `Docusaurus bug, no locale config found for locale=${locale}`,
+      );
+    }
+    return localeConfig;
+  };
+  const getBaseURLForLocale = (locale) => {
+    const localeConfig = getLocaleConfig(locale);
+    const isSameDomain = localeConfig.url === siteConfig.url;
+    if (isSameDomain) {
+      // Shorter paths if localized sites are hosted on the same domain
+      // This reduces HTML size a bit
+      return `pathname://${alternatePageUtils.createUrl({
+        locale,
+        fullyQualified: false,
+      })}`;
+    }
+    return alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: true,
+    });
+  };
+  return {
+    getURL: (locale, options) => {
+      // We have 2 query strings because
+      // - there's the current one
+      // - there's one user can provide through navbar config
+      // see https://github.com/facebook/docusaurus/pull/8915
+      const finalSearch = mergeSearchStrings(
+        [search, options.queryString],
+        'append',
+      );
+      return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`;
+    },
+    getLabel: (locale) => {
+      return getLocaleConfig(locale).label;
+    },
+    getLang: (locale) => {
+      return getLocaleConfig(locale).htmlLang;
+    },
+  };
+}
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
   dropdownItemsAfter,
-  queryString = '',
+  queryString,
   ...props
 }) {
+  const utils = useLocaleDropdownUtils();
   const {
-    i18n: {currentLocale, locales, localeConfigs},
+    i18n: {currentLocale, locales},
   } = useDocusaurusContext();
-  const alternatePageUtils = useAlternatePageUtils();
-  const search = useHistorySelector((history) => history.location.search);
-  const hash = useHistorySelector((history) => history.location.hash);
   const localeItems = locales.map((locale) => {
-    const baseTo = `pathname://${alternatePageUtils.createUrl({
-      locale,
-      fullyQualified: false,
-    })}`;
-    // preserve ?search#hash suffix on locale switches
-    const to = `${baseTo}${search}${hash}${queryString}`;
     return {
-      label: localeConfigs[locale].label,
-      lang: localeConfigs[locale].htmlLang,
-      to,
+      label: utils.getLabel(locale),
+      lang: utils.getLang(locale),
+      to: utils.getURL(locale, {queryString}),
       target: '_self',
       autoAddBaseUrl: false,
       className:
@@ -58,7 +103,7 @@ export default function LocaleDropdownNavbarItem({
         id: 'theme.navbar.mobileLanguageDropdown.label',
         description: 'The label for the mobile language switcher dropdown',
       })
-    : localeConfigs[currentLocale].label;
+    : utils.getLabel(currentLocale);
   return (
     <DropdownNavbarItem
       {...props}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.8.1-canary-6372",
+  "version": "3.8.1-canary-6374",
   "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.8.1-canary-6372",
-    "@docusaurus/logger": "3.8.1-canary-6372",
-    "@docusaurus/mdx-loader": "3.8.1-canary-6372",
-    "@docusaurus/module-type-aliases": "3.8.1-canary-6372",
-    "@docusaurus/plugin-content-blog": "3.8.1-canary-6372",
-    "@docusaurus/plugin-content-docs": "3.8.1-canary-6372",
-    "@docusaurus/plugin-content-pages": "3.8.1-canary-6372",
-    "@docusaurus/theme-common": "3.8.1-canary-6372",
-    "@docusaurus/theme-translations": "3.8.1-canary-6372",
-    "@docusaurus/types": "3.8.1-canary-6372",
-    "@docusaurus/utils": "3.8.1-canary-6372",
-    "@docusaurus/utils-common": "3.8.1-canary-6372",
-    "@docusaurus/utils-validation": "3.8.1-canary-6372",
+    "@docusaurus/core": "3.8.1-canary-6374",
+    "@docusaurus/logger": "3.8.1-canary-6374",
+    "@docusaurus/mdx-loader": "3.8.1-canary-6374",
+    "@docusaurus/module-type-aliases": "3.8.1-canary-6374",
+    "@docusaurus/plugin-content-blog": "3.8.1-canary-6374",
+    "@docusaurus/plugin-content-docs": "3.8.1-canary-6374",
+    "@docusaurus/plugin-content-pages": "3.8.1-canary-6374",
+    "@docusaurus/theme-common": "3.8.1-canary-6374",
+    "@docusaurus/theme-translations": "3.8.1-canary-6374",
+    "@docusaurus/types": "3.8.1-canary-6374",
+    "@docusaurus/utils": "3.8.1-canary-6374",
+    "@docusaurus/utils-common": "3.8.1-canary-6374",
+    "@docusaurus/utils-validation": "3.8.1-canary-6374",
     "@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": "0229ae8aadbcfbebd1f49b3bdd174bea21ae93d4"
+  "gitHead": "d7c2ad4c6a14ff1185b4ee7bef89cd56c15d3869"
 }

package/src/theme/DocSidebarItem/Category/index.tsx

@@ -37,18 +37,30 @@ function useAutoExpandActiveCategory({
   isActive,
   collapsed,
   updateCollapsed,
+  activePath,
 }: {
   isActive: boolean;
   collapsed: boolean;
   updateCollapsed: (b: boolean) => void;
+  activePath: string;
 }) {
   const wasActive = usePrevious(isActive);
+  const previousActivePath = usePrevious(activePath);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
-    if (justBecameActive && collapsed) {
+    const stillActiveButPathChanged =
+      isActive && wasActive && activePath !== previousActivePath;
+    if ((justBecameActive || stillActiveButPathChanged) && collapsed) {
       updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, updateCollapsed]);
+  }, [
+    isActive,
+    wasActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+    previousActivePath,
+  ]);
 }
 
 /**
@@ -150,7 +162,12 @@ export default function DocSidebarItemCategory({
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
   };
-  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
+  useAutoExpandActiveCategory({
+    isActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+  });
   useEffect(() => {
     if (
       collapsible &&

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

@@ -9,7 +9,7 @@ import React, {type ReactNode} from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
-import {useHistorySelector} from '@docusaurus/theme-common';
+import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
@@ -17,31 +17,80 @@ import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 
 import styles from './styles.module.css';
 
+function useLocaleDropdownUtils() {
+  const {
+    siteConfig,
+    i18n: {localeConfigs},
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
+
+  const getLocaleConfig = (locale: string) => {
+    const localeConfig = localeConfigs[locale];
+    if (!localeConfig) {
+      throw new Error(
+        `Docusaurus bug, no locale config found for locale=${locale}`,
+      );
+    }
+    return localeConfig;
+  };
+
+  const getBaseURLForLocale = (locale: string) => {
+    const localeConfig = getLocaleConfig(locale);
+    const isSameDomain = localeConfig.url === siteConfig.url;
+    if (isSameDomain) {
+      // Shorter paths if localized sites are hosted on the same domain
+      // This reduces HTML size a bit
+      return `pathname://${alternatePageUtils.createUrl({
+        locale,
+        fullyQualified: false,
+      })}`;
+    }
+    return alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: true,
+    });
+  };
+
+  return {
+    getURL: (locale: string, options: {queryString: string | undefined}) => {
+      // We have 2 query strings because
+      // - there's the current one
+      // - there's one user can provide through navbar config
+      // see https://github.com/facebook/docusaurus/pull/8915
+      const finalSearch = mergeSearchStrings(
+        [search, options.queryString],
+        'append',
+      );
+      return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`;
+    },
+    getLabel: (locale: string) => {
+      return getLocaleConfig(locale).label;
+    },
+    getLang: (locale: string) => {
+      return getLocaleConfig(locale).htmlLang;
+    },
+  };
+}
+
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
   dropdownItemsAfter,
-  queryString = '',
+  queryString,
   ...props
 }: Props): ReactNode {
+  const utils = useLocaleDropdownUtils();
+
   const {
-    i18n: {currentLocale, locales, localeConfigs},
+    i18n: {currentLocale, locales},
   } = useDocusaurusContext();
-  const alternatePageUtils = useAlternatePageUtils();
-  const search = useHistorySelector((history) => history.location.search);
-  const hash = useHistorySelector((history) => history.location.hash);
-
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
-    const baseTo = `pathname://${alternatePageUtils.createUrl({
-      locale,
-      fullyQualified: false,
-    })}`;
-    // preserve ?search#hash suffix on locale switches
-    const to = `${baseTo}${search}${hash}${queryString}`;
     return {
-      label: localeConfigs[locale]!.label,
-      lang: localeConfigs[locale]!.htmlLang,
-      to,
+      label: utils.getLabel(locale),
+      lang: utils.getLang(locale),
+      to: utils.getURL(locale, {queryString}),
       target: '_self',
       autoAddBaseUrl: false,
       className:
@@ -66,7 +115,7 @@ export default function LocaleDropdownNavbarItem({
         id: 'theme.navbar.mobileLanguageDropdown.label',
         description: 'The label for the mobile language switcher dropdown',
       })
-    : localeConfigs[currentLocale]!.label;
+    : utils.getLabel(currentLocale);
 
   return (
     <DropdownNavbarItem