@stoplight/elements 8.5.1 → 9.0.0

package/components/API/APIWithResponsiveSidebarLayout.d.ts

@@ -18,6 +18,8 @@ declare type SidebarLayoutProps = {
     tryItCorsProxy?: string;
     compact?: number | boolean;
     renderExtensionAddon?: ExtensionAddonRenderer;
+    basePath?: string;
+    outerRouter?: boolean;
 };
 export declare const APIWithResponsiveSidebarLayout: React.FC<SidebarLayoutProps>;
 export {};

package/components/API/APIWithSidebarLayout.d.ts

@@ -17,6 +17,8 @@ declare type SidebarLayoutProps = {
     tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
     tryItCorsProxy?: string;
     renderExtensionAddon?: ExtensionAddonRenderer;
+    basePath?: string;
+    outerRouter?: boolean;
 };
 export declare const APIWithSidebarLayout: React.FC<SidebarLayoutProps>;
 declare type SidebarProps = {

package/components/API/utils.d.ts

@@ -16,4 +16,5 @@ interface ComputeAPITreeConfig {
 export declare const computeAPITree: (serviceNode: ServiceNode, config?: ComputeAPITreeConfig) => TableOfContentsItem[];
 export declare const findFirstNodeSlug: (tree: TableOfContentsItem[]) => string | void;
 export declare const isInternal: (node: ServiceChildNode | ServiceNode) => boolean;
+export declare const resolveRelativePath: (currentPath: string, basePath: string, outerRouter: boolean) => string;
 export {};

package/containers/API.d.ts

@@ -24,6 +24,7 @@ export interface CommonAPIProps extends RoutingProps {
     tryItCorsProxy?: string;
     maxRefDepth?: number;
     renderExtensionAddon?: ExtensionAddonRenderer;
+    outerRouter?: boolean;
 }
 export declare const APIImpl: React.FC<APIProps>;
 export declare const API: React.FC<APIProps>;

package/containers/API.spec.d.ts

@@ -1,3 +1 @@
 import '@testing-library/jest-dom';
-import * as React from 'react';
-export declare const APIWithoutRouter: React.FC<import("./API").APIProps>;

package/index.esm.js

@@ -1,4 +1,4 @@
-import { isHttpOperation, isHttpWebhookOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, ResponsiveSidebarLayout, ElementsOptionsProvider, SidebarLayout, Logo, TableOfContents, PoweredByLink, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useResponsiveLayout, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
+import { isHttpOperation, isHttpWebhookOperation, isHttpService, resolveUrl, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, resolveRelativeLink, ResponsiveSidebarLayout, ElementsOptionsProvider, SidebarLayout, Logo, TableOfContents, PoweredByLink, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useResponsiveLayout, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
 import { Box, Flex, Icon, Tabs, TabList, Tab, TabPanels, TabPanel, Heading } from '@stoplight/mosaic';
 import { NodeType } from '@stoplight/types';
 import cn from 'classnames';
@@ -6,7 +6,7 @@ import * as React from 'react';
 import defaults from 'lodash/defaults.js';
 import flow from 'lodash/flow.js';
 import { useQuery } from 'react-query';
-import { useLocation, Redirect, Link } from 'react-router-dom';
+import { useLocation, Navigate, Link } from 'react-router-dom';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
 import { OPERATION_CONFIG, WEBHOOK_CONFIG } from '@stoplight/http-spec/oas';
@@ -160,6 +160,14 @@ const addTagGroupsToTree = (groups, ungrouped, tree, itemsType, hideInternal) =>
         }
     });
 };
