@stoplight/elements-dev-portal 2.0.0 → 2.0.1

package/index.mjs

@@ -1,11 +1,11 @@
-import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
+import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading, Button, useModalState } from '@stoplight/mosaic';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
-import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, RouterTypeContext, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
+import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, LinkHeading, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, RouterTypeContext, useResponsiveLayout, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
 import { resolve, dirname } from '@stoplight/path';
 import { NodeType } from '@stoplight/types';
 import flow from 'lodash/flow.js';
-import { Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
+import { Link, Route, useParams, useHistory, Redirect } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
 const BranchSelector = ({ branchSlug, branches, onChange }) => {
@@ -37,10 +37,61 @@ const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthTo
 };
 const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+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.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        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.createElement(NodeLinkContext.Provider, { value: [node, Link] },
-        React.createElement(MarkdownComponentsProvider, { value: { a: LinkComponent } },
+        React.createElement(MarkdownComponentsProvider, { value: {
+                a: LinkComponent,
+                h2: (_a) => {
+                    var props = __rest(_a, ["color"]);
+                    return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
+                },
+                h3: (_a) => {
+                    var props = __rest(_a, ["color"]);
+                    return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
+                },
+                h4: (_a) => {
+                    var props = __rest(_a, ["color"]);
+                    return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
+                },
+            } },
             React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
                 React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
                         compact,
@@ -164,43 +215,6 @@ const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = t
 const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
 const Search = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchImpl);
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-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.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 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.createElement(Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
@@ -245,11 +259,29 @@ const NotFound = () => (React__default.createElement(Flex, { align: "center", ju
         React__default.createElement(Heading, { size: 1 }, "Not Found"),
         React__default.createElement(Box, { as: "p" }, "Could not find what you are looking for"))));
 
+const SearchOverlay = ({ isFetching, search, setSearch, data, toc, nodeSlug, projectSlug, branchSlug, isSearchShowing, onClose, onClick, }) => {
+    return (React.createElement(Modal, { isOpen: isSearchShowing, onClose: onClose },
+        React.createElement(Box, { className: "sl-overlay", bg: "canvas", overflowY: "scroll", "data-test": "search-overlay" },
+            React.createElement(Flex, { alignItems: "center", h: "3xl", px: 7, bg: "canvas", borderB: true, pos: "sticky", zIndex: 20 },
+                React.createElement(Flex, { w: "full" },
+                    React.createElement(Box, { pt: 1, pr: 2 },
+                        React.createElement(Button, { appearance: "minimal", onClick: () => {
+                                onClose();
+                            }, "data-test": "search-overlay-back-button" },
+                            React.createElement(Icon, { icon: ['fas', 'arrow-left'], color: "gray", size: "lg" }))),
+                    React.createElement(Input, { border: true, "data-test": "docs-search-input", display: "inline-block", appearance: "minimal", icon: React.createElement(Box, { as: Icon, ml: 1, icon: isFetching ? faSpinner : faSearch, spin: isFetching }), autoFocus: true, placeholder: projectSlug ? 'Search within the project' : 'Search...', value: search, onChange: e => {
+                            setSearch(e.currentTarget.value);
+                        }, type: "search", w: "full", size: "lg" }))),
+            React.createElement(Box, { px: 5, py: toc && !search ? 0 : 5, "data-test": "responsive-project-toc" },
+                toc && !search && projectSlug && (React.createElement(TableOfContents, { tableOfContents: Object.assign(Object.assign({}, toc), { hide_powered_by: true }), activeId: nodeSlug || '', Link: Link, onLinkClick: onClick })),
+                search && (React.createElement(SearchResults, { searchResults: data, onClick: item => onClick(item), isEmbedded: true, showDivider: false }))))));
+};
+
 const UpgradeToStarter = () => (React__default.createElement(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.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
     React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
 
-const appVersion = '2.0.0';
+const appVersion = '2.0.1';
 
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -305,148 +337,6 @@ function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
     return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, platformAuthToken], () => 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;
-});
-
-function useGetTableOfContents({ projectId, branchSlug }) {
-    const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
-    return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, platformAuthToken], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
-}
-
-const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
-    const branchSlug = decodeURIComponent(encodedBranchSlug);
-    const history = 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.useRef(null);
-    if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
-        const firstNode = findFirstNode(tableOfContents.items);
-        if (firstNode) {
-            return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
-        }
-    }
-    let elem;
-    if (isLoadingNode || !isTocFetched) {
-        elem = React.createElement(Loading, null);
-    }
-    else if (isError) {
-        if (nodeError instanceof ResponseError) {
-            if (nodeError.code === 402) {
-                elem = React.createElement(UpgradeToStarter, null);
-            }
-            else if (nodeError.code === 403) {
-                elem = React.createElement(Forbidden, null);
-            }
-            else {
-                elem = React.createElement(NotFound, null);
-            }
-        }
-        else {
-            elem = React.createElement(NotFound, null);
-        }
-    }
-    else if (!node) {
-        elem = React.createElement(NotFound, null);
-    }
-    else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
-        return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
-    }
-    else {
-        elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
-            branches && branches.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches, onChange: branch => {
-                    const encodedBranchSlug = encodeURIComponent(branch.slug);
-                    history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
-                } })) : null,
-            tableOfContents ? (React.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: 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 } = useRouter(router, basePath, staticRouterPath);
-    return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
-        React.createElement(RouterTypeContext.Provider, { value: router },
-            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
-                    React.createElement(StoplightProjectImpl, Object.assign({}, props))),
-                React.createElement(Route, { path: "/:nodeSlug+", exact: true },
-                    React.createElement(StoplightProjectImpl, Object.assign({}, props))),
-                React.createElement(Route, { path: "/", exact: true },
-                    React.createElement(StoplightProjectImpl, Object.assign({}, props)))))));
-};
-const StoplightProject = 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 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;
-});
-
 /**
  * Creates a debounced function that delays invoking `func` until after `wait`
  * milliseconds have elapsed since the last time the debounced function was
@@ -674,6 +564,43 @@ function useDebounce(value, delay, options) {
     return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
 }
 
+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;
+});
+
 function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
     const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
     const [debounceSearch] = useDebounce(search, 500);
@@ -684,6 +611,127 @@ function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
     ], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
 }
 
+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 } = React.useContext(PlatformContext);
+    return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, platformAuthToken], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
+}
+
+const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
+    const branchSlug = decodeURIComponent(encodedBranchSlug);
+    const history = 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 { isOpen, open, close } = useModalState();
+    const [search, setSearch] = React.useState('');
+    const onSearchResultClick = (item) => {
+        close();
+    };
+    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
+    const { data, isFetching } = useGetNodes({
+        search,
+        projectIds: [projectId],
+        pause: !isResponsiveLayoutEnabled,
+    });
+    const container = React.useRef(null);
+    if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
+        const firstNode = findFirstNode(tableOfContents.items);
+        if (firstNode) {
+            return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
+        }
+    }
+    let elem;
+    if (isLoadingNode || !isTocFetched) {
+        elem = React.createElement(Loading, null);
+    }
+    else if (isError) {
+        if (nodeError instanceof ResponseError) {
+            if (nodeError.code === 402) {
+                elem = React.createElement(UpgradeToStarter, null);
+            }
+            else if (nodeError.code === 403) {
+                elem = React.createElement(Forbidden, null);
+            }
+            else {
+                elem = React.createElement(NotFound, null);
+            }
+        }
+        else {
+            elem = React.createElement(NotFound, null);
+        }
+    }
+    else if (!node) {
+        elem = React.createElement(NotFound, null);
+    }
+    else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
+        return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
+    }
+    else {
+        elem = (React.createElement(React.Fragment, null,
+            React.createElement(Button, { "data-test": "show-project-search-overlay", onPress: open, appearance: "default", w: "full", rounded: "lg", borderColor: "light" },
+                React.createElement(Icon, { icon: faSearch }),
+                React.createElement(Box, { pl: 2 }, node.title)),
+            React.createElement(SearchOverlay, { toc: tableOfContents, projectSlug: nodeSlug, branchSlug: branchSlug, nodeSlug: nodeSlug, isFetching: isFetching || !isTocFetched, search: search, setSearch: setSearch, data: data, isSearchShowing: isOpen, onClose: close, onClick: onSearchResultClick }),
+            React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
+    }
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
+            branches && branches.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches, onChange: branch => {
+                    const encodedBranchSlug = encodeURIComponent(branch.slug);
+                    history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
+                } })) : null,
+            tableOfContents ? (React.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: 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 } = useRouter(router, basePath, staticRouterPath);
+    return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
+        React.createElement(RouterTypeContext.Provider, { value: router },
+            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
+                    React.createElement(StoplightProjectImpl, Object.assign({}, props))),
+                React.createElement(Route, { path: "/:nodeSlug+", exact: true },
+                    React.createElement(StoplightProjectImpl, Object.assign({}, props))),
+                React.createElement(Route, { path: "/", exact: true },
+                    React.createElement(StoplightProjectImpl, Object.assign({}, props)))))));
+};
+const StoplightProject = withStyles(StoplightProjectRouter);
+
+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;
+});
+
 function useGetWorkspace({ projectIds }) {
     const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
     return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "main": "./index.js",
@@ -26,7 +26,7 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@stoplight/elements-core": "~8.0.0",
+    "@stoplight/elements-core": "~8.0.1",
     "@stoplight/markdown-viewer": "^5.5.0",
     "@stoplight/mosaic": "^1.46.1",
     "@stoplight/path": "^1.3.2",