@stoplight/elements-core 8.5.1 → 9.0.0

package/components/MarkdownViewer/CustomComponents/ScrollToHashElement.d.ts

@@ -0,0 +1,8 @@
+interface ScrollToHashElementProps {
+    initialBehavior?: ScrollBehavior;
+    behavior?: ScrollBehavior;
+    inline?: ScrollLogicalPosition;
+    block?: ScrollLogicalPosition;
+}
+export declare const ScrollToHashElement: ({ behavior, initialBehavior, inline, block, }: ScrollToHashElementProps) => null;
+export {};

package/hoc/withRouter.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
 import { RoutingProps } from '../types';
-export declare function withRouter<P extends RoutingProps>(WrappedComponent: React.ComponentType<P>): React.FC<P>;
+export declare function withRouter<P extends RoutingProps>(WrappedComponent: React.ComponentType<P & {
+    outerRouter?: boolean;
+}>): React.FC<P>;

package/index.d.ts

@@ -8,6 +8,7 @@ export { Logo } from './components/Logo';
 export { DefaultSMDComponents } from './components/MarkdownViewer/CustomComponents/CodeComponent';
 export { CustomComponentMapping, MarkdownComponentsProvider, } from './components/MarkdownViewer/CustomComponents/Provider';
 export { ReactRouterMarkdownLink } from './components/MarkdownViewer/CustomComponents/ReactRouterLink';
+export { ScrollToHashElement } from './components/MarkdownViewer/CustomComponents/ScrollToHashElement';
 export { NonIdealState } from './components/NonIdealState';
 export { PoweredByLink } from './components/PoweredByLink';
 export { TableOfContents } from './components/TableOfContents';
@@ -33,5 +34,6 @@ export { Divider, Group, ITableOfContentsTree, Item, ParsedNode, RoutingProps, T
 export { isHttpOperation, isHttpService, isHttpWebhookOperation } from './utils/guards';
 export { ReferenceResolver } from './utils/ref-resolving/ReferenceResolver';
 export { createResolvedObject } from './utils/ref-resolving/resolvedObject';
-export { slugify } from './utils/string';
+export { slugify, resolveRelativeLink } from './utils/string';
 export { createElementClass } from './web-components/createElementClass';
+export { resolveUrl } from './utils/http-spec/IServer';

package/index.esm.js

@@ -1,6 +1,6 @@
 import { __rest, __awaiter } from 'tslib';
 import * as React from 'react';
-import React__default, { useContext, memo, useMemo, useState, useEffect } from 'react';
+import React__default, { useContext, memo, useMemo, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
 import { resolveInlineRef, hasRef, isPlainObject as isPlainObject$1, safeParse, safeStringify } from '@stoplight/json';
 import isArray from 'lodash/isArray.js';
@@ -10,7 +10,7 @@ import { parse } from '@stoplight/yaml';
 import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Callout, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, Drawer, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
+import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, useInRouterContext, Routes, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -51,8 +51,8 @@ import keys from 'lodash/keys.js';
 import sortBy from 'lodash/sortBy.js';
 import isNil from 'lodash/isNil.js';
 import omitBy from 'lodash/omitBy.js';
-import { HashLink } from 'react-router-hash-link';
 import { QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
+import { StaticRouter } from 'react-router-dom/server.js';
 import $RefParser from '@stoplight/json-schema-ref-parser';
 import * as PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual.js';
@@ -1105,6 +1105,9 @@ function slugify(name) {
         .replace(/^-/, '')
         .replace(/-$/, '');
 }
+const resolveRelativeLink = (slug) => {
+    return slug ? slug.replace(/^\//, '') : '.';
+};
 
 const isApiKeySecurityScheme = (maybeIApiKey) => isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
 const isOAuth2SecurityScheme = (maybeIOAuth2) => isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
@@ -3501,7 +3504,6 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();
-    const makeSlugAbsoluteRoute = useRouterType() == 'hash';
     React.useEffect(() => {
         setTimeout(() => {
             const scrollPosition = firstRender ? 'center' : 'nearest';
@@ -3522,7 +3524,7 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
                     if (isDivider(item)) {
                         return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
                     }
-                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
                 }))))));
 });
 TableOfContents.displayName = 'TableOfContents';
