@stoplight/elements 7.15.0 → 7.15.2

package/components/API/APIWithStackedLayout.d.ts

@@ -2,6 +2,13 @@ import { ExportButtonProps } from '@stoplight/elements-core';
 import * as React from 'react';
 import { ServiceNode } from '../../utils/oas/types';
 declare type TryItCredentialsPolicy = 'omit' | 'include' | 'same-origin';
+interface Location {
+    pathname: string;
+    search: string;
+    hash: string;
+    state: unknown;
+    key: string;
+}
 declare type StackedLayoutProps = {
     serviceNode: ServiceNode;
     hideTryIt?: boolean;
@@ -9,6 +16,8 @@ declare type StackedLayoutProps = {
     exportProps?: ExportButtonProps;
     tryItCredentialsPolicy?: TryItCredentialsPolicy;
     tryItCorsProxy?: string;
+    showPoweredByLink?: boolean;
+    location: Location;
 };
 export declare const APIWithStackedLayout: React.FC<StackedLayoutProps>;
 export {};

package/index.d.ts

@@ -1,3 +1,4 @@
+export { APIWithStackedLayout } from './components/API/APIWithStackedLayout';
 export type { APIProps } from './containers/API';
 export { API } from './containers/API';
 export { useExportDocumentProps } from './hooks/useExportDocumentProps';

package/index.esm.js

@@ -1,12 +1,12 @@
-import { isHttpOperation, isHttpService, Logo, TableOfContents, PoweredByLink, SidebarLayout, ParsedDocs, HttpMethodColors, DeprecatedBadge, TryItWithRequestSamples, Docs, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
-import { Flex, Heading, Box, Icon, Tabs, TabList, Tab, TabPanels, TabPanel } from '@stoplight/mosaic';
-import flow from 'lodash/flow.js';
+import { isHttpOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, Logo, TableOfContents, PoweredByLink, SidebarLayout, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, 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';
 import * as React from 'react';
+import defaults from 'lodash/defaults.js';
+import flow from 'lodash/flow.js';
 import { useQuery } from 'react-query';
-import { NodeType } from '@stoplight/types';
 import { useLocation, Redirect, Link } from 'react-router-dom';
-import defaults from 'lodash/defaults.js';
-import cn from 'classnames';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
 import { transformOas2Service, transformOas2Operation } from '@stoplight/http-spec/oas2';
@@ -157,59 +157,37 @@ const isInternal = (node) => {
     return !!data['x-internal'];
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    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 layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node]);
-    if (!node) {
-        const firstSlug = findFirstNodeSlug(tree);
-        if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
-        }
-    }
-    if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    const sidebar = (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { ml: 4, mb: 5, alignItems: "center" },
-            logo ? (React.createElement(Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React.createElement(Logo, { logo: serviceNode.data.logo })),
-            React.createElement(Heading, { size: 4 }, serviceNode.name)),
-        React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
-            React.createElement(TableOfContents, { tree: tree, activeId: pathname, Link: Link, onLinkClick: handleTocClick })),
-        React.createElement(PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
-};
-
 const itemMatchesHash = (hash, item) => {
-    return hash.substr(1) === `${item.name}-${item.data.method}`;
+    return hash.substr(1) === `${item.data.path}-${item.data.method}`;
 };
 const TryItContext = React.createContext({
     hideTryIt: false,
     tryItCredentialsPolicy: 'omit',
 });
 TryItContext.displayName = 'TryItContext';
-const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    const location = useLocation();
+const LocationContext = React.createContext({
+    location: {
+        hash: '',
+        key: '',
+        pathname: '',
+        search: '',
+        state: '',
+    },
+});
+LocationContext.displayName = 'LocationContext';
+const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, showPoweredByLink = true, location, }) => {
     const { groups } = computeTagGroups(serviceNode);
-    return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
-        React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
-            React.createElement(Box, { w: "full", borderB: true },
-                React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink: true, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
-            groups.map(group => (React.createElement(Group, { key: group.title, group: group }))))));
+    return (React.createElement(LocationContext.Provider, { value: { location } },
+        React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
+            React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
+                React.createElement(Box, { w: "full", borderB: true },
+                    React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
+                groups.map(group => (React.createElement(Group, { key: group.title, group: group })))))));
 };
 const Group = React.memo(({ group }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const { hash } = useLocation();
     const scrollRef = React.useRef(null);
+    const { location: { hash }, } = React.useContext(LocationContext);
     const urlHashMatches = hash.substr(1) === group.title;
     const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     const shouldExpand = React.useMemo(() => {
@@ -233,7 +211,7 @@ const Group = React.memo(({ group }) => {
         }))));
 });
 const Item = React.memo(({ item }) => {
-    const location = useLocation();
+    const { location } = React.useContext(LocationContext);
     const { hash } = location;
     const [isExpanded, setIsExpanded] = React.useState(false);
     const scrollRef = React.useRef(null);
@@ -273,6 +251,38 @@ const Collapse = ({ isOpen, children }) => {
     return React.createElement(Box, null, children);
 };
 
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    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 layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node]);
+    if (!node) {
+        const firstSlug = findFirstNodeSlug(tree);
+        if (firstSlug) {
+            return React.createElement(Redirect, { to: firstSlug });
+        }
+    }
+    if (hideInternal && node && isInternal(node)) {
+        return React.createElement(Redirect, { to: "/" });
+    }
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    const sidebar = (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { ml: 4, mb: 5, alignItems: "center" },
+            logo ? (React.createElement(Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React.createElement(Logo, { logo: serviceNode.data.logo })),
+            React.createElement(Heading, { size: 4 }, serviceNode.name)),
+        React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
+            React.createElement(TableOfContents, { tree: tree, activeId: pathname, Link: Link, onLinkClick: handleTocClick })),
+        React.createElement(PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+};
+
 var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["Paths"] = "paths";