+const resolveRelativePath = (currentPath, basePath, outerRouter) => {
+    if (!outerRouter || !basePath || basePath === '/') {
+        return currentPath;
+    }
+    const baseUrl = resolveUrl(basePath);
+    const currentUrl = resolveUrl(currentPath);
+    return baseUrl && currentUrl && baseUrl !== currentUrl ? currentUrl.replace(baseUrl, '') : '/';
+};
 
 const itemMatchesHash = (hash, item) => {
     if (item.type === NodeType.HttpOperation) {
@@ -270,13 +278,14 @@ const Collapse = ({ isOpen, children }) => {
 };
 Collapse.displayName = 'Collapse';
 
-const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, compact, hideSchemas, hideInternal, hideExport, hideServerInfo, hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, compact, hideSchemas, hideInternal, hideExport, hideServerInfo, hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, basePath = '/', outerRouter = false, }) => {
     const container = React.useRef(null);
     const tree = React.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
     const location = useLocation();
-    const { pathname } = location;
-    const isRootPath = !pathname || pathname === '/';
-    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    const { pathname: currentPath } = location;
+    const relativePath = resolveRelativePath(currentPath, basePath, outerRouter);
+    const isRootPath = relativePath === '/';
+    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === relativePath);
     const layoutOptions = React.useMemo(() => ({
         hideTryIt: hideTryIt,
         hideTryItPanel,
@@ -289,11 +298,11 @@ const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hid
     if (!node) {
         const firstSlug = findFirstNodeSlug(tree);
         if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
+            return React.createElement(Navigate, { to: resolveRelativeLink(firstSlug), replace: true });
         }
     }
     if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
+        return React.createElement(Navigate, { to: ".", replace: true });
     }
     const handleTocClick = () => {
         if (container.current) {
@@ -301,16 +310,17 @@ const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hid
         }
     };
     return (React.createElement(ResponsiveSidebarLayout, { onTocClick: handleTocClick, tree: tree, logo: logo !== null && logo !== void 0 ? logo : serviceNode.data.logo, ref: container, name: serviceNode.name }, node && (React.createElement(ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
-        React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
+        React.createElement(ParsedDocs, { key: relativePath, uri: relativePath, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, hideSchemas, hideSecurityInfo, hideServerInfo, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, hideSchemas, hideSecurityInfo, hideServerInfo, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, basePath = '/', outerRouter = false, }) => {
     const container = React.useRef(null);
     const tree = React.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
     const location = useLocation();
-    const { pathname } = location;
-    const isRootPath = !pathname || pathname === '/';
-    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    const { pathname: currentPath } = location;
+    const relativePath = resolveRelativePath(currentPath, basePath, outerRouter);
+    const isRootPath = relativePath === '/';
+    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === relativePath);
     const layoutOptions = React.useMemo(() => ({
         hideTryIt: hideTryIt,
         hideTryItPanel,
@@ -322,15 +332,15 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hi
     if (!node) {
         const firstSlug = findFirstNodeSlug(tree);
         if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
+            return React.createElement(Navigate, { to: resolveRelativeLink(firstSlug), replace: true });
         }
     }
     if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
+        return React.createElement(Navigate, { to: ".", replace: true });
     }
-    const sidebar = (React.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: pathname, tree: tree }));
+    const sidebar = (React.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: relativePath, tree: tree }));
     return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
-        React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
+        React.createElement(ParsedDocs, { key: relativePath, uri: relativePath, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 const Sidebar = ({ serviceNode, logo, container, pathname, tree }) => {
     const handleTocClick = () => {
@@ -608,7 +618,7 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryItPanel, hideTryIt, hideSamples, hideSecurityInfo, hideServerInfo, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, } = props;
+    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryItPanel, hideTryIt, hideSamples, hideSecurityInfo, hideServerInfo, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, basePath, outerRouter = false, } = props;
     const location = useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { isResponsiveLayoutEnabled } = useResponsiveLayout();
@@ -639,8 +649,8 @@ const APIImpl = props => {
     }
     return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth },
         layout === 'stacked' && (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideSamples: hideSamples, hideTryItPanel: hideTryItPanel, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, location: location })),
-        layout === 'sidebar' && (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })),
-        layout === 'responsive' && (React.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled }))));
+        layout === 'sidebar' && (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, basePath: basePath, outerRouter: outerRouter })),
+        layout === 'responsive' && (React.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled, basePath: basePath, outerRouter: outerRouter }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 

package/index.js

