@docusaurus/theme-classic 0.0.0-4453 → 0.0.0-4456

package/lib/theme-classic.d.ts

@@ -151,19 +151,13 @@ declare module '@theme/DocSidebar' {
 declare module '@theme/DocSidebarItem' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-  export type DocSidebarPropsBase = {
-    readonly activePath: string;
-    readonly onItemClick?: (item: PropSidebarItem) => void;
-    readonly level: number;
-    readonly tabIndex?: number;
-  };
-
   export interface Props {
     readonly activePath: string;
     readonly onItemClick?: (item: PropSidebarItem) => void;
     readonly level: number;
     readonly tabIndex?: number;
     readonly item: PropSidebarItem;
+    readonly index: number;
   }
 
   export default function DocSidebarItem(props: Props): JSX.Element;
@@ -173,7 +167,7 @@ declare module '@theme/DocSidebarItems' {
   import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem';
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-  export type Props = Omit<DocSidebarItemProps, 'item'> & {
+  export type Props = Omit<DocSidebarItemProps, 'item' | 'index'> & {
     readonly items: readonly PropSidebarItem[];
   };
 

package/lib/validateThemeConfig.js

@@ -45,6 +45,7 @@ const DEFAULT_CONFIG = {
     items: []
   },
   hideableSidebar: false,
+  autoCollapseSidebarCategories: false,
   tableOfContents: {
     minHeadingLevel: 2,
     maxHeadingLevel: 3
@@ -288,6 +289,7 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
     additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages)
   }).default(DEFAULT_CONFIG.prism).unknown(),
   hideableSidebar: _utilsValidation.Joi.bool().default(DEFAULT_CONFIG.hideableSidebar),
+  autoCollapseSidebarCategories: _utilsValidation.Joi.bool().default(DEFAULT_CONFIG.autoCollapseSidebarCategories),
   sidebarCollapsible: _utilsValidation.Joi.forbidden().messages({
     'any.unknown': 'The themeConfig.sidebarCollapsible has been moved to docs plugin options. See: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs'
   }),

package/lib-next/theme/DocSidebarItem/index.js

@@ -13,6 +13,8 @@ import {
   useCollapsible,
   findFirstCategoryLink,
   ThemeClassNames,
+  useThemeConfig,
+  useDocSidebarItemsExpandedState,
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -72,12 +74,13 @@ function DocSidebarItemCategory({
   onItemClick,
   activePath,
   level,
+  index,
   ...props
 }) {
   const {items, label, collapsible, className, href} = item;
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
   const isActive = isActiveSidebarItem(item, activePath);
-  const {collapsed, setCollapsed, toggleCollapsed} = useCollapsible({
+  const {collapsed, setCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
     // the default (item.collapsed) is only used for non-active categories
     initialState: () => {
@@ -93,6 +96,30 @@ function DocSidebarItemCategory({
     collapsed,
     setCollapsed,
   });
+  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
+
+  function updateCollapsed(toCollapsed = !collapsed) {
+    setExpandedItem(toCollapsed ? null : index);
+    setCollapsed(toCollapsed);
+  }
+
+  const {autoCollapseSidebarCategories} = useThemeConfig();
+  useEffect(() => {
+    if (
+      collapsible &&
+      expandedItem &&
+      expandedItem !== index &&
+      autoCollapseSidebarCategories
+    ) {
+      setCollapsed(true);
+    }
+  }, [
+    collapsible,
+    expandedItem,
+    index,
+    setCollapsed,
+    autoCollapseSidebarCategories,
+  ]);
   return (
     <li
       className={clsx(
@@ -118,10 +145,10 @@ function DocSidebarItemCategory({
                   onItemClick?.(item);
 
                   if (href) {
-                    setCollapsed(false);
+                    updateCollapsed(false);
                   } else {
                     e.preventDefault();
-                    toggleCollapsed();
+                    updateCollapsed();
                   }
                 }
               : () => {
@@ -149,7 +176,7 @@ function DocSidebarItemCategory({
             className="clean-btn menu__caret"
             onClick={(e) => {
               e.preventDefault();
-              toggleCollapsed();
+              updateCollapsed();
             }}
           />
         )}
@@ -168,7 +195,14 @@ function DocSidebarItemCategory({
   );
 }
 
-function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
+function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) {
   const {href, label, className} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   return (

package/lib-next/theme/DocSidebarItems/index.js

@@ -6,20 +6,22 @@
  */
 import React, {memo} from 'react';
 import DocSidebarItem from '@theme/DocSidebarItem';
+import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
 
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation
 function DocSidebarItems({items, ...props}) {
   return (
-    <>
+    <DocSidebarItemsExpandedStateProvider>
       {items.map((item, index) => (
         <DocSidebarItem
           key={index} // sidebar is static, the index does not change
           item={item}
+          index={index}
           {...props}
         />
       ))}
-    </>
+    </DocSidebarItemsExpandedStateProvider>
   );
 } // Optimize sidebar at each "level"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4453",
+  "version": "0.0.0-4456",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4453",
-    "@docusaurus/plugin-content-blog": "0.0.0-4453",
-    "@docusaurus/plugin-content-docs": "0.0.0-4453",
-    "@docusaurus/plugin-content-pages": "0.0.0-4453",
-    "@docusaurus/theme-common": "0.0.0-4453",
-    "@docusaurus/theme-translations": "0.0.0-4453",
-    "@docusaurus/utils": "0.0.0-4453",
-    "@docusaurus/utils-validation": "0.0.0-4453",
+    "@docusaurus/core": "0.0.0-4456",
+    "@docusaurus/plugin-content-blog": "0.0.0-4456",
+    "@docusaurus/plugin-content-docs": "0.0.0-4456",
+    "@docusaurus/plugin-content-pages": "0.0.0-4456",
+    "@docusaurus/theme-common": "0.0.0-4456",
+    "@docusaurus/theme-translations": "0.0.0-4456",
+    "@docusaurus/utils": "0.0.0-4456",
+    "@docusaurus/utils-validation": "0.0.0-4456",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
@@ -45,8 +45,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4453",
-    "@docusaurus/types": "0.0.0-4453",
+    "@docusaurus/module-type-aliases": "0.0.0-4456",
+    "@docusaurus/types": "0.0.0-4456",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "5379d3424fde605d7bde0fa2ba86b9db1ca4becc"
+  "gitHead": "9cf25406f271f6c673c6f3cd58048b3c2994642b"
 }

package/src/theme/DocSidebarItem/index.tsx

@@ -14,6 +14,8 @@ import {
   useCollapsible,
   findFirstCategoryLink,
   ThemeClassNames,
+  useThemeConfig,
+  useDocSidebarItemsExpandedState,
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -92,6 +94,7 @@ function DocSidebarItemCategory({
   onItemClick,
   activePath,
   level,
+  index,
   ...props
 }: Props & {item: PropSidebarItemCategory}) {
   const {items, label, collapsible, className, href} = item;
@@ -99,7 +102,7 @@ function DocSidebarItemCategory({
 
   const isActive = isActiveSidebarItem(item, activePath);
 
-  const {collapsed, setCollapsed, toggleCollapsed} = useCollapsible({
+  const {collapsed, setCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
     // the default (item.collapsed) is only used for non-active categories
     initialState: () => {
@@ -111,6 +114,28 @@ function DocSidebarItemCategory({
   });
 
   useAutoExpandActiveCategory({isActive, collapsed, setCollapsed});
+  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
+  function updateCollapsed(toCollapsed: boolean = !collapsed) {
+    setExpandedItem(toCollapsed ? null : index);
+    setCollapsed(toCollapsed);
+  }
+  const {autoCollapseSidebarCategories} = useThemeConfig();
+  useEffect(() => {
+    if (
+      collapsible &&
+      expandedItem &&
+      expandedItem !== index &&
+      autoCollapseSidebarCategories
+    ) {
+      setCollapsed(true);
+    }
+  }, [
+    collapsible,
+    expandedItem,
+    index,
+    setCollapsed,
+    autoCollapseSidebarCategories,
+  ]);
 
   return (
     <li
@@ -136,10 +161,10 @@ function DocSidebarItemCategory({
               ? (e) => {
                   onItemClick?.(item);
                   if (href) {
-                    setCollapsed(false);
+                    updateCollapsed(false);
                   } else {
                     e.preventDefault();
-                    toggleCollapsed();
+                    updateCollapsed();
                   }
                 }
               : () => {
@@ -165,7 +190,7 @@ function DocSidebarItemCategory({
             className="clean-btn menu__caret"
             onClick={(e) => {
               e.preventDefault();
-              toggleCollapsed();
+              updateCollapsed();
             }}
           />
         )}
@@ -189,6 +214,7 @@ function DocSidebarItemLink({
   onItemClick,
   activePath,
   level,
+  index,
   ...props
 }: Props & {item: PropSidebarItemLink}) {
   const {href, label, className} = item;

package/src/theme/DocSidebarItems/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, {memo} from 'react';
-
 import DocSidebarItem from '@theme/DocSidebarItem';
+import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
 
 import type {Props} from '@theme/DocSidebarItems';
 
@@ -15,15 +15,16 @@ import type {Props} from '@theme/DocSidebarItems';
 // TODO this triggers whole sidebar re-renders on navigation
 function DocSidebarItems({items, ...props}: Props): JSX.Element {
   return (
-    <>
+    <DocSidebarItemsExpandedStateProvider>
       {items.map((item, index) => (
         <DocSidebarItem
           key={index} // sidebar is static, the index does not change
           item={item}
+          index={index}
           {...props}
         />
       ))}
-    </>
+    </DocSidebarItemsExpandedStateProvider>
   );
 }
 

package/src/theme-classic.d.ts

@@ -151,19 +151,13 @@ declare module '@theme/DocSidebar' {
 declare module '@theme/DocSidebarItem' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-  export type DocSidebarPropsBase = {
-    readonly activePath: string;
-    readonly onItemClick?: (item: PropSidebarItem) => void;
-    readonly level: number;
-    readonly tabIndex?: number;
-  };
-
   export interface Props {
     readonly activePath: string;
     readonly onItemClick?: (item: PropSidebarItem) => void;
     readonly level: number;
     readonly tabIndex?: number;
     readonly item: PropSidebarItem;
+    readonly index: number;
   }
 
   export default function DocSidebarItem(props: Props): JSX.Element;
@@ -173,7 +167,7 @@ declare module '@theme/DocSidebarItems' {
   import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem';
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-  export type Props = Omit<DocSidebarItemProps, 'item'> & {
+  export type Props = Omit<DocSidebarItemProps, 'item' | 'index'> & {
     readonly items: readonly PropSidebarItem[];
   };
 

package/src/validateThemeConfig.ts

@@ -41,6 +41,7 @@ const DEFAULT_CONFIG = {
     items: [],
   },
   hideableSidebar: false,
+  autoCollapseSidebarCategories: false,
   tableOfContents: {
     minHeadingLevel: 2,
     maxHeadingLevel: 3,
@@ -352,6 +353,9 @@ const ThemeConfigSchema = Joi.object({
     .default(DEFAULT_CONFIG.prism)
     .unknown(),
   hideableSidebar: Joi.bool().default(DEFAULT_CONFIG.hideableSidebar),
+  autoCollapseSidebarCategories: Joi.bool().default(
+    DEFAULT_CONFIG.autoCollapseSidebarCategories,
+  ),
   sidebarCollapsible: Joi.forbidden().messages({
     'any.unknown':
       'The themeConfig.sidebarCollapsible has been moved to docs plugin options. See: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs',