@redocly/theme 0.1.28 → 0.1.31

package/CopyButton/CopyButtonWrapper.js

@@ -44,7 +44,7 @@ function CopyButtonWrapperComponent(_a) {
         showTooltip();
     };
     var renderCopyButton = function () {
-        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', open: tooltip.isOpened },
+        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened },
             react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
     };
     return children({ renderCopyButton: renderCopyButton });

package/JsonViewer/JsonViewer.js

@@ -141,7 +141,7 @@ function JsonComponent(_a) {
 exports.Json = (0, react_1.memo)(JsonComponent);
 exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(function () { return ({
     'data-component-name': 'JsonViewer/JsonViewer',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    display: inline-flex;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    color: #fff;\n    width: 0;\n    height: 15px;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 15px;\n      height: 100%;\n      padding: 2px 5px 2px 2px;\n      transform: translateX(-100%);\n\n      &:focus {\n        outline: #fff dotted 1px;\n      }\n    }\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inline;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    display: inline-flex;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    color: #fff;\n    width: 0;\n    height: 15px;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 15px;\n      height: 100%;\n      padding: 2px 5px 2px 2px;\n      transform: translateX(-100%);\n\n      &:focus {\n        outline: #fff dotted 1px;\n      }\n    }\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inline;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    white-space: nowrap;\n\n    & > .collapser:after {\n      content: '+';\n    }\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    --size: 15px;\n    --margin-right: 3px;\n\n    display: inline-block;\n    background-color: transparent;\n    border: 0;\n    padding: 1px;\n    color: #fff;\n    width: var(--size);\n    height: var(--size);\n    margin-left: calc((var(--size) + var(--margin-right)) * -1);\n    margin-right: var(--margin-right);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n    }\n\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inline;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    white-space: nowrap;\n\n    & > .collapser:after {\n      content: '+';\n    }\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    --size: 15px;\n    --margin-right: 3px;\n\n    display: inline-block;\n    background-color: transparent;\n    border: 0;\n    padding: 1px;\n    color: #fff;\n    width: var(--size);\n    height: var(--size);\n    margin-left: calc((var(--size) + var(--margin-right)) * -1);\n    margin-right: var(--margin-right);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n    }\n\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inline;\n  }\n"])));
 exports.JsonViewerWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"])), SamplesPanelControls_1.SampleControls);
 exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/PageNavigation/NextPageLink.js

@@ -14,13 +14,13 @@ var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 var Button_1 = require("../Button/Button");
 function NextPageLink() {
-    var _a;
+    var _a, _b;
     var nextPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).nextPage;
     var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
-    if (!nextPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide)) {
+    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");
     }
-    var label = ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.label) || "Next to ".concat(nextPage.label);
+    var label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.label) || "Next to ".concat(nextPage.label);
     return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
 }
 exports.NextPageLink = NextPageLink;

package/PageNavigation/PageNavigation.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function PageNavigation(): JSX.Element;
+export declare function PageNavigation(): JSX.Element | null;

package/PageNavigation/PageNavigation.js

@@ -12,11 +12,17 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 var NextPageLink_1 = require("../PageNavigation/NextPageLink");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
 function PageNavigation() {
+    var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
+    if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
+        return null;
+    }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
         react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
         react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
 }
 exports.PageNavigation = PageNavigation;
-var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0px;\n"])));
+var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"])));
 var templateObject_1;

package/PageNavigation/PreviousPageLink.js

@@ -14,13 +14,13 @@ var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 var Button_1 = require("../Button/Button");
 function PreviousPageLink() {
-    var _a;
+    var _a, _b;
     var prevPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).prevPage;
     var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
-    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide)) {
+    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    var label = ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.label) || "Back to ".concat(prevPage.label);
+    var label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _b === void 0 ? void 0 : _b.label) || "Back to ".concat(prevPage.label);
     return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
 }
 exports.PreviousPageLink = PreviousPageLink;

package/Profile/Profile.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ProfileProps {
+    name: string;
+    imageUrl?: string;
+    color?: string;
+    onClick?: () => void;
+}
+export declare const Profile: React.NamedExoticComponent<ProfileProps>;

