@redocly/theme 0.1.30 → 0.1.33

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/Navbar/Navbar.d.ts

@@ -4,7 +4,8 @@ interface NavbarProps {
     menu: ResolvedConfigLinks;
     logo: React.ReactNode;
     search: React.ReactNode;
+    profile?: React.ReactNode;
 }
-export declare function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null;
+export declare function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export {};

package/Navbar/Navbar.js

@@ -33,7 +33,7 @@ var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 var MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
 function Navbar(_a) {
-    var menu = _a.menu, logo = _a.logo, search = _a.search;
+    var menu = _a.menu, logo = _a.logo, search = _a.search, profile = _a.profile;
     var _b = __read((0, useMobileMenu_1.useMobileMenu)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
     var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), searchSettings = _c.search, navbar = _c.navbar;
     var 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');
@@ -47,7 +47,8 @@ function Navbar(_a) {
         isOpen && react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu }),
         logo,
         react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
-        hideSearch ? null : search));
+        hideSearch ? null : search,
+        profile));
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {

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.js

@@ -31,7 +31,6 @@ 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;
@@ -44,14 +43,14 @@ function ProfileComponent(_a) {
     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(AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
             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 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  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);\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)';
+    return color || 'var(--navbar-text-color)';
 });
 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;

package/TableOfContent/TableOfContent.js

@@ -76,7 +76,7 @@ function TableOfContent(props) {
                     return null;
                 }
                 var href = '#' + heading.id;
-                return (react_1.default.createElement(MenuItem, { key: href, href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
+                return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
             }))))));
 }
 exports.TableOfContent = TableOfContent;

package/Tooltip/Tooltip.js

