@jpmorganchase/elemental-dev-portal 2.10.1 → 2.12.1

package/index.js

@@ -1,70 +1,63 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var mosaic = require('@stoplight/mosaic');
 var React = require('react');
 var elementalCore = require('@jpmorganchase/elemental-core');
 var path = require('@stoplight/path');
 var types = require('@stoplight/types');
-var flow = require('lodash/flow.js');
 var reactRouterDom = require('react-router-dom');
+var flow = require('lodash/flow.js');
 var reactQuery = require('react-query');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var flow__default = /*#__PURE__*/_interopDefaultLegacy(flow);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const BranchSelector = ({ branchSlug, branches, onChange }) => {
-    const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
-    const handleChange = React__namespace.useCallback((selectedSlug) => {
-        const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
-        if (selectedBranch) {
-            onChange(selectedBranch);
-        }
-    }, [onChange, branches]);
-    return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Versions", placement: "bottom left", closeOnPress: true, matchTriggerWidth: true, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.FieldButton, { w: "full", icon: "layer-group", px: 4, h: "md", active: isOpen, borderR: 0, roundedR: "none" }, (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.name) || (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || 'Choose a version')), items: [
-            {
-                type: 'option_group',
-                title: 'Versions',
-                onChange: handleChange,
-                value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
-                children: branches.map(branch => ({
-                    title: branch.name || branch.slug,
-                    value: branch.slug,
-                    meta: branch.is_default ? 'Default' : undefined,
-                })),
-            },
-        ] }));
+const BranchSelector = ({ branchSlug, branches, onChange }) => {
+    const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
+    const handleChange = React__namespace.useCallback((selectedSlug) => {
+        const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
+        if (selectedBranch) {
+            onChange(selectedBranch);
+        }
+    }, [onChange, branches]);
+    return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Versions", placement: "bottom left", closeOnPress: true, matchTriggerWidth: true, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.FieldButton, { w: "full", icon: "layer-group", px: 4, h: "md", active: isOpen, borderR: 0, roundedR: "none" }, (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.name) || (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || 'Choose a version')), items: [
+            {
+                type: 'option_group',
+                title: 'Versions',
+                onChange: handleChange,
+                value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
+                children: branches.map(branch => ({
+                    title: branch.name || branch.slug,
+                    value: branch.slug,
+                    meta: branch.is_default ? 'Default' : undefined,
+                })),
+            },
+        ] }));
 };
 
-const PlatformContext = React__namespace.createContext({ platformUrl: 'https://stoplight.io' });
-const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
-    return (React__namespace.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
-};
+const PlatformContext = React__namespace.createContext({ platformUrl: 'https://stoplight.io' });
+const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
+    return (React__namespace.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
+};
 const DevPortalProvider = elementalCore.withPersistenceBoundary(elementalCore.withQueryClientProvider(elementalCore.withMosaicProvider(PlatformProvider)));
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -78,6 +71,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
 
 function __rest(s, e) {
     var t = {};
@@ -99,89 +94,116 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
-
-const NodeContent = ({ node, Link, hideMocking, refResolver, maxRefDepth, tryItCorsProxy, tryItCredentialsPolicy, nodeHasChanged, nodeUnsupported, compact, hideTryIt, hideTryItPanel, hideExport, onExportRequest, }) => {
-    var _a, _b, _c, _d;
-    return (React__namespace.createElement(NodeLinkContext.Provider, { value: [node, Link] },
-        React__namespace.createElement(elementalCore.MarkdownComponentsProvider, { value: {
-                a: LinkComponent,
-                h2: (_a) => {
-                    var props = __rest(_a, ["color"]);
-                    return React__namespace.createElement(elementalCore.LinkHeading, Object.assign({ size: 2 }, props));
-                },
-                h3: (_a) => {
-                    var props = __rest(_a, ["color"]);
-                    return React__namespace.createElement(elementalCore.LinkHeading, Object.assign({ size: 3 }, props));
-                },
-                h4: (_a) => {
-                    var props = __rest(_a, ["color"]);
-                    return React__namespace.createElement(elementalCore.LinkHeading, Object.assign({ size: 4 }, props));
-                },
-            } },
-            React__namespace.createElement(elementalCore.MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
-                React__namespace.createElement(elementalCore.Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
-                        compact,
-                        hideTryIt: hideTryIt,
-                        hideTryItPanel: hideTryItPanel,
-                        hideExport: hideExport ||
-                            ((_b = (_a = node.links.export_url) !== null && _a !== void 0 ? _a : node.links.export_original_file_url) !== null && _b !== void 0 ? _b : node.links.export_bundled_file_url) ===
-                                undefined,
-                    }, useNodeForRefResolving: true, refResolver: refResolver, maxRefDepth: maxRefDepth, tryItCorsProxy: tryItCorsProxy, exportProps: [types.NodeType.HttpService, types.NodeType.Model].includes(node.type)
-                        ? {
-                            original: onExportRequest
-                                ? { onPress: () => onExportRequest('original') }
-                                : { href: (_c = node.links.export_original_file_url) !== null && _c !== void 0 ? _c : node.links.export_url },
-                            bundled: onExportRequest
-                                ? { onPress: () => onExportRequest('bundled') }
-                                : { href: (_d = node.links.export_bundled_file_url) !== null && _d !== void 0 ? _d : getBundledUrl(node.links.export_url) },
-                        }
-                        : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy, nodeHasChanged: nodeHasChanged, nodeUnsupported: nodeUnsupported })))));
-};
-const NodeLinkContext = React__namespace.createContext(undefined);
-const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const LinkComponent = ({ children, href, title }) => {
-    const ctx = React__namespace.useContext(NodeLinkContext);
-    if (href && externalRegex.test(href)) {
-        return (React__namespace.createElement("a", { href: href, target: "_blank", rel: "noreferrer", title: title ? title : undefined }, children));
-    }
-    if (href && ctx) {
-        const [node, Link] = ctx;
-        const { fileUri } = getNodeUriParts(node.uri);
-        const { fileUri: hrefFileUri } = getNodeUriParts(href);
-        let resolvedUri;
-        if (hrefFileUri) {
-            resolvedUri = path.resolve(path.dirname(fileUri), href);
-        }
-        else {
-            resolvedUri = path.resolve(fileUri, href);
-        }
-        const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
-        const decodedUrl = decodeURIComponent(href);
-        const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
-        const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
-        if (edge) {
-            return React__namespace.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
-        }
-    }
-    return React__namespace.createElement("a", { href: href }, children);
-};
-function getBundledUrl(url) {
-    if (url === undefined)
-        return undefined;
-    const bundledUrl = new URL(url);
-    const searchParams = new URLSearchParams(bundledUrl.search);
-    searchParams.append('deref', 'optimizedBundle');
-    bundledUrl.search = searchParams.toString();
-    return bundledUrl.toString();
 }