package/Profile/Profile.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var utils_1 = require("../utils");
+var RANDOM_BG_COLOR = (0, utils_1.getRandomColor)();
+function ProfileComponent(_a) {
+    var _b;
+    var name = _a.name, imageUrl = _a.imageUrl, onClick = _a.onClick, color = _a.color;
+    if (imageUrl) {
+        return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+            react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+            imageUrl && (react_1.default.createElement(AvatarWrapper, null,
+                react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
+    }
+    var avatarLetters = "".concat(name.charAt(0).toUpperCase()).concat(((_b = name.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.charAt(0).toUpperCase()) || '');
+    return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+        react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+        react_1.default.createElement(AvatarWrapper, { background: RANDOM_BG_COLOR },
+            react_1.default.createElement("span", null, avatarLetters))));
+}
+exports.Profile = (0, react_1.memo)(ProfileComponent);
+var ProfileWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n"])));
+var StyledUserName = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color || 'var(--color-content)';
+});
+var AvatarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  font-size: 1.25rem;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n  user-select: none;\n  border-radius: 50%;\n  justify-content: center;\n  margin-left: 16px;\n\n  ", "\n\n  & > img {\n    color: transparent;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    text-align: center;\n    text-indent: 10000px;\n  }\n"], ["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  font-size: 1.25rem;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n  user-select: none;\n  border-radius: 50%;\n  justify-content: center;\n  margin-left: 16px;\n\n  ", "\n\n  & > img {\n    color: transparent;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    text-align: center;\n    text-indent: 10000px;\n  }\n"])), function (_a) {
+    var background = _a.background;
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    span {\n      color: ", ";\n      filter: invert(100%);\n    }\n  "], ["\n    background-color: ", ";\n    span {\n      color: ", ";\n      filter: invert(100%);\n    }\n  "])), background, background);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Profile/index.d.ts

@@ -0,0 +1,2 @@
+export { Profile } from './Profile';
+export type { ProfileProps } from './Profile';

package/Profile/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = void 0;
+var Profile_1 = require("./Profile");
+Object.defineProperty(exports, "Profile", { enumerable: true, get: function () { return Profile_1.Profile; } });

package/TableOfContent/TableOfContent.js

@@ -42,8 +42,16 @@ function TableOfContent(props) {
     var headings = props.headings, tocMaxDepth = props.tocMaxDepth, contentWrapper = props.contentWrapper;
     var sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
-    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper);
     var toc = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).toc;
+    var getDisplayedHeaderIds = function () {
+        if (!headings) {
+            return [];
+        }
+        return headings
+            .filter(function (header) { return header && tocMaxDepth >= header.depth; })
+            .map(function (header) { return header === null || header === void 0 ? void 0 : header.id; });
+    };
+    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, getDisplayedHeaderIds());
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }

package/Tooltip/Tooltip.d.ts

@@ -1,12 +1,13 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import React from 'react';
 export interface TooltipProps {
-    tip: string;
-    open?: boolean;
+    tip: string | ReactNode;
+    isOpen?: boolean;
+    withArrow?: boolean;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     className?: string;
     width?: string;
     dataTestId?: string;
 }
-export declare function TooltipComponent({ children, open, tip, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
+export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
 export declare const Tooltip: React.NamedExoticComponent<PropsWithChildren<TooltipProps>>;

package/Tooltip/Tooltip.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,43 +43,54 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../hooks");
 function TooltipComponent(_a) {
-    var children = _a.children, open = _a.open, tip = _a.tip, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.className, className = _c === void 0 ? 'default' : _c, width = _a.width, _d = _a.dataTestId, dataTestId = _d === void 0 ? tip : _d;
-    var _e = (0, hooks_1.useControl)(open), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
-    var isControlled = open !== undefined;
+    var children = _a.children, isOpen = _a.isOpen, tip = _a.tip, _b = _a.withArrow, withArrow = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.className, className = _d === void 0 ? 'default' : _d, width = _a.width, dataTestId = _a.dataTestId;
+    var _e = (0, hooks_1.useControl)(isOpen), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
+    var isControlled = isOpen !== undefined;
     (0, react_1.useEffect)(function () {
         if (isControlled) {
-            if (open) {
+            if (isOpen) {
                 handleOpen();
             }
             else {
                 handleClose();
             }
         }
-    }, [open, isControlled, handleOpen, handleClose]);
-    var handleEnter = (0, react_1.useCallback)(function () {
-        handleOpen();
-    }, [handleOpen]);
-    var handleLeave = (0, react_1.useCallback)(function () {
-        handleClose();
-    }, [handleClose]);
-    return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" },
+    }, [isOpen, isControlled, handleOpen, handleClose]);
+    var controllers = !isControlled && {
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onClick: handleClose,
+    };
+    return (react_1.default.createElement(TooltipWrapper, __assign({}, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
         children,
-        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId, placement: placement, width: width }, tip))));
+        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
 }
 exports.TooltipComponent = TooltipComponent;
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 var PLACEMENTS = {
-    top: (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "]))),
-    bottom: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "]))),
-    left: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "]))),
-    right: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "]))),
+    top: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    ", "\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top-width: 6px;\n          border-top-style: solid;\n          bottom: 0;\n          left: 50%;\n          transform: translate(-50%, 99%);\n        }\n      "], ["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top-width: 6px;\n          border-top-style: solid;\n          bottom: 0;\n          left: 50%;\n          transform: translate(-50%, 99%);\n        }\n      "])));
+    }),
+    bottom: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    ", "\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom-width: 6px;\n          border-bottom-style: solid;\n          top: 0;\n          left: 50%;\n          transform: translate(-50%, -99%);\n        }\n      "], ["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom-width: 6px;\n          border-bottom-style: solid;\n          top: 0;\n          left: 50%;\n          transform: translate(-50%, -99%);\n        }\n      "])));
+    }),
+    left: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    ", "\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-left-width: 6px;\n          border-left-style: solid;\n          top: 50%;\n          right: 0;\n          transform: translate(99%, -50%);\n        }\n      "], ["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-left-width: 6px;\n          border-left-style: solid;\n          top: 50%;\n          right: 0;\n          transform: translate(99%, -50%);\n        }\n      "])));
+    }),
+    right: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    ", "\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-right-width: 6px;\n          border-right-style: solid;\n          top: 50%;\n          left: 0;\n          transform: translate(-99%, -50%);\n        }\n      "], ["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-right-width: 6px;\n          border-right-style: solid;\n          top: 50%;\n          left: 0;\n          transform: translate(-99%, -50%);\n        }\n      "])));
+    }),
 };
