@redocly/theme 0.4.12 → 0.4.14

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -69,11 +69,14 @@ function ColorModeSwitcher() {
             : colorMode.modes[0];
         setActiveColorMode(mode);
         localStorage.setItem('colorSchema', mode);
-        document.documentElement.className = mode;
+        document.documentElement.className = "".concat(mode, " notransition");
+        window.requestAnimationFrame(function () {
+            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 })));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
 var templateObject_1;

package/Sidebar/MenuGroup.js

@@ -3,12 +3,51 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuGroup = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var ArrowIcon_1 = require("../icons/ArrowIcon/ArrowIcon");
 var MenuLinkItem_1 = require("../Sidebar/MenuLinkItem");
@@ -16,17 +55,37 @@ var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
 function MenuGroup(_a) {
     var item = _a.item, isExpanded = _a.isExpanded, toggleExpanded = _a.toggleExpanded, children = _a.children;
+    var _b = __read((0, react_1.useState)(isExpanded), 2), showChildren = _b[0], setShowChildren = _b[1];
+    var timer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        timer.current && clearTimeout(timer.current);
+        if (isExpanded) {
+            setShowChildren(true);
+        }
+        else {
+            timer.current = setTimeout(function () {
+                setShowChildren(false);
+            }, 800);
+        }
+        return function () {
+            timer.current && clearTimeout(timer.current);
+        };
+    }, [isExpanded]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuGroup" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active },
                 react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
                 item.label)),
-        react_1.default.createElement(MenuWrapper, null, isExpanded ? children : null),
+        react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.MenuGroup = MenuGroup;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-nested-offset);\n"], ["\n  padding-left: var(--sidebar-item-nested-offset);\n"])));
+var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-nested-offset);\n  overflow: hidden;\n  ", ";\n"], ["\n  padding-left: var(--sidebar-item-nested-offset);\n  overflow: hidden;\n  ", ";\n"])), function (props) {
+    return props.isExpanded
+        ? "max-height: 9999px;\n        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;"
+        : "max-height: 0px;\n\t      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;";
+});
 var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"], ["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); }, function (props) {
     return props.active
         ? "color: var(--sidebar-item-group-active-text-color);\n        background-color: var(--sidebar-item-group-active-background-color);"

package/globalStyle.js

@@ -26,13 +26,13 @@ var footer = (0, styled_components_1.css)(templateObject_16 || (templateObject_1
 var logo = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Logo\n    */\n\n  --navbar-logo-height: 2rem; // @presenter Spacing\n  --navbar-logo-width: auto;\n  --navbar-logo-margin: 16px; // @presenter Spacing\n  --navbar-logo-max-width: 285px; // @presenter Spacing\n  --navbar-logo-max-height: 285px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Logo\n    */\n\n  --navbar-logo-height: 2rem; // @presenter Spacing\n  --navbar-logo-width: auto;\n  --navbar-logo-margin: 16px; // @presenter Spacing\n  --navbar-logo-max-width: 285px; // @presenter Spacing\n  --navbar-logo-max-height: 285px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-container-max-width: 100%;\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n  --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n  --navbar-item-margin-horizontal: 7px;\n  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-hover-background-color: var(--color-primary-300);\n  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-hover-text-decoration: none;\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n  --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Navbar dropdown\n    * */\n\n  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n  --navbar-dropdown-background: var(--navbar-item-active-background-color);\n  --navbar-dropdown-border: none;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-container-max-width: 100%;\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n  --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n  --navbar-item-margin-horizontal: 7px;\n  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-hover-background-color: var(--color-primary-300);\n  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-hover-text-decoration: none;\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n  --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Navbar dropdown\n    * */\n\n  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n  --navbar-dropdown-background: var(--navbar-item-active-background-color);\n  --navbar-dropdown-border: none;\n\n  // @tokens End\n"])));
 var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /**\n    * @tokens TOC\n    * */\n\n  --toc-width: 240px;\n  --toc-background-color: transparent;\n  --toc-border-color: var(--border-color);\n\n  --toc-spacing-unit: 8px;\n  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n  /**\n     * @tokens TOC item typography\n     */\n  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens TOC item\n    */\n\n  --toc-item-text-color: var(--text-color); // @presenter Color\n  --toc-item-active-text-color: var(--text-color); // @presenter Color\n  --toc-item-background-color: transparent; // @presenter Color\n  --toc-item-active-background-color: var(--border-color); // @presenter Color\n  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n  /**\n    * @tokens TOC header\n    */\n\n  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-heading-font-weight: bold; // @presenter FontWeight\n  --toc-heading-text-color: var(--text-color); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens TOC\n    * */\n\n  --toc-width: 240px;\n  --toc-background-color: transparent;\n  --toc-border-color: var(--border-color);\n\n  --toc-spacing-unit: 8px;\n  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n  /**\n     * @tokens TOC item typography\n     */\n  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens TOC item\n    */\n\n  --toc-item-text-color: var(--text-color); // @presenter Color\n  --toc-item-active-text-color: var(--text-color); // @presenter Color\n  --toc-item-background-color: transparent; // @presenter Color\n  --toc-item-active-background-color: var(--border-color); // @presenter Color\n  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n  /**\n    * @tokens TOC header\n    */\n\n  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-heading-font-weight: bold; // @presenter FontWeight\n  --toc-heading-text-color: var(--text-color); // @presenter Color\n\n  // @tokens End\n"])));
-var loadProgressBar = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-primary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"], ["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-primary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"])));
+var loadProgressBar = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-secondary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"], ["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-secondary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"])));
 var inputs = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"])));
 var markdown = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var search = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n  --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n  --search-input-line-height: 1.15em; // @presenter LineHeight\n\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: var(--background-color); // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: var(--background-color);\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"], ["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n  --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n  --search-input-line-height: 1.15em; // @presenter LineHeight\n\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: var(--background-color); // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: var(--background-color);\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"])));
 var dropdown = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"], ["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"])));
 var lastUpdated = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"], ["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"])));
 var tile = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"])));
-exports.styles = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"], ["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, tile, loadProgressBar, darkColors_1.darkMode);
+exports.styles = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n\n  :root.notransition * {\n    transition: none !important; \n  }\n"], ["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n\n  :root.notransition * {\n    transition: none !important; \n  }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, tile, loadProgressBar, darkColors_1.darkMode);
 exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), exports.styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;

