@docusaurus/theme-classic 0.0.0-5005 → 0.0.0-5010

package/lib-next/theme/DocPage/Layout/Sidebar/index.js

@@ -9,7 +9,7 @@ import DocSidebar from '@theme/DocSidebar';
 import {useLocation} from '@docusaurus/router';
 import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
 import clsx from 'clsx';
-import styles from './index.module.css';
+import styles from './styles.module.css';
 import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common'; // Reset sidebar state when sidebar changes
 // Use React key to unmount/remount the children
 // See https://github.com/facebook/docusaurus/issues/3414

package/lib-next/theme/DocPage/Layout/index.js

@@ -9,8 +9,8 @@ import Layout from '@theme/Layout';
 import BackToTopButton from '@theme/BackToTopButton';
 import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
-import styles from './index.module.css';
 import {useDocsSidebar} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 export default function DocPageLayout({children}) {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);

package/lib-next/theme/DocSidebarItem/{Category.js → Category/index.js}

@@ -23,15 +23,15 @@ import DocSidebarItems from '@theme/DocSidebarItems';
 import useIsBrowser from '@docusaurus/useIsBrowser'; // If we navigate to a category and it becomes active, it should automatically
 // expand itself
 
-function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
+function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
 
     if (justBecameActive && collapsed) {
-      setCollapsed(false);
+      updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
 }
 /**
  * When a collapsible category has no link, we still link it to its first child
@@ -88,6 +88,11 @@ export default function DocSidebarItemCategory({
   ...props
 }) {
   const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
   const isActive = isActiveSidebarItem(item, activePath);
   const isCurrentPage = isSamePath(href, activePath);
@@ -102,23 +107,18 @@ export default function DocSidebarItemCategory({
       return isActive ? false : item.collapsed;
     },
   });
-  useAutoExpandActiveCategory({
-    isActive,
-    collapsed,
-    setCollapsed,
-  });
-  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
+  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState(); // Use this instead of `setCollapsed`, because it is also reactive
 
-  function updateCollapsed(toCollapsed = !collapsed) {
+  const updateCollapsed = (toCollapsed = !collapsed) => {
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
-  }
+  };
 
-  const {
-    docs: {
-      sidebar: {autoCollapseCategories},
-    },
-  } = useThemeConfig();
+  useAutoExpandActiveCategory({
+    isActive,
+    collapsed,
+    updateCollapsed,
+  });
   useEffect(() => {
     if (
       collapsible &&

package/lib-next/theme/DocSidebarItem/{Html.js → Html/index.js}

@@ -7,7 +7,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import styles from './Html.module.css';
+import styles from './styles.module.css';
 export default function DocSidebarItemHtml({item, level, index}) {
   const {value, defaultStyle, className} = item;
   return (

package/lib-next/theme/DocSidebarItem/{Link.js → Link/index.js}

@@ -10,7 +10,7 @@ import {isActiveSidebarItem, ThemeClassNames} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/IconExternalLink';
-import styles from './Link.module.css';
+import styles from './styles.module.css';
 export default function DocSidebarItemLink({
   item,
   onItemClick,

package/lib-next/theme/MDXComponents/{Img.js → Img/index.js}

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import styles from './Img.module.css';
 import clsx from 'clsx';
+import styles from './styles.module.css';
 
 function transformImgClassName(className) {
   return clsx(className, styles.img);

package/lib-next/theme/TOCCollapsible/{CollapseButton.js → CollapseButton/index.js}

@@ -7,7 +7,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
-import styles from './CollapseButton.module.css';
+import styles from './styles.module.css';
 export default function TOCCollapsibleCollapseButton({collapsed, ...props}) {
   return (
     <button

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

@@ -7,9 +7,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
-import styles from './index.module.css';
 import TOCItems from '@theme/TOCItems';
 import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
+import styles from './styles.module.css';
 export default function TOCCollapsible({
   toc,
   className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5005",
+  "version": "0.0.0-5010",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5005",
-    "@docusaurus/plugin-content-blog": "0.0.0-5005",
-    "@docusaurus/plugin-content-docs": "0.0.0-5005",
-    "@docusaurus/plugin-content-pages": "0.0.0-5005",
-    "@docusaurus/theme-common": "0.0.0-5005",
-    "@docusaurus/theme-translations": "0.0.0-5005",
-    "@docusaurus/utils": "0.0.0-5005",
-    "@docusaurus/utils-common": "0.0.0-5005",
-    "@docusaurus/utils-validation": "0.0.0-5005",
+    "@docusaurus/core": "0.0.0-5010",
+    "@docusaurus/plugin-content-blog": "0.0.0-5010",
+    "@docusaurus/plugin-content-docs": "0.0.0-5010",
+    "@docusaurus/plugin-content-pages": "0.0.0-5010",
+    "@docusaurus/theme-common": "0.0.0-5010",
+    "@docusaurus/theme-translations": "0.0.0-5010",
+    "@docusaurus/utils": "0.0.0-5010",
+    "@docusaurus/utils-common": "0.0.0-5010",
+    "@docusaurus/utils-validation": "0.0.0-5010",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -46,8 +46,8 @@
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.17.10",
     "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "0.0.0-5005",
-    "@docusaurus/types": "0.0.0-5005",
+    "@docusaurus/module-type-aliases": "0.0.0-5010",
+    "@docusaurus/types": "0.0.0-5010",
     "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
@@ -64,5 +64,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "9ca6725ab97f76059666302a3f7817d44b6dfcfa"
+  "gitHead": "d4c0feac2c3c1cd9853af197a8a539832700e541"
 }

package/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -12,7 +12,7 @@ import type {Props} from '@theme/DocPage/Layout/Sidebar';
 import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
 
 import clsx from 'clsx';
-import styles from './index.module.css';
+import styles from './styles.module.css';
 
 import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
 

package/src/theme/DocPage/Layout/index.tsx

@@ -11,11 +11,10 @@ import BackToTopButton from '@theme/BackToTopButton';
 import type {Props} from '@theme/DocPage/Layout';
 import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
-
-import styles from './index.module.css';
-
 import {useDocsSidebar} from '@docusaurus/theme-common';
 
+import styles from './styles.module.css';
+
 export default function DocPageLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);

package/src/theme/DocSidebarItem/{Category.tsx → Category/index.tsx}

@@ -31,19 +31,19 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 function useAutoExpandActiveCategory({
   isActive,
   collapsed,
-  setCollapsed,
+  updateCollapsed,
 }: {
   isActive: boolean;
   collapsed: boolean;
-  setCollapsed: (b: boolean) => void;
+  updateCollapsed: (b: boolean) => void;
 }) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
     if (justBecameActive && collapsed) {
-      setCollapsed(false);
+      updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
 }
 
 /**
@@ -105,6 +105,11 @@ export default function DocSidebarItemCategory({
   ...props
 }: Props): JSX.Element {
   const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
 
   const isActive = isActiveSidebarItem(item, activePath);
@@ -121,17 +126,13 @@ export default function DocSidebarItemCategory({
     },
   });
 
-  useAutoExpandActiveCategory({isActive, collapsed, setCollapsed});
   const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-  function updateCollapsed(toCollapsed: boolean = !collapsed) {
+  // Use this instead of `setCollapsed`, because it is also reactive
+  const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
-  }
-  const {
-    docs: {
-      sidebar: {autoCollapseCategories},
-    },
-  } = useThemeConfig();
+  };
+  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
   useEffect(() => {
     if (
       collapsible &&

package/src/theme/DocSidebarItem/{Html.tsx → Html/index.tsx}

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/DocSidebarItem/Html';
 
-import styles from './Html.module.css';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemHtml({
   item,

package/src/theme/DocSidebarItem/{Link.tsx → Link/index.tsx}

@@ -14,7 +14,7 @@ import IconExternalLink from '@theme/IconExternalLink';
 
 import type {Props} from '@theme/DocSidebarItem/Link';
 
-import styles from './Link.module.css';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemLink({
   item,

package/src/theme/MDXComponents/{Img.tsx → Img/index.tsx}

@@ -7,9 +7,10 @@
 
 import React from 'react';
 import type {Props} from '@theme/MDXComponents/Img';
-import styles from './Img.module.css';
 import clsx from 'clsx';
 
+import styles from './styles.module.css';
+
 function transformImgClassName(className?: string): string {
   return clsx(className, styles.img);
 }

package/src/theme/TOCCollapsible/{CollapseButton.tsx → CollapseButton/index.tsx}

@@ -8,9 +8,10 @@
 import React from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
-import styles from './CollapseButton.module.css';
 import type {Props} from '@theme/TOCCollapsible/CollapseButton';
 
+import styles from './styles.module.css';
+
 export default function TOCCollapsibleCollapseButton({
   collapsed,
   ...props

package/src/theme/TOCCollapsible/index.tsx

@@ -8,11 +8,12 @@
 import React from 'react';
 import clsx from 'clsx';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
-import styles from './index.module.css';
 import TOCItems from '@theme/TOCItems';
 import type {Props} from '@theme/TOCCollapsible';
 import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
 
+import styles from './styles.module.css';
+
 export default function TOCCollapsible({
   toc,
   className,