@docusaurus/theme-classic 2.0.0-beta.16 → 2.0.0-beta.19

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,27 +22,14 @@ export default function TOCCollapsible({
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });
-
   return (
     <div
       className={clsx(
         styles.tocCollapsible,
-        {
-          [styles.tocCollapsibleExpanded]: !collapsed,
-        },
+        !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
+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}>
+          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+          <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/TabItem/index.tsx

@@ -7,6 +7,9 @@
 
 import React from 'react';
 import type {Props} from '@theme/TabItem';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
 
 export default function TabItem({
   children,
@@ -14,7 +17,10 @@ export default function TabItem({
   className,
 }: Props): JSX.Element {
   return (
-    <div role="tabpanel" {...{hidden, className}}>
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItem, className)}
+      {...{hidden}}>
       {children}
     </div>
   );

package/src/theme/TabItem/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}

package/src/theme/Tabs/index.tsx

@@ -8,7 +8,6 @@
 import React, {
   useState,
   cloneElement,
-  Children,
   isValidElement,
   type ReactElement,
 } from 'react';
@@ -40,7 +39,7 @@ function TabsComponent(props: Props): JSX.Element {
     groupId,
     className,
   } = props;
-  const children = Children.map(props.children, (child) => {
+  const children = React.Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
       return child;
     }
@@ -108,7 +107,7 @@ function TabsComponent(props: Props): JSX.Element {
   ) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = values[newTabIndex].value;
+    const newTabValue = values[newTabIndex]!.value;
 
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
@@ -126,12 +125,12 @@ function TabsComponent(props: Props): JSX.Element {
     switch (event.key) {
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] || tabRefs[0];
+        focusElement = tabRefs[nextTab] || tabRefs[0]!;
         break;
       }
       case 'ArrowLeft': {
         const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1];
+        focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1]!;
         break;
       }
       default:
@@ -142,7 +141,7 @@ function TabsComponent(props: Props): JSX.Element {
   };
 
   return (
-    <div className="tabs-container">
+    <div className={clsx('tabs-container', styles.tabList)}>
       <ul
         role="tablist"
         aria-orientation="horizontal"
@@ -181,11 +180,11 @@ function TabsComponent(props: Props): JSX.Element {
         cloneElement(
           children.filter(
             (tabItem) => tabItem.props.value === selectedValue,
-          )[0],
-          {className: 'margin-vert--md'},
+          )[0]!,
+          {className: 'margin-top--md'},
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className="margin-top--md">
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

package/src/theme/Tabs/styles.module.css

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
 .tabItem {
   margin-top: 0 !important;
 }

package/src/theme/Tag/index.tsx

@@ -12,17 +12,15 @@ import type {Props} from '@theme/Tag';
 
 import styles from './styles.module.css';
 
-export default function Tag(props: Props): JSX.Element {
-  const {permalink, name, count} = props;
-
+export default function Tag({permalink, label, count}: Props): JSX.Element {
   return (
     <Link
       href={permalink}
-      className={clsx(styles.tag, {
-        [styles.tagRegular]: !count,
-        [styles.tagWithCount]: count,
-      })}>
-      {name}
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+      )}>
+      {label}
       {count && <span>{count}</span>}
     </Link>
   );

package/src/theme/TagsListInline/index.tsx

@@ -26,7 +26,7 @@ export default function TagsListInline({tags}: Props): JSX.Element {
       <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
         {tags.map(({label, permalink: tagPermalink}) => (
           <li key={tagPermalink} className={styles.tag}>
-            <Tag name={label} permalink={tagPermalink} />
+            <Tag label={label} permalink={tagPermalink} />
           </li>
         ))}
       </ul>

package/src/theme/ThemedImage/index.tsx

@@ -16,12 +16,13 @@ import styles from './styles.module.css';
 
 export default function ThemedImage(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useColorMode();
-  const {sources, className, alt = '', ...propsRest} = props;
+  const {colorMode} = useColorMode();
+  const {sources, className, alt, ...propsRest} = props;
 
   type SourceName = keyof Props['sources'];
 
-  const clientThemes: SourceName[] = isDarkTheme ? ['dark'] : ['light'];
+  const clientThemes: SourceName[] =
+    colorMode === 'dark' ? ['dark'] : ['light'];
 
   const renderedSourceNames: SourceName[] = isBrowser
     ? clientThemes