package/hooks/useActiveHeading.js

@@ -23,7 +23,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
     var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
     var _b = __read((0, react_1.useState)([]), 2), headingElements = _b[0], setHeadingElements = _b[1];
     var headingElementsRef = (0, react_1.useRef)({});
-    var location = (0, react_router_dom_1.useLocation)();
+    var history = (0, react_router_dom_1.useHistory)();
     var getVisibleHeadings = function () {
         var visibleHeadings = [];
         for (var key in headingElementsRef.current) {
@@ -72,9 +72,12 @@ function useActiveHeading(contentElement, displayedHeaders) {
             return;
         }
         setHeadingElements(findHeaders(contentElement));
-        return function () { return setHeadingElements(findHeaders(contentElement)); };
+        var unlisten = history.listen(function () {
+            setHeadingElements(findHeaders(contentElement));
+        });
+        return function () { return unlisten(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname, contentElement]);
+    }, [contentElement]);
     (0, react_1.useEffect)(function () {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
             return;

package/hooks/useMobileMenu.js

@@ -21,7 +21,7 @@ var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState) {
     if (initialState === void 0) { initialState = false; }
-    var location = (0, react_router_dom_1.useLocation)();
+    var location = (0, react_router_dom_1.useHistory)().location;
     var _a = __read((0, react_1.useState)(initialState), 2), isOpen = _a[0], setIsOpen = _a[1];
     (0, react_1.useEffect)(function () { return setIsOpen(false); }, [location.pathname]);
     return [isOpen, setIsOpen];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -11,7 +11,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.4.1",
+    "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.1",
     "styled-system": "^5.1.5"
   },

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -26,7 +26,11 @@ export function ColorModeSwitcher(): JSX.Element | null {
         : colorMode.modes[0];
     setActiveColorMode(mode);
     localStorage.setItem('colorSchema', mode);
-    document.documentElement.className = mode;
+    document.documentElement.className = `${mode} notransition`;
+
+    window.requestAnimationFrame(() => {
+      document.documentElement.classList.remove('notransition');
+    });
   };
 
   return (
@@ -44,4 +48,5 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
+  user-select: none;
 `;

package/src/Sidebar/MenuGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { ItemState } from '@theme/Sidebar/types/ItemState';
@@ -20,6 +20,22 @@ export function MenuGroup({
   toggleExpanded,
   children,
 }: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    timer.current && clearTimeout(timer.current);
+    if (isExpanded) {
+      setShowChildren(true);
+    } else {
+      timer.current = setTimeout(() => {
+        setShowChildren(false);
+      }, 800);
+    }
+    return () => {
+      timer.current && clearTimeout(timer.current);
+    };
+  }, [isExpanded]);
+
   return (
     <Wrapper data-component-name="Sidebar/MenuGroup">
       <MenuLinkItem item={item}>
@@ -33,7 +49,7 @@ export function MenuGroup({
         </MenuGroupLabel>
       </MenuLinkItem>
 
-      <MenuWrapper>{isExpanded ? children : null}</MenuWrapper>
+      <MenuWrapper isExpanded={isExpanded}>{showChildren ? children : null}</MenuWrapper>
 
       {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
@@ -42,8 +58,15 @@ export function MenuGroup({
 
 const Wrapper = styled.div``;
 
-const MenuWrapper = styled.div`
+const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   padding-left: var(--sidebar-item-nested-offset);
+  overflow: hidden;
+  ${(props) =>
+    props.isExpanded
+      ? `max-height: 9999px;
+        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
+      : `max-height: 0px;
+	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
 `;
 
 const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`

package/src/globalStyle.ts

@@ -1653,7 +1653,7 @@ const loadProgressBar = css`
     * @tokens Load progress bar
     */
 
-  --load-progress-bar-color: var(--color-primary-500); // @presenter Color
+  --load-progress-bar-color: var(--color-secondary-500); // @presenter Color
   --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow
   --load-progress-bar-height: 2px; // @presenter Height
 
@@ -1938,6 +1938,10 @@ export const styles = css`
   :root.dark {
     ${darkMode};
   }
+
+  :root.notransition * {
+    transition: none !important; 
+  }
 `;
 
 export const GlobalStyle = createGlobalStyle`

package/src/hooks/useActiveHeading.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
 
@@ -15,7 +15,7 @@ export function useActiveHeading(
   const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
   const headingElementsRef = useRef<HeadingEntry>({});
 
-  const location = useLocation();
+  const history = useHistory();
 
   const getVisibleHeadings = () => {
     const visibleHeadings: IntersectionObserverEntry[] = [];
@@ -85,9 +85,13 @@ export function useActiveHeading(
     }
     setHeadingElements(findHeaders(contentElement));
 
-    return () => setHeadingElements(findHeaders(contentElement));
+    const unlisten = history.listen(() => {
+      setHeadingElements(findHeaders(contentElement));
+    });
+
+    return () => unlisten();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname, contentElement]);
+  }, [contentElement]);
 
   useEffect(() => {
     if (!headingElements?.length) {

package/src/hooks/useMobileMenu.ts

@@ -1,9 +1,9 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
-  const location = useLocation();
+  const { location } = useHistory();
   const [isOpen, setIsOpen] = useState(initialState);
 
   useEffect(() => setIsOpen(false), [location.pathname]);

package/src/types/portal/index.d.ts

@@ -1,4 +1,2 @@
-export * from './src/client/app/Sidebar/types';
-export * from './src/server/plugins/portal-config/types';
-export * from './src/shared/types';
-export type { MdHeading } from './src/server/plugins/markdown/types';
+export * from './src/shared/types/nav';
+export type { MdHeading } from './src/shared/types/markdown';

package/src/types/portal/src/shared/constants.d.ts

@@ -7,10 +7,36 @@ export declare const CUSTOM_MARKDOC_TAGS_PATH = "tags";
 export declare const USER_THEME_ALIAS = "@theme";
 export declare const PUBLIC_ASSETS_FOLDER = "/assets";
 export declare const PUBLIC_STATIC_FOLDER = "/static";
-export declare const THEME_ASSETS_FOLDER = "theme-assets";
 export declare const PERMISSION_PROP_NAME = "redocly::permission";
-export declare const OIDC_CALLBACK_ROUTE_PATH = "/_auth/oidc";
-export declare const DEFAULT_OIDC_SCOPES = "openid";
+export declare const DEFAULT_PLACEHOLDER_PERMISSION = "redocly:default-permission";
+export declare const DIRECTORY_PERMISSIONS_FILE_NAME = "permissions.rbac.yaml";
+export declare const REQUIRED_OIDC_SCOPES: string[];
+export declare const DEFAULT_COOKIE_EXPIRATION: number;
+export declare const DEFAULT_AUTHENTICATED_ROLE = "AuthenticatedUser";
+export declare const DEFAULT_AUTHENTICATED_PERMISSION = "redocly:authenticated-user";
+export declare const SEARCH_LIMIT = 50;
+export declare enum ServerRoutes {
+    EJECT_COMPONENT = "/eject-component/:componentName",
+    SHARED_PAGE_DATA = "/page-data/shared/*",
+    PAGE_DATA = "/page-data/*",
+    APP_DATA = "/app-data.json",
+    SEARCH_DATA = "/search-data.json",
+    SEARCH_INDEX = "/search-index.json",
+    AUTHORIZATION = "/authorize",
+    OIDC_CALLBACK = "/_auth/oidc",
+    SAML_CALLBACK = "/_auth/saml2",
+    BASIC_AUTH = "/_auth/basic",
+    REDOCLY_CALLBACK = "/_auth/redocly",
+    REDOCLY_LOGIN_CALLBACK = "/_auth/redocly/redocly-login",
+    SEARCH = "/_search",
+    LOGOUT = "/logout",
+    LOGIN = "/login",
+    IDP_LOGIN = "/_auth/idp-login"
+}
+export declare const DEV_LOGIN_SLUG = "/login/";
+export declare enum ExternalRoutes {
+    AUTH0_PASS = "/auth/auth0-pass"
+}
 export declare enum FsErrors {
     NotExist = "ENOENT"
 }

package/src/types/portal/src/shared/types/markdown.d.ts

@@ -0,0 +1,5 @@
+export declare type MdHeading = {
+    id: string;
+    value: string;
+    depth: number;
+};

package/src/types/portal/src/shared/{types.d.ts → types/nav.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PERMISSION_PROP_NAME } from './constants';
+import type { PERMISSION_PROP_NAME } from '../constants';
 export declare type ResolvedNavLinkItem = {
     type: 'link';
     link: string;
@@ -20,6 +20,7 @@ export declare type ResolvedNavGroupItem = {
     link?: string;
     label?: string;
     items?: ResolvedNavItem[];
+    expanded?: string;
     version?: string;
     isDefault?: boolean;
     versionFolderId?: string;
@@ -60,17 +61,26 @@ export interface PageProps {
     frontmatter?: Omit<PageProps, 'frontmatter'> & {
         settings?: any;
     };
+    disableAutoScroll?: boolean;
+    lastModified?: string | null;
     [k: string]: any;
 }
 export interface PageStaticData {
     props?: PageProps;
     [k: string]: unknown;
 }
+export declare type UserData = {
+    isAuthorized: boolean;
+    name: string;
+    picture: string;
+    logoutDisabled?: boolean;
+};
 export interface PageData {
     templateId: string;
     sharedDataIds: Record<string, string>;
     props: PageProps;
     versions?: Version[];
+    userData: UserData;
 }
 export interface CachedPageData extends PageData {
     Template: React.ComponentType<{
@@ -97,6 +107,7 @@ export declare type NavItem = {
     version?: string;
     menuStyle?: MenuStyle;
     external?: boolean;
+    expanded?: boolean | 'always';
 };
 export declare type RawNavItem = string | NavItem;
 export interface LogoConfig {

package/src/ui/UniversalLink.tsx

@@ -52,7 +52,7 @@ export const withPropsFilter =
       return <WrappedComponent {...filteredProps} />;
     };
 
-export interface PortalLinkProps<TState> extends LinkProps {
+export interface PortalLinkProps<TState> extends LinkProps<TState> {
   activeClassName?: string;
   activeStyle?: object;
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;

package/ui/UniversalLink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { LinkProps } from 'react-router-dom';
 export declare const withPropsFilter: (filterList: string[]) => (WrappedComponent: React.FunctionComponent) => (props: React.PropsWithChildren<object>) => JSX.Element;
-export interface PortalLinkProps<TState> extends LinkProps {
+export interface PortalLinkProps<TState> extends LinkProps<TState> {
     activeClassName?: string;
     activeStyle?: object;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;

package/src/types/portal/src/client/app/Sidebar/types.d.ts

@@ -1,42 +0,0 @@
-import { PERMISSION_PROP_NAME } from '../../../shared/constants';
-import { MenuStyle } from '../../../shared/types';
-export interface SidebarNavItem {
-    label?: string;
-    sublabel?: string;
-    icon?: string;
-    link?: string;
-    type?: string;
-    httpVerb?: string;
-    expanded?: string;
-    selectFirstItemOnExpand?: boolean;
-    pageId?: string;
-    redocPrevLink?: string;
-    redocPrevLabel?: string;
-    redocNextLink?: string;
-    redocNextLabel?: string;
-    redocFakePage?: boolean;
-    redocInfoPageId?: string;
-    target?: string;
-    external?: boolean;
-    items?: SidebarNavItem[];
-    [PERMISSION_PROP_NAME]?: string;
-    menuStyle?: MenuStyle;
-    separatorLine?: boolean;
-    version?: string;
-}
-export interface ItemState extends SidebarNavItem {
-    items: ItemState[];
-    active: boolean;
-    hasActiveSubItem: boolean;
-    menuStyle?: MenuStyle;
-}
-export declare enum MenuType {
-    Separator = "separator",
-    DrillDown = "drilldown",
-    Group = "group",
-    Operation = "operation"
-}
-export interface MenuItemProps {
-    item: ItemState;
-    activeItem?: ItemState;
-}

package/src/types/portal/src/server/constants.d.ts

@@ -1,9 +0,0 @@
-export declare enum cliCommandNames {
-    BUILD = "build",
-    DEVELOP = "develop"
-}
-export declare const VERSION_SEPARATOR = "@";
-export declare const DEFAULT_VERSION_NAME = "default";
-export declare const VERSIONED_FOLDER_REGEXP_MATCH: RegExp;
-export declare const PORTAL_CONFIG_FILE_NAME = "portal.yaml";
-export declare const JWT_SECRET_KEY: string;

package/src/types/portal/src/server/content/content-provider.d.ts

@@ -1,51 +0,0 @@
-/// <reference types="node" />
-import * as chokidar from 'chokidar';
-import * as fs from 'fs';
-import { PathVersionInfo } from '../plugins/types.js';
-import { VersionsConfig } from './versions-config.js';
-declare type WatchCb = (event: 'add' | 'change' | 'unlink', path: string, stats?: fs.Stats) => Promise<void>;
-export interface ContentRecord {
-    content: string;
-    contentHash: string;
-    relativePath: string;
-    parsed?: any;
-}
-export interface ParsedContentRecord<T = unknown> extends ContentRecord {
-    parsed: T;
-}
-export interface ContentProvider {
-    cwd: string;
-    filesList: Set<string>;
-    versions: VersionsConfig;
-    loadContent(relativePath: string, parse?: undefined): ContentRecord;
-    loadContent<T = unknown>(relativePath: string, parse: 'yaml'): ParsedContentRecord<T>;
-    loadContent(relativePath: string, parse: 'frontmatter'): ParsedContentRecord<{
-        content: string;
-        data: Record<string, any>;
-    }>;
-    loadContent(relativePath: string, parse: 'yaml' | 'frontmatter' | undefined): ParsedContentRecord;
-    getVersionInfoByFsPath: (relativePath: string) => PathVersionInfo | undefined;
-    has(relativePath: string): boolean;
-}
-export declare class FsContentProvider implements ContentProvider {
-    #private;
-    cwd: string;
-    private initialContentLoaded;
-    filesList: Set<string>;
-    versions: VersionsConfig;
-    constructor(cwd: string, initialCache?: Map<string, ContentRecord>);
-    private emit;
-    has(relativePath: string): boolean;
-    getVersionInfoByFsPath(relativePath: string): PathVersionInfo | undefined;
-    loadContent(relativePath: string, parse?: undefined): ContentRecord;
-    loadContent<T = unknown>(relativePath: string, parse: 'yaml'): ParsedContentRecord<T>;
-    loadContent(relativePath: string, parse: 'frontmatter'): ParsedContentRecord<{
-        content: string;
-        data: Record<string, any>;
-    }>;
-    watch(test: RegExp, cb: WatchCb): void;
-    stop(): Promise<void>;
-    start(): void;
-    ready(): Promise<chokidar.FSWatcher | undefined>;
-}
-export {};

package/src/types/portal/src/server/content/versions-config.d.ts

@@ -1,35 +0,0 @@
-import type { Version } from '../../shared/types';
-import { PathVersionInfo } from '../plugins/types';
-import type { ContentProvider } from './content-provider';
-export declare class VersionsConfig {
-    contentProvider: ContentProvider;
-    private config;
-    constructor(contentProvider: ContentProvider);
-    private parsePath;
-    /**
-     * Goes through config and makes sure each folder has a default version set
-     * By default, versions are sorted alphabetically and last one becomes default
-     */
-    private setDefaultVersions;
-    /**
-     * Checks for nested versions and files in the root of versioned folder
-     * @param allFiles relative paths of all files
-     */
-    private validateVersionsStructure;
-    /**
-     * Read config and store it in the state and mark folder with hasVersionsConfig = true
-     * to prevent versions list from being deducted automatically.
-     * This means that if file strucutre has 3 versions, but config only specifies 2, the list will only have 2
-     * @param versionsFilePath path to versions.yaml
-     */
-    private parseVersionsFile;
-    /**
-     * Reads and validates versions config.
-     * TODO: takes ~200-400ms on tests/starter. Consider partial updates instead of rebuilding if this is becoming a bottleneck
-     * @param allFilePaths
-     */
-    resolveConfig(allFilePaths: Set<string>): void;
-    getPageVersions(pagePath: string, suffix?: string): Version[] | undefined;
-    getDefaultByPath(path: string): string | null | undefined;
-    getVersionInfoByFsPath(path: string): PathVersionInfo | undefined;
-}

package/src/types/portal/src/server/dev-server/types.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="node" />
-import http from 'http';
-import { MatchFunction } from 'path-to-regexp';
-import { BuildIncremental } from 'esbuild';
-export interface DevServerOptions {
-    clientEsbuild: BuildIncremental;
-    serverEsbuild: BuildIncremental;
-    port?: number;
-}
-export interface EnhancedIncomingMessage extends http.IncomingMessage {
-    pathname: string;
-    params: Record<string, string>;
-    body: string;
-}
-export interface Route {
-    matchPath: MatchFunction<EnhancedIncomingMessage['params']>;
-    handler(req: EnhancedIncomingMessage, res: http.ServerResponse): void;
-}
-export interface Server {
-    httpServer: http.Server;
-    addRoute(path: string, handler: Route['handler']): void;
-}

package/src/types/portal/src/server/plugins/markdown/types.d.ts

@@ -1,36 +0,0 @@
-import { Config, Node, RenderableTreeNode } from '@markdoc/markdoc/dist/src/types';
-import type { PageStaticData } from '../../../shared/types.js';
-import type { ContentProvider, ContentRecord } from '../../content/content-provider.js';
-import { PluginDefaultOptions } from '../types.js';
-import type { RouteDetails } from '../types.js';
-export interface MdHeading {
-    id: string;
-    value: string;
-    depth: number;
-}
-export declare type RoutesInfoActions = {
-    getRouteByFsPath: (relativePath: string) => RouteDetails | undefined;
-    getRouteBySlug?: (slug: string) => RouteDetails | undefined;
-};
-export interface MdOptions {
-    partials: Record<string, Node>;
-    variables?: Record<string, any>;
-}
-export declare type MdRenderContext = ContentRecord & PluginDefaultOptions & MdOptions;
-export declare type MdCompilationContext = MdRenderContext & RoutesInfoActions & {
-    contentProvider: ContentProvider;
-};
-export declare type MdProcessContext = PluginDefaultOptions & RoutesInfoActions & {
-    contentProvider: ContentProvider;
-} & MdOptions;
-export interface MdCompilationResult {
-    result: RenderableTreeNode;
-    headings: MdHeading[];
-}
-export interface ExtendedMarkdocConfig extends Config {
-    currentProcessedPage?: string;
-}
-export interface MdPageStaticData extends PageStaticData {
-    ast: string;
-    frontmatter: Record<string, unknown>;
-}

package/src/types/portal/src/server/plugins/portal-config/get-frontmatter-keys-to-resolve.d.ts

@@ -1,2 +0,0 @@
-import { PortalConfig } from '../../../shared/models/config.js';
-export declare function getFrontmatterKeysToResolve(config?: PortalConfig): string[];

package/src/types/portal/src/server/plugins/portal-config/types.d.ts

@@ -1,24 +0,0 @@
-import { ResolvedConfigLinks } from '../../../shared/types.js';
-import { AuthConfig, PortalConfig, RawTheme } from '../../../shared/models/config.js';
-import { Redirect } from '../types';
-export interface GlobalData {
-    nav?: ResolvedConfigLinks;
-    logo?: PortalConfig['logo'];
-    footer?: ResolvedConfigLinks;
-    themeSettings?: PortalConfig['themes'];
-}
-export interface GlobalConfig {
-    themes: RawTheme[];
-    scripts?: string;
-    stylesheets?: string;
-    redirects: Record<string, Redirect>;
-    fileName: string;
-    rbac: RbacConfig;
-    [k: string]: unknown;
-}
-export declare type RbacConfig = {
-    roles: Record<string, string[]>;
-    auth?: AuthConfig;
-};
-export declare type CustomEntryPropertyType = Record<string, string | boolean>;
-export declare type ScriptOrStylesheetConfig = string | CustomEntryPropertyType;

package/src/types/portal/src/server/plugins/reference-docs/utils.d.ts

@@ -1,26 +0,0 @@
-import type { Pagination as PaginationType, IMenuItem, OpenAPIDefinition as IOpenAPIDefinition, MenuItemType } from '@redocly/reference-docs';
-import { RedocProRawOptions } from '@redocly/reference-docs';
-import type { ResolvedNavItem } from '../../../shared/types.js';
-import type { ParsedContentRecord } from '../../content/content-provider.js';
-export interface IMenuItemExtended extends IMenuItem {
-    httpVerb?: string;
-}
-export declare function loadDefinition(content: ParsedContentRecord): Promise<IOpenAPIDefinition | undefined>;
-export declare function convertRedocToSidebar(data: {
-    redocItems: IMenuItemExtended[];
-    sidebarItems: ResolvedNavItem[];
-    parentId?: string;
-    routeSlug: string;
-    pagination: PaginationType;
-}): void;
-export declare const shouldAddPage: ({ pagination, type, }: {
-    pagination: PaginationType;
-    type: MenuItemType;
-}) => boolean;
-export declare const removeMarkdownLinks: (text: string) => string;
-export declare function getConfigByPath(apis: {
-    [x: string]: {
-        root: string;
-        'features.openapi': RedocProRawOptions;
-    };
-} | undefined, path: string): RedocProRawOptions;

package/src/types/portal/src/server/plugins/types.d.ts

@@ -1,80 +0,0 @@
-import type { PageProps, PageStaticData, ResolvedNavItem, Version } from '../../shared/types.js';
-import type { ContentProvider } from '../content/content-provider.js';
-import { SearchData, SearchDocument } from '../../shared/models';
-import { PERMISSION_PROP_NAME } from '@shared/constants.js';
-import { Store } from '../store.js';
-import type { GlobalData, GlobalConfig } from './portal-config/types.js';
-import { MdOptions } from './markdown/types.js';
-export declare type GetStaticDataContext = {
-    getRouteByFsPath: (relativePath: string) => RouteDetails | undefined;
-    getRouteBySlug: (relativePath: string) => RouteDetails | undefined;
-    getGlobalConfig<T = unknown>(key: string): T | undefined;
-    getAllRoutes: () => RouteDetails[];
-    contentDir: string;
-    outdir: string;
-};
-export declare type RbacContext = {
-    roles: string[];
-    permissions: string[];
-};
-export declare type GetStaticDataFn<TData extends PageStaticData = PageStaticData, TProps extends PageProps = PageProps> = (route: RouteDetails<TData, TProps>, contentProvider: ContentProvider, context: GetStaticDataContext) => Promise<TData>;
-export declare type GetServerPropsContext = {
-    getGlobalConfig<T = unknown>(key: string): T | undefined;
-    getRbacPermissionsByRole: Store['getRbacPermissionsByRole'];
-};
-export declare type GetServerPropsFn<TData extends PageStaticData = PageStaticData, TProps extends PageProps = PageProps> = (route: RouteDetails<TData, TProps>, data: TData, mdOptions: MdOptions) => Promise<TProps>;
-export interface RouteDetails<TData extends PageStaticData = PageStaticData, TProps extends PageProps = PageProps> {
-    slug: string;
-    fsPath: string;
-    templateId: string;
-    [PERMISSION_PROP_NAME]?: string;
-    versions?: Version[];
-    getNavText?: () => Promise<string>;
-    getSidebar?(): ResolvedNavItem[];
-    getSearchDocuments?(): Promise<SearchDocument[]>;
-    getStaticData?: GetStaticDataFn<TData, TProps>;
-    serverPropsGetterIds?: string[];
-}
-export interface Redirect {
-    to: string;
-    type: number;
-}
-export interface PathVersionInfo {
-    version: string;
-    isDefault: boolean;
-    versionFolderId: string;
-}
-export interface ProcessContentActions {
-    createSharedData(id: string, data: unknown): string;
-    addRouteSharedData(slug: string, dataKey: string, dataId: string): void;
-    setGlobalConfig: (data: Partial<GlobalConfig>) => void;
-    addRoute: (route: RouteDetails) => void;
-    createTemplate: (id: string, importPath: string) => string;
-    registerServerPropsGetter: (id: string, importPath: string) => string;
-}
-export interface AfterRoutesCreatedActions {
-    createSharedData(id: string, data: unknown): string;
-    addRouteSharedData(routeSlug: string, dataKey: string, dataId: string): void;
-    getRouteByFsPath: (relativePath: string) => RouteDetails | undefined;
-    getRouteBySlug: (relativePath: string) => RouteDetails | undefined;
-    getAllRoutes: () => RouteDetails[];
-    setGlobalData: (data: GlobalData) => void;
-    setGlobalConfig: (data: Partial<GlobalConfig>) => void;
-    setSearchData: (data: SearchData) => void;
-    addRedirect: (from: string, to: Redirect) => void;
-    contentDir: string;
-    outdir: string;
-}
-export interface PluginInstance {
-    watch?: RegExp;
-    processContent?: (content: ContentProvider, actions: ProcessContentActions) => Promise<void>;
-    afterRoutesCreated?: (content: ContentProvider, actions: AfterRoutesCreatedActions) => Promise<void>;
-}
-export interface PluginDefaultOptions {
-    contentDir: string;
-    outdir: string;
-}
-export interface PluginOptions extends PluginDefaultOptions {
-    [k: string]: unknown;
-}
-export declare type Plugin = (opts: PluginOptions) => PluginInstance;

package/src/types/portal/src/server/store.d.ts

@@ -1,52 +0,0 @@
-import { Plugin } from 'esbuild';
-import { JSONIndex, SearchDocument, SearchData } from '../shared/models';
-import type { PageStaticData } from '../shared/types.js';
-import type { RouteDetails, Redirect } from './plugins/types.js';
-import type { GlobalData, GlobalConfig } from './plugins/portal-config/types';
-import type { ContentProvider } from './content/content-provider';
-export declare class Store {
-    contentDir: string;
-    outdir: string;
-    renderMode: 'thread_worker' | 'main';
-    routesBySlug: Map<string, RouteDetails>;
-    routesByFsPath: Map<string, RouteDetails>;
-    routesSharedData: Map<string, Record<string, string>>;
-    searchDocuments: SearchDocument[];
-    searchIndex: JSONIndex;
-    sharedData: Map<string, unknown>;
-    routesStaticDataCache: Map<string, PageStaticData>;
-    templates: Map<string, string>;
-    serverPropsGetters: Map<string, string>;
-    esbuildPlugins: Plugin[];
-    listeners: Map<string, Set<Function>>;
-    globalData: GlobalData;
-    cliOptions: Record<string, string>;
-    globalConfig: GlobalConfig;
-    constructor(contentDir: string, outdir?: string, renderMode?: 'thread_worker' | 'main');
-    on(type: 'routes-updated', cb: () => void): void;
-    on(type: 'template-updated', cb: () => void): void;
-    on(type: 'build-updated', cb: () => void): void;
-    on(type: 'shared-data-updated', cb: (id: string, data: unknown) => void): void;
-    on(type: 'search-data-updated', cb: (data: SearchData) => void): void;
-    on(type: 'global-data-updated', cb: (pathname: string, data: Record<string, unknown>) => void): void;
-    runListeners<T extends Array<unknown>>(type: 'template-updated' | 'global-data-updated' | 'shared-data-updated' | 'search-data-updated' | 'routes-updated' | 'build-updated', ...args: T): void;
-    addEsbuildPlugin(plugin: Plugin): void;
-    setGlobalData: (data: GlobalData) => void;
-    setSearchData(data: SearchData): void;
-    setCliOptions(data: Record<string, string>): void;
-    setGlobalConfig(data: Partial<GlobalConfig>): void;
-    getRbacPermissionsByRole(role: string): string[] | undefined;
-    getGlobalConfig<T = unknown>(key: string): T;
-    addRedirect(from: string, to: Redirect): void;
-    createSharedData: (id: string, data: unknown) => string;
-    addRouteSharedData: (routeSlug: string, dataKey: string, dataId: string) => void;
-    addRoute: (route: RouteDetails) => void;
-    getRouteByFsPath: (relativePath: string) => RouteDetails<PageStaticData, import("../shared/types.js").PageProps> | undefined;
-    getRouteBySlug: (slug: string) => RouteDetails<PageStaticData, import("../shared/types.js").PageProps> | undefined;
-    getAllRoutes: () => RouteDetails<PageStaticData, import("../shared/types.js").PageProps>[];
-    getTemplate: (id: string) => string | undefined;
-    createTemplate: (id: string, importPath: string) => string;
-    registerServerPropsGetter: (id: string, importPath: string) => string;
-    resolveRouteStaticData(route: RouteDetails, contentProvider: ContentProvider): Promise<{}>;
-    clear: () => void;
-}

package/src/types/portal/src/server/utils/async.d.ts

@@ -1 +0,0 @@
-export declare function promiseMapLimit<T, P>(array: T[], poolLimit: number, iteratorFn: (arg: T, array: T[]) => Promise<P>): Promise<P[]>;

package/src/types/portal/src/server/utils/crypto.d.ts

@@ -1,3 +0,0 @@
-export declare function sha(content: string): string;
-export declare function shaFile(fileName: string): string;
-export declare function shaFileForUrl(fileName: string): string;

package/src/types/portal/src/server/utils/fs.d.ts

@@ -1,5 +0,0 @@
-export declare function readFileAsStringSync(filePath: string): string | null | undefined;
-export declare function readFileNames(dir: string): string[];
-export declare function copyStaticFile(absolutePath: string, outdir: string): string | undefined;
-export declare function copyFolderRecursiveSync(source: string, target: string): void;
-export declare function ensureDir(path: string): string;

package/src/types/portal/src/server/utils/index.d.ts

@@ -1,6 +0,0 @@
-export * from './async.js';
-export * from './crypto.js';
-export * from './fs.js';
-export * from './reporter/reporter.js';
-export * from './paths.js';
-export * from './rbac.js';

package/src/types/portal/src/server/utils/paths.d.ts

@@ -1,17 +0,0 @@
-import { OpenAPIDefinition } from '@redocly/reference-docs';
-import type { ContentProvider } from '../content/content-provider.js';
-import { Route } from '../dev-server/types';
-export declare function getDataFromRelativePath(relativePath: string): {
-    pathVersion: string | null;
-    basePath: string;
-};
-export declare function generatePagePathname(currentVersion?: string | null, defaultVersion?: string | null, ...combineParts: string[]): string;
-export declare function slugFromRelativePath(relativePath: string, contentProvider: ContentProvider): string;
-export declare function slug(str: string): string;
-export declare function fromCurrentDir(moduleUrl: string, path: string): string;
-export declare function excludeVersion<T extends string[] | string>(arg: T): {
-    version?: string;
-    data: T;
-};
-export declare function getParamsFromPath(path: string, route: Route): Record<string, string>;
-export declare function getDefinitionFiles(contentProvider: ContentProvider): Promise<Map<string, OpenAPIDefinition>>;

package/src/types/portal/src/server/utils/rbac.d.ts

@@ -1,15 +0,0 @@
-import { Store } from '../store';
-import { PERMISSION_PROP_NAME } from '../../shared/constants.js';
-export declare function canAccessResource<T extends {
-    [PERMISSION_PROP_NAME]?: string;
-}>(resource: T, permissions: Set<string>): boolean;
-export declare function getPermissionsForRoles(store: Pick<Store, 'getRbacPermissionsByRole'>, roles: string[]): Set<string>;
-export declare function getUserRolesFromCookies(cookies?: string): string[];
-/**
- * Maps the input deep and removes objects that have a 'permission' prop
- * but do not match the input permissions list
- * @param input can be object, array, string or any other value
- * @param permissions
- * @returns
- */
-export declare function filterDataByAccessDeep(input: any, permissions: Set<string>): any;

package/src/types/portal/src/server/utils/reporter/formatter.d.ts

@@ -1,12 +0,0 @@
-import { Reporter } from './reporter';
-declare const formatter: {
-    success(message: string, ...args: any[]): string;
-    info(message: string, ...args: any[]): string;
-    warn(message: string, ...args: any[]): string;
-    error(message: string, ...args: any[]): string;
-    verbose(message: string, ...args: any[]): string;
-    formatMs(ms: number): string;
-    withTime(message: string, reporter: Reporter): string;
-    format(pattern: string, ...args: any[]): string;
-};
-export default formatter;

package/src/types/portal/src/server/utils/reporter/reporter.d.ts

@@ -1,18 +0,0 @@
-export declare const reporter: {
-    now(): number;
-    startTiming(): void;
-    getTimeSpan(): number | undefined;
-    success(message: string, ...args: any[]): void;
-    successTime(message: string, ...args: any[]): void;
-    info(message: string, ...args: any[]): void;
-    infoTime(message: string, ...args: any[]): void;
-    warn(message: string, ...args: any[]): void;
-    warnTime(message: string, ...args: any[]): void;
-    error(message: string, ...args: any[]): void;
-    verbose(message: string, ...args: any[]): void;
-    verboseTime(message: string, ...args: any[]): void;
-    panic(message: string, ...args: any[]): never;
-    panicOnBuild(message: string, ...args: any[]): void;
-    flushErrors(): void;
-};
-export declare type Reporter = typeof reporter;

package/src/types/portal/src/server/utils/yaml.d.ts

@@ -1 +0,0 @@
-export declare function parseYaml<T = unknown>(raw: string): T;

package/src/types/portal/src/shared/models/active-item.d.ts

@@ -1,3 +0,0 @@
-export declare type ActiveItem<T> = T & {
-    active: boolean;
-};

package/src/types/portal/src/shared/models/config.d.ts

@@ -1,40 +0,0 @@
-import { RawNavItem, LogoConfig } from '../types';
-declare type RawNavConfig = RawNavItem[] | Record<string, RawNavItem[] | {
-    items: RawNavItem[];
-} | string>;
-export declare type AuthProviderConfig = {
-    type: string;
-    configurationUrl: string;
-    clientId: string;
-    clientSecret: string;
-    rolesClaimName: string;
-    scopes?: Array<string>;
-};
-export declare type AuthIdpsConfig = {
-    main: AuthProviderConfig;
-};
-export declare type AuthConfig = {
-    idps: AuthIdpsConfig;
-};
-export interface PortalConfig extends Record<string, any> {
-    nav?: RawNavConfig;
-    logo?: LogoConfig;
-    themes?: RawTheme[];
-    footer?: RawNavConfig;
-    auth?: AuthConfig;
-    frontmatterKeysToResolve?: string[];
-}
-export interface RawTheme {
-    name: string;
-    settings?: any;
-}
-export interface ResolvedTheme extends RawTheme {
-    stylesFile?: string;
-    path: string;
-    markdoc: {
-        nodesFiles: string[];
-        tagsFiles: string[];
-        componentsFile?: string;
-    };
-}
-export {};

package/src/types/portal/src/shared/models/index.d.ts

@@ -1,6 +0,0 @@
-export * from './search-document';
-export * from './active-item';
-export * from './search-data';
-export * from './json-index';
-export * from './operation-parameter';
-export * from './config';

package/src/types/portal/src/shared/models/json-index.d.ts

@@ -1,5 +0,0 @@
-import Fuse from 'fuse.js';
-export interface JSONIndex {
-    keys: ReadonlyArray<string>;
-    records: Fuse.FuseIndexRecords;
-}

package/src/types/portal/src/shared/models/operation-parameter.d.ts

@@ -1,6 +0,0 @@
-export interface OperationParameter {
-    name: string | string[];
-    description: string | string[];
-    place: string;
-    path?: string[];
-}

package/src/types/portal/src/shared/models/search-data.d.ts

@@ -1,5 +0,0 @@
-import { JSONIndex, SearchDocument } from './';
-export interface SearchData extends Record<string, unknown> {
-    searchIndex: JSONIndex;
-    searchDocuments: SearchDocument[];
-}

package/src/types/portal/src/shared/models/search-document.d.ts

@@ -1,11 +0,0 @@
-import { OperationParameter } from './operation-parameter';
-export interface SearchDocument {
-    id: string;
-    url: string;
-    title: string | string[];
-    text: string | string[];
-    path?: string[];
-    httpVerb?: string;
-    pathName?: string | string[];
-    parameters?: OperationParameter[];
-}

package/src/types/portal/src/shared/urls.d.ts

@@ -1,10 +0,0 @@
-export declare function getPageDataUrl(normalizedRoute: string): string;
-export declare function getClientPageDataUrl(normalizedRoute: string): string;
-export declare function getSharedDataUrl(id: string): string;
-export declare const GLOBAL_DATA_URL = "/app-data.json";
-export declare const SEARCH_DATA_URL = "/search-data.json";
-export declare const SEARCH_INDEX_URL = "/search-index.json";
-export declare const EJECT_COMPONENT_URL = "/eject-component";
-export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
-export declare function withPathPrefix(url: string): string;
-export declare function withoutHash(url: string): string;

package/src/types/portal/src/shared/utils.d.ts

@@ -1,18 +0,0 @@
-import picomatch from 'picomatch';
-import type { Tag, Node } from '@markdoc/markdoc';
-export declare const isLocalLink: (path: string | null | undefined) => boolean;
-/**
- *
- * @returns url with leading and without trailing slash or empty string, e.g. '/prefix'
- */
-export declare function getPathPrefix(): string;
-export declare function normalizePathPrefix(prefix: string): string;
-export declare function addLeadingSlash(url: string): string;
-export declare function removeTrailingSlash(url: string): string;
-export declare type Glob = picomatch.Glob;
-export declare function getGlobMatcher(glob: Glob, options?: {}): (file: string) => boolean;
-export declare function isTag(value?: any): value is Tag;
-export declare function isNode(value?: any): value is Node;
-export declare const getCssPropertyValue: (name: string) => string;
-export declare function normalizeRoute(route: string): string;
-export declare function isPrimitive(arg: any): arg is string | boolean | number;