@redocly/theme 0.5.0 → 0.6.0

package/lib/ColorModeSwitcher/ColorModeSwitcher.js

@@ -31,22 +31,21 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ColorModeIcon_1 = require("../icons/ColorModeIcon");
 const hooks_1 = require("../hooks");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function ColorModeSwitcher() {
-    const themeSettings = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const themeSettings = (0, hooks_1.useThemeConfig)();
     const colorMode = themeSettings.colorMode;
     const [activeColorMode, setActiveColorMode] = (0, react_1.useState)('');
+    const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
+    const defaultColor = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.default) || modes[0] || 'light';
     (0, hooks_1.useMount)(() => {
-        setActiveColorMode(document.documentElement.className || (colorMode === null || colorMode === void 0 ? void 0 : colorMode.default));
+        setActiveColorMode(document.documentElement.className || defaultColor);
     });
-    if (!(colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || (colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide)) {
+    if (colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide) {
         return null;
     }
     const handelChangeColorMode = () => {
-        const activeIndex = colorMode.modes.indexOf(activeColorMode);
-        const mode = activeIndex < colorMode.modes.length - 1
-            ? colorMode.modes[activeIndex + 1]
-            : colorMode.modes[0];
+        const activeIndex = modes.indexOf(activeColorMode);
+        const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
         setActiveColorMode(mode);
         localStorage.setItem('colorSchema', mode);
         document.documentElement.className = `${mode} notransition`;
@@ -54,8 +53,7 @@ function ColorModeSwitcher() {
             document.documentElement.classList.remove('notransition');
         });
     };
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode },
-        react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode })));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 const Wrapper = styled_components_1.default.div `
@@ -64,5 +62,20 @@ const Wrapper = styled_components_1.default.div `
   align-items: center;
   cursor: pointer;
   user-select: none;
+
+  ${ColorModeIcon_1.ColorModeIcon} {
+    display: none;
+  }
+
+  ${({ modes }) => {
+    const items = modes.map((mode) => {
+        return `
+        html.${mode} & ${ColorModeIcon_1.ColorModeIcon}.${mode} {
+          display: block;
+        }
+      `;
+    });
+    return items.join('');
+}}
 `;
 //# sourceMappingURL=ColorModeSwitcher.js.map

package/lib/EditPageButton/EditPageButton.d.ts

@@ -2,6 +2,6 @@
 export interface EditPageButtonProps {
     text: string;
     to: string;
-    icon: string;
+    icon?: string;
 }
 export declare const EditPageButton: ({ text, to, icon }: EditPageButtonProps) => JSX.Element;

package/lib/EditPageButton/EditPageButton.js

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../mocks/Link");
 const EditPageButton = ({ text, to, icon }) => {
     return (react_1.default.createElement(EditButton, { to: to },
-        react_1.default.createElement(ButtonIcon, { src: icon }),
+        icon ? react_1.default.createElement(ButtonIcon, { src: icon }) : null,
         react_1.default.createElement(ButtonText, null, text)));
 };
 exports.EditPageButton = EditPageButton;

package/lib/Footer/Footer.js

@@ -9,9 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const FooterColumns_1 = require("../Footer/FooterColumns");
 const FooterCopyright_1 = require("../Footer/FooterCopyright");
 const utils_1 = require("../utils");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const hooks_1 = require("../hooks");
 function Footer({ data: { columns, copyrightText } }) {
-    const { footer } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const { footer } = (0, hooks_1.useThemeConfig)();
     if ((0, utils_1.isEmptyArray)(columns) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }

package/lib/LastUpdated/LastUpdated.js

@@ -1,13 +1,36 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LastUpdated = void 0;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const timeago_js_1 = require("timeago.js");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const FORMATS = {
     timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
     iso: (date) => date.toISOString().split('T')[0],
@@ -15,20 +38,20 @@ const FORMATS = {
     long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
 };
 function LastUpdated(props) {
-    const { lastUpdatedBlock } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const { markdown: { lastUpdatedBlock = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }
     const lastModified = props.lastModified;
-    const format = props.format || (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.format) || 'timeago';
-    const locale = props.locale || (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.locale) || 'en-US';
+    const format = props.format || lastUpdatedBlock.format || 'timeago';
+    const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
     const isoDate = lastModified.toISOString().split('T')[0];
     const lastUpdatedString = FORMATS[format](lastModified, locale);
     const separator = format === 'timeago' ? ' ' : ' on ';
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate },
+    return (React.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate },
         "Last updated",
         separator,
-        react_1.default.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
+        React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 exports.LastUpdated = LastUpdated;
 const Wrapper = styled_components_1.default.div `