@@ -181,6 +181,14 @@ const addTagGroupsToTree = (groups, ungrouped, tree, itemsType, hideInternal) =>
         }
     });
 };
+const resolveRelativePath = (currentPath, basePath, outerRouter) => {
+    if (!outerRouter || !basePath || basePath === '/') {
+        return currentPath;
+    }
+    const baseUrl = elementsCore.resolveUrl(basePath);
+    const currentUrl = elementsCore.resolveUrl(currentPath);
+    return baseUrl && currentUrl && baseUrl !== currentUrl ? currentUrl.replace(baseUrl, '') : '/';
+};
 
 const itemMatchesHash = (hash, item) => {
     if (item.type === types.NodeType.HttpOperation) {
@@ -291,13 +299,14 @@ const Collapse = ({ isOpen, children }) => {
 };
 Collapse.displayName = 'Collapse';
 
-const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, compact, hideSchemas, hideInternal, hideExport, hideServerInfo, hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, compact, hideSchemas, hideInternal, hideExport, hideServerInfo, hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, basePath = '/', outerRouter = false, }) => {
     const container = React__namespace.useRef(null);
     const tree = React__namespace.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
     const location = reactRouterDom.useLocation();
-    const { pathname } = location;
-    const isRootPath = !pathname || pathname === '/';
-    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    const { pathname: currentPath } = location;
+    const relativePath = resolveRelativePath(currentPath, basePath, outerRouter);
+    const isRootPath = relativePath === '/';
+    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === relativePath);
     const layoutOptions = React__namespace.useMemo(() => ({
         hideTryIt: hideTryIt,
         hideTryItPanel,
@@ -310,11 +319,11 @@ const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hid
     if (!node) {
         const firstSlug = findFirstNodeSlug(tree);
         if (firstSlug) {
-            return React__namespace.createElement(reactRouterDom.Redirect, { to: firstSlug });
+            return React__namespace.createElement(reactRouterDom.Navigate, { to: elementsCore.resolveRelativeLink(firstSlug), replace: true });
         }
     }
     if (hideInternal && node && isInternal(node)) {
-        return React__namespace.createElement(reactRouterDom.Redirect, { to: "/" });
+        return React__namespace.createElement(reactRouterDom.Navigate, { to: ".", replace: true });
     }
     const handleTocClick = () => {
         if (container.current) {
@@ -322,16 +331,17 @@ const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hid
         }
     };
     return (React__namespace.createElement(elementsCore.ResponsiveSidebarLayout, { onTocClick: handleTocClick, tree: tree, logo: logo !== null && logo !== void 0 ? logo : serviceNode.data.logo, ref: container, name: serviceNode.name }, node && (React__namespace.createElement(elementsCore.ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
-        React__namespace.createElement(elementsCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
+        React__namespace.createElement(elementsCore.ParsedDocs, { key: relativePath, uri: relativePath, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, hideSchemas, hideSecurityInfo, hideServerInfo, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, hideSchemas, hideSecurityInfo, hideServerInfo, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, basePath = '/', outerRouter = false, }) => {
     const container = React__namespace.useRef(null);
     const tree = React__namespace.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
     const location = reactRouterDom.useLocation();
-    const { pathname } = location;
-    const isRootPath = !pathname || pathname === '/';
-    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    const { pathname: currentPath } = location;
+    const relativePath = resolveRelativePath(currentPath, basePath, outerRouter);
+    const isRootPath = relativePath === '/';
+    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === relativePath);
     const layoutOptions = React__namespace.useMemo(() => ({
         hideTryIt: hideTryIt,
         hideTryItPanel,
@@ -343,15 +353,15 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hi
     if (!node) {
         const firstSlug = findFirstNodeSlug(tree);
         if (firstSlug) {
-            return React__namespace.createElement(reactRouterDom.Redirect, { to: firstSlug });
+            return React__namespace.createElement(reactRouterDom.Navigate, { to: elementsCore.resolveRelativeLink(firstSlug), replace: true });
         }
     }
     if (hideInternal && node && isInternal(node)) {
-        return React__namespace.createElement(reactRouterDom.Redirect, { to: "/" });
+        return React__namespace.createElement(reactRouterDom.Navigate, { to: ".", replace: true });
     }
-    const sidebar = (React__namespace.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: pathname, tree: tree }));
+    const sidebar = (React__namespace.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: relativePath, tree: tree }));
     return (React__namespace.createElement(elementsCore.SidebarLayout, { ref: container, sidebar: sidebar }, node && (React__namespace.createElement(elementsCore.ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
-        React__namespace.createElement(elementsCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
+        React__namespace.createElement(elementsCore.ParsedDocs, { key: relativePath, uri: relativePath, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 const Sidebar = ({ serviceNode, logo, container, pathname, tree }) => {
     const handleTocClick = () => {
@@ -629,7 +639,7 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryItPanel, hideTryIt, hideSamples, hideSecurityInfo, hideServerInfo, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, } = props;
+    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryItPanel, hideTryIt, hideSamples, hideSecurityInfo, hideServerInfo, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, basePath, outerRouter = false, } = props;
     const location = reactRouterDom.useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { isResponsiveLayoutEnabled } = elementsCore.useResponsiveLayout();
@@ -660,8 +670,8 @@ const APIImpl = props => {
     }
     return (React__namespace.createElement(elementsCore.InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth },
         layout === 'stacked' && (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideSamples: hideSamples, hideTryItPanel: hideTryItPanel, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, location: location })),
-        layout === 'sidebar' && (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })),
-        layout === 'responsive' && (React__namespace.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled }))));
+        layout === 'sidebar' && (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, basePath: basePath, outerRouter: outerRouter })),
+        layout === 'responsive' && (React__namespace.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled, basePath: basePath, outerRouter: outerRouter }))));
 };
 const API = flow(elementsCore.withRouter, elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(APIImpl);
 

package/index.mjs

@@ -1,4 +1,4 @@
-import { isHttpOperation, isHttpWebhookOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, ResponsiveSidebarLayout, ElementsOptionsProvider, SidebarLayout, Logo, TableOfContents, PoweredByLink, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useResponsiveLayout, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
+import { isHttpOperation, isHttpWebhookOperation, isHttpService, resolveUrl, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, resolveRelativeLink, ResponsiveSidebarLayout, ElementsOptionsProvider, SidebarLayout, Logo, TableOfContents, PoweredByLink, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useResponsiveLayout, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
 import { Box, Flex, Icon, Tabs, TabList, Tab, TabPanels, TabPanel, Heading } from '@stoplight/mosaic';
 import { NodeType } from '@stoplight/types';
 import cn from 'classnames';
@@ -6,7 +6,7 @@ import * as React from 'react';
 import defaults from 'lodash/defaults.js';
 import flow from 'lodash/flow.js';
 import { useQuery } from 'react-query';
-import { useLocation, Redirect, Link } from 'react-router-dom';
+import { useLocation, Navigate, Link } from 'react-router-dom';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
 import { OPERATION_CONFIG, WEBHOOK_CONFIG } from '@stoplight/http-spec/oas';
@@ -160,6 +160,14 @@ const addTagGroupsToTree = (groups, ungrouped, tree, itemsType, hideInternal) =>
         }
     });
 };