@@ -44,7 +44,9 @@ var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../hooks");
 function TooltipComponent(_a) {
     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 ref = (0, react_1.useRef)(null);
     var _e = (0, hooks_1.useControl)(isOpen), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
+    (0, hooks_1.useOutsideClick)(ref, handleClose);
     var isControlled = isOpen !== undefined;
     (0, react_1.useEffect)(function () {
         if (isControlled) {
@@ -61,7 +63,7 @@ function TooltipComponent(_a) {
         onMouseLeave: handleClose,
         onClick: handleClose,
     };
-    return (react_1.default.createElement(TooltipWrapper, __assign({}, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
+    return (react_1.default.createElement(TooltipWrapper, __assign({ ref: ref }, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
         children,
         isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
 }
@@ -86,7 +88,7 @@ var PLACEMENTS = {
     }),
 };
 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 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  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  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) {

package/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from '../hooks/useActiveHeading';
 export * from '../hooks/useActiveSectionId';
 export * from '../hooks/useFullHeight';
 export * from '../hooks/useNavbarHeight';
+export * from '../hooks/useOutsideClick';

package/hooks/index.js

@@ -21,3 +21,4 @@ __exportStar(require("../hooks/useActiveHeading"), exports);
 __exportStar(require("../hooks/useActiveSectionId"), exports);
 __exportStar(require("../hooks/useFullHeight"), exports);
 __exportStar(require("../hooks/useNavbarHeight"), exports);
+__exportStar(require("../hooks/useOutsideClick"), exports);

package/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;

package/hooks/useOutsideClick.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClick = void 0;
+var react_1 = require("react");
+function useOutsideClick(ref, handler) {
+    (0, react_1.useEffect)(function () {
+        var listener = function (event) {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+}
+exports.useOutsideClick = useOutsideClick;

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.30",
+  "version": "0.1.33",
   "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/JsonViewer/JsonViewer.tsx

@@ -154,11 +154,6 @@ export const JsonViewer = styled(Json).attrs(() => ({
     color: gray;
   }
 
-  .collapsed > .collapser:after {
-    content: '+';
-    cursor: pointer;
-  }
-
   .ellipsis:after {
     content: ' … ';
   }
@@ -174,7 +169,11 @@ export const JsonViewer = styled(Json).attrs(() => ({
   }
 
   .collapsed {
-    display: inline-flex;
+    white-space: nowrap;
+
+    & > .collapser:after {
+      content: '+';
+    }
   }
 
   .hovered {
@@ -182,13 +181,19 @@ export const JsonViewer = styled(Json).attrs(() => ({
   }
 
   .collapser {
+    --size: 15px;
+    --margin-right: 3px;
+
+    display: inline-block;
     background-color: transparent;
     border: 0;
-    padding: 0;
+    padding: 1px;
     color: #fff;
-    width: 0;
-    height: 15px;
-    cursor: default;
+    width: var(--size);
+    height: var(--size);
+    margin-left: calc((var(--size) + var(--margin-right)) * -1);
+    margin-right: var(--margin-right);
+    cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     font-family: var(--code-font-family);
@@ -196,18 +201,15 @@ export const JsonViewer = styled(Json).attrs(() => ({
 
     &:after {
       content: '-';
-      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 15px;
       height: 100%;
-      padding: 2px 5px 2px 2px;
-      transform: translateX(-100%);
+      width: 100%;
+    }
 
-      &:focus {
-        outline: #fff dotted 1px;
-      }
+    &:focus {
+      outline: #fff dotted 1px;
     }
   }
 

package/src/Navbar/Navbar.tsx

@@ -13,9 +13,10 @@ interface NavbarProps {
   menu: ResolvedConfigLinks;
   logo: React.ReactNode;
   search: React.ReactNode;
+  profile?: React.ReactNode;
 }
 
-export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
+export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
   const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
   const hideSearch =
@@ -35,6 +36,7 @@ export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null
       {logo}
       <NavbarMenu menuItems={menu} />
       {hideSearch ? null : search}
+      {profile}
     </NavbarContainer>
   );
 }

package/src/PageNavigation/NextPageLink.tsx

@@ -14,7 +14,7 @@ export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!nextPage || navigation?.hide) {
+  if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 

package/src/PageNavigation/PageNavigation.tsx

@@ -3,8 +3,16 @@ import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+
+export function PageNavigation(): JSX.Element | null {
+  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (navigation?.hide) {
+    return null;
+  }
 
-export function PageNavigation(): JSX.Element {
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
       <PreviousPageLink />
@@ -16,5 +24,5 @@ export function PageNavigation(): JSX.Element {
 const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  margin: 25px 0px;
+  margin: 25px 0;
 `;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -14,11 +14,11 @@ export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!prevPage || navigation?.hide) {
+  if (!prevPage || navigation?.hide || navigation?.previousPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
+  const label = navigation?.previousPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
     <StyledButton

package/src/Profile/Profile.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import styled, { css } from 'styled-components';
 
-import { getRandomColor } from '@theme/utils';
+import { stringToHslColor } from '@theme/utils';
 
 export interface ProfileProps {
   name: string;
@@ -10,8 +10,6 @@ export interface ProfileProps {
   onClick?: () => void;
 }
 
-const RANDOM_BG_COLOR: string = getRandomColor();
-
 function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
   if (imageUrl) {
     return (
@@ -37,7 +35,7 @@ function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX
       <StyledUserName data-cy="user-name" color={color}>
         {name}
       </StyledUserName>
-      <AvatarWrapper background={RANDOM_BG_COLOR}>
+      <AvatarWrapper background={stringToHslColor(name)}>
         <span>{avatarLetters}</span>
       </AvatarWrapper>
     </ProfileWrapper>
@@ -51,10 +49,11 @@ const ProfileWrapper = styled.div`
   align-items: center;
   cursor: pointer;
   width: auto;
+  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);
 `;
 
 const StyledUserName = styled.span`
-  color: ${({ color }) => color || 'var(--color-content)'};
+  color: ${({ color }) => color || 'var(--navbar-text-color)'};
 `;
 
 const AvatarWrapper = styled.div<{ background?: string }>`

package/src/TableOfContent/TableOfContent.tsx

@@ -61,7 +61,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               const href = '#' + heading.id;
               return (
                 <MenuItem
-                  key={href}
+                  key={href + idx}
                   href={href}
                   depth={heading.depth || 0}
                   className={activeHeadingId === heading.id ? 'active' : ''}

package/src/Tooltip/Tooltip.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren, ReactNode } from 'react';
-import React, { useEffect, memo } from 'react';
+import React, { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useControl } from '@theme/hooks';
+import { useControl, useOutsideClick } from '@theme/hooks';
 
 export interface TooltipProps {
   tip: string | ReactNode;
@@ -24,8 +24,11 @@ export function TooltipComponent({
   width,
   dataTestId,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
+  const ref = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
 
+  useOutsideClick(ref, handleClose);
+
   const isControlled = isOpen !== undefined;
 
   useEffect(() => {
@@ -46,6 +49,7 @@ export function TooltipComponent({
 
   return (
     <TooltipWrapper
+      ref={ref}
       {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
@@ -169,7 +173,6 @@ const TooltipBody = styled.span<
   overflow-wrap: break-word;
 
   border-radius: var(--global-border-radius);
-  pointer-events: none;
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from '@theme/hooks/useActiveHeading';
 export * from '@theme/hooks/useActiveSectionId';
 export * from '@theme/hooks/useFullHeight';
 export * from '@theme/hooks/useNavbarHeight';
+export * from '@theme/hooks/useOutsideClick';

package/src/hooks/useOutsideClick.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export function useOutsideClick(
+  ref: MutableRefObject<HTMLElement | null>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}

package/src/mocks/hooks/index.ts

@@ -9,20 +9,17 @@ interface PageLink {
   type: 'link';
 }
 
-export function useThemeSettings(name: string): RawTheme['settings'] {
+export function useThemeSettings(_: string): RawTheme['settings'] {
   return {
-    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' },
     },
   };
 }
 
-export function useSidebarSiblingsData(): { nextPage: PageLink; prevPage: PageLink } {
+export function useSidebarSiblingsData(): { nextPage: PageLink | null; prevPage: PageLink | null } {
   return {
     nextPage: {
       type: 'link',

package/src/utils/color.ts

@@ -1,9 +1,12 @@
-export const getRandomNumber = (limit: number): number => Math.floor(Math.random() * limit);
+export function stringToHslColor(value: string): string {
+  const s = 30;
+  const l = 80;
+  let hash = 0;
 
-export function getRandomColor(): string {
-  const h = getRandomNumber(360);
-  const s = getRandomNumber(100);
-  const l = getRandomNumber(100);
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+  }
 
-  return `hsl(${h}deg, ${s}%, ${l}%)`;
+  const h = hash % 360;
+  return `hsl(${h}, ${s}%, ${l}%)`;
 }

package/utils/color.d.ts

@@ -1,2 +1 @@
-export declare const getRandomNumber: (limit: number) => number;
-export declare function getRandomColor(): string;
+export declare function stringToHslColor(value: string): string;

package/utils/color.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomColor = exports.getRandomNumber = void 0;
-var getRandomNumber = function (limit) { return Math.floor(Math.random() * limit); };
-exports.getRandomNumber = getRandomNumber;
-function getRandomColor() {
-    var h = (0, exports.getRandomNumber)(360);
-    var s = (0, exports.getRandomNumber)(100);
-    var l = (0, exports.getRandomNumber)(100);
-    return "hsl(".concat(h, "deg, ").concat(s, "%, ").concat(l, "%)");
+exports.stringToHslColor = void 0;
+function stringToHslColor(value) {
+    var s = 30;
+    var l = 80;
+    var hash = 0;
+    for (var i = 0; i < value.length; i++) {
+        hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var h = hash % 360;
+    return "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
 }
-exports.getRandomColor = getRandomColor;
+exports.stringToHslColor = stringToHslColor;