@docusaurus/theme-classic 2.0.0-beta.ff31de0ff → 2.0.0-rc.1

package/lib/theme/DocItem/index.js

@@ -1,120 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
-
-var _DocVersionSuggestions = _interopRequireDefault(require("@theme/DocVersionSuggestions"));
-
-var _Seo = _interopRequireDefault(require("@theme/Seo"));
-
-var _LastUpdated = _interopRequireDefault(require("@theme/LastUpdated"));
-
-var _TOC = _interopRequireDefault(require("@theme/TOC"));
-
-var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-var _useDocs = require("@theme/hooks/useDocs");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-function DocItem(props) {
-  const {
-    content: DocContent
-  } = props;
-  const {
-    metadata,
-    frontMatter
-  } = DocContent;
-  const {
-    image,
-    keywords,
-    hide_title: hideTitle,
-    hide_table_of_contents: hideTableOfContents
-  } = frontMatter;
-  const {
-    description,
-    title,
-    editUrl,
-    lastUpdatedAt,
-    formattedLastUpdatedAt,
-    lastUpdatedBy
-  } = metadata;
-  const {
-    pluginId
-  } = (0, _useDocs.useActivePlugin)({
-    failfast: true
-  });
-  const versions = (0, _useDocs.useVersions)(pluginId);
-  const version = (0, _useDocs.useActiveVersion)(pluginId); // If site is not versioned or only one version is included
-  // we don't show the version badge
-  // See https://github.com/facebook/docusaurus/issues/3362
-
-  const showVersionBadge = versions.length > 1; // For meta title, using frontMatter.title in priority over a potential # title found in markdown
-  // See https://github.com/facebook/docusaurus/issues/4665#issuecomment-825831367
-
-  const metaTitle = frontMatter.title || title;
-  return <>
-      <_Seo.default {...{
-      title: metaTitle,
-      description,
-      keywords,
-      image
-    }} />
-
-      <div className="row">
-        <div className={(0, _clsx.default)('col', {
-        [_stylesModule.default.docItemCol]: !hideTableOfContents
-      })}>
-          <_DocVersionSuggestions.default />
-          <div className={_stylesModule.default.docItemContainer}>
-            <article>
-              {showVersionBadge && <div>
-                  <span className="badge badge--secondary">
-                    Version: {version.label}
-                  </span>
-                </div>}
-              {!hideTitle && <header>
-                  <h1 className={_stylesModule.default.docTitle}>{title}</h1>
-                </header>}
-              <div className="markdown">
-                <DocContent />
-              </div>
-            </article>
-            {(editUrl || lastUpdatedAt || lastUpdatedBy) && <div className="margin-vert--xl">
-                <div className="row">
-                  <div className="col">
-                    {editUrl && <_EditThisPage.default editUrl={editUrl} />}
-                  </div>
-                  {(lastUpdatedAt || lastUpdatedBy) && <_LastUpdated.default lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />}
-                </div>
-              </div>}
-            <div className="margin-vert--lg">
-              <_DocPaginator.default metadata={metadata} />
-            </div>
-          </div>
-        </div>
-        {!hideTableOfContents && DocContent.toc && <div className="col col--3">
-            <_TOC.default toc={DocContent.toc} />
-          </div>}
-      </div>
-    </>;
+import React from 'react';
+import {HtmlClassNameProvider} from '@docusaurus/theme-common';
+import {DocProvider} from '@docusaurus/theme-common/internal';
+import DocItemMetadata from '@theme/DocItem/Metadata';
+import DocItemLayout from '@theme/DocItem/Layout';
+export default function DocItem(props) {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  const MDXComponent = props.content;
+  return (
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <MDXComponent />
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
+  );
 }
-
-var _default = DocItem;
-exports.default = _default;

package/lib/theme/DocPage/Layout/Main/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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" />
+import type { Props } from '@theme/DocPage/Layout/Main';
+export default function DocPageLayoutMain({ hiddenSidebarContainer, children, }: Props): JSX.Element;

package/lib/theme/DocPage/Layout/Main/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 clsx from 'clsx';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <main
+      className={clsx(
+        styles.docMainContainer,
+        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
+      )}>
+      <div
+        className={clsx(
+          'container padding-top--md padding-bottom--lg',
+          styles.docItemWrapper,
+          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+        )}>
+        {children}
+      </div>
+    </main>
+  );
+}

package/lib/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/theme/DocPage/Layout/Sidebar/ExpandButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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" />
+import type { Props } from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+export default function DocPageLayoutSidebarExpandButton({ toggleSidebar, }: Props): JSX.Element;

