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

package/lib/theme-classic.d.ts

@@ -268,7 +268,7 @@ declare module '@theme/DocPage/Layout' {
   export default function DocPageLayout(props: Props): JSX.Element;
 }
 
-declare module '@theme/DocPage/Layout/Aside' {
+declare module '@theme/DocPage/Layout/Sidebar' {
   import type {Dispatch, SetStateAction} from 'react';
   import type {PropSidebar} from '@docusaurus/plugin-content-docs';
 
@@ -278,7 +278,17 @@ declare module '@theme/DocPage/Layout/Aside' {
     readonly setHiddenSidebarContainer: Dispatch<SetStateAction<boolean>>;
   }
 
-  export default function DocPageLayoutAside(props: Props): JSX.Element;
+  export default function DocPageLayoutSidebar(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocPage/Layout/Sidebar/ExpandButton' {
+  export interface Props {
+    toggleSidebar: () => void;
+  }
+
+  export default function DocPageLayoutSidebarExpandButton(
+    props: Props,
+  ): JSX.Element;
 }
 
 declare module '@theme/DocPage/Layout/Main' {

package/lib-next/theme/DocPage/Layout/Main/styles.module.css

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * 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 IconArrow from '@theme/IconArrow';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+export default function DocPageLayoutSidebarExpandButton({toggleSidebar}) {
+  return (
+    <div
+      className={styles.expandButton}
+      title={translate({
+        id: 'theme.docs.sidebar.expandButtonTitle',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.expandButtonAriaLabel',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      tabIndex={0}
+      role="button"
+      onKeyDown={toggleSidebar}
+      onClick={toggleSidebar}>
+      <IconArrow className={styles.expandButtonIcon} />
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+@media (min-width: 997px) {
+  .expandButton {
+    position: sticky;
+    top: 0;
+    height: 100%;
+    max-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+  }
+
+  .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--ifm-color-emphasis-200);
+  }
+
+  .expandButtonIcon {
+    transform: rotate(0);
+  }
+
+  [dir='rtl'] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+
+  [data-theme='dark'] .expandButton:hover,
+  [data-theme='dark'] .expandButton:focus {
+    background-color: var(--collapse-button-bg-color-dark);
+  }
+}

package/lib-next/theme/DocPage/Layout/{Aside.js → Sidebar/index.js}

@@ -6,37 +6,11 @@
  */
 import React, {useState, useCallback} from 'react';
 import DocSidebar from '@theme/DocSidebar';
-import IconArrow from '@theme/IconArrow';
-import {translate} from '@docusaurus/Translate';
 import {useLocation} from '@docusaurus/router';
+import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
 import clsx from 'clsx';
-import styles from './styles.module.css';
-import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
-
-function SidebarExpandButton({toggleSidebar}) {
-  return (
-    <div
-      className={styles.collapsedDocSidebar}
-      title={translate({
-        id: 'theme.docs.sidebar.expandButtonTitle',
-        message: 'Expand sidebar',
-        description:
-          'The ARIA label and title attribute for expand button of doc sidebar',
-      })}
-      aria-label={translate({
-        id: 'theme.docs.sidebar.expandButtonAriaLabel',
-        message: 'Expand sidebar',
-        description:
-          'The ARIA label and title attribute for expand button of doc sidebar',
-      })}
-      tabIndex={0}
-      role="button"
-      onKeyDown={toggleSidebar}
-      onClick={toggleSidebar}>
-      <IconArrow className={styles.expandSidebarButtonIcon} />
-    </div>
-  );
-} // Reset sidebar state when sidebar changes
+import styles from './index.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
 
@@ -49,7 +23,7 @@ function ResetOnSidebarChange({children}) {
   );
 }
 
-export default function DocPageLayoutAside({
+export default function DocPageLayoutSidebar({
   sidebar,
   hiddenSidebarContainer,
   setHiddenSidebarContainer,
@@ -88,7 +62,7 @@ export default function DocPageLayoutAside({
         />
       </ResetOnSidebarChange>
 
-      {hiddenSidebar && <SidebarExpandButton toggleSidebar={toggleSidebar} />}
+      {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
     </aside>
   );
 }

package/lib-next/theme/DocPage/Layout/Sidebar/index.module.css

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+  display: none;
+}
+
+@media (min-width: 997px) {
+  .docSidebarContainer {
+    display: block;
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+}

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

@@ -7,9 +7,9 @@
 import React, {useState} from 'react';
 import Layout from '@theme/Layout';
 import BackToTopButton from '@theme/BackToTopButton';
-import DocPageLayoutAside from '@theme/DocPage/Layout/Aside';
+import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
-import styles from './styles.module.css';
+import styles from './index.module.css';
 import {useDocsSidebar} from '@docusaurus/theme-common';
 export default function DocPageLayout({children}) {
   const sidebar = useDocsSidebar();
@@ -19,7 +19,7 @@ export default function DocPageLayout({children}) {
       <BackToTopButton />
       <div className={styles.docPage}>
         {sidebar && (
-          <DocPageLayoutAside
+          <DocPageLayoutSidebar
             sidebar={sidebar.items}
             hiddenSidebarContainer={hiddenSidebarContainer}
             setHiddenSidebarContainer={setHiddenSidebarContainer}

package/lib-next/theme/DocPage/Layout/index.module.css

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+.docPage {
+  display: flex;
+  width: 100%;
+}
+
+.docsWrapper {
+  display: flex;
+}

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

@@ -5,10 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import renderRoutes from '@docusaurus/renderRoutes';
 import NotFound from '@theme/NotFound';
 import DocPageLayout from '@theme/DocPage/Layout';
-import {matchPath} from '@docusaurus/router';
 import clsx from 'clsx';
 import {
   HtmlClassNameProvider,
@@ -16,40 +14,12 @@ import {
   docVersionSearchTag,
   DocsSidebarProvider,
   DocsVersionProvider,
+  useDocRouteMetadata,
 } from '@docusaurus/theme-common';
 import SearchMetadata from '@theme/SearchMetadata';
-
-function extractDocRouteMetadata(props) {
-  const {
-    route: {routes: docRoutes},
-    versionMetadata,
-    location,
-  } = props;
-  const currentDocRoute = docRoutes.find((docRoute) =>
-    matchPath(location.pathname, docRoute),
-  );
-
-  if (!currentDocRoute) {
-    return null;
-  } // For now, the sidebarName is added as route config: not ideal!
-
-  const sidebarName = currentDocRoute.sidebar;
-  const sidebarItems = sidebarName
-    ? versionMetadata.docsSidebars[sidebarName]
-    : undefined;
-  const docElement = renderRoutes(props.route.routes, {
-    versionMetadata,
-  });
-  return {
-    docElement,
-    sidebarName,
-    sidebarItems,
-  };
-}
-
 export default function DocPage(props) {
   const {versionMetadata} = props;
-  const currentDocRouteMetadata = extractDocRouteMetadata(props);
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
 
   if (!currentDocRouteMetadata) {
     return <NotFound />;

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

@@ -7,8 +7,6 @@
 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;
@@ -18,6 +16,7 @@ function TOCItemTree({toc, className, linkClassName, isChild}) {
     <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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4928",
+  "version": "0.0.0-4932",
   "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-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",
+    "@docusaurus/core": "0.0.0-4932",
+    "@docusaurus/plugin-content-blog": "0.0.0-4932",
+    "@docusaurus/plugin-content-docs": "0.0.0-4932",
+    "@docusaurus/plugin-content-pages": "0.0.0-4932",
+    "@docusaurus/theme-common": "0.0.0-4932",
+    "@docusaurus/theme-translations": "0.0.0-4932",
+    "@docusaurus/utils": "0.0.0-4932",
+    "@docusaurus/utils-common": "0.0.0-4932",
+    "@docusaurus/utils-validation": "0.0.0-4932",
     "@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-4928",
-    "@docusaurus/types": "0.0.0-4928",
+    "@docusaurus/module-type-aliases": "0.0.0-4932",
+    "@docusaurus/types": "0.0.0-4932",
     "@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": "fc6b6a5b2caee19226c279ad3ec7098ee567a123"
+  "gitHead": "3881e34a127c27aa691bcdf281463d7b20c257aa"
 }

package/src/theme/DocPage/Layout/Main/styles.module.css

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * 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 IconArrow from '@theme/IconArrow';
+import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+
+import styles from './styles.module.css';
+
+export default function DocPageLayoutSidebarExpandButton({
+  toggleSidebar,
+}: Props): JSX.Element {
+  return (
+    <div
+      className={styles.expandButton}
+      title={translate({
+        id: 'theme.docs.sidebar.expandButtonTitle',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.expandButtonAriaLabel',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      tabIndex={0}
+      role="button"
+      onKeyDown={toggleSidebar}
+      onClick={toggleSidebar}>
+      <IconArrow className={styles.expandButtonIcon} />
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+@media (min-width: 997px) {
+  .expandButton {
+    position: sticky;
+    top: 0;
+    height: 100%;
+    max-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+  }
+
+  .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--ifm-color-emphasis-200);
+  }
+
+  .expandButtonIcon {
+    transform: rotate(0);
+  }
+
+  [dir='rtl'] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+
+  [data-theme='dark'] .expandButton:hover,
+  [data-theme='dark'] .expandButton:focus {
+    background-color: var(--collapse-button-bg-color-dark);
+  }
+}

package/src/theme/DocPage/Layout/Sidebar/index.module.css

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+  display: none;
+}
+
+@media (min-width: 997px) {
+  .docSidebarContainer {
+    display: block;
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+}

package/src/theme/DocPage/Layout/{Aside.tsx → Sidebar/index.tsx}

@@ -7,41 +7,15 @@
 
 import React, {type ReactNode, useState, useCallback} from 'react';
 import DocSidebar from '@theme/DocSidebar';
-import IconArrow from '@theme/IconArrow';
-import {translate} from '@docusaurus/Translate';
 import {useLocation} from '@docusaurus/router';
-import type {Props} from '@theme/DocPage/Layout/Aside';
+import type {Props} from '@theme/DocPage/Layout/Sidebar';
+import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
 
 import clsx from 'clsx';
-import styles from './styles.module.css';
+import styles from './index.module.css';
 
 import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
 
-function SidebarExpandButton({toggleSidebar}: {toggleSidebar: () => void}) {
-  return (
-    <div
-      className={styles.collapsedDocSidebar}
-      title={translate({
-        id: 'theme.docs.sidebar.expandButtonTitle',
-        message: 'Expand sidebar',
-        description:
-          'The ARIA label and title attribute for expand button of doc sidebar',
-      })}
-      aria-label={translate({
-        id: 'theme.docs.sidebar.expandButtonAriaLabel',
-        message: 'Expand sidebar',
-        description:
-          'The ARIA label and title attribute for expand button of doc sidebar',
-      })}
-      tabIndex={0}
-      role="button"
-      onKeyDown={toggleSidebar}
-      onClick={toggleSidebar}>
-      <IconArrow className={styles.expandSidebarButtonIcon} />
-    </div>
-  );
-}
-
 // Reset sidebar state when sidebar changes
 // Use React key to unmount/remount the children
 // See https://github.com/facebook/docusaurus/issues/3414
@@ -54,7 +28,7 @@ function ResetOnSidebarChange({children}: {children: ReactNode}) {
   );
 }
 
-export default function DocPageLayoutAside({
+export default function DocPageLayoutSidebar({
   sidebar,
   hiddenSidebarContainer,
   setHiddenSidebarContainer,
@@ -94,7 +68,7 @@ export default function DocPageLayoutAside({
         />
       </ResetOnSidebarChange>
 
-      {hiddenSidebar && <SidebarExpandButton toggleSidebar={toggleSidebar} />}
+      {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
     </aside>
   );
 }

package/src/theme/DocPage/Layout/index.module.css

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+.docPage {
+  display: flex;
+  width: 100%;
+}
+
+.docsWrapper {
+  display: flex;
+}

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

@@ -9,10 +9,10 @@ import React, {useState} from 'react';
 import Layout from '@theme/Layout';
 import BackToTopButton from '@theme/BackToTopButton';
 import type {Props} from '@theme/DocPage/Layout';
-import DocPageLayoutAside from '@theme/DocPage/Layout/Aside';
+import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
 
-import styles from './styles.module.css';
+import styles from './index.module.css';
 
 import {useDocsSidebar} from '@docusaurus/theme-common';
 
@@ -24,7 +24,7 @@ export default function DocPageLayout({children}: Props): JSX.Element {
       <BackToTopButton />
       <div className={styles.docPage}>
         {sidebar && (
-          <DocPageLayoutAside
+          <DocPageLayoutSidebar
             sidebar={sidebar.items}
             hiddenSidebarContainer={hiddenSidebarContainer}
             setHiddenSidebarContainer={setHiddenSidebarContainer}

package/src/theme/DocPage/index.tsx

@@ -6,12 +6,9 @@
  */
 
 import React from 'react';
-import renderRoutes from '@docusaurus/renderRoutes';
-import type {PropSidebar} from '@docusaurus/plugin-content-docs';
 import NotFound from '@theme/NotFound';
 import type {Props} from '@theme/DocPage';
 import DocPageLayout from '@theme/DocPage/Layout';
-import {matchPath} from '@docusaurus/router';
 
 import clsx from 'clsx';
 
@@ -21,47 +18,13 @@ import {
   docVersionSearchTag,
   DocsSidebarProvider,
   DocsVersionProvider,
+  useDocRouteMetadata,
 } from '@docusaurus/theme-common';
 import SearchMetadata from '@theme/SearchMetadata';
 
-function extractDocRouteMetadata(props: Props): null | {
-  docElement: JSX.Element;
-  sidebarName: string | undefined;
-  sidebarItems: PropSidebar | undefined;
-} {
-  const {
-    route: {routes: docRoutes},
-    versionMetadata,
-    location,
-  } = props;
-  const currentDocRoute = docRoutes!.find((docRoute) =>
-    matchPath(location.pathname, docRoute),
-  );
-  if (!currentDocRoute) {
-    return null;
-  }
-
-  // For now, the sidebarName is added as route config: not ideal!
-  const sidebarName = currentDocRoute.sidebar;
-
-  const sidebarItems = sidebarName
-    ? versionMetadata.docsSidebars[sidebarName]
-    : undefined;
-
-  const docElement = renderRoutes(props.route.routes, {
-    versionMetadata,
-  });
-
-  return {
-    docElement,
-    sidebarName,
-    sidebarItems,
-  };
-}
-
 export default function DocPage(props: Props): JSX.Element {
   const {versionMetadata} = props;
-  const currentDocRouteMetadata = extractDocRouteMetadata(props);
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
   if (!currentDocRouteMetadata) {
     return <NotFound />;
   }

package/src/theme/MDXComponents/Details.tsx

@@ -13,9 +13,8 @@ export default function MDXDetails(props: Props): JSX.Element {
   const items = React.Children.toArray(props.children) as ReactElement[];
   // Split summary item from the rest to pass it as a separate prop to the
   // Details theme component
-  const summary: ReactElement<ComponentProps<'summary'>> = items.find(
-    (item) => item?.props?.mdxType === 'summary',
-  )!;
+  const summary: ReactElement<ComponentProps<'summary'>> | undefined =
+    items.find((item) => item?.props?.mdxType === 'summary');
   const children = <>{items.filter((item) => item !== summary)}</>;
 
   return (

package/src/theme/TOCItems/Tree.tsx

@@ -9,7 +9,6 @@ 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,
@@ -23,6 +22,7 @@ function TOCItemTree({
     <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}

package/src/theme-classic.d.ts

@@ -268,7 +268,7 @@ declare module '@theme/DocPage/Layout' {
   export default function DocPageLayout(props: Props): JSX.Element;
 }
 
-declare module '@theme/DocPage/Layout/Aside' {
+declare module '@theme/DocPage/Layout/Sidebar' {
   import type {Dispatch, SetStateAction} from 'react';
   import type {PropSidebar} from '@docusaurus/plugin-content-docs';
 
@@ -278,7 +278,17 @@ declare module '@theme/DocPage/Layout/Aside' {
     readonly setHiddenSidebarContainer: Dispatch<SetStateAction<boolean>>;
   }
 
-  export default function DocPageLayoutAside(props: Props): JSX.Element;
+  export default function DocPageLayoutSidebar(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocPage/Layout/Sidebar/ExpandButton' {
+  export interface Props {
+    toggleSidebar: () => void;
+  }
+
+  export default function DocPageLayoutSidebarExpandButton(
+    props: Props,
+  ): JSX.Element;
 }
 
 declare module '@theme/DocPage/Layout/Main' {

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

@@ -1,87 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
-}
-
-.docPage,
-.docMainContainer {
-  width: 100%;
-}
-
-.docsWrapper,
-.docPage,
-.docMainContainer {
-  display: flex;
-}
-
-.docSidebarContainer {
-  display: none;
-}
-
-@media (min-width: 997px) {
-  .docMainContainer {
-    flex-grow: 1;
-    max-width: calc(100% - var(--doc-sidebar-width));
-  }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docSidebarContainer {
-    display: block;
-    width: var(--doc-sidebar-width);
-    margin-top: calc(-1 * var(--ifm-navbar-height));
-    border-right: 1px solid var(--ifm-toc-border-color);
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
-  }
-
-  .docSidebarContainerHidden {
-    width: var(--doc-sidebar-hidden-width);
-    cursor: pointer;
-  }
-
-  .collapsedDocSidebar {
-    position: sticky;
-    top: 0;
-    height: 100%;
-    max-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color var(--ifm-transition-fast) ease;
-  }
-
-  .collapsedDocSidebar:hover,
-  .collapsedDocSidebar:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-
-  .expandSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  [dir='rtl'] .expandSidebarButtonIcon {
-    transform: rotate(180deg);
-  }
-
-  [data-theme='dark'] .collapsedDocSidebar:hover,
-  [data-theme='dark'] .collapsedDocSidebar:focus {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  }
-}

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

@@ -1,87 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
-}
-
-.docPage,
-.docMainContainer {
-  width: 100%;
-}
-
-.docsWrapper,
-.docPage,
-.docMainContainer {
-  display: flex;
-}
-
-.docSidebarContainer {
-  display: none;
-}
-
-@media (min-width: 997px) {
-  .docMainContainer {
-    flex-grow: 1;
-    max-width: calc(100% - var(--doc-sidebar-width));
-  }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docSidebarContainer {
-    display: block;
-    width: var(--doc-sidebar-width);
-    margin-top: calc(-1 * var(--ifm-navbar-height));
-    border-right: 1px solid var(--ifm-toc-border-color);
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
-  }
-
-  .docSidebarContainerHidden {
-    width: var(--doc-sidebar-hidden-width);
-    cursor: pointer;
-  }
-
-  .collapsedDocSidebar {
-    position: sticky;
-    top: 0;
-    height: 100%;
-    max-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color var(--ifm-transition-fast) ease;
-  }
-
-  .collapsedDocSidebar:hover,
-  .collapsedDocSidebar:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-
-  .expandSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  [dir='rtl'] .expandSidebarButtonIcon {
-    transform: rotate(180deg);
-  }
-
-  [data-theme='dark'] .collapsedDocSidebar:hover,
-  [data-theme='dark'] .collapsedDocSidebar:focus {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  }
-}