@stoplight/elements 7.15.1 → 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;
@@ -10,6 +17,7 @@ declare type StackedLayoutProps = {
     tryItCredentialsPolicy?: TryItCredentialsPolicy;
     tryItCorsProxy?: string;
     showPoweredByLink?: boolean;
+    location: Location;
 };
 export declare const APIWithStackedLayout: React.FC<StackedLayoutProps>;
 export {};

package/index.esm.js

@@ -3,10 +3,10 @@ import { Box, Flex, Icon, Tabs, TabList, Tab, TabPanels, TabPanel, Heading } fro
 import { NodeType } from '@stoplight/types';
 import cn from 'classnames';
 import * as React from 'react';
-import { useLocation, Redirect, Link } from 'react-router-dom';
 import defaults from 'lodash/defaults.js';
 import flow from 'lodash/flow.js';
 import { useQuery } from 'react-query';
+import { useLocation, Redirect, Link } from 'react-router-dom';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
 import { transformOas2Service, transformOas2Operation } from '@stoplight/http-spec/oas2';
@@ -158,26 +158,36 @@ const isInternal = (node) => {
 };
 
 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, showPoweredByLink = true, }) => {
-    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, 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(() => {
@@ -201,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);
@@ -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,7 +523,7 @@ 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);
 

package/index.js

@@ -7,10 +7,10 @@ var mosaic = require('@stoplight/mosaic');
 var types = require('@stoplight/types');
 var cn = require('classnames');
 var React = require('react');
-var reactRouterDom = require('react-router-dom');
 var defaults = require('lodash/defaults.js');
 var flow = require('lodash/flow.js');
 var reactQuery = require('react-query');
+var reactRouterDom = require('react-router-dom');
 var yaml = require('@stoplight/yaml');
 var saver = require('file-saver');
 var oas2 = require('@stoplight/http-spec/oas2');
@@ -191,26 +191,36 @@ const isInternal = (node) => {
 };
 
 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, showPoweredByLink = true, }) => {
-    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, 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(() => {
@@ -234,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);
@@ -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,7 +556,7 @@ 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);
 

package/index.mjs

@@ -3,10 +3,10 @@ import { Box, Flex, Icon, Tabs, TabList, Tab, TabPanels, TabPanel, Heading } fro
 import { NodeType } from '@stoplight/types';
 import cn from 'classnames';
 import * as React from 'react';
-import { useLocation, Redirect, Link } from 'react-router-dom';
 import defaults from 'lodash/defaults.js';
 import flow from 'lodash/flow.js';
 import { useQuery } from 'react-query';
+import { useLocation, Redirect, Link } from 'react-router-dom';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
 import { transformOas2Service, transformOas2Operation } from '@stoplight/http-spec/oas2';
@@ -158,26 +158,36 @@ const isInternal = (node) => {
 };
 
 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, showPoweredByLink = true, }) => {
-    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, 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(() => {
@@ -201,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);
@@ -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,7 +523,7 @@ 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);
 

package/package.json

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