package/lib/Markdown/CodeSample/CodeSample.js

@@ -27,28 +27,20 @@ exports.CodeSample = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
-const useDefaultThemeSettings_1 = require("../../hooks/useDefaultThemeSettings");
-const defaultCopyCodeSnippet = {
-    hide: false,
-    buttonText: 'Copy',
-    tooltipText: 'Copy the code snippet',
-    toasterText: 'Copied',
-    toasterDuration: 1500,
-};
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 function CodeSample({ rawContent, highlighted, language }) {
     const langClassName = language ? `language-${language}` : '';
-    const { copyCodeSnippet } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
-    const copyCodeProps = Object.assign(Object.assign({}, defaultCopyCodeSnippet), copyCodeSnippet);
+    const { markdown: { copyCodeSnippet = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
     const copyCode = (code) => {
         ClipboardService_1.ClipboardService.copyCustom(code);
         setIsCopied(true);
-        setTimeout(() => setIsCopied(false), copyCodeProps.toasterDuration);
+        setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration);
     };
     return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
-        !copyCodeProps.hide && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: () => copyCode(rawContent) },
-            !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeProps.tooltipText }, copyCodeProps.buttonText)),
-            isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeProps.toasterText))),
+        !copyCodeSnippet.hide && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: () => copyCode(rawContent) },
+            !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeSnippet.tooltipText || 'Copy to clipboard' }, copyCodeSnippet.buttonText)),
+            isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeSnippet.toasterText))),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }

package/lib/Markdown/MarkdownLayout.d.ts

@@ -5,7 +5,7 @@ declare type MarkdownLayoutProps = {
     editPage?: {
         to: string;
         text: string;
-        icon: string;
+        icon?: string;
     };
     /** String in ISO format */
     lastModified?: string | null;

package/lib/Markdown/MarkdownLayout.js

@@ -11,12 +11,16 @@ const ContainerWrapper_1 = require("../Markdown/ContainerWrapper");
 const PageNavigation_1 = require("../PageNavigation/PageNavigation");
 const EditPageButton_1 = require("../EditPageButton");
 const LastUpdated_1 = require("../LastUpdated/LastUpdated");
+const hooks_1 = require("../hooks");
 function MarkdownLayout({ tableOfContent, markdownWrapper, editPage, lastModified, }) {
+    const { markdown } = (0, hooks_1.useThemeConfig)();
+    const { editPage: themeEditPage } = markdown || {};
+    const mergedConf = editPage ? Object.assign(Object.assign({}, editPage), themeEditPage) : undefined;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
             react_1.default.createElement(LayoutTop, null,
                 lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
-                editPage && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: editPage.text, to: editPage.to, icon: editPage.icon }))),
+                mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: mergedConf.text, to: mergedConf.to, icon: mergedConf.icon }))),
             markdownWrapper,
             react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
         tableOfContent));

package/lib/Navbar/Navbar.js

@@ -11,10 +11,10 @@ const useMobileMenu_1 = require("../hooks/useMobileMenu");
 const MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 const MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
 const ColorModeSwitcher_1 = require("../ColorModeSwitcher/ColorModeSwitcher");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 function Navbar({ menu, logo, search, profile }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)(false);
