@docusaurus/theme-classic 0.0.0-4927 → 0.0.0-4928

package/lib/theme-classic.d.ts

@@ -1061,6 +1061,19 @@ declare module '@theme/TOCItems' {
   export default function TOCItems(props: Props): JSX.Element;
 }
 
+declare module '@theme/TOCItems/Tree' {
+  import type {TOCTreeNode} from '@docusaurus/theme-common';
+
+  export interface Props {
+    readonly toc: readonly TOCTreeNode[];
+    readonly className: string;
+    readonly linkClassName: string | null;
+    readonly isChild?: boolean;
+  }
+
+  export default function TOCItems(props: Props): JSX.Element;
+}
+
 declare module '@theme/TOC' {
   import type {TOCItem} from '@docusaurus/types';
 
@@ -1101,6 +1114,18 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
+declare module '@theme/TOCCollapsible/CollapseButton' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'button'> {
+    collapsed: boolean;
+  }
+
+  export default function TOCCollapsibleCollapseButton(
+    props: Props,
+  ): JSX.Element;
+}
+
 declare module '@theme/ColorModeToggle' {
   import type {ColorMode} from '@docusaurus/theme-common';
 

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import styles from './CollapseButton.module.css';
+export default function TOCCollapsibleCollapseButton({collapsed, ...props}) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        'clean-btn',
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}>
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component">
+        On this page
+      </Translate>
+    </button>
+  );
+}

package/lib-next/theme/TOCCollapsible/{styles.module.css → CollapseButton.module.css}

@@ -5,12 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.tocCollapsible {
-  background-color: var(--ifm-menu-color-background-active);
-  border-radius: var(--ifm-global-radius);
-  margin: 1rem 0;
-}
-
 .tocCollapsibleButton {
   font-size: inherit;
   display: flex;
@@ -30,21 +24,6 @@
   transition: transform var(--ifm-transition-fast);
 }
 