@@ -486,6 +496,7 @@ const propsAreWithDocument = (props) => {
 };
 const APIImpl = props => {
     const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, } = props;
+    const location = useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
@@ -512,8 +523,8 @@ const APIImpl = props => {
         return (React.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
             React.createElement(NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
     }
-    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, location: location })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 
-export { API, transformOasToServiceNode, useExportDocumentProps };
+export { API, APIWithStackedLayout, transformOasToServiceNode, useExportDocumentProps };

package/index.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var elementsCore = require('@stoplight/elements-core');
 var mosaic = require('@stoplight/mosaic');
-var flow = require('lodash/flow.js');
+var types = require('@stoplight/types');
+var cn = require('classnames');
 var React = require('react');
+var defaults = require('lodash/defaults.js');
+var flow = require('lodash/flow.js');
 var reactQuery = require('react-query');
-var types = require('@stoplight/types');
 var reactRouterDom = require('react-router-dom');
-var defaults = require('lodash/defaults.js');
-var cn = require('classnames');
 var yaml = require('@stoplight/yaml');
 var saver = require('file-saver');
 var oas2 = require('@stoplight/http-spec/oas2');
@@ -40,10 +40,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var flow__default = /*#__PURE__*/_interopDefaultLegacy(flow);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var defaults__default = /*#__PURE__*/_interopDefaultLegacy(defaults);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var flow__default = /*#__PURE__*/_interopDefaultLegacy(flow);
 var saver__default = /*#__PURE__*/_interopDefaultLegacy(saver);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