-const getNodeUriParts = (uri) => {
-    const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
-    if (parts.length === 1) {
-        return { fileUri: '', pointer: parts[0] || '' };
-    }
-    const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
-    return { fileUri, pointer: parts[2] || '' };
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const NodeContent = ({ node, Link, hideMocking, refResolver, maxRefDepth, tryItCorsProxy, tryItCredentialsPolicy, nodeHasChanged, nodeUnsupported, compact, hideTryIt, hideSamples, hideTryItPanel, hideSecurityInfo, hideServerInfo, hideExport, onExportRequest, }) => {
+    var _a, _b, _c, _d;
+    return (React__namespace.createElement(NodeLinkContext.Provider, { value: [node, Link] },
+        React__namespace.createElement(elementalCore.MarkdownComponentsProvider, { value: {
+                a: LinkComponent,
+                h2: (_a) => {
+                    var props = __rest(_a, ["color"]);
+                    return React__namespace.createElement(elementalCore.LinkHeading, Object.assign({ size: 2 }, props));
+                },
+                h3: (_a) => {
+                    var props = __rest(_a, ["color"]);
+                    return React__namespace.createElement(elementalCore.LinkHeading, Object.assign({ size: 3 }, props));
+                },
+                h4: (_a) => {
+                    var props = __rest(_a, ["color"]);
+                    return React__namespace.createElement(elementalCore.LinkHeading, Object.assign({ size: 4 }, props));
+                },
+            } },
+            React__namespace.createElement(elementalCore.MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
+                React__namespace.createElement(elementalCore.Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
+                        compact,
+                        hideTryIt: hideTryIt,
+                        hideTryItPanel: hideTryItPanel,
+                        hideSamples,
+                        hideSecurityInfo: hideSecurityInfo,
+                        hideServerInfo: hideServerInfo,
+                        hideExport: hideExport ||
+                            ((_b = (_a = node.links.export_url) !== null && _a !== void 0 ? _a : node.links.export_original_file_url) !== null && _b !== void 0 ? _b : node.links.export_bundled_file_url) ===
+                                undefined,
+                    }, useNodeForRefResolving: true, refResolver: refResolver, maxRefDepth: maxRefDepth, tryItCorsProxy: tryItCorsProxy, exportProps: [types.NodeType.HttpService, types.NodeType.Model].includes(node.type)
+                        ? {
+                            original: onExportRequest
+                                ? { onPress: () => onExportRequest('original') }
+                                : { href: (_c = node.links.export_original_file_url) !== null && _c !== void 0 ? _c : node.links.export_url },
+                            bundled: onExportRequest
+                                ? { onPress: () => onExportRequest('bundled') }
+                                : { href: (_d = node.links.export_bundled_file_url) !== null && _d !== void 0 ? _d : getBundledUrl(node.links.export_url) },
+                        }
+                        : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy, nodeHasChanged: nodeHasChanged, nodeUnsupported: nodeUnsupported })))));
+};
+const NodeLinkContext = React__namespace.createContext(undefined);
+const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
+const LinkComponent = ({ children, href, title }) => {
+    const ctx = React__namespace.useContext(NodeLinkContext);
+    const routerKind = React__namespace.useContext(elementalCore.RouterTypeContext);
+    const { pathname } = reactRouterDom.useLocation();
+    const route = pathname.split('#')[0];
+    try {
+        if (href && externalRegex.test(href)) {
+            const baseURL = window.location.host;
+            const hrefURL = new URL(href).host;
+            if (baseURL === hrefURL) {
+                return (React__namespace.createElement("a", { href: href, title: title ? title : undefined }, children));
+            }
+            return (React__namespace.createElement("a", { href: href, target: "_blank", rel: "noreferrer", title: title ? title : undefined }, children));
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+    if (href && ctx) {
+        const [node, Link] = ctx;
+        const { fileUri } = getNodeUriParts(node.uri);
+        const { fileUri: hrefFileUri } = getNodeUriParts(href);
+        let resolvedUri;
+        if (hrefFileUri) {
+            resolvedUri = path.resolve(path.dirname(fileUri), href);
+        }
+        else {
+            resolvedUri = path.resolve(fileUri, href);
+        }
+        const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
+        const decodedUrl = decodeURIComponent(href);
+        const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
+        const [pagePathWithoutHash] = pathname.split('#');
+        let edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
+        if (!edge) {
+            edge = node.outbound_edges.find(edge => pagePathWithoutHash === `/${edge.slug}`);
+        }
+        if (edge) {
+            const slug = routerKind === 'hash' ? `#${route.replace(node.slug, edge.slug)}` : edge.slug;
+            return React__namespace.createElement(Link, { to: `${slug}${hash ? `#${hash}` : ''}` }, children);
+        }
+    }
+    const fullHref = routerKind === 'hash' ? `#${route}${href}` : href;
+    return React__namespace.createElement("a", { href: fullHref }, children);
+};
+function getBundledUrl(url) {
+    if (url === undefined)
+        return undefined;
+    const bundledUrl = new URL(url);
+    const searchParams = new URLSearchParams(bundledUrl.search);
+    searchParams.append('deref', 'optimizedBundle');
+    bundledUrl.search = searchParams.toString();
+    return bundledUrl.toString();
+}
+const getNodeUriParts = (uri) => {
+    const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
+    if (parts.length === 1) {
+        return { fileUri: '', pointer: parts[0] || '' };
+    }
+    const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
+    return { fileUri, pointer: parts[2] || '' };
 };
 
 /*!
@@ -206,287 +228,297 @@ var faSpinner = {
   icon: [512, 512, [], "f110", "M304 48C304 74.51 282.5 96 256 96C229.5 96 208 74.51 208 48C208 21.49 229.5 0 256 0C282.5 0 304 21.49 304 48zM304 464C304 490.5 282.5 512 256 512C229.5 512 208 490.5 208 464C208 437.5 229.5 416 256 416C282.5 416 304 437.5 304 464zM0 256C0 229.5 21.49 208 48 208C74.51 208 96 229.5 96 256C96 282.5 74.51 304 48 304C21.49 304 0 282.5 0 256zM512 256C512 282.5 490.5 304 464 304C437.5 304 416 282.5 416 256C416 229.5 437.5 208 464 208C490.5 208 512 229.5 512 256zM74.98 437C56.23 418.3 56.23 387.9 74.98 369.1C93.73 350.4 124.1 350.4 142.9 369.1C161.6 387.9 161.6 418.3 142.9 437C124.1 455.8 93.73 455.8 74.98 437V437zM142.9 142.9C124.1 161.6 93.73 161.6 74.98 142.9C56.24 124.1 56.24 93.73 74.98 74.98C93.73 56.23 124.1 56.23 142.9 74.98C161.6 93.73 161.6 124.1 142.9 142.9zM369.1 369.1C387.9 350.4 418.3 350.4 437 369.1C455.8 387.9 455.8 418.3 437 437C418.3 455.8 387.9 455.8 369.1 437C350.4 418.3 350.4 387.9 369.1 369.1V369.1z"]
 };
 
-const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
-    const listBoxRef = React__namespace.useRef(null);
-    const onChange = React__namespace.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
-    const onKeyDown = React__namespace.useCallback(e => {
-        var _a;
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, []);
-    return (React__namespace.createElement(mosaic.Modal, { renderHeader: () => (React__namespace.createElement(mosaic.Input, { appearance: "minimal", borderB: true, size: "lg", icon: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, ml: 1, icon: isLoading ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose },
-        React__namespace.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
-};
-const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
-    const listBoxRef = React__namespace.useRef(null);
-    const onSelectionChange = React__namespace.useCallback(keys => {
-        const selectedId = keys.values().next().value;
-        const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
-        if (selectedResult) {
-            onClick(selectedResult);
-        }
-    }, [searchResults, onClick]);
-    return (React__namespace.createElement(React__namespace.Fragment, null, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
-        var _a, _b;
-        return (React__namespace.createElement(mosaic.ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
-            React__namespace.createElement(mosaic.Box, { p: 3, borderB: !showDivider ? undefined : true },
-                React__namespace.createElement(mosaic.Flex, { align: "center" },
-                    React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, w: 4, icon: elementalCore.NodeTypeIconDefs[searchResult.type], style: { color: elementalCore.NodeTypeColors[searchResult.type] } }),
-                    React__namespace.createElement(mosaic.Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
-                    React__namespace.createElement(mosaic.Box, { fontSize: "sm", color: "muted" }, searchResult.project_name)),
-                React__namespace.createElement(mosaic.Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
-    })) : (React__namespace.createElement(mosaic.Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
-};
-const SearchResults = flow__default["default"](elementalCore.withStyles, elementalCore.withPersistenceBoundary, elementalCore.withMosaicProvider, elementalCore.withQueryClientProvider)(SearchResultsList);
-const Search = flow__default["default"](elementalCore.withStyles, elementalCore.withPersistenceBoundary, elementalCore.withMosaicProvider, elementalCore.withQueryClientProvider)(SearchImpl);
-
-const TableOfContents = (_a) => {
-    var { tableOfContents, activeId, Link, collapseTableOfContents = false, externalScrollbar, isInResponsiveMode = false, onLinkClick } = _a, boxProps = __rest(_a, ["tableOfContents", "activeId", "Link", "collapseTableOfContents", "externalScrollbar", "isInResponsiveMode", "onLinkClick"]);
-    return (React__namespace.createElement(mosaic.Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
-        React__namespace.createElement(mosaic.Flex, { flexGrow: true, flexShrink: true, overflowY: "auto" },
-            React__namespace.createElement(elementalCore.TableOfContents, { tree: tableOfContents.items, activeId: activeId, Link: Link, maxDepthOpenByDefault: collapseTableOfContents ? 0 : 1, externalScrollbar: externalScrollbar, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode })),
-        tableOfContents.hide_powered_by ? null : (React__namespace.createElement(elementalCore.PoweredByLink, { source: activeId, pathname: typeof window !== 'undefined' ? window.location.pathname : '', packageType: "elements-dev-portal" }))));
+const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
+    const listBoxRef = React__namespace.useRef(null);
+    const onChange = React__namespace.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
+    const onKeyDown = React__namespace.useCallback(e => {
+        var _a;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    return (React__namespace.createElement(mosaic.Modal, { renderHeader: () => (React__namespace.createElement(mosaic.Input, { appearance: "minimal", borderB: true, size: "lg", icon: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, ml: 1, icon: isLoading ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose },
+        React__namespace.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
+};
+const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
+    const listBoxRef = React__namespace.useRef(null);
+    const onSelectionChange = React__namespace.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
+        if (selectedResult) {
+            onClick(selectedResult);
+        }
+    }, [searchResults, onClick]);
+    return (React__namespace.createElement(React__namespace.Fragment, null, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
+        var _a, _b;
+        return (React__namespace.createElement(mosaic.ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
+            React__namespace.createElement(mosaic.Box, { p: 3, borderB: !showDivider ? undefined : true },
+                React__namespace.createElement(mosaic.Flex, { align: "center" },
+                    React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, w: 4, icon: elementalCore.NodeTypeIconDefs[searchResult.type], style: { color: elementalCore.NodeTypeColors[searchResult.type] } }),
+                    React__namespace.createElement(mosaic.Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
+                    React__namespace.createElement(mosaic.Box, { fontSize: "sm", color: "muted" }, searchResult.project_name)),
+                React__namespace.createElement(mosaic.Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
+    })) : (React__namespace.createElement(mosaic.Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
+};
+const SearchResults = flow(elementalCore.withStyles, elementalCore.withPersistenceBoundary, elementalCore.withMosaicProvider, elementalCore.withQueryClientProvider)(SearchResultsList);
+const Search = flow(elementalCore.withStyles, elementalCore.withPersistenceBoundary, elementalCore.withMosaicProvider, elementalCore.withQueryClientProvider)(SearchImpl);
+
+const TableOfContents = (_a) => {
+    var { tableOfContents, activeId, Link, collapseTableOfContents = false, externalScrollbar, isInResponsiveMode = false, onLinkClick } = _a, boxProps = __rest(_a, ["tableOfContents", "activeId", "Link", "collapseTableOfContents", "externalScrollbar", "isInResponsiveMode", "onLinkClick"]);
+    return (React__namespace.createElement(mosaic.Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
+        React__namespace.createElement(mosaic.Flex, { flexGrow: true, flexShrink: true, overflowY: "auto" },
+            React__namespace.createElement(elementalCore.TableOfContents, { tree: tableOfContents.items, activeId: activeId, Link: Link, maxDepthOpenByDefault: collapseTableOfContents ? 0 : 1, externalScrollbar: externalScrollbar, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode })),
+        tableOfContents.hide_powered_by ? null : (React__namespace.createElement(elementalCore.PoweredByLink, { source: activeId, pathname: typeof window !== 'undefined' ? window.location.pathname : '', packageType: "elements-dev-portal" }))));
 };
 
-const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
-const devPortalCacheKeys = {
-    all: [ROOT_CACHE_KEY],
-    projects: () => [ROOT_CACHE_KEY, 'projects'],
-    project: (projectId) => [...devPortalCacheKeys.projects(), projectId],
-    projectsList: () => [...devPortalCacheKeys.projects(), 'list'],
-    projectDetails: (projectId) => [...devPortalCacheKeys.project(projectId), 'details'],
-    branches: (projectId) => [...devPortalCacheKeys.project(projectId), 'branches'],
-    branch: (projectId, branch) => [...devPortalCacheKeys.branches(projectId), branch],
-    branchesList: (projectId) => [...devPortalCacheKeys.branches(projectId), 'list'],
-    branchDetails: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'details'],
-    branchTOC: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'],
-    branchNodes: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'nodes'],
-    branchNode: (projectId, branch, node) => [...devPortalCacheKeys.branchNodes(projectId, branch), node],
-    branchNodesList: (projectId, branch) => [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'],
-    branchNodeDetails: (projectId, branch, node) => [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'],
-    search: () => [...devPortalCacheKeys.all, 'search'],
-    searchNodes: (filters) => [
-        ...devPortalCacheKeys.search(),
-        filters,
-    ],
+const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
+const devPortalCacheKeys = {
+    all: [ROOT_CACHE_KEY],
+    projects: () => [ROOT_CACHE_KEY, 'projects'],
+    project: (projectId) => [...devPortalCacheKeys.projects(), projectId],
+    projectsList: () => [...devPortalCacheKeys.projects(), 'list'],
+    projectDetails: (projectId) => [...devPortalCacheKeys.project(projectId), 'details'],
+    branches: (projectId) => [...devPortalCacheKeys.project(projectId), 'branches'],
+    branch: (projectId, branch) => [...devPortalCacheKeys.branches(projectId), branch],
+    branchesList: (projectId) => [...devPortalCacheKeys.branches(projectId), 'list'],
+    branchDetails: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'details'],
+    branchTOC: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'],
+    branchNodes: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'nodes'],
+    branchNode: (projectId, branch, node) => [...devPortalCacheKeys.branchNodes(projectId, branch), node],
+    branchNodesList: (projectId, branch) => [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'],
+    branchNodeDetails: (projectId, branch, node) => [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'],
+    search: () => [...devPortalCacheKeys.all, 'search'],
+    searchNodes: (filters) => [
+        ...devPortalCacheKeys.search(),
+        filters,
+    ],
 };
 
-const Forbidden = () => (React__default["default"].createElement(mosaic.Flex, { align: "center", justify: "center", flexGrow: true },
-    React__default["default"].createElement(mosaic.VStack, { spacing: 4, align: "center" },
-        React__default["default"].createElement(mosaic.Heading, { size: 1 }, "Forbidden"),
-        React__default["default"].createElement(mosaic.Box, { as: "p" }, "You don't have permission to access this resource"))));
+const Forbidden = () => (React.createElement(mosaic.Flex, { align: "center", justify: "center", flexGrow: true },
+    React.createElement(mosaic.VStack, { spacing: 4, align: "center" },
+        React.createElement(mosaic.Heading, { size: 1 }, "Forbidden"),
+        React.createElement(mosaic.Box, { as: "p" }, "You don't have permission to access this resource"))));
 
-const Loading = () => (React__default["default"].createElement(mosaic.Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted" },
-    React__default["default"].createElement(mosaic.Icon, { icon: faCircleNotch, size: "3x", spin: true })));
+const Loading = () => (React.createElement(mosaic.Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted" },
+    React.createElement(mosaic.Icon, { icon: faCircleNotch, size: "3x", spin: true })));
 
-const NotFound = () => (React__default["default"].createElement(mosaic.Flex, { align: "center", justify: "center", flexGrow: true },
-    React__default["default"].createElement(mosaic.VStack, { spacing: 4, align: "center" },
-        React__default["default"].createElement(mosaic.Heading, { size: 1 }, "Not Found"),
-        React__default["default"].createElement(mosaic.Box, { as: "p" }, "Could not find what you are looking for"))));
+const NotFound = () => (React.createElement(mosaic.Flex, { align: "center", justify: "center", flexGrow: true },
+    React.createElement(mosaic.VStack, { spacing: 4, align: "center" },
+        React.createElement(mosaic.Heading, { size: 1 }, "Not Found"),
+        React.createElement(mosaic.Box, { as: "p" }, "Could not find what you are looking for"))));
 
-const UpgradeToStarter = () => (React__default["default"].createElement(mosaic.Flex, { as: "a", href: "https://stoplight.io/pricing/", target: "_blank", rel: "noreferrer noopener", justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted", flexDirection: "col" },
-    React__default["default"].createElement(mosaic.Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
-    React__default["default"].createElement(mosaic.Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
+const UpgradeToStarter = () => (React.createElement(mosaic.Flex, { as: "a", href: "https://stoplight.io/pricing/", target: "_blank", rel: "noreferrer noopener", justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted", flexDirection: "col" },
+    React.createElement(mosaic.Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
+    React.createElement(mosaic.Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
 
-const appVersion = '2.10.1';
+const appVersion = '2.12.1';
 
-class ResponseError extends Error {
-    constructor(message, responseCode) {
-        super(message);
-        this.name = 'ResponseError';
-        this.code = responseCode;
-    }
-}
-const getNodeContent = ({ nodeSlug, projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const encodedNodeSlug = encodeURIComponent(nodeSlug);
-    const encodedProjectId = encodeURIComponent(projectId);
-    const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
-    const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
-    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/nodes/${encodedNodeSlug}${branchQuery}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        if (response.status === 402) {
-            throw new ResponseError('Payment Required', response.status);
-        }
-        else if (response.status === 403) {
-            throw new ResponseError('Forbidden', response.status);
-        }
-        else {
-            throw new ResponseError('Something went wrong', response.status);
-        }
-    }
-    return data;
+class ResponseError extends Error {
+    constructor(message, responseCode) {
+        super(message);
+        this.name = 'ResponseError';
+        this.code = responseCode;
+    }
+}
+const getNodeContent = ({ nodeSlug, projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const encodedNodeSlug = encodeURIComponent(nodeSlug);
+    const encodedProjectId = encodeURIComponent(projectId);
+    const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
+    const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
+    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/nodes/${encodedNodeSlug}${branchQuery}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        if (response.status === 402) {
+            throw new ResponseError('Payment Required', response.status);
+        }
+        else if (response.status === 403) {
+            throw new ResponseError('Forbidden', response.status);
+        }
+        else {
+            throw new ResponseError('Something went wrong', response.status);
+        }
+    }
+    return data;
 });
 
-const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const encodedProjectId = encodeURIComponent(projectId);
-    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
+const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const encodedProjectId = encodeURIComponent(projectId);
+    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
 });
 
-function useGetBranches({ projectId }) {
-    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
-    return reactQuery.useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
-        enabled: projectId ? true : false,
-    });
+function useGetBranches({ projectId }) {
+    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
+    return reactQuery.useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
+        enabled: projectId ? true : false,
+    });
 }
 
-function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
-    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
-    return reactQuery.useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, isLoggedIn], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
+function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
+    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
+    return reactQuery.useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, isLoggedIn], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
 }
 
-const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const encodedProjectId = encodeURIComponent(projectId);
-    const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
-    const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
-    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
+const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const encodedProjectId = encodeURIComponent(projectId);
+    const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
+    const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
+    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
 });
 
-function useGetTableOfContents({ projectId, branchSlug }) {
-    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
-    return reactQuery.useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, isLoggedIn], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
+function useGetTableOfContents({ projectId, branchSlug }) {
+    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
+    return reactQuery.useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, isLoggedIn], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
 }
 
-const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = reactRouterDom.useParams();
-    const branchSlug = decodeURIComponent(encodedBranchSlug);
-    const history = reactRouterDom.useHistory();
-    const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
-    const { data: branches } = useGetBranches({ projectId });
-    const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
-        nodeSlug,
-        projectId,
-        branchSlug,
-    });
-    const container = React__namespace.useRef(null);
-    if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
-        const firstNode = elementalCore.findFirstNode(tableOfContents.items);
-        if (firstNode) {
-            return React__namespace.createElement(reactRouterDom.Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
-        }
-    }
-    let elem;
-    if (isLoadingNode || !isTocFetched) {
-        elem = React__namespace.createElement(Loading, null);
-    }
-    else if (isError) {
-        if (nodeError instanceof ResponseError) {
-            if (nodeError.code === 402) {
-                elem = React__namespace.createElement(UpgradeToStarter, null);
-            }
-            else if (nodeError.code === 403) {
-                elem = React__namespace.createElement(Forbidden, null);
-            }
-            else {
-                elem = React__namespace.createElement(NotFound, null);
-            }
-        }
-        else {
-            elem = React__namespace.createElement(NotFound, null);
-        }
-    }
-    else if (!node) {
-        elem = React__namespace.createElement(NotFound, null);
-    }
-    else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
-        return React__namespace.createElement(reactRouterDom.Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
-    }
-    else {
-        elem = (React__namespace.createElement(NodeContent, { node: node, Link: elementalCore.ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    return (React__namespace.createElement(elementalCore.SidebarLayout, { ref: container, sidebar: React__namespace.createElement(React__namespace.Fragment, null,
-            branches && branches.items.length > 1 ? (React__namespace.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
-                    const encodedBranchSlug = encodeURIComponent(branch.slug);
-                    history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
-                } })) : null,
-            tableOfContents ? (React__namespace.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: reactRouterDom.Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
-};
-const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
-    const { Router, routerProps } = elementalCore.useRouter(router, basePath, staticRouterPath);
-    return (React__namespace.createElement(DevPortalProvider, { platformUrl: platformUrl },
-        React__namespace.createElement(elementalCore.RouterTypeContext.Provider, { value: router },
-            React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React__namespace.createElement(reactRouterDom.Switch, null,
-                    React__namespace.createElement(reactRouterDom.Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
-                        React__namespace.createElement(StoplightProjectImpl, Object.assign({}, props))),
-                    React__namespace.createElement(reactRouterDom.Route, { path: "/:nodeSlug+", exact: true },
-                        React__namespace.createElement(StoplightProjectImpl, Object.assign({}, props))),
-                    React__namespace.createElement(reactRouterDom.Route, { path: "/", exact: true },
-                        React__namespace.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
-};
+const StoplightProjectImpl = ({ projectId, collapseTableOfContents = false }) => {
+    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = reactRouterDom.useParams();
+    const branchSlug = decodeURIComponent(encodedBranchSlug);
+    const navigate = reactRouterDom.useNavigate();
+    const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
+    const { data: branches } = useGetBranches({ projectId });
+    const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
+        nodeSlug,
+        projectId,
+        branchSlug,
+    });
+    const container = React__namespace.useRef(null);
+    if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
+        const firstNode = elementalCore.findFirstNode(tableOfContents.items);
+        if (firstNode) {
+            return React__namespace.createElement(reactRouterDom.Navigate, { to: branchSlug ? `branches/${branchSlug}/${firstNode.slug}` : `${firstNode.slug}`, replace: true });
+        }
+    }
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (React__namespace.createElement(elementalCore.SidebarLayout, { ref: container, sidebar: React__namespace.createElement(React__namespace.Fragment, null,
+            branches && branches.items.length > 1 ? (React__namespace.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
+                    const encodedBranchSlug = encodeURIComponent(branch.slug);
+                    navigate(branch.is_default ? `${nodeSlug}` : `branches/${encodedBranchSlug}/${nodeSlug}`);
+                } })) : null,
+            tableOfContents ? (React__namespace.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: reactRouterDom.Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) },
+        React__namespace.createElement(reactRouterDom.Outlet, { context: [isLoadingNode, isTocFetched, isError, nodeError, node] })));
+};
+const ProjectNode = ({ hideTryIt, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = reactRouterDom.useParams();
+    const branchSlug = decodeURIComponent(encodedBranchSlug);
+    const [isLoadingNode, isTocFetched, isError, nodeError, node] = reactRouterDom.useOutletContext();
+    if (isLoadingNode || !isTocFetched) {
+        return React__namespace.createElement(Loading, null);
+    }
+    if (isError) {
+        if (nodeError instanceof ResponseError) {
+            if (nodeError.code === 402) {
+                return React__namespace.createElement(UpgradeToStarter, null);
+            }
+            else if (nodeError.code === 403) {
+                return React__namespace.createElement(Forbidden, null);
+            }
+            else {
+                return React__namespace.createElement(NotFound, null);
+            }
+        }
+        else {
+            return React__namespace.createElement(NotFound, null);
+        }
+    }
+    if (!node) {
+        return React__namespace.createElement(NotFound, null);
+    }
+    if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
+        return React__namespace.createElement(reactRouterDom.Navigate, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}`, replace: true });
+    }
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(elementalCore.ScrollToHashElement, null),
+        React__namespace.createElement(NodeContent, { node: node, Link: elementalCore.ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
+};
+const StoplightProjectRouter = (_a) => {
+    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'hash' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
+    const { Router, routerProps } = elementalCore.useRouter(router, basePath, staticRouterPath);
+    const outerRouter = reactRouterDom.useInRouterContext();
+    const InternalRoutes = () => (React__namespace.createElement(reactRouterDom.Routes, null,
+        React__namespace.createElement(reactRouterDom.Route, { path: "/", element: React__namespace.createElement(StoplightProjectImpl, Object.assign({}, props)) },
+            React__namespace.createElement(reactRouterDom.Route, { path: "/branches/:branchSlug/:nodeSlug/*", element: React__namespace.createElement(ProjectNode, Object.assign({}, props)) }),
+            React__namespace.createElement(reactRouterDom.Route, { path: "/:nodeSlug/*", element: React__namespace.createElement(ProjectNode, Object.assign({}, props)) }),
+            React__namespace.createElement(reactRouterDom.Route, { element: React__namespace.createElement(ProjectNode, Object.assign({}, props)) }))));
+    if (!outerRouter) {
+        return (React__namespace.createElement(DevPortalProvider, { platformUrl: platformUrl },
+            React__namespace.createElement(elementalCore.RouterTypeContext.Provider, { value: router },
+                React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                    React__namespace.createElement(InternalRoutes, null)))));
+    }
+    return (React__namespace.createElement(DevPortalProvider, { platformUrl: platformUrl },
+        React__namespace.createElement(elementalCore.RouterTypeContext.Provider, { value: router },
+            React__namespace.createElement(InternalRoutes, null))));
+};
 const StoplightProject = elementalCore.withStyles(StoplightProjectRouter);
 
-const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const queryParams = [];
-    let fetchedWorkspaceId = workspaceId || '';
-    if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
-        const encodedProjectId = encodeURIComponent(projectIds[0]);
-        const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
-            headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-        });
-        const data = yield response.json();
-        fetchedWorkspaceId = data.workspace.id;
-    }
-    if (projectIds && projectIds.length) {
-        queryParams.push(...projectIds.map((projectId, index) => {
-            const encodedProjectId = encodeURIComponent(projectId);
-            return `project_ids[${index}]=${encodedProjectId}`;
-        }));
-    }
-    if (search) {
-        const encodedSearch = encodeURIComponent(search);
-        queryParams.push(`search=${encodedSearch}`);
-    }
-    if (branchSlug) {
-        const encodedBranchSlug = encodeURIComponent(branchSlug);
-        queryParams.push(`branch=${encodedBranchSlug}`);
-    }
-    const query = queryParams.length ? `?${queryParams.join('&')}` : '';
-    const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
-    const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
+const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const queryParams = [];
+    let fetchedWorkspaceId = workspaceId || '';
+    if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
+        const encodedProjectId = encodeURIComponent(projectIds[0]);
+        const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
+            headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+        });
+        const data = yield response.json();
+        fetchedWorkspaceId = data.workspace.id;
+    }
+    if (projectIds && projectIds.length) {
+        queryParams.push(...projectIds.map((projectId, index) => {
+            const encodedProjectId = encodeURIComponent(projectId);
+            return `project_ids[${index}]=${encodedProjectId}`;
+        }));
+    }
+    if (search) {
+        const encodedSearch = encodeURIComponent(search);
+        queryParams.push(`search=${encodedSearch}`);
+    }
+    if (branchSlug) {
+        const encodedBranchSlug = encodeURIComponent(branchSlug);
+        queryParams.push(`branch=${encodedBranchSlug}`);
+    }
+    const query = queryParams.length ? `?${queryParams.join('&')}` : '';
+    const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
+    const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
 });
 
-const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const encodedProjectId = encodeURIComponent(projectIds[0]);
-    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
+const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const encodedProjectId = encodeURIComponent(projectIds[0]);
+    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
 });
 
 /**
@@ -702,7 +734,7 @@ function useStateIgnoreCallback(initialState) {
     return [state, setStateIgnoreCallback];
 }
 function useDebounce(value, delay, options) {
-    var eq = (options && options.equalityFn) || valueEquality;
+    var eq = valueEquality;
     var _a = useStateIgnoreCallback(value), state = _a[0], dispatch = _a[1];
     var debounced = useDebouncedCallback(React.useCallback(function (value) { return dispatch(value); }, [dispatch]), delay, options);
     var previousValue = React.useRef(value);
@@ -716,19 +748,19 @@ function useDebounce(value, delay, options) {
     return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
 }
 
-function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
-    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
-    const [debounceSearch] = useDebounce(search, 500);
-    return reactQuery.useQuery([
-        ...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
-        platformUrl,
-        isLoggedIn,
-    ], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
+function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
+    const { platformUrl, platformAuthToken, isLoggedIn } = React__namespace.useContext(PlatformContext);
+    const [debounceSearch] = useDebounce(search, 500);
+    return reactQuery.useQuery([
+        ...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
+        platformUrl,
+        isLoggedIn,
+    ], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
 }
 
-function useGetWorkspace({ projectIds }) {
-    const { platformUrl, platformAuthToken } = React__namespace.useContext(PlatformContext);
-    return reactQuery.useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
+function useGetWorkspace({ projectIds }) {
+    const { platformUrl, platformAuthToken } = React__namespace.useContext(PlatformContext);
+    return reactQuery.useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
 }
 
 exports.BranchSelector = BranchSelector;