+const resolveRelativePath = (currentPath, basePath, outerRouter) => {
+    if (!outerRouter || !basePath || basePath === '/') {
+        return currentPath;
+    }
+    const baseUrl = resolveUrl(basePath);
+    const currentUrl = resolveUrl(currentPath);
+    return baseUrl && currentUrl && baseUrl !== currentUrl ? currentUrl.replace(baseUrl, '') : '/';
+};
 
 const itemMatchesHash = (hash, item) => {
     if (item.type === NodeType.HttpOperation) {
@@ -270,13 +278,14 @@ const Collapse = ({ isOpen, children }) => {
 };
 Collapse.displayName = 'Collapse';
 
-const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, compact, hideSchemas, hideInternal, hideExport, hideServerInfo, hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, compact, hideSchemas, hideInternal, hideExport, hideServerInfo, hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, basePath = '/', outerRouter = false, }) => {
     const container = React.useRef(null);
     const tree = React.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
     const location = useLocation();
-    const { pathname } = location;
-    const isRootPath = !pathname || pathname === '/';
-    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    const { pathname: currentPath } = location;
+    const relativePath = resolveRelativePath(currentPath, basePath, outerRouter);
+    const isRootPath = relativePath === '/';
+    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === relativePath);
     const layoutOptions = React.useMemo(() => ({
         hideTryIt: hideTryIt,
         hideTryItPanel,
@@ -289,11 +298,11 @@ const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hid
     if (!node) {
         const firstSlug = findFirstNodeSlug(tree);
         if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
+            return React.createElement(Navigate, { to: resolveRelativeLink(firstSlug), replace: true });
         }
     }
     if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
+        return React.createElement(Navigate, { to: ".", replace: true });
     }
     const handleTocClick = () => {
         if (container.current) {
@@ -301,16 +310,17 @@ const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hid
         }
     };
     return (React.createElement(ResponsiveSidebarLayout, { onTocClick: handleTocClick, tree: tree, logo: logo !== null && logo !== void 0 ? logo : serviceNode.data.logo, ref: container, name: serviceNode.name }, node && (React.createElement(ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
-        React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
+        React.createElement(ParsedDocs, { key: relativePath, uri: relativePath, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, hideSchemas, hideSecurityInfo, hideServerInfo, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hideSamples, hideSchemas, hideSecurityInfo, hideServerInfo, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, basePath = '/', outerRouter = false, }) => {
     const container = React.useRef(null);
     const tree = React.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
     const location = useLocation();
-    const { pathname } = location;
-    const isRootPath = !pathname || pathname === '/';
-    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    const { pathname: currentPath } = location;
+    const relativePath = resolveRelativePath(currentPath, basePath, outerRouter);
+    const isRootPath = relativePath === '/';
+    const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === relativePath);
     const layoutOptions = React.useMemo(() => ({
         hideTryIt: hideTryIt,
         hideTryItPanel,
@@ -322,15 +332,15 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryItPanel, hideTryIt, hi
     if (!node) {
         const firstSlug = findFirstNodeSlug(tree);
         if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
+            return React.createElement(Navigate, { to: resolveRelativeLink(firstSlug), replace: true });
         }
     }
     if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
+        return React.createElement(Navigate, { to: ".", replace: true });
     }
-    const sidebar = (React.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: pathname, tree: tree }));
+    const sidebar = (React.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: relativePath, tree: tree }));
     return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
-        React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
+        React.createElement(ParsedDocs, { key: relativePath, uri: relativePath, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 const Sidebar = ({ serviceNode, logo, container, pathname, tree }) => {
     const handleTocClick = () => {
@@ -608,7 +618,7 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryItPanel, hideTryIt, hideSamples, hideSecurityInfo, hideServerInfo, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, } = props;
+    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryItPanel, hideTryIt, hideSamples, hideSecurityInfo, hideServerInfo, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, basePath, outerRouter = false, } = props;
     const location = useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { isResponsiveLayoutEnabled } = useResponsiveLayout();
@@ -639,8 +649,8 @@ const APIImpl = props => {
     }
     return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth },
         layout === 'stacked' && (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideSamples: hideSamples, hideTryItPanel: hideTryItPanel, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, location: location })),
-        layout === 'sidebar' && (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })),
-        layout === 'responsive' && (React.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled }))));
+        layout === 'sidebar' && (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, basePath: basePath, outerRouter: outerRouter })),
+        layout === 'responsive' && (React.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryItPanel: hideTryItPanel, hideTryIt: hideTryIt, hideSamples: hideSamples, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled, basePath: basePath, outerRouter: outerRouter }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "8.5.1",
+  "version": "9.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/http-spec": "^7.1.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.53.4",
@@ -36,7 +36,7 @@
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "react-query": "^3.34.19",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^6.28.0"
   },
   "type": "commonjs",
   "exports": {