-.tocCollapsibleContent > ul {
-  border-left: none;
-  border-top: 1px solid var(--ifm-color-emphasis-300);
-  padding: 0.2rem 0;
-  font-size: 15px;
-}
-
-.tocCollapsibleContent ul li {
-  margin: 0.4rem 0.8rem;
-}
-
-.tocCollapsibleContent a {
-  display: block;
-}
-
-.tocCollapsibleExpanded .tocCollapsibleButton::after {
+.tocCollapsibleButtonExpanded::after {
   transform: none;
 }

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

@@ -6,10 +6,10 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
-import styles from './styles.module.css';
+import styles from './index.module.css';
 import TOCItems from '@theme/TOCItems';
+import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
 export default function TOCCollapsible({
   toc,
   className,
@@ -26,17 +26,7 @@ export default function TOCCollapsible({
         !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
-      <button
-        type="button"
-        className={clsx('clean-btn', styles.tocCollapsibleButton)}
-        onClick={toggleCollapsed}>
-        <Translate
-          id="theme.TOCCollapsible.toggleButtonLabel"
-          description="The label used by the button on the collapsible TOC component">
-          On this page
-        </Translate>
-      </button>
-
+      <CollapseButton collapsed={collapsed} onClick={toggleCollapsed} />
       <Collapsible
         lazy
         className={styles.tocCollapsibleContent}

package/lib-next/theme/TOCCollapsible/index.module.css

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+.tocCollapsible {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  padding: 0.2rem 0;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 0.4rem 0.8rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}

package/lib-next/theme/TOCItems/Tree.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+import React from 'react';
+
+// Recursive component rendering the toc tree
+
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function TOCItemTree({toc, className, linkClassName, isChild}) {
+  if (!toc.length) {
+    return null;
+  }
+
+  return (
+    <ul className={isChild ? undefined : className}>
+      {toc.map((heading) => (
+        <li key={heading.id}>
+          <a
+            href={`#${heading.id}`}
+            className={linkClassName ?? undefined} // Developer provided the HTML, so assume it's safe.
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: heading.value,
+            }}
+          />
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+} // Memo only the tree root is enough
+
+export default React.memo(TOCItemTree);

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

@@ -5,43 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {useMemo} from 'react';
+import TOCItemTree from '@theme/TOCItems/Tree';
 import {
   useThemeConfig,
   useTOCHighlight,
   useFilteredAndTreeifiedTOC,
-} from '@docusaurus/theme-common'; // Recursive component rendering the toc tree
-
-/* eslint-disable jsx-a11y/control-has-associated-label */
-
-function TOCItemList({toc, className, linkClassName, isChild}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return (
-    <ul className={isChild ? undefined : className}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={linkClassName ?? undefined} // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: heading.value,
-            }}
-          />
-          <TOCItemList
-            isChild
-            toc={heading.children}
-            className={className}
-            linkClassName={linkClassName}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
+} from '@docusaurus/theme-common';
 export default function TOCItems({
   toc,
   className = 'table-of-contents table-of-contents__left-border',
@@ -75,7 +44,7 @@ export default function TOCItems({
   }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
   useTOCHighlight(tocHighlightConfig);
   return (
-    <TOCItemList
+    <TOCItemTree
       toc={tocTree}
       className={className}
       linkClassName={linkClassName}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4927",
+  "version": "0.0.0-4928",
   "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-4927",
-    "@docusaurus/plugin-content-blog": "0.0.0-4927",
-    "@docusaurus/plugin-content-docs": "0.0.0-4927",
-    "@docusaurus/plugin-content-pages": "0.0.0-4927",
-    "@docusaurus/theme-common": "0.0.0-4927",
-    "@docusaurus/theme-translations": "0.0.0-4927",
-    "@docusaurus/utils": "0.0.0-4927",
-    "@docusaurus/utils-common": "0.0.0-4927",
-    "@docusaurus/utils-validation": "0.0.0-4927",
+    "@docusaurus/core": "0.0.0-4928",
+    "@docusaurus/plugin-content-blog": "0.0.0-4928",
+    "@docusaurus/plugin-content-docs": "0.0.0-4928",
+    "@docusaurus/plugin-content-pages": "0.0.0-4928",
+    "@docusaurus/theme-common": "0.0.0-4928",
+    "@docusaurus/theme-translations": "0.0.0-4928",
+    "@docusaurus/utils": "0.0.0-4928",
+    "@docusaurus/utils-common": "0.0.0-4928",
+    "@docusaurus/utils-validation": "0.0.0-4928",
     "@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.6",
     "@babel/core": "^7.17.9",
     "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "0.0.0-4927",
-    "@docusaurus/types": "0.0.0-4927",
+    "@docusaurus/module-type-aliases": "0.0.0-4928",
+    "@docusaurus/types": "0.0.0-4928",
     "@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": "1c97d81e5046a346360d7c79d5c1e715b37a94d9"
+  "gitHead": "fc6b6a5b2caee19226c279ad3ec7098ee567a123"
 }

package/src/theme/TOCCollapsible/{styles.module.css → CollapseButton.module.css}

@@ -5,12 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.tocCollapsible {
-  background-color: var(--ifm-menu-color-background-active);
-  border-radius: var(--ifm-global-radius);
-  margin: 1rem 0;
-}
-
 .tocCollapsibleButton {
   font-size: inherit;
   display: flex;
@@ -30,21 +24,6 @@
   transition: transform var(--ifm-transition-fast);
 }
 
-.tocCollapsibleContent > ul {
-  border-left: none;
-  border-top: 1px solid var(--ifm-color-emphasis-300);
-  padding: 0.2rem 0;
-  font-size: 15px;
-}
-
-.tocCollapsibleContent ul li {
-  margin: 0.4rem 0.8rem;
-}
-
-.tocCollapsibleContent a {
-  display: block;
-}
-
-.tocCollapsibleExpanded .tocCollapsibleButton::after {
+.tocCollapsibleButtonExpanded::after {
   transform: none;
 }

package/src/theme/TOCCollapsible/CollapseButton.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+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';
+
+export default function TOCCollapsibleCollapseButton({
+  collapsed,
+  ...props
+}: Props): JSX.Element {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        'clean-btn',
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}>
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component">
+        On this page
+      </Translate>
+    </button>
+  );
+}

package/src/theme/TOCCollapsible/index.module.css

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+.tocCollapsible {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  padding: 0.2rem 0;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 0.4rem 0.8rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}

package/src/theme/TOCCollapsible/index.tsx

@@ -7,11 +7,11 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
-import styles from './styles.module.css';
+import styles from './index.module.css';
 import TOCItems from '@theme/TOCItems';
 import type {Props} from '@theme/TOCCollapsible';
+import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
 
 export default function TOCCollapsible({
   toc,
@@ -22,7 +22,6 @@ export default function TOCCollapsible({
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });
-
   return (
     <div
       className={clsx(
@@ -30,17 +29,7 @@ export default function TOCCollapsible({
         !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
-      <button
-        type="button"
-        className={clsx('clean-btn', styles.tocCollapsibleButton)}
-        onClick={toggleCollapsed}>
-        <Translate
-          id="theme.TOCCollapsible.toggleButtonLabel"
-          description="The label used by the button on the collapsible TOC component">
-          On this page
-        </Translate>
-      </button>
-
+      <CollapseButton collapsed={collapsed} onClick={toggleCollapsed} />
       <Collapsible
         lazy
         className={styles.tocCollapsibleContent}

package/src/theme/TOCItems/Tree.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import type {Props} from '@theme/TOCItems/Tree';
+
+// Recursive component rendering the toc tree
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function TOCItemTree({
+  toc,
+  className,
+  linkClassName,
+  isChild,
+}: Props): JSX.Element | null {
+  if (!toc.length) {
+    return null;
+  }
+  return (
+    <ul className={isChild ? undefined : className}>
+      {toc.map((heading) => (
+        <li key={heading.id}>
+          <a
+            href={`#${heading.id}`}
+            className={linkClassName ?? undefined}
+            // Developer provided the HTML, so assume it's safe.
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{__html: heading.value}}
+          />
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);

package/src/theme/TOCItems/index.tsx

@@ -7,53 +7,14 @@
 
 import React, {useMemo} from 'react';
 import type {Props} from '@theme/TOCItems';
+import TOCItemTree from '@theme/TOCItems/Tree';
 import {
   type TOCHighlightConfig,
-  type TOCTreeNode,
   useThemeConfig,
   useTOCHighlight,
   useFilteredAndTreeifiedTOC,
 } from '@docusaurus/theme-common';
 
-// Recursive component rendering the toc tree
-/* eslint-disable jsx-a11y/control-has-associated-label */
-function TOCItemList({
-  toc,
-  className,
-  linkClassName,
-  isChild,
-}: {
-  readonly toc: readonly TOCTreeNode[];
-  readonly className: string;
-  readonly linkClassName: string | null;
-  readonly isChild?: boolean;
-}): JSX.Element | null {
-  if (!toc.length) {
-    return null;
-  }
-  return (
-    <ul className={isChild ? undefined : className}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={linkClassName ?? undefined}
-            // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{__html: heading.value}}
-          />
-          <TOCItemList
-            isChild
-            toc={heading.children}
-            className={className}
-            linkClassName={linkClassName}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 export default function TOCItems({
   toc,
   className = 'table-of-contents table-of-contents__left-border',
@@ -90,7 +51,7 @@ export default function TOCItems({
   useTOCHighlight(tocHighlightConfig);
 
   return (
-    <TOCItemList
+    <TOCItemTree
       toc={tocTree}
       className={className}
       linkClassName={linkClassName}

package/src/theme-classic.d.ts

@@ -1061,6 +1061,19 @@ declare module '@theme/TOCItems' {
   export default function TOCItems(props: Props): JSX.Element;
 }
 
+declare module '@theme/TOCItems/Tree' {
+  import type {TOCTreeNode} from '@docusaurus/theme-common';
+
+  export interface Props {
+    readonly toc: readonly TOCTreeNode[];
+    readonly className: string;
+    readonly linkClassName: string | null;
+    readonly isChild?: boolean;
+  }
+
+  export default function TOCItems(props: Props): JSX.Element;
+}
+
 declare module '@theme/TOC' {
   import type {TOCItem} from '@docusaurus/types';
 
@@ -1101,6 +1114,18 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
+declare module '@theme/TOCCollapsible/CollapseButton' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'button'> {
+    collapsed: boolean;
+  }
+
+  export default function TOCCollapsibleCollapseButton(
+    props: Props,
+  ): JSX.Element;
+}
+
 declare module '@theme/ColorModeToggle' {
   import type {ColorMode} from '@docusaurus/theme-common';