@docusaurus/theme-classic 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

package/lib/theme/MDXComponents/styles.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+ul.contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}

package/lib/theme/MDXPage/index.js

@@ -34,6 +34,7 @@ function MDXPage(props) {
     content: MDXPageContent
   } = props;
   const {
+    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
     frontMatter,
     metadata
   } = MDXPageContent;
@@ -55,7 +56,7 @@ function MDXPage(props) {
             </_react2.MDXProvider>
           </div>
           {!hideTableOfContents && MDXPageContent.toc && <div className="col col--2">
-              <_TOC.default toc={MDXPageContent.toc} />
+              <_TOC.default toc={MDXPageContent.toc} minHeadingLevel={frontMatter.toc_min_heading_level} maxHeadingLevel={frontMatter.toc_max_heading_level} />
             </div>}
         </div>
       </main>

package/lib/theme/Navbar/index.js

@@ -33,6 +33,8 @@ var _Logo = _interopRequireDefault(require("@theme/Logo"));
 
 var _IconMenu = _interopRequireDefault(require("@theme/IconMenu"));
 
+var _IconClose = _interopRequireDefault(require("@theme/IconClose"));
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,7 +81,19 @@ function useMobileSidebar() {
 
   const shouldRender = windowSize === 'mobile'; // || windowSize === 'ssr';
 
-  const [shown, setShown] = (0, _react.useState)(false);
+  const [shown, setShown] = (0, _react.useState)(false); // Close mobile sidebar on navigation pop
+  // Most likely firing when using the Android back button (but not only)
+
+  (0, _themeCommon.useHistoryPopHandler)(() => {
+    if (shown) {
+      setShown(false); // Should we prevent the navigation here?
+      // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
+
+      return false; // prevent pop navigation
+    }
+
+    return undefined;
+  });
   const toggle = (0, _react.useCallback)(() => {
     setShown(s => !s);
   }, []);
@@ -176,7 +190,10 @@ function NavbarMobileSidebar({
   return <div className="navbar-sidebar">
       <div className="navbar-sidebar__brand">
         <_Logo.default className="navbar__brand" imageClassName="navbar__logo" titleClassName="navbar__title" />
-        {!colorModeToggle.disabled && sidebarShown && <_Toggle.default checked={colorModeToggle.isDarkTheme} onChange={colorModeToggle.toggle} />}
+        {!colorModeToggle.disabled && <_Toggle.default className={_stylesModule.default.navbarSidebarToggle} checked={colorModeToggle.isDarkTheme} onChange={colorModeToggle.toggle} />}
+        <button type="button" className="clean-btn navbar-sidebar__close" onClick={toggleSidebar}>
+          <_IconClose.default color="var(--ifm-color-emphasis-600)" className={_stylesModule.default.navbarSidebarCloseSvg} />
+        </button>
       </div>
 
       <div className={(0, _clsx.default)('navbar-sidebar__items', {
@@ -188,7 +205,7 @@ function NavbarMobileSidebar({
           </ul>
         </div>
 
-        <div className="navbar-sidebar__item navbar-sidebar__item--secondary menu">
+        <div className="navbar-sidebar__item menu">
           {items.length > 0 && <button type="button" className="clean-btn navbar-sidebar__back" onClick={secondaryMenu.hide}>
               <_Translate.default id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel" description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
                 ← Back to main menu

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

@@ -8,7 +8,7 @@
 /*
 Hide toggle in small viewports
  */
-@media screen and (max-width: 997px) {
+@media (max-width: 996px) {
   .toggle {
     display: none;
   }
@@ -21,3 +21,7 @@ Hide toggle in small viewports
 .navbarHidden {
   transform: translate3d(0, calc(-100% - 2px), 0);
 }
+
+.navbarSidebarToggle {
+  margin-right: 1rem;
+}

package/lib/theme/NavbarItem/DefaultNavbarItem.js

@@ -18,6 +18,10 @@ var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"
 
 var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _index = require("./index");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -34,10 +38,12 @@ function NavLink({
   to,
   href,
   label,
-  activeClassName = 'navbar__link--active',
+  activeClassName = '',
   prependBaseUrlToHref,
   ...props
 }) {
+  var _props$className;
+
   // TODO all this seems hacky
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
   const toUrl = (0, _useBaseUrl.default)(to);
@@ -51,10 +57,10 @@ function NavLink({
     href: prependBaseUrlToHref ? normalizedHref : href
   } : {
     isNavLink: true,
-    activeClassName,
+    activeClassName: !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes(activeClassName)) ? activeClassName : '',
     to: toUrl,
     ...(activeBasePath || activeBaseRegex ? {
-      isActive: (_match, location) => activeBaseRegex ? new RegExp(activeBaseRegex).test(location.pathname) : location.pathname.startsWith(activeBaseUrl)
+      isActive: (_match, location) => activeBaseRegex ? (0, _themeCommon.isRegexpStringMatch)(activeBaseRegex, location.pathname) : location.pathname.startsWith(activeBaseUrl)
     } : null)
   }} {...props}>
       {isExternalLink ? <span>
@@ -97,8 +103,10 @@ function DefaultNavbarItem({
   // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }) {
+  var _props$activeClassNam;
+
   const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return <Comp {...props} />;
+  return <Comp {...props} activeClassName={(_props$activeClassNam = props.activeClassName) !== null && _props$activeClassNam !== void 0 ? _props$activeClassNam : (0, _index.getInfimaActiveClassName)(mobile)} />;
 }
 
 var _default = DefaultNavbarItem;

package/lib/theme/NavbarItem/DocNavbarItem.js

@@ -13,6 +13,8 @@ var _useDocs = require("@theme/hooks/useDocs");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _index = require("./index");
+
 var _themeCommon = require("@docusaurus/theme-common");
 
 var _utilsCommon = require("@docusaurus/utils-common");
@@ -40,7 +42,6 @@ Available doc ids are:\n- ${docIds}`);
 
 function DocNavbarItem({
   docId,
-  activeSidebarClassName,
   label: staticLabel,
   docsPluginId,
   ...props
@@ -56,7 +57,8 @@ function DocNavbarItem({
 
   const versions = (0, _utilsCommon.uniq)([activeVersion, preferredVersion, latestVersion].filter(Boolean));
   const doc = getDocInVersions(versions, docId);
+  const activeDocInfimaClassName = (0, _index.getInfimaActiveClassName)(props.mobile);
   return <_DefaultNavbarItem.default exact {...props} className={(0, _clsx.default)(props.className, {
-    [activeSidebarClassName]: activeDoc && activeDoc.sidebar === doc.sidebar
-  })} label={staticLabel !== null && staticLabel !== void 0 ? staticLabel : doc.id} to={doc.path} />;
+    [activeDocInfimaClassName]: (activeDoc === null || activeDoc === void 0 ? void 0 : activeDoc.sidebar) && activeDoc.sidebar === doc.sidebar
+  })} activeClassName={activeDocInfimaClassName} label={staticLabel !== null && staticLabel !== void 0 ? staticLabel : doc.id} to={doc.path} />;
 }

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -15,6 +15,8 @@ var _useDocs = require("@theme/hooks/useDocs");
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _Translate = require("@docusaurus/Translate");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -64,7 +66,11 @@ function DocsVersionDropdownNavbarItem({
   const items = getItems();
   const dropdownVersion = (_ref = (_activeDocContext$act = activeDocContext.activeVersion) !== null && _activeDocContext$act !== void 0 ? _activeDocContext$act : preferredVersion) !== null && _ref !== void 0 ? _ref : latestVersion; // Mobile dropdown is handled a bit differently
 
-  const dropdownLabel = mobile && items ? 'Versions' : dropdownVersion.label;
+  const dropdownLabel = mobile && items ? (0, _Translate.translate)({
+    id: 'theme.navbar.mobileVersionsDropdown.label',
+    message: 'Versions',
+    description: 'The label for the navbar versions dropdown on mobile view'
+  }) : dropdownVersion.label;
   const dropdownTo = mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item
   // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
   // We'd rather render a button instead of a dropdown

package/lib/theme/NavbarItem/DropdownNavbarItem.js

@@ -34,7 +34,7 @@ function isItemActive(item, localPathname) {
     return true;
   }
 
-  if (item.activeBaseRegex && new RegExp(item.activeBaseRegex).test(localPathname)) {
+  if ((0, _themeCommon.isRegexpStringMatch)(item.activeBaseRegex, localPathname)) {
     return true;
   }
 
@@ -80,7 +80,7 @@ function DropdownNavbarItemDesktop({
     'dropdown--right': position === 'right',
     'dropdown--show': showDropdown
   })}>
-      <_DefaultNavbarItem.NavLink className={(0, _clsx.default)('navbar__item navbar__link', className)} {...props} onClick={props.to ? undefined : e => e.preventDefault()} onKeyDown={e => {
+      <_DefaultNavbarItem.NavLink className={(0, _clsx.default)('navbar__link', className)} {...props} onClick={props.to ? undefined : e => e.preventDefault()} onKeyDown={e => {
       if (e.key === 'Enter') {
         e.preventDefault();
         setShowDropdown(!showDropdown);
@@ -127,7 +127,7 @@ function DropdownNavbarItemMobile({
     if (containsActive) {
       setCollapsed(!containsActive);
     }
-  }, [localPathname, containsActive]);
+  }, [localPathname, containsActive, setCollapsed]);
   return <li className={(0, _clsx.default)('menu__list-item', {
     'menu__list-item--collapsed': collapsed
   })}>

package/lib/theme/NavbarItem/{LocaleDropdownNavbarItem.js → LocaleDropdownNavbarItem/index.js}

@@ -15,6 +15,8 @@ var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocus
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -63,10 +65,7 @@ function LocaleDropdownNavbarItem({
 
   const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
   return <_DropdownNavbarItem.default {...props} href="#" mobile={mobile} label={<span>
-          <_IconLanguage.default style={{
-      verticalAlign: 'text-bottom',
-      marginRight: 5
-    }} />
+          <_IconLanguage.default className={_stylesModule.default.iconLanguage} />
           <span>{dropdownLabel}</span>
         </span>} items={items} />;
 }

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.iconLanguage {
+  vertical-align: text-bottom;
+  margin-right: 5px;
+}

package/lib/theme/NavbarItem/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavbarItem;
+exports.getInfimaActiveClassName = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -59,6 +60,10 @@ function getComponentType(type, isDropdown) {
   return type;
 }
 
+const getInfimaActiveClassName = mobile => mobile ? 'menu__link--active' : 'navbar__link--active';
+
+exports.getInfimaActiveClassName = getInfimaActiveClassName;
+
 function NavbarItem({
   type,
   ...props

package/lib/theme/Seo/index.js

@@ -11,7 +11,7 @@ var _Head = _interopRequireDefault(require("@docusaurus/Head"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
+var _useBaseUrl = require("@docusaurus/useBaseUrl");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,15 +25,16 @@ function Seo({
   title,
   description,
   keywords,
-  image
+  image,
+  children
 }) {
-  const {
-    image: defaultImage
-  } = (0, _themeCommon.useThemeConfig)();
   const pageTitle = (0, _themeCommon.useTitleFormatter)(title);
-  const pageImage = (0, _useBaseUrl.default)(image || defaultImage, {
+  const {
+    withBaseUrl
+  } = (0, _useBaseUrl.useBaseUrlUtils)();
+  const pageImage = image ? withBaseUrl(image, {
     absolute: true
-  });
+  }) : undefined;
   return <_Head.default>
       {title && <title>{pageTitle}</title>}
       {title && <meta property="og:title" content={pageTitle} />}
@@ -45,5 +46,7 @@ function Seo({
 
       {pageImage && <meta property="og:image" content={pageImage} />}
       {pageImage && <meta name="twitter:image" content={pageImage} />}
+
+      {children}
     </_Head.default>;
 }

package/lib/theme/TOC/index.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOCHeadings = TOCHeadings;
 exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _useTOCHighlight = _interopRequireDefault(require("@theme/hooks/useTOCHighlight"));
+var _TOCItems = _interopRequireDefault(require("@theme/TOCItems"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
@@ -22,37 +21,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const LINK_CLASS_NAME = 'table-of-contents__link';
-const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
-const TOP_OFFSET = 100;
-/* eslint-disable jsx-a11y/control-has-associated-label */
-
-function TOCHeadings({
-  toc,
-  isChild
-}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return <ul className={isChild ? '' : 'table-of-contents table-of-contents__left-border'}>
-      {toc.map(heading => <li key={heading.id}>
-          <a href={`#${heading.id}`} className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: heading.value
-      }} />
-          <TOCHeadings isChild toc={heading.children} />
-        </li>)}
-    </ul>;
-}
+// Using a custom className
+// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
 function TOC({
-  toc
+  className,
+  ...props
 }) {
-  (0, _useTOCHighlight.default)(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
-  return <div className={(0, _clsx.default)(_stylesModule.default.tableOfContents, 'thin-scrollbar')}>
-      <TOCHeadings toc={toc} />
+  return <div className={(0, _clsx.default)(_stylesModule.default.tableOfContents, 'thin-scrollbar', className)}>
+      <_TOCItems.default {...props} linkClassName={LINK_CLASS_NAME} linkActiveClassName={LINK_ACTIVE_CLASS_NAME} />
     </div>;
 }
 

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

@@ -12,7 +12,7 @@
   top: calc(var(--ifm-navbar-height) + 1rem);
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .tableOfContents {
     display: none;
   }

package/lib/theme/TOCCollapsible/index.js

@@ -15,7 +15,7 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
-var _TOC = require("@theme/TOC");
+var _TOCItems = _interopRequireDefault(require("@theme/TOCItems"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +27,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function TOCCollapsible({
   toc,
-  className
+  className,
+  minHeadingLevel,
+  maxHeadingLevel
 }) {
   const {
     collapsed,
@@ -45,7 +47,7 @@ function TOCCollapsible({
       </button>
 
       <_themeCommon.Collapsible lazy className={_stylesModule.default.tocCollapsibleContent} collapsed={collapsed}>
-        <_TOC.TOCHeadings toc={toc} />
+        <_TOCItems.default toc={toc} minHeadingLevel={minHeadingLevel} maxHeadingLevel={maxHeadingLevel} />
       </_themeCommon.Collapsible>
     </div>;
 }

package/lib/theme/TOCInline/index.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
+var _TOCItems = _interopRequireDefault(require("@theme/TOCItems"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -19,33 +19,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/* eslint-disable jsx-a11y/control-has-associated-label */
-function HeadingsInline({
-  toc,
-  isChild
-}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return <ul className={isChild ? '' : 'table-of-contents'}>
-      {toc.map(heading => <li key={heading.id}>
-          <a href={`#${heading.id}`} // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: heading.value
-      }} />
-          <HeadingsInline isChild toc={heading.children} />
-        </li>)}
-    </ul>;
-}
-
 function TOCInline({
-  toc
+  toc,
+  minHeadingLevel,
+  maxHeadingLevel
 }) {
-  return <div className={(0, _clsx.default)(_stylesModule.default.tableOfContentsInline)}>
-      <HeadingsInline toc={toc} />
+  return <div className={_stylesModule.default.tableOfContentsInline}>
+      <_TOCItems.default toc={toc} minHeadingLevel={minHeadingLevel} maxHeadingLevel={maxHeadingLevel} className="table-of-contents" linkClassName={null} />
     </div>;
 }
 

package/lib/theme/TOCItems/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TOCItems;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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.
+ */
+// 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 !== null && linkClassName !== void 0 ? 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>;
+}
+
+function TOCItems({
+  toc,
+  className = 'table-of-contents table-of-contents__left-border',
+  linkClassName = 'table-of-contents__link',
+  linkActiveClassName = undefined,
+  minHeadingLevel: minHeadingLevelOption,
+  maxHeadingLevel: maxHeadingLevelOption,
+  ...props
+}) {
+  const themeConfig = (0, _themeCommon.useThemeConfig)();
+  const minHeadingLevel = minHeadingLevelOption !== null && minHeadingLevelOption !== void 0 ? minHeadingLevelOption : themeConfig.tableOfContents.minHeadingLevel;
+  const maxHeadingLevel = maxHeadingLevelOption !== null && maxHeadingLevelOption !== void 0 ? maxHeadingLevelOption : themeConfig.tableOfContents.maxHeadingLevel;
+  const tocFiltered = (0, _themeCommon.useTOCFilter)({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel
+  });
+  const tocHighlightConfig = (0, _react.useMemo)(() => {
+    if (linkClassName && linkActiveClassName) {
+      return {
+        linkClassName,
+        linkActiveClassName,
+        minHeadingLevel,
+        maxHeadingLevel
+      };
+    }
+
+    return undefined;
+  }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
+  (0, _themeCommon.useTOCHighlight)(tocHighlightConfig);
+  return <TOCItemList toc={tocFiltered} className={className} linkClassName={linkClassName} {...props} />;
+}