-    const { search: searchSettings, navbar } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const { search: searchSettings, navbar } = (0, useThemeConfig_1.useThemeConfig)();
     const hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
     if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
         return null;

package/lib/PageNavigation/NextPageLink.js

@@ -1,23 +1,46 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextPageLink = void 0;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../mocks/hooks");
 const Button_1 = require("../Button/Button");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 function NextPageLink() {
     var _a, _b;
     const { nextPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
-    const { navigation } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
-    if (!nextPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
-        return react_1.default.createElement("div", null, "\u00A0");
+    const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
+        return React.createElement("div", null, "\u00A0");
     }
-    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.label) || `Next to ${nextPage.label}`;
-    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
+    const label = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.label) || 'Next to {label}').replace('{label}', nextPage.label || nextPage.routeSlug || '');
+    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
 }
 exports.NextPageLink = NextPageLink;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/PageNavigation/PageNavigation.js

@@ -8,10 +8,11 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 const NextPageLink_1 = require("../PageNavigation/NextPageLink");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 function PageNavigation() {
-    const { navigation } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
-    if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
+    var _a, _b;
+    const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide) && ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.hide)) {
         return null;
     }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },

package/lib/PageNavigation/PreviousPageLink.js

@@ -7,16 +7,16 @@ exports.PreviousPageLink = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../mocks/hooks");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const Button_1 = require("../Button/Button");
 function PreviousPageLink() {
     var _a, _b;
     const { prevPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
-    const { navigation } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
-    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
+    const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _b === void 0 ? void 0 : _b.label) || `Back to ${prevPage.label}`;
+    const label = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _b === void 0 ? void 0 : _b.label) || 'Back to {label}').replace('{label}', prevPage.label || prevPage.routeSlug || '');
     return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
 }
 exports.PreviousPageLink = PreviousPageLink;

package/lib/Sidebar/SidebarLayout.js

@@ -11,11 +11,11 @@ const useMobileMenu_1 = require("../hooks/useMobileMenu");
 const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 function SidebarLayout({ versions, menu }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
-    const { search, sidebar } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }

package/lib/Sidebar/types/MenuStyle.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuStyle = void 0;
-//TODO: make default export
 var MenuStyle;
 (function (MenuStyle) {
     MenuStyle["Drilldown"] = "drilldown";

package/lib/TableOfContent/TableOfContent.d.ts

@@ -3,7 +3,6 @@ import type { MdHeading } from '@theme/types/portal';
 interface TableOfContentProps {
     headings?: Array<MdHeading | null> | null | undefined;
     contentWrapper: HTMLDivElement | null;
-    tocMaxDepth: number;
 }
 export declare function TableOfContent(props: TableOfContentProps): JSX.Element | null;
 export {};

package/lib/TableOfContent/TableOfContent.js

@@ -31,15 +31,14 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useFullHeight_1 = require("../hooks/useFullHeight");
 const useActiveHeading_1 = require("../hooks/useActiveHeading");
-const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const utils_1 = require("./utils");
 function TableOfContent(props) {
-    var _a;
-    const { headings, tocMaxDepth, contentWrapper } = props;
+    const { headings, contentWrapper } = props;
     const sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
-    const { toc } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
-    const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, tocMaxDepth);
+    const { markdown: { toc = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.maxDepth || 3);
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
     const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
@@ -53,9 +52,8 @@ function TableOfContent(props) {
     }
     return (react_1.default.createElement(react_1.default.Fragment, null, headings && (react_1.default.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
         react_1.default.createElement(TableOfContentItems, { ref: sidebar },
-            react_1.default.createElement(TocHeader, null, ((_a = toc === null || toc === void 0 ? void 0 : toc.header) === null || _a === void 0 ? void 0 : _a.label) || 'On this page'),
+            react_1.default.createElement(TocHeader, null, toc.header || 'On this page'),
             displayedHeadings.map((heading, idx) => {
-                // TODO: not sure about !heading
                 if (!heading) {
                     return null;
                 }