@docusaurus/theme-classic 2.2.0 → 2.3.0

package/lib/getSwizzleConfig.js

@@ -17,6 +17,13 @@ function getSwizzleConfig() {
                 },
                 description: 'The component used to render multi-line code blocks, generally used in Markdown files.',
             },
+            'CodeBlock/Content': {
+                actions: {
+                    eject: 'unsafe',
+                    wrap: 'forbidden',
+                },
+                description: 'The folder containing components responsible for rendering different types of CodeBlock content.',
+            },
             ColorModeToggle: {
                 actions: {
                     eject: 'safe',
@@ -24,6 +31,13 @@ function getSwizzleConfig() {
                 },
                 description: 'The color mode toggle to switch between light and dark mode.',
             },
+            'DocBreadcrumbs/Items': {
+                actions: {
+                    eject: 'unsafe',
+                    wrap: 'forbidden', // Can't wrap a folder
+                },
+                description: 'The components responsible for rendering the breadcrumb items',
+            },
             DocCardList: {
                 actions: {
                     eject: 'safe',
@@ -31,6 +45,16 @@ function getSwizzleConfig() {
                 },
                 description: 'The component responsible for rendering a list of sidebar items cards.\nNotable used on the category generated-index pages.',
             },
+            'DocItem/TOC': {
+                actions: {
+                    // Forbidden because it's a parent folder, makes the CLI crash atm
+                    // TODO the CLI should rather support --eject
+                    // Subfolders can be swizzled
+                    eject: 'forbidden',
+                    wrap: 'forbidden',
+                },
+                description: 'The DocItem TOC is not directly swizzle-able, but you can swizzle its sub-components.',
+            },
             DocSidebar: {
                 actions: {
                     eject: 'unsafe',
@@ -94,6 +118,16 @@ function getSwizzleConfig() {
                 },
                 description: 'The footer logo',
             },
+            Icon: {
+                actions: {
+                    // Forbidden because it's a parent folder, makes the CLI crash atm
+                    // TODO the CLI should rather support --eject
+                    // Subfolders can be swizzled
+                    eject: 'forbidden',
+                    wrap: 'forbidden',
+                },
+                description: 'The Icon folder is not directly swizzle-able, but you can swizzle its sub-components.',
+            },
             'Icon/Arrow': {
                 actions: {
                     eject: 'safe',
@@ -204,7 +238,7 @@ function getSwizzleConfig() {
                     eject: 'safe',
                     wrap: 'forbidden',
                 },
-                description: 'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
+                description: 'The Navbar item components mapping. Can be ejected to add custom navbar item types.\nSee https://github.com/facebook/docusaurus/issues/7227.',
             },
             NotFound: {
                 actions: {

package/lib/theme/DocBreadcrumbs/Items/Home/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+export default function HomeBreadcrumbItem(): JSX.Element;

package/lib/theme/DocBreadcrumbs/Items/Home/index.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 Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import IconHome from '@theme/Icon/Home';
+import styles from './styles.module.css';
+export default function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className="breadcrumbs__link"
+        href={homeHref}>
+        <IconHome className={styles.breadcrumbHomeIcon} />
+      </Link>
+    </li>
+  );
+}

package/lib/theme/DocBreadcrumbs/Items/Home/styles.module.css

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}

package/lib/theme/DocBreadcrumbs/index.js

@@ -12,9 +12,8 @@ import {
   useHomePageRoute,
 } from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import {translate} from '@docusaurus/Translate';
-import IconHome from '@theme/Icon/Home';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
 import styles from './styles.module.css';
 // TODO move to design system folder
 function BreadcrumbsItemLink({children, href, isLast}) {
@@ -56,23 +55,6 @@ function BreadcrumbsItem({children, active, index, addMicrodata}) {
     </li>
   );
 }
-function HomeBreadcrumbItem() {
-  const homeHref = useBaseUrl('/');
-  return (
-    <li className="breadcrumbs__item">
-      <Link
-        aria-label={translate({
-          id: 'theme.docs.breadcrumbs.home',
-          message: 'Home page',
-          description: 'The ARIA label for the home page in the breadcrumbs',
-        })}
-        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
-        href={homeHref}>
-        <IconHome className={styles.breadcrumbHomeIcon} />
-      </Link>
-    </li>
-  );
-}
 export default function DocBreadcrumbs() {
   const breadcrumbs = useSidebarBreadcrumbs();
   const homePageRoute = useHomePageRoute();

package/lib/theme/DocBreadcrumbs/styles.module.css

@@ -9,11 +9,3 @@
   --ifm-breadcrumb-size-multiplier: 0.8;
   margin-bottom: 0.8rem;
 }
-
-.breadcrumbHomeIcon {
-  position: relative;
-  top: 1px;
-  vertical-align: top;
-  height: 1.1rem;
-  width: 1.1rem;
-}

package/lib/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css

@@ -7,10 +7,11 @@
 
 @media (min-width: 997px) {
   .expandButton {
-    position: sticky;
+    position: absolute;
     top: 0;
+    right: 0;
+    width: 100%;
     height: 100%;
-    max-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -52,15 +52,20 @@ export default function DocPageLayoutSidebar({
         }
       }}>
       <ResetOnSidebarChange>
-        <DocSidebar
-          sidebar={sidebar}
-          path={pathname}
-          onCollapse={toggleSidebar}
-          isHidden={hiddenSidebar}
-        />
+        <div
+          className={clsx(
+            styles.sidebarViewport,
+            hiddenSidebar && styles.sidebarViewportHidden,
+          )}>
+          <DocSidebar
+            sidebar={sidebar}
+            path={pathname}
+            onCollapse={toggleSidebar}
+            isHidden={hiddenSidebar}
+          />
+          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        </div>
       </ResetOnSidebarChange>
-
-      {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
     </aside>
   );
 }

package/lib/theme/DocPage/Layout/Sidebar/styles.module.css

@@ -29,4 +29,11 @@
     width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
+
+  .sidebarViewport {
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  }
 }

package/lib/theme/DocPage/Layout/styles.module.css

@@ -12,4 +12,5 @@
 
 .docsWrapper {
   display: flex;
+  flex: 1 0 auto;
 }

package/lib/theme/DocSidebar/Desktop/CollapseButton/styles.module.css

@@ -43,4 +43,5 @@
 
 .collapseSidebarButton {
   display: none;
+  margin: 0;
 }

package/lib/theme/DocSidebar/Desktop/Content/index.js

@@ -11,6 +11,7 @@ import {
   useAnnouncementBar,
   useScrollPosition,
 } from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import styles from './styles.module.css';
 function useShowAnnouncementBar() {
@@ -30,6 +31,11 @@ export default function DocSidebarDesktopContent({path, sidebar, className}) {
   const showAnnouncementBar = useShowAnnouncementBar();
   return (
     <nav
+      aria-label={translate({
+        id: 'theme.docs.sidebar.navAriaLabel',
+        message: 'Docs sidebar',
+        description: 'The ARIA label for the sidebar navigation',
+      })}
       className={clsx(
         'menu thin-scrollbar',
         styles.menu,

package/lib/theme/DocSidebar/Desktop/styles.module.css

@@ -9,13 +9,9 @@
   .sidebar {
     display: flex;
     flex-direction: column;
-    max-height: 100vh;
     height: 100%;
-    position: sticky;
-    top: 0;
     padding-top: var(--ifm-navbar-height);
     width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
   }
 
   .sidebarWithHideableNavbar {
@@ -24,8 +20,6 @@
 
   .sidebarHidden {
     opacity: 0;
-    height: 0;
-    overflow: hidden;
     visibility: hidden;
   }
 

package/lib/theme/Heading/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 export default function Heading({as: As, id, ...props}) {
   const {
@@ -17,6 +18,16 @@ export default function Heading({as: As, id, ...props}) {
   if (As === 'h1' || !id) {
     return <As {...props} id={undefined} />;
   }
+  const anchorTitle = translate(
+    {
+      id: 'theme.common.headingLinkTitle',
+      message: 'Direct link to {heading}',
+      description: 'Title for link to heading',
+    },
+    {
+      heading: typeof props.children === 'string' ? props.children : id,
+    },
+  );
   return (
     <As
       {...props}
@@ -25,19 +36,17 @@ export default function Heading({as: As, id, ...props}) {
         hideOnScroll
           ? styles.anchorWithHideOnScrollNavbar
           : styles.anchorWithStickyNavbar,
+        props.className,
       )}
       id={id}>
       {props.children}
-      <a
+      <Link
         className="hash-link"
-        href={`#${id}`}
-        title={translate({
-          id: 'theme.common.headingLinkTitle',
-          message: 'Direct link to heading',
-          description: 'Title for link to heading',
-        })}>
+        to={`#${id}`}
+        aria-label={anchorTitle}
+        title={anchorTitle}>
         &#8203;
-      </a>
+      </Link>
     </As>
   );
 }

package/lib/theme/Layout/Provider/index.js

@@ -8,7 +8,6 @@ import React from 'react';
 import {composeProviders} from '@docusaurus/theme-common';
 import {
   ColorModeProvider,
-  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   ScrollControllerProvider,
@@ -18,7 +17,6 @@ import {
 const Provider = composeProviders([
   ColorModeProvider,
   AnnouncementBarProvider,
-  TabGroupChoiceProvider,
   ScrollControllerProvider,
   DocsPreferredVersionContextProvider,
   PluginHtmlClassNameProvider,

package/lib/theme/Layout/styles.module.css

@@ -12,6 +12,8 @@ body {
 
 .mainWrapper {
   flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Docusaurus-specific utility class */

package/lib/theme/Navbar/Layout/index.js

@@ -11,6 +11,7 @@ import {
   useHideableNavbar,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
 import styles from './styles.module.css';
 function NavbarBackdrop(props) {
@@ -31,6 +32,11 @@ export default function NavbarLayout({children}) {
   return (
     <nav
       ref={navbarRef}
+      aria-label={translate({
+        id: 'theme.NavBar.navAriaLabel',
+        message: 'Main',
+        description: 'The ARIA label for the main navigation',
+      })}
       className={clsx(
         'navbar',
         'navbar--fixed-top',

package/lib/theme/Tabs/index.js

@@ -4,99 +4,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useState, cloneElement, isValidElement} from 'react';
+import React, {cloneElement} from 'react';
 import clsx from 'clsx';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {duplicates} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
-  useTabGroupChoice,
+  useTabs,
 } from '@docusaurus/theme-common/internal';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import styles from './styles.module.css';
-// A very rough duck type, but good enough to guard against mistakes while
-// allowing customization
-function isTabItem(comp) {
-  return 'value' in comp.props;
-}
-function TabsComponent(props) {
-  const {
-    lazy,
-    block,
-    defaultValue: defaultValueProp,
-    values: valuesProp,
-    groupId,
-    className,
-  } = props;
-  const children = React.Children.map(props.children, (child) => {
-    if (isValidElement(child) && isTabItem(child)) {
-      return child;
-    }
-    // child.type.name will give non-sensical values in prod because of
-    // minification, but we assume it won't throw in prod.
-    throw new Error(
-      `Docusaurus error: Bad <Tabs> child <${
-        // @ts-expect-error: guarding against unexpected cases
-        typeof child.type === 'string' ? child.type : child.type.name
-      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
-    );
-  });
-  const values =
-    valuesProp ??
-    // Only pick keys that we recognize. MDX would inject some keys by default
-    children.map(({props: {value, label, attributes}}) => ({
-      value,
-      label,
-      attributes,
-    }));
-  const dup = duplicates(values, (a, b) => a.value === b.value);
-  if (dup.length > 0) {
-    throw new Error(
-      `Docusaurus error: Duplicate values "${dup
-        .map((a) => a.value)
-        .join(', ')}" found in <Tabs>. Every value needs to be unique.`,
-    );
-  }
-  // When defaultValueProp is null, don't show a default tab
-  const defaultValue =
-    defaultValueProp === null
-      ? defaultValueProp
-      : defaultValueProp ??
-        children.find((child) => child.props.default)?.props.value ??
-        children[0].props.value;
-  if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
-        .map((a) => a.value)
-        .join(
-          ', ',
-        )}. If you intend to show no default tab, use defaultValue={null} instead.`,
-    );
-  }
-  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
+function TabList({className, block, selectedValue, selectValue, tabValues}) {
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =
     useScrollPositionBlocker();
-  if (groupId != null) {
-    const relevantTabGroupChoice = tabGroupChoices[groupId];
-    if (
-      relevantTabGroupChoice != null &&
-      relevantTabGroupChoice !== selectedValue &&
-      values.some((value) => value.value === relevantTabGroupChoice)
-    ) {
-      setSelectedValue(relevantTabGroupChoice);
-    }
-  }
   const handleTabChange = (event) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = values[newTabIndex].value;
+    const newTabValue = tabValues[newTabIndex].value;
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
-      setSelectedValue(newTabValue);
-      if (groupId != null) {
-        setTabGroupChoices(groupId, String(newTabValue));
-      }
+      selectValue(newTabValue);
     }
   };
   const handleKeydown = (event) => {
@@ -122,60 +48,67 @@ function TabsComponent(props) {
     focusElement?.focus();
   };
   return (
-    <div className={clsx('tabs-container', styles.tabList)}>
-      <ul
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          'tabs',
-          {
-            'tabs--block': block,
-          },
-          className,
-        )}>
-        {values.map(({value, label, attributes}) => (
-          <li
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
-            onKeyDown={handleKeydown}
-            onClick={handleTabChange}
-            {...attributes}
-            className={clsx(
-              'tabs__item',
-              styles.tabItem,
-              attributes?.className,
-              {
-                'tabs__item--active': selectedValue === value,
-              },
-            )}>
-            {label ?? value}
-          </li>
-        ))}
-      </ul>
-
-      {lazy ? (
-        cloneElement(
-          children.filter(
-            (tabItem) => tabItem.props.value === selectedValue,
-          )[0],
-          {className: 'margin-top--md'},
-        )
-      ) : (
-        <div className="margin-top--md">
-          {children.map((tabItem, i) =>
-            cloneElement(tabItem, {
-              key: i,
-              hidden: tabItem.props.value !== selectedValue,
-            }),
-          )}
-        </div>
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        'tabs',
+        {
+          'tabs--block': block,
+        },
+        className,
+      )}>
+      {tabValues.map(({value, label, attributes}) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx('tabs__item', styles.tabItem, attributes?.className, {
+            'tabs__item--active': selectedValue === value,
+          })}>
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+function TabContent({lazy, children, selectedValue}) {
+  if (lazy) {
+    const selectedTabItem = children.find(
+      (tabItem) => tabItem.props.value === selectedValue,
+    );
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null;
+    }
+    return cloneElement(selectedTabItem, {className: 'margin-top--md'});
+  }
+  return (
+    <div className="margin-top--md">
+      {children.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        }),
       )}
     </div>
   );
 }
+function TabsComponent(props) {
+  const tabs = useTabs(props);
+  return (
+    <div className={clsx('tabs-container', styles.tabList)}>
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  );
+}
 export default function Tabs(props) {
   const isBrowser = useIsBrowser();
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/mdx-loader": "2.2.0",
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@docusaurus/plugin-content-blog": "2.2.0",
-    "@docusaurus/plugin-content-docs": "2.2.0",
-    "@docusaurus/plugin-content-pages": "2.2.0",
-    "@docusaurus/theme-common": "2.2.0",
-    "@docusaurus/theme-translations": "2.2.0",
-    "@docusaurus/types": "2.2.0",
-    "@docusaurus/utils": "2.2.0",
-    "@docusaurus/utils-common": "2.2.0",
-    "@docusaurus/utils-validation": "2.2.0",
+    "@docusaurus/core": "2.3.0",
+    "@docusaurus/mdx-loader": "2.3.0",
+    "@docusaurus/module-type-aliases": "2.3.0",
+    "@docusaurus/plugin-content-blog": "2.3.0",
+    "@docusaurus/plugin-content-docs": "2.3.0",
+    "@docusaurus/plugin-content-pages": "2.3.0",
+    "@docusaurus/theme-common": "2.3.0",
+    "@docusaurus/theme-translations": "2.3.0",
+    "@docusaurus/types": "2.3.0",
+    "@docusaurus/utils": "2.3.0",
+    "@docusaurus/utils-common": "2.3.0",
+    "@docusaurus/utils-validation": "2.3.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "a308fb7c81832cca354192fe2984f52749441249"
+  "gitHead": "ad477781bdca6a11fa9c6daef5048bdcec0ee37e"
 }