package/lib/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 {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+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/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css

@@ -0,0 +1,33 @@
+/**
+ * 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;
+    background-color: var(--docusaurus-collapse-button-bg);
+  }
+
+  .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+
+  .expandButtonIcon {
+    transform: rotate(0);
+  }
+
+  [dir='rtl'] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+}

package/lib/theme/DocPage/Layout/Sidebar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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" />
+import type { Props } from '@theme/DocPage/Layout/Sidebar';
+export default function DocPageLayoutSidebar({ sidebar, hiddenSidebarContainer, setHiddenSidebarContainer, }: Props): JSX.Element;

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

@@ -0,0 +1,66 @@
+/**
+ * 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, {useState, useCallback} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+import {useLocation} from '@docusaurus/router';
+import DocSidebar from '@theme/DocSidebar';
+import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+import styles from './styles.module.css';
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
+      {children}
+    </React.Fragment>
+  );
+}
+export default function DocPageLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}) {
+  const {pathname} = useLocation();
+  const [hiddenSidebar, setHiddenSidebar] = useState(false);
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false);
+    }
+    setHiddenSidebarContainer((value) => !value);
+  }, [setHiddenSidebarContainer, hiddenSidebar]);
+  return (
+    <aside
+      className={clsx(
+        ThemeClassNames.docs.docSidebarContainer,
+        styles.docSidebarContainer,
+        hiddenSidebarContainer && styles.docSidebarContainerHidden,
+      )}
+      onTransitionEnd={(e) => {
+        if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
+          return;
+        }
+        if (hiddenSidebarContainer) {
+          setHiddenSidebar(true);
+        }
+      }}>
+      <ResetOnSidebarChange>
+        <DocSidebar
+          sidebar={sidebar}
+          path={pathname}
+          onCollapse={toggleSidebar}
+          isHidden={hiddenSidebar}
+        />
+      </ResetOnSidebarChange>
+
+      {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+    </aside>
+  );
+}

package/lib/theme/DocPage/Layout/Sidebar/styles.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/theme/DocPage/Layout/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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" />
+import type { Props } from '@theme/DocPage/Layout';
+export default function DocPageLayout({ children }: Props): JSX.Element;

package/lib/theme/DocPage/Layout/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, {useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+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 './styles.module.css';
+export default function DocPageLayout({children}) {
+  const sidebar = useDocsSidebar();
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  return (
+    <Layout wrapperClassName={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docPage}>
+        {sidebar && (
+          <DocPageLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+          {children}
+        </DocPageLayoutMain>
+      </div>
+    </Layout>
+  );
+}

package/lib/theme/{BlogPostItem → DocPage/Layout}/styles.module.css

@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.blogPostTitle {
-  font-size: 3rem;
+.docPage {
+  display: flex;
+  width: 100%;
 }
 
-.blogPostDate {
-  font-size: 0.9rem;
+.docsWrapper {
+  display: flex;
 }

package/lib/theme/DocPage/index.d.ts

@@ -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.
+ */
+/// <reference types="@docusaurus/plugin-content-docs" />
+/// <reference types="react" />
+import type { Props } from '@theme/DocPage';
+export default function DocPage(props: Props): JSX.Element;

package/lib/theme/DocPage/index.js

@@ -1,141 +1,50 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@mdx-js/react");
-
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
-var _renderRoutes = _interopRequireDefault(require("@docusaurus/renderRoutes"));
-
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
-
-var _DocSidebar = _interopRequireDefault(require("@theme/DocSidebar"));
-
-var _MDXComponents = _interopRequireDefault(require("@theme/MDXComponents"));
-
-var _NotFound = _interopRequireDefault(require("@theme/NotFound"));
-
-var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
-
-var _router = require("@docusaurus/router");
-
-var _Translate = require("@docusaurus/Translate");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * 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.
  */
-function DocPageContent({
-  currentDocRoute,
-  versionMetadata,
-  children
-}) {
-  var _siteConfig$themeConf, _siteConfig$themeConf2;
-
-  const {
-    siteConfig,
-    isClient
-  } = (0, _useDocusaurusContext.default)();
-  const {
-    pluginId,
-    permalinkToSidebar,
-    docsSidebars,
-    version
-  } = versionMetadata;
-  const sidebarName = permalinkToSidebar[currentDocRoute.path];
-  const sidebar = docsSidebars[sidebarName];
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = (0, _react.useState)(false);
-  const [hiddenSidebar, setHiddenSidebar] = (0, _react.useState)(false);
-  const toggleSidebar = (0, _react.useCallback)(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false);
-    }
-
-    setHiddenSidebarContainer(!hiddenSidebarContainer);
-  }, [hiddenSidebar]);
-  return <_Layout.default key={isClient} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docPages} pageClassName={_themeCommon.ThemeClassNames.page.docPage} searchMetadatas={{
-    version,
-    tag: (0, _themeCommon.docVersionSearchTag)(pluginId, version)
-  }}>
-      <div className={_stylesModule.default.docPage}>
-        {sidebar && <div className={(0, _clsx.default)(_stylesModule.default.docSidebarContainer, {
-        [_stylesModule.default.docSidebarContainerHidden]: hiddenSidebarContainer
-      })} onTransitionEnd={e => {
-        if (!e.currentTarget.classList.contains(_stylesModule.default.docSidebarContainer)) {
-          return;
-        }
-
-        if (hiddenSidebarContainer) {
-          setHiddenSidebar(true);
-        }
-      }} role="complementary">
-            <_DocSidebar.default key={// Reset sidebar state on sidebar changes
-        // See https://github.com/facebook/docusaurus/issues/3414
-        sidebarName} sidebar={sidebar} path={currentDocRoute.path} sidebarCollapsible={(_siteConfig$themeConf = (_siteConfig$themeConf2 = siteConfig.themeConfig) === null || _siteConfig$themeConf2 === void 0 ? void 0 : _siteConfig$themeConf2.sidebarCollapsible) !== null && _siteConfig$themeConf !== void 0 ? _siteConfig$themeConf : true} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
-
-            {hiddenSidebar && <div className={_stylesModule.default.collapsedDocSidebar} title={(0, _Translate.translate)({
-          id: 'theme.docs.sidebar.expandButtonTitle',
-          message: 'Expand sidebar',
-          description: 'The ARIA label and title attribute for expand button of doc sidebar'
-        })} aria-label={(0, _Translate.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.default className={_stylesModule.default.expandSidebarButtonIcon} />
-              </div>}
-          </div>}
-        <main className={(0, _clsx.default)(_stylesModule.default.docMainContainer, {
-        [_stylesModule.default.docMainContainerEnhanced]: hiddenSidebarContainer || !sidebar
-      })}>
-          <div className={(0, _clsx.default)('container padding-vert--lg', _stylesModule.default.docItemWrapper, {
-          [_stylesModule.default.docItemWrapperEnhanced]: hiddenSidebarContainer
-        })}>
-            <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
-          </div>
-        </main>
-      </div>
-    </_Layout.default>;
-}
-
-function DocPage(props) {
-  const {
-    route: {
-      routes: docRoutes
-    },
-    versionMetadata,
-    location
-  } = props;
-  const currentDocRoute = docRoutes.find(docRoute => (0, _router.matchPath)(location.pathname, docRoute));
-
-  if (!currentDocRoute) {
-    return <_NotFound.default {...props} />;
+import React from 'react';
+import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  docVersionSearchTag,
+  DocsSidebarProvider,
+  DocsVersionProvider,
+  useDocRouteMetadata,
+} from '@docusaurus/theme-common/internal';
+import DocPageLayout from '@theme/DocPage/Layout';
+import NotFound from '@theme/NotFound';
+import SearchMetadata from '@theme/SearchMetadata';
+export default function DocPage(props) {
+  const {versionMetadata} = props;
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
+  if (!currentDocRouteMetadata) {
+    return <NotFound />;
   }
-
-  return <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
-      {(0, _renderRoutes.default)(docRoutes)}
-    </DocPageContent>;
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <>
+      <SearchMetadata
+        version={versionMetadata.version}
+        tag={docVersionSearchTag(
+          versionMetadata.pluginId,
+          versionMetadata.version,
+        )}
+      />
+      <HtmlClassNameProvider
+        className={clsx(
+          // TODO: it should be removed from here
+          ThemeClassNames.wrapper.docsPages,
+          ThemeClassNames.page.docsDocPage,
+          props.versionMetadata.className,
+        )}>
+        <DocsVersionProvider version={versionMetadata}>
+          <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+            <DocPageLayout>{docElement}</DocPageLayout>
+          </DocsSidebarProvider>
+        </DocsVersionProvider>
+      </HtmlClassNameProvider>
+    </>
+  );
 }
-
-var _default = DocPage;
-exports.default = _default;

package/lib/theme/DocPaginator/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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" />
+import type { Props } from '@theme/DocPaginator';
+export default function DocPaginator(props: Props): JSX.Element;