@@ -3530,23 +3532,23 @@ const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
     return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
 Divider.displayName = 'Divider';
-const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
+const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
             React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
     }
     else if (isGroup(item) || isNodeGroup(item)) {
-        return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+        return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else if (isNode(item)) {
-        return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
+        return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
                 item.version && React.createElement(Version, { value: item.version }),
                 item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
     }
     return null;
 });
 GroupItem.displayName = 'GroupItem';
-const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
+const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
     const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3574,7 +3576,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
     const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else {
         elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: item.itemsType &&
@@ -3584,7 +3586,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
         elem,
         isOpen &&
             item.items.map((groupItem, key) => {
-                return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+                return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
             })));
 });
 Group.displayName = 'Group';
@@ -3598,7 +3600,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
         React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
 Item.displayName = 'Item';
-const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
+const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
@@ -3614,7 +3616,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             onClick(e, isActive ? undefined : true);
         }
     };
-    return (React.createElement(Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
+    return (React.createElement(Box, { as: LinkComponent, to: resolveRelativeLink(item.slug), display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
         React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
 Node.displayName = 'Node';
@@ -3638,7 +3640,8 @@ const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
             React.createElement(Flex, { justifyContent: "end" },
                 React.createElement(Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
                     React.createElement(Icon, { size: "lg", icon: faX }))),
-            React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: () => handleTocClick(), isInResponsiveMode: true }))));
+            React.createElement(Box, { tabIndex: -1 },
+                React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: handleTocClick, isInResponsiveMode: true })))));
 };
 const NavHeading = ({ heading }) => (React.createElement(Flex, { flex: 1, "data-test": "mobile-project-top-nav", style: { minWidth: 0 } },
     React.createElement(Box, { fontSize: "xl", fontWeight: "semibold", whitespace: "nowrap", textOverflow: "overflow-ellipsis", overflowX: "hidden", overflowY: "hidden", w: "full", textAlign: "center" }, heading)));
@@ -3878,7 +3881,66 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
     if (isExternal) {
         return (React__default.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
     }
-    return (React__default.createElement(HashLink, { to: href, title: title }, children));
+    return (React__default.createElement("a", { href: href, title: title }, children));
+};
+
+const ScrollToHashElement = ({ behavior = 'auto', initialBehavior = 'auto', inline = 'nearest', block = 'start', }) => {
+    const [hash, setHash] = useState(window.location.hash);
+    const [count, setCount] = useState(0);
+    const originalListeners = useRef({});
+    const [firstRun, setFirstRun] = useState(true);
+    useEffect(() => setFirstRun(false), []);
+    useEffect(() => {
+        const handleLocationChange = () => {
+            setHash(window.location.hash);
+            setCount((count) => count + 1);
+        };
+        const onPopState = () => {
+            window.dispatchEvent(new Event('locationchange'));
+        };
+        const addWindowListeners = () => {
+            originalListeners.current.pushState = window.history.pushState;
+            originalListeners.current.replaceState = window.history.replaceState;
+            window.history.pushState = function (...args) {
+                const result = originalListeners.current.pushState.apply(this, args);
+                window.dispatchEvent(new Event('pushstate'));
+                window.dispatchEvent(new Event('locationchange'));
+                return result;
+            };
+            window.history.replaceState = function (...args) {
+                const result = originalListeners.current.replaceState.apply(this, args);
+                window.dispatchEvent(new Event('replacestate'));
+                window.dispatchEvent(new Event('locationchange'));
+                return result;
+            };
+            window.addEventListener('popstate', onPopState);
+            window.addEventListener('locationchange', handleLocationChange);
+        };
+        const removeWindowListeners = () => {
+            window.history.pushState = originalListeners.current.pushState;
+            window.history.replaceState = originalListeners.current.replaceState;
+            window.removeEventListener('popstate', onPopState);
+            window.removeEventListener('locationchange', handleLocationChange);
+        };
+        addWindowListeners();
+        return removeWindowListeners;
+    }, []);
+    useLayoutEffect(() => {
+        const removeHashCharacter = (str) => {
+            return str.slice(1);
+        };
+        if (hash) {
+            const element = document.getElementById(removeHashCharacter(hash));
+            if (element) {
+                element.scrollIntoView({
+                    behavior: firstRun ? initialBehavior : behavior,
+                    inline: inline,
+                    block: block,
+                });
+            }
+        }
+    }, [hash, count, firstRun]);
+    return null;
 };
 
 const NonIdealState = ({ description, icon, title }) => {
@@ -3958,18 +4020,29 @@ const components = {
         return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
     },
 };
+const InternalRoutes = ({ children }) => {
+    return (React.createElement(Routes, null,
+        React.createElement(Route, { path: "/*", element: React.createElement(MarkdownComponentsProvider, { value: components },
+                React.createElement(ScrollToHashElement, null),
+                children) })));
+};
 function withRouter(WrappedComponent) {
     const WithRouter = (props) => {
         var _a, _b, _c;
+        const outerRouter = useInRouterContext();
         const basePath = (_a = props.basePath) !== null && _a !== void 0 ? _a : '/';
         const staticRouterPath = (_b = props.staticRouterPath) !== null && _b !== void 0 ? _b : '';
         const routerType = (_c = props.router) !== null && _c !== void 0 ? _c : 'history';
         const { Router, routerProps } = useRouter(routerType, basePath, staticRouterPath);
+        if (!outerRouter) {
+            return (React.createElement(RouterTypeContext.Provider, { value: routerType },
+                React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                    React.createElement(InternalRoutes, null,
+                        React.createElement(WrappedComponent, Object.assign({}, props, { outerRouter: false }))))));
+        }
         return (React.createElement(RouterTypeContext.Provider, { value: routerType },
-            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React.createElement(Route, { path: "/" },
-                    React.createElement(MarkdownComponentsProvider, { value: components },
-                        React.createElement(WrappedComponent, Object.assign({}, props)))))));
+            React.createElement(InternalRoutes, null,
+                React.createElement(WrappedComponent, Object.assign({}, props, { outerRouter: true })))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;
     return WithRouter;
@@ -4139,4 +4212,4 @@ const createElementClass = (Component, propDescriptors) => {
     };
 };
 
-export { DeprecatedBadge, Docs, ElementsOptionsProvider, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };
+export { DeprecatedBadge, Docs, ElementsOptionsProvider, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, ScrollToHashElement, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, resolveRelativeLink, resolveUrl, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };

package/index.js

@@ -51,8 +51,8 @@ var keys = require('lodash/keys.js');
 var sortBy = require('lodash/sortBy.js');
 var isNil = require('lodash/isNil.js');
 var omitBy = require('lodash/omitBy.js');
-var reactRouterHashLink = require('react-router-hash-link');
 var reactQuery = require('react-query');
+var server_js = require('react-router-dom/server.js');
 var $RefParser = require('@stoplight/json-schema-ref-parser');
 var PropTypes = require('prop-types');
 var isEqual = require('lodash/isEqual.js');
@@ -1127,6 +1127,9 @@ function slugify(name) {
         .replace(/^-/, '')
         .replace(/-$/, '');
 }
+const resolveRelativeLink = (slug) => {
+    return slug ? slug.replace(/^\//, '') : '.';
+};
 
 const isApiKeySecurityScheme = (maybeIApiKey) => isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
 const isOAuth2SecurityScheme = (maybeIOAuth2) => isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
@@ -3523,7 +3526,6 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
     const container = React__namespace.useRef(null);
     const child = React__namespace.useRef(null);
     const firstRender = useFirstRender();
-    const makeSlugAbsoluteRoute = useRouterType() == 'hash';
     React__namespace.useEffect(() => {
         setTimeout(() => {
             const scrollPosition = firstRender ? 'center' : 'nearest';
@@ -3544,7 +3546,7 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
                     if (isDivider(item)) {
                         return React__namespace.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
                     }
-                    return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+                    return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
                 }))))));
 });
 TableOfContents.displayName = 'TableOfContents';
@@ -3552,23 +3554,23 @@ const Divider = React__namespace.memo(({ item, isInResponsiveMode = false }) =>
     return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
 Divider.displayName = 'Divider';
-const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
+const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React__namespace.createElement(mosaic.Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
             React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'external-link'] }) })));
     }
     else if (isGroup(item) || isNodeGroup(item)) {
-        return (React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+        return (React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else if (isNode(item)) {
-        return (React__namespace.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
+        return (React__namespace.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
                 item.version && React__namespace.createElement(Version, { value: item.version }),
                 item.type !== 'model' && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
     }
     return null;
 });
 GroupItem.displayName = 'GroupItem';
-const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
+const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React__namespace.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
     const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3596,7 +3598,7 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInR
     const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+        elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else {
         elem = (React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: item.itemsType &&
@@ -3606,7 +3608,7 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInR
         elem,
         isOpen &&
             item.items.map((groupItem, key) => {
-                return (React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+                return (React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
             })));
 });
 Group.displayName = 'Group';
@@ -3620,7 +3622,7 @@ const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, is
         React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
 Item.displayName = 'Item';
-const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
+const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React__namespace.useContext(LinkContext);
@@ -3636,7 +3638,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInRespo
             onClick(e, isActive ? undefined : true);
         }
     };
-    return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
+    return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: resolveRelativeLink(item.slug), display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
         React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
 Node.displayName = 'Node';
@@ -3660,7 +3662,8 @@ const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
             React__namespace.createElement(mosaic.Flex, { justifyContent: "end" },
                 React__namespace.createElement(mosaic.Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
                     React__namespace.createElement(mosaic.Icon, { size: "lg", icon: faX }))),
-            React__namespace.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: () => handleTocClick(), isInResponsiveMode: true }))));
+            React__namespace.createElement(mosaic.Box, { tabIndex: -1 },
+                React__namespace.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: handleTocClick, isInResponsiveMode: true })))));
 };
 const NavHeading = ({ heading }) => (React__namespace.createElement(mosaic.Flex, { flex: 1, "data-test": "mobile-project-top-nav", style: { minWidth: 0 } },
     React__namespace.createElement(mosaic.Box, { fontSize: "xl", fontWeight: "semibold", whitespace: "nowrap", textOverflow: "overflow-ellipsis", overflowX: "hidden", overflowY: "hidden", w: "full", textAlign: "center" }, heading)));
@@ -3900,7 +3903,66 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
     if (isExternal) {
         return (React.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
     }
-    return (React.createElement(reactRouterHashLink.HashLink, { to: href, title: title }, children));
+    return (React.createElement("a", { href: href, title: title }, children));
+};
+
+const ScrollToHashElement = ({ behavior = 'auto', initialBehavior = 'auto', inline = 'nearest', block = 'start', }) => {
+    const [hash, setHash] = React.useState(window.location.hash);
+    const [count, setCount] = React.useState(0);
+    const originalListeners = React.useRef({});
+    const [firstRun, setFirstRun] = React.useState(true);
+    React.useEffect(() => setFirstRun(false), []);
+    React.useEffect(() => {
+        const handleLocationChange = () => {
+            setHash(window.location.hash);
+            setCount((count) => count + 1);
+        };
+        const onPopState = () => {
+            window.dispatchEvent(new Event('locationchange'));
+        };
+        const addWindowListeners = () => {
+            originalListeners.current.pushState = window.history.pushState;
+            originalListeners.current.replaceState = window.history.replaceState;
+            window.history.pushState = function (...args) {
+                const result = originalListeners.current.pushState.apply(this, args);
+                window.dispatchEvent(new Event('pushstate'));
+                window.dispatchEvent(new Event('locationchange'));
+                return result;
+            };
+            window.history.replaceState = function (...args) {
+                const result = originalListeners.current.replaceState.apply(this, args);
+                window.dispatchEvent(new Event('replacestate'));
+                window.dispatchEvent(new Event('locationchange'));
+                return result;
+            };
+            window.addEventListener('popstate', onPopState);
+            window.addEventListener('locationchange', handleLocationChange);
+        };
+        const removeWindowListeners = () => {
+            window.history.pushState = originalListeners.current.pushState;
+            window.history.replaceState = originalListeners.current.replaceState;
+            window.removeEventListener('popstate', onPopState);
+            window.removeEventListener('locationchange', handleLocationChange);
+        };
+        addWindowListeners();
+        return removeWindowListeners;
+    }, []);
+    React.useLayoutEffect(() => {
+        const removeHashCharacter = (str) => {
+            return str.slice(1);
+        };
+        if (hash) {
+            const element = document.getElementById(removeHashCharacter(hash));
+            if (element) {
+                element.scrollIntoView({
+                    behavior: firstRun ? initialBehavior : behavior,
+                    inline: inline,
+                    block: block,
+                });
+            }
+        }
+    }, [hash, count, firstRun]);
+    return null;
 };
 
 const NonIdealState = ({ description, icon, title }) => {
@@ -3954,7 +4016,7 @@ const RouterComponent = {
     history: reactRouterDom.BrowserRouter,
     memory: reactRouterDom.MemoryRouter,
     hash: reactRouterDom.HashRouter,
-    static: reactRouterDom.StaticRouter,
+    static: server_js.StaticRouter,
 };
 const useRouter = (router, basePath, staticRouterPath) => {
     const Router = RouterComponent[router];
@@ -3980,18 +4042,29 @@ const components = {
         return React__namespace.createElement(LinkHeading, Object.assign({ size: 4 }, props));
     },
 };
+const InternalRoutes = ({ children }) => {
+    return (React__namespace.createElement(reactRouterDom.Routes, null,
+        React__namespace.createElement(reactRouterDom.Route, { path: "/*", element: React__namespace.createElement(MarkdownComponentsProvider, { value: components },
+                React__namespace.createElement(ScrollToHashElement, null),
+                children) })));
+};
 function withRouter(WrappedComponent) {
     const WithRouter = (props) => {
         var _a, _b, _c;
+        const outerRouter = reactRouterDom.useInRouterContext();
         const basePath = (_a = props.basePath) !== null && _a !== void 0 ? _a : '/';
         const staticRouterPath = (_b = props.staticRouterPath) !== null && _b !== void 0 ? _b : '';
         const routerType = (_c = props.router) !== null && _c !== void 0 ? _c : 'history';
         const { Router, routerProps } = useRouter(routerType, basePath, staticRouterPath);
+        if (!outerRouter) {
+            return (React__namespace.createElement(RouterTypeContext.Provider, { value: routerType },
+                React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                    React__namespace.createElement(InternalRoutes, null,
+                        React__namespace.createElement(WrappedComponent, Object.assign({}, props, { outerRouter: false }))))));
+        }
         return (React__namespace.createElement(RouterTypeContext.Provider, { value: routerType },
-            React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React__namespace.createElement(reactRouterDom.Route, { path: "/" },
-                    React__namespace.createElement(MarkdownComponentsProvider, { value: components },
-                        React__namespace.createElement(WrappedComponent, Object.assign({}, props)))))));
+            React__namespace.createElement(InternalRoutes, null,
+                React__namespace.createElement(WrappedComponent, Object.assign({}, props, { outerRouter: true })))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;
     return WithRouter;
@@ -4185,6 +4258,7 @@ exports.PoweredByLink = PoweredByLink;
 exports.ReactRouterMarkdownLink = ReactRouterMarkdownLink;
 exports.ResponsiveSidebarLayout = ResponsiveSidebarLayout;
 exports.RouterTypeContext = RouterTypeContext;
+exports.ScrollToHashElement = ScrollToHashElement;
 exports.SidebarLayout = SidebarLayout;
 exports.Styled = Styled;
 exports.TableOfContents = TableOfContents;
@@ -4196,6 +4270,8 @@ exports.findFirstNode = findFirstNode;
 exports.isHttpOperation = isHttpOperation;
 exports.isHttpService = isHttpService;
 exports.isHttpWebhookOperation = isHttpWebhookOperation;
+exports.resolveRelativeLink = resolveRelativeLink;
+exports.resolveUrl = resolveUrl;
 exports.slugify = slugify;
 exports.useBundleRefsIntoDocument = useBundleRefsIntoDocument;
 exports.useParsedData = useParsedData;

package/index.mjs

@@ -1,6 +1,6 @@
 import { __rest, __awaiter } from 'tslib';
 import * as React from 'react';
-import React__default, { useContext, memo, useMemo, useState, useEffect } from 'react';
+import React__default, { useContext, memo, useMemo, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
 import { resolveInlineRef, hasRef, isPlainObject as isPlainObject$1, safeParse, safeStringify } from '@stoplight/json';
 import isArray from 'lodash/isArray.js';
@@ -10,7 +10,7 @@ import { parse } from '@stoplight/yaml';
 import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Callout, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, Drawer, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
+import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, useInRouterContext, Routes, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -51,8 +51,8 @@ import keys from 'lodash/keys.js';
 import sortBy from 'lodash/sortBy.js';
 import isNil from 'lodash/isNil.js';
 import omitBy from 'lodash/omitBy.js';
-import { HashLink } from 'react-router-hash-link';
 import { QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
+import { StaticRouter } from 'react-router-dom/server.js';
 import $RefParser from '@stoplight/json-schema-ref-parser';
 import * as PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual.js';
@@ -1105,6 +1105,9 @@ function slugify(name) {
         .replace(/^-/, '')
         .replace(/-$/, '');
 }
+const resolveRelativeLink = (slug) => {
+    return slug ? slug.replace(/^\//, '') : '.';
+};
 
 const isApiKeySecurityScheme = (maybeIApiKey) => isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
 const isOAuth2SecurityScheme = (maybeIOAuth2) => isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
@@ -3501,7 +3504,6 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();
-    const makeSlugAbsoluteRoute = useRouterType() == 'hash';
     React.useEffect(() => {
         setTimeout(() => {
             const scrollPosition = firstRender ? 'center' : 'nearest';
@@ -3522,7 +3524,7 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
                     if (isDivider(item)) {
                         return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
                     }
-                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
                 }))))));
 });
 TableOfContents.displayName = 'TableOfContents';
