@docusaurus/theme-classic 4.0.0-canary-6833 → 4.0.0-canary-6835

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

@@ -4,7 +4,7 @@
  * 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, useMemo} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import clsx from 'clsx';
 import {
   ThemeClassNames,
@@ -181,7 +181,11 @@ function DocSidebarItemCategoryCollapsible({
     updateCollapsed,
     activePath,
   });
-  useEffect(() => {
+  // Collapse when a sibling category gets expanded
+  // See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const [prevExpandedItem, setPrevExpandedItem] = useState(expandedItem);
+  if (expandedItem !== prevExpandedItem) {
+    setPrevExpandedItem(expandedItem);
     if (
       collapsible &&
       expandedItem != null &&
@@ -190,7 +194,7 @@ function DocSidebarItemCategoryCollapsible({
     ) {
       setCollapsed(true);
     }
-  }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
+  }
   const handleItemClick = (e) => {
     onItemClick?.(item);
     if (collapsible) {

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

@@ -4,7 +4,7 @@
  * 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 React, {useState} from 'react';
 import clsx from 'clsx';
 import {
   isRegexpStringMatch,
@@ -61,11 +61,14 @@ function useItemCollapsible({active}) {
     initialState: () => !active,
   });
   // Expand if any item active after a navigation
-  useEffect(() => {
+  // See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
     if (active) {
       setCollapsed(false);
     }
-  }, [active, setCollapsed]);
+  }
   return {
     collapsed,
     toggleCollapsed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "4.0.0-canary-6833",
+  "version": "4.0.0-canary-6835",
   "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": "4.0.0-canary-6833",
-    "@docusaurus/logger": "4.0.0-canary-6833",
-    "@docusaurus/mdx-loader": "4.0.0-canary-6833",
-    "@docusaurus/module-type-aliases": "4.0.0-canary-6833",
-    "@docusaurus/plugin-content-blog": "4.0.0-canary-6833",
-    "@docusaurus/plugin-content-docs": "4.0.0-canary-6833",
-    "@docusaurus/plugin-content-pages": "4.0.0-canary-6833",
-    "@docusaurus/theme-common": "4.0.0-canary-6833",
-    "@docusaurus/theme-translations": "4.0.0-canary-6833",
-    "@docusaurus/types": "4.0.0-canary-6833",
-    "@docusaurus/utils": "4.0.0-canary-6833",
-    "@docusaurus/utils-common": "4.0.0-canary-6833",
-    "@docusaurus/utils-validation": "4.0.0-canary-6833",
+    "@docusaurus/core": "4.0.0-canary-6835",
+    "@docusaurus/logger": "4.0.0-canary-6835",
+    "@docusaurus/mdx-loader": "4.0.0-canary-6835",
+    "@docusaurus/module-type-aliases": "4.0.0-canary-6835",
+    "@docusaurus/plugin-content-blog": "4.0.0-canary-6835",
+    "@docusaurus/plugin-content-docs": "4.0.0-canary-6835",
+    "@docusaurus/plugin-content-pages": "4.0.0-canary-6835",
+    "@docusaurus/theme-common": "4.0.0-canary-6835",
+    "@docusaurus/theme-translations": "4.0.0-canary-6835",
+    "@docusaurus/types": "4.0.0-canary-6835",
+    "@docusaurus/utils": "4.0.0-canary-6835",
+    "@docusaurus/utils-common": "4.0.0-canary-6835",
+    "@docusaurus/utils-validation": "4.0.0-canary-6835",
     "@mdx-js/react": "^3.1.1",
     "clsx": "^2.1.1",
     "copy-text-to-clipboard": "^3.2.2",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=24.21"
   },
-  "gitHead": "9805726a212ca817498fc8842e6a7e5644284623"
+  "gitHead": "545ee70227b7e3446e96056b3c5e7796711e42b4"
 }

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

@@ -10,6 +10,7 @@ import React, {
   type ReactNode,
   useEffect,
   useMemo,
+  useState,
 } from 'react';
 import clsx from 'clsx';
 import {
@@ -221,7 +222,12 @@ function DocSidebarItemCategoryCollapsible({
     updateCollapsed,
     activePath,
   });
-  useEffect(() => {
+
+  // Collapse when a sibling category gets expanded
+  // See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const [prevExpandedItem, setPrevExpandedItem] = useState(expandedItem);
+  if (expandedItem !== prevExpandedItem) {
+    setPrevExpandedItem(expandedItem);
     if (
       collapsible &&
       expandedItem != null &&
@@ -230,7 +236,7 @@ function DocSidebarItemCategoryCollapsible({
     ) {
       setCollapsed(true);
     }
-  }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
+  }
 
   const handleItemClick: ComponentProps<'a'>['onClick'] = (e) => {
     onItemClick?.(item);

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, type ReactNode, type ComponentProps} from 'react';
+import React, {useState, type ReactNode, type ComponentProps} from 'react';
 import clsx from 'clsx';
 import {
   isRegexpStringMatch,
@@ -80,11 +80,14 @@ function useItemCollapsible({active}: {active: boolean}) {
   });
 
   // Expand if any item active after a navigation
-  useEffect(() => {
+  // See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
     if (active) {
       setCollapsed(false);
     }
-  }, [active, setCollapsed]);
+  }
 
   return {
     collapsed,