npm - @stoplight/elements-dev-portal - Versions diffs - 2.5.1 → 3.0.0 - Mend

@stoplight/elements-dev-portal 2.5.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/index.esm.js +62 -46
package/index.js +61 -45
package/index.mjs +62 -46
package/package.json +3 -3
package/version.d.ts +1 -1
package/web-components.min.js +1 -1
package/web-components.min.js.LICENSE.txt +30 -6

package/index.esm.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
-import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, LinkHeading, 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, RouterTypeContext, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, findFirstNode, SidebarLayout, ScrollToHashElement, ReactRouterMarkdownLink } from '@stoplight/elements-core';
 import { resolve, dirname } from '@stoplight/path';
 import { NodeType } from '@stoplight/types';
+import { useLocation, useInRouterContext, Routes, Route, useParams, useNavigate, Navigate, Link, Outlet, useOutletContext } from 'react-router-dom';
 import flow from 'lodash/flow.js';
-import { Switch, Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
 import { useQuery } from 'react-query';
 const BranchSelector = ({ branchSlug, branches, onChange }) => {
@@ -125,6 +125,9 @@ const NodeLinkContext = React.createContext(undefined);
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
 const LinkComponent = ({ children, href, title }) => {
     const ctx = React.useContext(NodeLinkContext);
+    const routerKind = React.useContext(RouterTypeContext);
+    const { pathname } = useLocation();
+    const route = pathname.split('#')[0];
     try {
         if (href && externalRegex.test(href)) {
             const baseURL = window.location.host;
@@ -152,15 +155,18 @@ const LinkComponent = ({ children, href, title }) => {
         const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
         const decodedUrl = decodeURIComponent(href);
         const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
-        const [pagePathWithoutHash] = window.location.pathname.split('#');
-        const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl ||
-            edge.uri === decodedResolvedUriWithoutAnchor ||
-            pagePathWithoutHash === `/${edge.slug}`);
+        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) {
-            return React.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
+            const slug = routerKind === 'hash' ? `#${route.replace(node.slug, edge.slug)}` : edge.slug;
+            return React.createElement(Link, { to: `${slug}${hash ? `#${hash}` : ''}` }, children);
         }
     }
-    return React.createElement("a", { href: href }, children);
+    const fullHref = routerKind === 'hash' ? `#${route}${href}` : href;
+    return React.createElement("a", { href: fullHref }, children);
 };
 function getBundledUrl(url) {
     if (url === undefined)
@@ -286,7 +292,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
     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.5.1';
+const appVersion = '3.0.0';
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -361,10 +367,10 @@ function useGetTableOfContents({ projectId, branchSlug }) {
     return 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, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+const StoplightProjectImpl = ({ projectId, collapseTableOfContents = false }) => {
     const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
     const branchSlug = decodeURIComponent(encodedBranchSlug);
-    const history = useHistory();
+    const navigate = useNavigate();
     const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
     const { data: branches } = useGetBranches({ projectId });
     const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
@@ -376,63 +382,73 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideSecurityInfo, hideServ
     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}` });
+            return React.createElement(Navigate, { to: branchSlug ? `branches/${branchSlug}/${firstNode.slug}` : `${firstNode.slug}`, replace: true });
         }
     }
-    let elem;
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
+            branches && branches.items.length > 1 ? (React.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.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) },
+        React.createElement(Outlet, { context: [isLoadingNode, isTocFetched, isError, nodeError, node] })));
+};
+const ProjectNode = ({ hideTryIt, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
+    const branchSlug = decodeURIComponent(encodedBranchSlug);
+    const [isLoadingNode, isTocFetched, isError, nodeError, node] = useOutletContext();
     if (isLoadingNode || !isTocFetched) {
-        elem = React.createElement(Loading, null);
+        return React.createElement(Loading, null);
     }
-    else if (isError) {
+    if (isError) {
         if (nodeError instanceof ResponseError) {
             if (nodeError.code === 402) {
-                elem = React.createElement(UpgradeToStarter, null);
+                return React.createElement(UpgradeToStarter, null);
             }
             else if (nodeError.code === 403) {
-                elem = React.createElement(Forbidden, null);
+                return React.createElement(Forbidden, null);
             }
             else {
-                elem = React.createElement(NotFound, null);
+                return React.createElement(NotFound, null);
             }
         }
         else {
-            elem = React.createElement(NotFound, null);
+            return 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}` });
+    if (!node) {
+        return React.createElement(NotFound, null);
     }
-    else {
-        elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
+    if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
+        return React.createElement(Navigate, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}`, replace: true });
     }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
-            branches && branches.items.length > 1 ? (React.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.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));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScrollToHashElement, null),
+        React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
 };
 const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
+    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'hash' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
     const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
+    const outerRouter = useInRouterContext();
+    const InternalRoutes = () => (React.createElement(Routes, null,
+        React.createElement(Route, { path: "/", element: React.createElement(StoplightProjectImpl, Object.assign({}, props)) },
+            React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug/*", element: React.createElement(ProjectNode, Object.assign({}, props)) }),
+            React.createElement(Route, { path: "/:nodeSlug/*", element: React.createElement(ProjectNode, Object.assign({}, props)) }),
+            React.createElement(Route, { element: React.createElement(ProjectNode, Object.assign({}, props)) }))));
+    if (!outerRouter) {
+        return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
+            React.createElement(RouterTypeContext.Provider, { value: router },
+                React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                    React.createElement(InternalRoutes, null)))));
+    }
     return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
         React.createElement(RouterTypeContext.Provider, { value: router },
-            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React.createElement(Switch, null,
-                    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))))))));
+            React.createElement(InternalRoutes, null))));
 };
 const StoplightProject = withStyles(StoplightProjectRouter);

package/index.js CHANGED Viewed

@@ -5,8 +5,8 @@ var React = require('react');
 var elementsCore = require('@stoplight/elements-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 _interopNamespaceDefault(e) {
@@ -145,6 +145,9 @@ 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(elementsCore.RouterTypeContext);
+    const { pathname } = reactRouterDom.useLocation();
+    const route = pathname.split('#')[0];
     try {
         if (href && externalRegex.test(href)) {
             const baseURL = window.location.host;
@@ -172,15 +175,18 @@ const LinkComponent = ({ children, href, title }) => {
         const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
         const decodedUrl = decodeURIComponent(href);
         const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
-        const [pagePathWithoutHash] = window.location.pathname.split('#');
-        const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl ||
-            edge.uri === decodedResolvedUriWithoutAnchor ||
-            pagePathWithoutHash === `/${edge.slug}`);
+        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) {
-            return React__namespace.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
+            const slug = routerKind === 'hash' ? `#${route.replace(node.slug, edge.slug)}` : edge.slug;
+            return React__namespace.createElement(Link, { to: `${slug}${hash ? `#${hash}` : ''}` }, children);
         }
     }
-    return React__namespace.createElement("a", { href: href }, children);
+    const fullHref = routerKind === 'hash' ? `#${route}${href}` : href;
+    return React__namespace.createElement("a", { href: fullHref }, children);
 };
 function getBundledUrl(url) {
     if (url === undefined)
@@ -306,7 +312,7 @@ const UpgradeToStarter = () => (React.createElement(mosaic.Flex, { as: "a", href
     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.5.1';
+const appVersion = '3.0.0';
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -381,10 +387,10 @@ function useGetTableOfContents({ projectId, branchSlug }) {
     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, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+const StoplightProjectImpl = ({ projectId, collapseTableOfContents = false }) => {
     const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = reactRouterDom.useParams();
     const branchSlug = decodeURIComponent(encodedBranchSlug);
-    const history = reactRouterDom.useHistory();
+    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({
@@ -396,63 +402,73 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideSecurityInfo, hideServ
     if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
         const firstNode = elementsCore.findFirstNode(tableOfContents.items);
         if (firstNode) {
-            return React__namespace.createElement(reactRouterDom.Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
+            return React__namespace.createElement(reactRouterDom.Navigate, { to: branchSlug ? `branches/${branchSlug}/${firstNode.slug}` : `${firstNode.slug}`, replace: true });
         }
     }
-    let elem;
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (React__namespace.createElement(elementsCore.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) {
-        elem = React__namespace.createElement(Loading, null);
+        return React__namespace.createElement(Loading, null);
     }
-    else if (isError) {
+    if (isError) {
         if (nodeError instanceof ResponseError) {
             if (nodeError.code === 402) {
-                elem = React__namespace.createElement(UpgradeToStarter, null);
+                return React__namespace.createElement(UpgradeToStarter, null);
             }
             else if (nodeError.code === 403) {
-                elem = React__namespace.createElement(Forbidden, null);
+                return React__namespace.createElement(Forbidden, null);
             }
             else {
-                elem = React__namespace.createElement(NotFound, null);
+                return React__namespace.createElement(NotFound, null);
             }
         }
         else {
-            elem = React__namespace.createElement(NotFound, null);
+            return React__namespace.createElement(NotFound, null);
         }
     }
-    else if (!node) {
-        elem = React__namespace.createElement(NotFound, null);
+    if (!node) {
+        return 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}` });
+    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 });
     }
-    else {
-        elem = (React__namespace.createElement(NodeContent, { node: node, Link: elementsCore.ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    return (React__namespace.createElement(elementsCore.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));
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(elementsCore.ScrollToHashElement, null),
+        React__namespace.createElement(NodeContent, { node: node, Link: elementsCore.ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
 };
 const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
+    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'hash' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
     const { Router, routerProps } = elementsCore.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(elementsCore.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(elementsCore.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))))))));
+            React__namespace.createElement(InternalRoutes, null))));
 };
 const StoplightProject = elementsCore.withStyles(StoplightProjectRouter);

package/index.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
 import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
-import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, LinkHeading, 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, RouterTypeContext, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, findFirstNode, SidebarLayout, ScrollToHashElement, ReactRouterMarkdownLink } from '@stoplight/elements-core';
 import { resolve, dirname } from '@stoplight/path';
 import { NodeType } from '@stoplight/types';
+import { useLocation, useInRouterContext, Routes, Route, useParams, useNavigate, Navigate, Link, Outlet, useOutletContext } from 'react-router-dom';
 import flow from 'lodash/flow.js';
-import { Switch, Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
 import { useQuery } from 'react-query';
 const BranchSelector = ({ branchSlug, branches, onChange }) => {
@@ -125,6 +125,9 @@ const NodeLinkContext = React.createContext(undefined);
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
 const LinkComponent = ({ children, href, title }) => {
     const ctx = React.useContext(NodeLinkContext);
+    const routerKind = React.useContext(RouterTypeContext);
+    const { pathname } = useLocation();
+    const route = pathname.split('#')[0];
     try {
         if (href && externalRegex.test(href)) {
             const baseURL = window.location.host;
@@ -152,15 +155,18 @@ const LinkComponent = ({ children, href, title }) => {
         const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
         const decodedUrl = decodeURIComponent(href);
         const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
-        const [pagePathWithoutHash] = window.location.pathname.split('#');
-        const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl ||
-            edge.uri === decodedResolvedUriWithoutAnchor ||
-            pagePathWithoutHash === `/${edge.slug}`);
+        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) {
-            return React.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
+            const slug = routerKind === 'hash' ? `#${route.replace(node.slug, edge.slug)}` : edge.slug;
+            return React.createElement(Link, { to: `${slug}${hash ? `#${hash}` : ''}` }, children);
         }
     }
-    return React.createElement("a", { href: href }, children);
+    const fullHref = routerKind === 'hash' ? `#${route}${href}` : href;
+    return React.createElement("a", { href: fullHref }, children);
 };
 function getBundledUrl(url) {
     if (url === undefined)
@@ -286,7 +292,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
     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.5.1';
+const appVersion = '3.0.0';
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -361,10 +367,10 @@ function useGetTableOfContents({ projectId, branchSlug }) {
     return 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, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+const StoplightProjectImpl = ({ projectId, collapseTableOfContents = false }) => {
     const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
     const branchSlug = decodeURIComponent(encodedBranchSlug);
-    const history = useHistory();
+    const navigate = useNavigate();
     const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
     const { data: branches } = useGetBranches({ projectId });
     const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
@@ -376,63 +382,73 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideSecurityInfo, hideServ
     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}` });
+            return React.createElement(Navigate, { to: branchSlug ? `branches/${branchSlug}/${firstNode.slug}` : `${firstNode.slug}`, replace: true });
         }
     }
-    let elem;
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
+            branches && branches.items.length > 1 ? (React.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.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) },
+        React.createElement(Outlet, { context: [isLoadingNode, isTocFetched, isError, nodeError, node] })));
+};
+const ProjectNode = ({ hideTryIt, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
+    const branchSlug = decodeURIComponent(encodedBranchSlug);
+    const [isLoadingNode, isTocFetched, isError, nodeError, node] = useOutletContext();
     if (isLoadingNode || !isTocFetched) {
-        elem = React.createElement(Loading, null);
+        return React.createElement(Loading, null);
     }
-    else if (isError) {
+    if (isError) {
         if (nodeError instanceof ResponseError) {
             if (nodeError.code === 402) {
-                elem = React.createElement(UpgradeToStarter, null);
+                return React.createElement(UpgradeToStarter, null);
             }
             else if (nodeError.code === 403) {
-                elem = React.createElement(Forbidden, null);
+                return React.createElement(Forbidden, null);
             }
             else {
-                elem = React.createElement(NotFound, null);
+                return React.createElement(NotFound, null);
             }
         }
         else {
-            elem = React.createElement(NotFound, null);
+            return 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}` });
+    if (!node) {
+        return React.createElement(NotFound, null);
     }
-    else {
-        elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
+    if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
+        return React.createElement(Navigate, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}`, replace: true });
     }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
-            branches && branches.items.length > 1 ? (React.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.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));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScrollToHashElement, null),
+        React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
 };
 const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
+    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'hash' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
     const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
+    const outerRouter = useInRouterContext();
+    const InternalRoutes = () => (React.createElement(Routes, null,
+        React.createElement(Route, { path: "/", element: React.createElement(StoplightProjectImpl, Object.assign({}, props)) },
+            React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug/*", element: React.createElement(ProjectNode, Object.assign({}, props)) }),
+            React.createElement(Route, { path: "/:nodeSlug/*", element: React.createElement(ProjectNode, Object.assign({}, props)) }),
+            React.createElement(Route, { element: React.createElement(ProjectNode, Object.assign({}, props)) }))));
+    if (!outerRouter) {
+        return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
+            React.createElement(RouterTypeContext.Provider, { value: router },
+                React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                    React.createElement(InternalRoutes, null)))));
+    }
     return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
         React.createElement(RouterTypeContext.Provider, { value: router },
-            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React.createElement(Switch, null,
-                    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))))))));
+            React.createElement(InternalRoutes, null))));
 };
 const StoplightProject = withStyles(StoplightProjectRouter);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "2.5.1",
+  "version": "3.0.0",
   "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.5.1",
+    "@stoplight/elements-core": "~9.0.0",
     "@stoplight/markdown-viewer": "^5.7.1",
     "@stoplight/mosaic": "^1.53.4",
     "@stoplight/path": "^1.3.2",
@@ -34,7 +34,7 @@
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
     "react-query": "^3.34.19",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.28.0",
     "use-debounce": "^6.0.1"
   },
   "type": "commonjs",

package/version.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const appVersion = "2.5.1";
1	+ export declare const appVersion = "3.0.0";