@@ -3530,23 +3532,23 @@ const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
     return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
 Divider.displayName = 'Divider';
-const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
+const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
             React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
     }
     else if (isGroup(item) || isNodeGroup(item)) {
-        return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+        return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else if (isNode(item)) {
-        return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
+        return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
                 item.version && React.createElement(Version, { value: item.version }),
                 item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
     }
     return null;
 });
 GroupItem.displayName = 'GroupItem';
-const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
+const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
     const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3574,7 +3576,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
     const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else {
         elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: item.itemsType &&
@@ -3584,7 +3586,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
         elem,
         isOpen &&
             item.items.map((groupItem, key) => {
-                return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
+                return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
             })));
 });
 Group.displayName = 'Group';
@@ -3598,7 +3600,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
         React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
 Item.displayName = 'Item';
-const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
+const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
@@ -3614,7 +3616,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             onClick(e, isActive ? undefined : true);
         }
     };
-    return (React.createElement(Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
+    return (React.createElement(Box, { as: LinkComponent, to: resolveRelativeLink(item.slug), display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
         React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
 Node.displayName = 'Node';
@@ -3638,7 +3640,8 @@ const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
             React.createElement(Flex, { justifyContent: "end" },
                 React.createElement(Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
                     React.createElement(Icon, { size: "lg", icon: faX }))),
-            React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: () => handleTocClick(), isInResponsiveMode: true }))));
+            React.createElement(Box, { tabIndex: -1 },
+                React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: handleTocClick, isInResponsiveMode: true })))));
 };
 const NavHeading = ({ heading }) => (React.createElement(Flex, { flex: 1, "data-test": "mobile-project-top-nav", style: { minWidth: 0 } },
     React.createElement(Box, { fontSize: "xl", fontWeight: "semibold", whitespace: "nowrap", textOverflow: "overflow-ellipsis", overflowX: "hidden", overflowY: "hidden", w: "full", textAlign: "center" }, heading)));