@@ -190,59 +190,37 @@ const isInternal = (node) => {
     return !!data['x-internal'];
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    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 layoutOptions = React__namespace.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== types.NodeType.HttpService }), [hideTryIt, hideExport, node]);
-    if (!node) {
-        const firstSlug = findFirstNodeSlug(tree);
-        if (firstSlug) {
-            return React__namespace.createElement(reactRouterDom.Redirect, { to: firstSlug });
-        }
-    }
-    if (hideInternal && node && isInternal(node)) {
-        return React__namespace.createElement(reactRouterDom.Redirect, { to: "/" });
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    const sidebar = (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(mosaic.Flex, { ml: 4, mb: 5, alignItems: "center" },
-            logo ? (React__namespace.createElement(elementsCore.Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React__namespace.createElement(elementsCore.Logo, { logo: serviceNode.data.logo })),
-            React__namespace.createElement(mosaic.Heading, { size: 4 }, serviceNode.name)),
-        React__namespace.createElement(mosaic.Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
-            React__namespace.createElement(elementsCore.TableOfContents, { tree: tree, activeId: pathname, Link: reactRouterDom.Link, onLinkClick: handleTocClick })),
-        React__namespace.createElement(elementsCore.PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
-    return (React__namespace.createElement(elementsCore.SidebarLayout, { ref: container, sidebar: sidebar }, node && (React__namespace.createElement(elementsCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
-};
-
 const itemMatchesHash = (hash, item) => {
-    return hash.substr(1) === `${item.name}-${item.data.method}`;
+    return hash.substr(1) === `${item.data.path}-${item.data.method}`;
 };
 const TryItContext = React__namespace.createContext({
     hideTryIt: false,
     tryItCredentialsPolicy: 'omit',
 });
 TryItContext.displayName = 'TryItContext';
-const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    const location = reactRouterDom.useLocation();
+const LocationContext = React__namespace.createContext({
+    location: {
+        hash: '',
+        key: '',
+        pathname: '',
+        search: '',
+        state: '',
+    },
+});
+LocationContext.displayName = 'LocationContext';
+const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, showPoweredByLink = true, location, }) => {
     const { groups } = computeTagGroups(serviceNode);
-    return (React__namespace.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
-        React__namespace.createElement(mosaic.Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
-            React__namespace.createElement(mosaic.Box, { w: "full", borderB: true },
-                React__namespace.createElement(elementsCore.Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: types.NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink: true, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
-            groups.map(group => (React__namespace.createElement(Group, { key: group.title, group: group }))))));
+    return (React__namespace.createElement(LocationContext.Provider, { value: { location } },
+        React__namespace.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
+            React__namespace.createElement(mosaic.Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
+                React__namespace.createElement(mosaic.Box, { w: "full", borderB: true },
+                    React__namespace.createElement(elementsCore.Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: types.NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
+                groups.map(group => (React__namespace.createElement(Group, { key: group.title, group: group })))))));
 };
 const Group = React__namespace.memo(({ group }) => {
     const [isExpanded, setIsExpanded] = React__namespace.useState(false);
-    const { hash } = reactRouterDom.useLocation();
     const scrollRef = React__namespace.useRef(null);
+    const { location: { hash }, } = React__namespace.useContext(LocationContext);
     const urlHashMatches = hash.substr(1) === group.title;
     const onClick = React__namespace.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     const shouldExpand = React__namespace.useMemo(() => {
@@ -266,7 +244,7 @@ const Group = React__namespace.memo(({ group }) => {
         }))));
 });
 const Item = React__namespace.memo(({ item }) => {
-    const location = reactRouterDom.useLocation();
+    const { location } = React__namespace.useContext(LocationContext);
     const { hash } = location;
     const [isExpanded, setIsExpanded] = React__namespace.useState(false);
     const scrollRef = React__namespace.useRef(null);
@@ -306,6 +284,38 @@ const Collapse = ({ isOpen, children }) => {
     return React__namespace.createElement(mosaic.Box, null, children);
 };
 
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    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 layoutOptions = React__namespace.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== types.NodeType.HttpService }), [hideTryIt, hideExport, node]);
+    if (!node) {
+        const firstSlug = findFirstNodeSlug(tree);
+        if (firstSlug) {
+            return React__namespace.createElement(reactRouterDom.Redirect, { to: firstSlug });
+        }
+    }
+    if (hideInternal && node && isInternal(node)) {
+        return React__namespace.createElement(reactRouterDom.Redirect, { to: "/" });
+    }
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    const sidebar = (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(mosaic.Flex, { ml: 4, mb: 5, alignItems: "center" },
+            logo ? (React__namespace.createElement(elementsCore.Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React__namespace.createElement(elementsCore.Logo, { logo: serviceNode.data.logo })),
+            React__namespace.createElement(mosaic.Heading, { size: 4 }, serviceNode.name)),
+        React__namespace.createElement(mosaic.Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
+            React__namespace.createElement(elementsCore.TableOfContents, { tree: tree, activeId: pathname, Link: reactRouterDom.Link, onLinkClick: handleTocClick })),
+        React__namespace.createElement(elementsCore.PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
+    return (React__namespace.createElement(elementsCore.SidebarLayout, { ref: container, sidebar: sidebar }, node && (React__namespace.createElement(elementsCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+};
+
 var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["Paths"] = "paths";
@@ -519,6 +529,7 @@ const propsAreWithDocument = (props) => {
 };
 const APIImpl = props => {
     const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, } = props;
+    const location = reactRouterDom.useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { data: fetchedDocument, error } = reactQuery.useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
@@ -545,10 +556,11 @@ const APIImpl = props => {
         return (React__namespace.createElement(mosaic.Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
             React__namespace.createElement(elementsCore.NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
     }
-    return (React__namespace.createElement(elementsCore.InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth }, layout === 'stacked' ? (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })) : (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+    return (React__namespace.createElement(elementsCore.InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth }, layout === 'stacked' ? (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, location: location })) : (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
 };
 const API = flow__default["default"](elementsCore.withRouter, elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(APIImpl);
 
 exports.API = API;
+exports.APIWithStackedLayout = APIWithStackedLayout;
 exports.transformOasToServiceNode = transformOasToServiceNode;
 exports.useExportDocumentProps = useExportDocumentProps;

package/index.mjs

@@ -1,12 +1,12 @@
-import { isHttpOperation, isHttpService, Logo, TableOfContents, PoweredByLink, SidebarLayout, ParsedDocs, HttpMethodColors, DeprecatedBadge, TryItWithRequestSamples, Docs, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
-import { Flex, Heading, Box, Icon, Tabs, TabList, Tab, TabPanels, TabPanel } from '@stoplight/mosaic';
-import flow from 'lodash/flow.js';
+import { isHttpOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, Logo, TableOfContents, PoweredByLink, SidebarLayout, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, 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';
 import * as React from 'react';
+import defaults from 'lodash/defaults.js';
+import flow from 'lodash/flow.js';
 import { useQuery } from 'react-query';
-import { NodeType } from '@stoplight/types';
 import { useLocation, Redirect, Link } from 'react-router-dom';
-import defaults from 'lodash/defaults.js';
-import cn from 'classnames';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
 import { transformOas2Service, transformOas2Operation } from '@stoplight/http-spec/oas2';
@@ -157,59 +157,37 @@ const isInternal = (node) => {
     return !!data['x-internal'];
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    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 layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node]);
-    if (!node) {
-        const firstSlug = findFirstNodeSlug(tree);
-        if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
-        }
-    }
-    if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    const sidebar = (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { ml: 4, mb: 5, alignItems: "center" },
-            logo ? (React.createElement(Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React.createElement(Logo, { logo: serviceNode.data.logo })),
-            React.createElement(Heading, { size: 4 }, serviceNode.name)),
-        React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
-            React.createElement(TableOfContents, { tree: tree, activeId: pathname, Link: Link, onLinkClick: handleTocClick })),
-        React.createElement(PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
-};
-
 const itemMatchesHash = (hash, item) => {
-    return hash.substr(1) === `${item.name}-${item.data.method}`;
+    return hash.substr(1) === `${item.data.path}-${item.data.method}`;
 };
 const TryItContext = React.createContext({
     hideTryIt: false,
     tryItCredentialsPolicy: 'omit',
 });
 TryItContext.displayName = 'TryItContext';
-const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    const location = useLocation();
+const LocationContext = React.createContext({
+    location: {
+        hash: '',
+        key: '',
+        pathname: '',
+        search: '',
+        state: '',
+    },
+});
+LocationContext.displayName = 'LocationContext';
+const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, showPoweredByLink = true, location, }) => {
     const { groups } = computeTagGroups(serviceNode);
-    return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
-        React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
-            React.createElement(Box, { w: "full", borderB: true },
-                React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink: true, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
-            groups.map(group => (React.createElement(Group, { key: group.title, group: group }))))));
+    return (React.createElement(LocationContext.Provider, { value: { location } },
+        React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
+            React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
+                React.createElement(Box, { w: "full", borderB: true },
+                    React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
+                groups.map(group => (React.createElement(Group, { key: group.title, group: group })))))));
 };
 const Group = React.memo(({ group }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const { hash } = useLocation();
     const scrollRef = React.useRef(null);
+    const { location: { hash }, } = React.useContext(LocationContext);
     const urlHashMatches = hash.substr(1) === group.title;
     const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     const shouldExpand = React.useMemo(() => {
@@ -233,7 +211,7 @@ const Group = React.memo(({ group }) => {
         }))));
 });
 const Item = React.memo(({ item }) => {
-    const location = useLocation();
+    const { location } = React.useContext(LocationContext);
     const { hash } = location;
     const [isExpanded, setIsExpanded] = React.useState(false);
     const scrollRef = React.useRef(null);
@@ -273,6 +251,38 @@ const Collapse = ({ isOpen, children }) => {
     return React.createElement(Box, null, children);
 };
 
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    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 layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node]);
+    if (!node) {
+        const firstSlug = findFirstNodeSlug(tree);
+        if (firstSlug) {
+            return React.createElement(Redirect, { to: firstSlug });
+        }
+    }
+    if (hideInternal && node && isInternal(node)) {
+        return React.createElement(Redirect, { to: "/" });
+    }
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    const sidebar = (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { ml: 4, mb: 5, alignItems: "center" },
+            logo ? (React.createElement(Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React.createElement(Logo, { logo: serviceNode.data.logo })),
+            React.createElement(Heading, { size: 4 }, serviceNode.name)),
+        React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
+            React.createElement(TableOfContents, { tree: tree, activeId: pathname, Link: Link, onLinkClick: handleTocClick })),
+        React.createElement(PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+};
+
 var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["Paths"] = "paths";
@@ -486,6 +496,7 @@ const propsAreWithDocument = (props) => {
 };
 const APIImpl = props => {
     const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, } = props;
+    const location = useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
@@ -512,8 +523,8 @@ const APIImpl = props => {
         return (React.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
             React.createElement(NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
     }
-    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, location: location })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 
-export { API, transformOasToServiceNode, useExportDocumentProps };
+export { API, APIWithStackedLayout, transformOasToServiceNode, useExportDocumentProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "7.15.0",
+  "version": "7.15.2",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "main": "./index.js",