-var TooltipWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
-var TooltipBody = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
+var TooltipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
+var TooltipBody = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width || '120px';
 }, function (_a) {
     var placement = _a.placement;
-    return "".concat(PLACEMENTS[placement], ";");
+    return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), PLACEMENTS[placement]);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/hooks/__tests__/mocks/MockIntersectionObserver.d.ts

@@ -0,0 +1,15 @@
+export declare class MockIntersectionObserver {
+    readonly root: Element | Document | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    private viewPort;
+    private entries;
+    private readonly callback;
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
+    private intersect;
+    isInViewPort(target: HTMLElement): boolean;
+    observe(target: HTMLElement): void;
+    unobserve(target: HTMLElement): void;
+    disconnect(): void;
+    takeRecords(): any[];
+}

package/hooks/__tests__/mocks/MockIntersectionObserver.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MockIntersectionObserver = void 0;
+var MockIntersectionObserver = /** @class */ (function () {
+    function MockIntersectionObserver(callback, options) {
+        var _this = this;
+        this.intersect = function () {
+            _this.entries.map(function (entry) {
+                entry.isIntersecting = _this.isInViewPort(entry.target);
+            });
+            _this.callback(_this.entries, _this);
+        };
+        this.viewPort = (options === null || options === void 0 ? void 0 : options.root) ? options.root : window;
+        this.entries = [];
+        this.root = null;
+        this.rootMargin = '0px';
+        this.thresholds = [1];
+        this.callback = callback;
+        this.viewPort.addEventListener('scroll', this.intersect);
+    }
+    MockIntersectionObserver.prototype.isInViewPort = function (target) {
+        return target.id !== 'toc-0';
+    };
+    MockIntersectionObserver.prototype.observe = function (target) {
+        this.entries.push({ isIntersecting: false, target: target });
+    };
+    MockIntersectionObserver.prototype.unobserve = function (target) {
+        this.entries = this.entries.filter(function (ob) { return ob.target !== target; });
+    };
+    MockIntersectionObserver.prototype.disconnect = function () {
+        this.viewPort.removeEventListener('scroll', this.intersect);
+        this.entries = [];
+    };
+    MockIntersectionObserver.prototype.takeRecords = function () {
+        return this.entries;
+    };
+    return MockIntersectionObserver;
+}());
+exports.MockIntersectionObserver = MockIntersectionObserver;

package/hooks/useActiveHeading.d.ts

@@ -1,2 +1,2 @@
 export declare type UseActiveHeadingReturnType = string | undefined;
-export declare function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType;
+export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;

package/hooks/useActiveHeading.js

@@ -18,33 +18,82 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = void 0;
 var react_1 = require("react");