@@ -3878,7 +3881,66 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
     if (isExternal) {
         return (React__default.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
     }
-    return (React__default.createElement(HashLink, { to: href, title: title }, children));
+    return (React__default.createElement("a", { href: href, title: title }, children));
+};
+
+const ScrollToHashElement = ({ behavior = 'auto', initialBehavior = 'auto', inline = 'nearest', block = 'start', }) => {
+    const [hash, setHash] = useState(window.location.hash);
+    const [count, setCount] = useState(0);
+    const originalListeners = useRef({});
+    const [firstRun, setFirstRun] = useState(true);
+    useEffect(() => setFirstRun(false), []);
+    useEffect(() => {
+        const handleLocationChange = () => {
+            setHash(window.location.hash);
+            setCount((count) => count + 1);
+        };
+        const onPopState = () => {
+            window.dispatchEvent(new Event('locationchange'));
+        };
+        const addWindowListeners = () => {
+            originalListeners.current.pushState = window.history.pushState;
+            originalListeners.current.replaceState = window.history.replaceState;
+            window.history.pushState = function (...args) {
+                const result = originalListeners.current.pushState.apply(this, args);
+                window.dispatchEvent(new Event('pushstate'));
+                window.dispatchEvent(new Event('locationchange'));
+                return result;
+            };
+            window.history.replaceState = function (...args) {
+                const result = originalListeners.current.replaceState.apply(this, args);
+                window.dispatchEvent(new Event('replacestate'));
+                window.dispatchEvent(new Event('locationchange'));
+                return result;
+            };
+            window.addEventListener('popstate', onPopState);
+            window.addEventListener('locationchange', handleLocationChange);
+        };
+        const removeWindowListeners = () => {
+            window.history.pushState = originalListeners.current.pushState;
+            window.history.replaceState = originalListeners.current.replaceState;
+            window.removeEventListener('popstate', onPopState);
+            window.removeEventListener('locationchange', handleLocationChange);
+        };
+        addWindowListeners();
+        return removeWindowListeners;
+    }, []);
+    useLayoutEffect(() => {
+        const removeHashCharacter = (str) => {
+            return str.slice(1);
+        };
+        if (hash) {
+            const element = document.getElementById(removeHashCharacter(hash));
+            if (element) {
+                element.scrollIntoView({
+                    behavior: firstRun ? initialBehavior : behavior,
+                    inline: inline,
+                    block: block,
+                });
+            }
+        }
+    }, [hash, count, firstRun]);
+    return null;
 };
 
 const NonIdealState = ({ description, icon, title }) => {
@@ -3958,18 +4020,29 @@ const components = {
         return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
     },
 };
+const InternalRoutes = ({ children }) => {
+    return (React.createElement(Routes, null,
+        React.createElement(Route, { path: "/*", element: React.createElement(MarkdownComponentsProvider, { value: components },
+                React.createElement(ScrollToHashElement, null),
+                children) })));
+};
 function withRouter(WrappedComponent) {
     const WithRouter = (props) => {
         var _a, _b, _c;
+        const outerRouter = useInRouterContext();
         const basePath = (_a = props.basePath) !== null && _a !== void 0 ? _a : '/';
         const staticRouterPath = (_b = props.staticRouterPath) !== null && _b !== void 0 ? _b : '';
         const routerType = (_c = props.router) !== null && _c !== void 0 ? _c : 'history';
         const { Router, routerProps } = useRouter(routerType, basePath, staticRouterPath);
+        if (!outerRouter) {
+            return (React.createElement(RouterTypeContext.Provider, { value: routerType },
+                React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                    React.createElement(InternalRoutes, null,
+                        React.createElement(WrappedComponent, Object.assign({}, props, { outerRouter: false }))))));
+        }
         return (React.createElement(RouterTypeContext.Provider, { value: routerType },
-            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React.createElement(Route, { path: "/" },
-                    React.createElement(MarkdownComponentsProvider, { value: components },
-                        React.createElement(WrappedComponent, Object.assign({}, props)))))));
+            React.createElement(InternalRoutes, null,
+                React.createElement(WrappedComponent, Object.assign({}, props, { outerRouter: true })))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;
     return WithRouter;
@@ -4139,4 +4212,4 @@ const createElementClass = (Component, propDescriptors) => {
     };
 };
 
-export { DeprecatedBadge, Docs, ElementsOptionsProvider, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };
+export { DeprecatedBadge, Docs, ElementsOptionsProvider, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, ScrollToHashElement, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, resolveRelativeLink, resolveUrl, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.5.1",
+  "version": "9.0.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -46,8 +46,7 @@
     "nanoid": "^3.1.32",
     "prop-types": "^15.7.2",
     "react-query": "^3.34.19",
-    "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.1.0",
+    "react-router-dom": "^6.28.0",
     "tslib": "^2.1.0",
     "urijs": "^1.19.11",
     "util": "^0.12.4",

package/utils/string.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="lodash" />
 export declare const caseInsensitivelyEquals: import("lodash").CurriedFunction2<string, string, boolean>;
 export declare function slugify(name: string): string;
+export declare const resolveRelativeLink: (slug?: string) => string;