-function useActiveHeading(contentElement) {
+var react_router_dom_1 = require("react-router-dom");
+function useActiveHeading(contentElement, displayedHeaders) {
     var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
-    var headings = (0, react_1.useMemo)(function () { return contentElement && contentElement.querySelectorAll('.heading-anchor'); }, [contentElement]);
-    var handler = (0, react_1.useCallback)(
-    // throttle(
-    function () {
-        if (!headings) {
+    var _b = __read((0, react_1.useState)([]), 2), headingElements = _b[0], setHeadingElements = _b[1];
+    var headingElementsRef = (0, react_1.useRef)({});
+    var history = (0, react_router_dom_1.useHistory)();
+    var getVisibleHeadings = function () {
+        var visibleHeadings = [];
+        for (var key in headingElementsRef.current) {
+            var headingElement = headingElementsRef.current[key];
+            if (headingElement.isIntersecting) {
+                visibleHeadings.push(headingElement);
+            }
+        }
+        return visibleHeadings;
+    };
+    var getIndexFromId = function (id) {
+        return headingElements.findIndex(function (item) { return item.id === id; });
+    };
+    var findHeaders = function (allContent) {
+        var allHeaders = allContent.querySelectorAll('.heading-anchor');
+        return Array.from(allHeaders);
+    };
+    var intersectionCallback = function (headings) {
+        var _a;
+        headingElementsRef.current = headings.reduce(function (map, headingElement) {
+            map[headingElement.target.id] = headingElement;
+            return map;
+        }, headingElementsRef.current);
+        var totalHeight = window.scrollY + window.innerHeight;
+        // handle bottom of the page
+        if (totalHeight >= document.body.scrollHeight) {
+            var newHeading = ((_a = headingElements[(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length) - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
+            setHeading(newHeading);
             return;
         }
-        for (var i = 0; i < headings.length; i++) {
-            if (headings[i].offsetTop > window.scrollY) {
-                var newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
-                setHeading(newHeading);
-                return;
-            }
+        var visibleHeadings = getVisibleHeadings();
+        if (!visibleHeadings.length) {
+            return;
+        }
+        if (visibleHeadings.length === 1) {
+            setHeading(visibleHeadings[0].target.id);
+            return;
+        }
+        visibleHeadings.sort(function (a, b) {
+            return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+        });
+        setHeading(visibleHeadings[0].target.id);
+    };
+    (0, react_1.useEffect)(function () {
+        if (!contentElement) {
+            return;
         }
-    }, [headings]);
+        setHeadingElements(findHeaders(contentElement));
+        var unlisten = history.listen(function () {
+            setHeadingElements(findHeaders(contentElement));
+        });
+        return function () { return unlisten(); };
+    }, [contentElement]);
     (0, react_1.useEffect)(function () {
-        if (typeof window === 'undefined' || !headings || !headings.length) {
-            return undefined;
+        if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
+            return;
         }
-        window.addEventListener('scroll', handler, {
-            capture: false,
+        headingElementsRef.current = {};
+        // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
+        var observer = new IntersectionObserver(intersectionCallback, {
+            rootMargin: '0px 0px -30% 0px',
+            threshold: 1,
+        });
+        headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach(function (element) {
+            if (displayedHeaders.includes(element.id)) {
+                observer.observe(element);
+            }
         });
-        handler();
-        return function () { return window.removeEventListener('scroll', handler); };
-    }, [handler, headings]);
+        return function () { return observer.disconnect(); };
+    }, [headingElements, displayedHeaders]);
     return heading;
 }
 exports.useActiveHeading = useActiveHeading;

package/index.d.ts

@@ -14,3 +14,4 @@ export * from './utils';
 export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
+export * from './Profile';

package/index.js

@@ -30,3 +30,4 @@ __exportStar(require("./utils"), exports);
 __exportStar(require("./globalStyle"), exports);
 __exportStar(require("./OperationBadge"), exports);
 __exportStar(require("./TableOfContent"), exports);
+__exportStar(require("./Profile"), exports);

package/mocks/hooks/index.d.ts

@@ -7,9 +7,9 @@ interface PageLink {
     link: string;
     type: 'link';
 }
-export declare function useThemeSettings(name: string): RawTheme['settings'];
+export declare function useThemeSettings(_: string): RawTheme['settings'];
 export declare function useSidebarSiblingsData(): {
-    nextPage: PageLink;
-    prevPage: PageLink;
+    nextPage: PageLink | null;
+    prevPage: PageLink | null;
 };
 export {};

package/mocks/hooks/index.js

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
-function useThemeSettings(name) {
+function useThemeSettings(_) {
     return {
-        name: name,
-        settings: {
-            toc: { header: 'header', hide: false },
-            navigation: {
-                nextPageLink: { label: 'next page' },
-                previousPageLink: { label: 'prev page' },
-            },
+        toc: { header: 'header', hide: false },
+        navigation: {
+            nextPageLink: { label: 'next page theme settings label' },
+            previousPageLink: { label: 'prev page theme settings label' },
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.28",
+  "version": "0.1.31",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/settings.yaml

@@ -7,6 +7,10 @@ toc:
     label: On this page
 navigation:
   hide: false
+  nextPageLink:
+    hide: false
+  prevPageLink:
+    hide: false
 navbar:
   hide: false
 sidebar:

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -37,7 +37,7 @@ function CopyButtonWrapperComponent({
       <Tooltip
         className="copy-button"
         tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
-        open={tooltip.isOpened}
+        isOpen={tooltip.isOpened}
       >
         <SamplesControlButton onClick={copy} data-cy={dataTestId}>
           Copy