@jpmorganchase/elemental 3.0.1 → 3.2.1

package/components/API/APIWithSidebarLayout.d.ts

@@ -12,6 +12,7 @@ declare type SidebarLayoutProps = {
     tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
     tryItCorsProxy?: string;
     tryItOutDefaultServer?: string;
+    useCustomNav?: boolean;
 };
 export declare const APIWithSidebarLayout: React.FC<SidebarLayoutProps>;
 export {};

package/containers/API.d.ts

@@ -18,6 +18,7 @@ export interface CommonAPIProps extends RoutingProps {
     tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
     tryItCorsProxy?: string;
     tryItOutDefaultServer?: string;
+    useCustomNav?: boolean;
 }
 export declare const APIImpl: React.FC<APIProps>;
 export declare const API: React.FC<APIProps>;

package/hooks/oas-nav-tree/useGetOasNavTree.d.ts

@@ -0,0 +1 @@
+export declare const useGetOasNavTree: (apiDescriptionDocument: string | object) => any[];

package/hooks/oas-nav-tree/useGetOasNavTree.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/index.d.ts

@@ -1,2 +1,3 @@
 export type { APIProps } from './containers/API';
 export { API } from './containers/API';
+export { useGetOasNavTree } from './hooks/oas-nav-tree/useGetOasNavTree';

package/index.esm.js

@@ -157,13 +157,20 @@ const isInternal = (node) => {
     return !!data['x-internal'];
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
     const container = React.useRef(null);
-    const tree = React.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
+    const tree = React.useMemo(() => {
+        if (!useCustomNav)
+            return computeAPITree(serviceNode, { hideSchemas, hideInternal });
+        else
+            return [];
+    }, [serviceNode, hideSchemas, hideInternal, useCustomNav]);
     const location = useLocation();
     const { pathname } = location;
     const isRootPath = !pathname || pathname === '/';
     const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    React.useEffect(() => {
+    }, [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);
@@ -186,7 +193,7 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
         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, tryItOutDefaultServer: tryItOutDefaultServer }))));
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
 };
 
 const itemMatchesHash = (hash, item) => {
@@ -200,7 +207,7 @@ TryItContext.displayName = 'TryItContext';
 const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
     const location = useLocation();
     const { groups } = computeTagGroups(serviceNode);
-    return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
+    return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy, tryItOutDefaultServer } },
         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, tryItOutDefaultServer: tryItOutDefaultServer })),
@@ -239,7 +246,7 @@ const Item = React.memo(({ item }) => {
     const scrollRef = React.useRef(null);
     const color = HttpMethodColors[item.data.method] || 'gray';
     const isDeprecated = !!item.data.deprecated;
-    const { hideTryIt, tryItCredentialsPolicy, corsProxy } = React.useContext(TryItContext);
+    const { hideTryIt, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React.useContext(TryItContext);
     const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     React.useEffect(() => {
         var _a;
@@ -263,7 +270,7 @@ const Item = React.memo(({ item }) => {
                 React.createElement(TabPanel, null,
                     React.createElement(ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
                 React.createElement(TabPanel, null,
-                    React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, corsProxy: corsProxy }))))))));
+                    React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
 });
 const Collapse = ({ isOpen, children }) => {
     if (!isOpen)
@@ -434,7 +441,8 @@ function findMapMatch(key, map) {
     if (typeof key === 'number')
         return;
     for (const entry of map) {
-        if (!!((_a = entry.match) === null || _a === void 0 ? void 0 : _a.match(key)) || (entry.notMatch !== void 0 && !entry.notMatch.match(key))) {
+        const escapedKey = key.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
+        if (!!((_a = entry.match) === null || _a === void 0 ? void 0 : _a.match(escapedKey)) || (entry.notMatch !== void 0 && !entry.notMatch.match(escapedKey))) {
             return entry;
         }
     }
@@ -482,7 +490,7 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, } = props;
+    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
@@ -509,8 +517,37 @@ 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 }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
+    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 
-export { API };
+const useGetOasNavTree = (apiDescriptionDocument) => {
+    const parsedDocument = useParsedValue(apiDescriptionDocument);
+    const bundledDocument = useBundleRefsIntoDocument(parsedDocument);
+    if (!bundledDocument)
+        return [];
+    const groupSchemas = (tree) => {
+        const targetTitle = 'Schemas';
+        const newTree = tree.reduce((accumulator, currentObject) => {
+            var _a;
+            if (currentObject.title === targetTitle) {
+                accumulator.matchedObject = currentObject;
+            }
+            else if ((_a = currentObject.id) === null || _a === void 0 ? void 0 : _a.includes(targetTitle.toLowerCase())) {
+                accumulator.matchedObject.items = accumulator.matchedObject.items || [];
+                accumulator.matchedObject.items.push(currentObject);
+            }
+            else {
+                accumulator.others = accumulator.others || [];
+                accumulator.others.push(currentObject);
+            }
+            return accumulator;
+        }, {});
+        const navTree = [...newTree.others, newTree.matchedObject];
+        return navTree;
+    };
+    const apiTree = computeAPITree(transformOasToServiceNode(bundledDocument));
+    return groupSchemas(apiTree);
+};
+
+export { API, useGetOasNavTree };

package/index.js

@@ -190,13 +190,20 @@ const isInternal = (node) => {
     return !!data['x-internal'];
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
     const container = React__namespace.useRef(null);
-    const tree = React__namespace.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
+    const tree = React__namespace.useMemo(() => {
+        if (!useCustomNav)
+            return computeAPITree(serviceNode, { hideSchemas, hideInternal });
+        else
+            return [];
+    }, [serviceNode, hideSchemas, hideInternal, useCustomNav]);
     const location = reactRouterDom.useLocation();
     const { pathname } = location;
     const isRootPath = !pathname || pathname === '/';
     const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    React__namespace.useEffect(() => {
+    }, [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);
@@ -219,7 +226,7 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
         React__namespace.createElement(mosaic.Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
             React__namespace.createElement(elementalCore.TableOfContents, { tree: tree, activeId: pathname, Link: reactRouterDom.Link, onLinkClick: handleTocClick })),
         React__namespace.createElement(elementalCore.PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
-    return (React__namespace.createElement(elementalCore.SidebarLayout, { ref: container, sidebar: sidebar }, node && (React__namespace.createElement(elementalCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
+    return (React__namespace.createElement(elementalCore.SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav }, node && (React__namespace.createElement(elementalCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
 };
 
 const itemMatchesHash = (hash, item) => {
@@ -233,7 +240,7 @@ TryItContext.displayName = 'TryItContext';
 const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
     const location = reactRouterDom.useLocation();
     const { groups } = computeTagGroups(serviceNode);
-    return (React__namespace.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
+    return (React__namespace.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy, tryItOutDefaultServer } },
         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(elementalCore.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, tryItOutDefaultServer: tryItOutDefaultServer })),
@@ -272,7 +279,7 @@ const Item = React__namespace.memo(({ item }) => {
     const scrollRef = React__namespace.useRef(null);
     const color = elementalCore.HttpMethodColors[item.data.method] || 'gray';
     const isDeprecated = !!item.data.deprecated;
-    const { hideTryIt, tryItCredentialsPolicy, corsProxy } = React__namespace.useContext(TryItContext);
+    const { hideTryIt, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React__namespace.useContext(TryItContext);
     const onClick = React__namespace.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     React__namespace.useEffect(() => {
         var _a;
@@ -296,7 +303,7 @@ const Item = React__namespace.memo(({ item }) => {
                 React__namespace.createElement(mosaic.TabPanel, null,
                     React__namespace.createElement(elementalCore.ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
                 React__namespace.createElement(mosaic.TabPanel, null,
-                    React__namespace.createElement(elementalCore.TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, corsProxy: corsProxy }))))))));
+                    React__namespace.createElement(elementalCore.TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
 });
 const Collapse = ({ isOpen, children }) => {
     if (!isOpen)
@@ -467,7 +474,8 @@ function findMapMatch(key, map) {
     if (typeof key === 'number')
         return;
     for (const entry of map) {
-        if (!!((_a = entry.match) === null || _a === void 0 ? void 0 : _a.match(key)) || (entry.notMatch !== void 0 && !entry.notMatch.match(key))) {
+        const escapedKey = key.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
+        if (!!((_a = entry.match) === null || _a === void 0 ? void 0 : _a.match(escapedKey)) || (entry.notMatch !== void 0 && !entry.notMatch.match(escapedKey))) {
             return entry;
         }
     }
@@ -515,7 +523,7 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, } = props;
+    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { data: fetchedDocument, error } = reactQuery.useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
@@ -542,8 +550,38 @@ const APIImpl = props => {
         return (React__namespace.createElement(mosaic.Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
             React__namespace.createElement(elementalCore.NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
     }
-    return (React__namespace.createElement(elementalCore.InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
+    return (React__namespace.createElement(elementalCore.InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
 };
 const API = flow__default["default"](elementalCore.withRouter, elementalCore.withStyles, elementalCore.withPersistenceBoundary, elementalCore.withMosaicProvider, elementalCore.withQueryClientProvider)(APIImpl);
 
+const useGetOasNavTree = (apiDescriptionDocument) => {
+    const parsedDocument = elementalCore.useParsedValue(apiDescriptionDocument);
+    const bundledDocument = elementalCore.useBundleRefsIntoDocument(parsedDocument);
+    if (!bundledDocument)
+        return [];
+    const groupSchemas = (tree) => {
+        const targetTitle = 'Schemas';
+        const newTree = tree.reduce((accumulator, currentObject) => {
+            var _a;
+            if (currentObject.title === targetTitle) {
+                accumulator.matchedObject = currentObject;
+            }
+            else if ((_a = currentObject.id) === null || _a === void 0 ? void 0 : _a.includes(targetTitle.toLowerCase())) {
+                accumulator.matchedObject.items = accumulator.matchedObject.items || [];
+                accumulator.matchedObject.items.push(currentObject);
+            }
+            else {
+                accumulator.others = accumulator.others || [];
+                accumulator.others.push(currentObject);
+            }
+            return accumulator;
+        }, {});
+        const navTree = [...newTree.others, newTree.matchedObject];
+        return navTree;
+    };
+    const apiTree = computeAPITree(transformOasToServiceNode(bundledDocument));
+    return groupSchemas(apiTree);
+};
+
 exports.API = API;
+exports.useGetOasNavTree = useGetOasNavTree;

package/index.mjs

@@ -157,13 +157,20 @@ const isInternal = (node) => {
     return !!data['x-internal'];
 };
 
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
     const container = React.useRef(null);
-    const tree = React.useMemo(() => computeAPITree(serviceNode, { hideSchemas, hideInternal }), [serviceNode, hideSchemas, hideInternal]);
+    const tree = React.useMemo(() => {
+        if (!useCustomNav)
+            return computeAPITree(serviceNode, { hideSchemas, hideInternal });
+        else
+            return [];
+    }, [serviceNode, hideSchemas, hideInternal, useCustomNav]);
     const location = useLocation();
     const { pathname } = location;
     const isRootPath = !pathname || pathname === '/';
     const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
+    React.useEffect(() => {
+    }, [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);
@@ -186,7 +193,7 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
         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, tryItOutDefaultServer: tryItOutDefaultServer }))));
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
 };
 
 const itemMatchesHash = (hash, item) => {
@@ -200,7 +207,7 @@ TryItContext.displayName = 'TryItContext';
 const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
     const location = useLocation();
     const { groups } = computeTagGroups(serviceNode);
-    return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
+    return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy, tryItOutDefaultServer } },
         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, tryItOutDefaultServer: tryItOutDefaultServer })),
@@ -239,7 +246,7 @@ const Item = React.memo(({ item }) => {
     const scrollRef = React.useRef(null);
     const color = HttpMethodColors[item.data.method] || 'gray';
     const isDeprecated = !!item.data.deprecated;
-    const { hideTryIt, tryItCredentialsPolicy, corsProxy } = React.useContext(TryItContext);
+    const { hideTryIt, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React.useContext(TryItContext);
     const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     React.useEffect(() => {
         var _a;
@@ -263,7 +270,7 @@ const Item = React.memo(({ item }) => {
                 React.createElement(TabPanel, null,
                     React.createElement(ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
                 React.createElement(TabPanel, null,
-                    React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, corsProxy: corsProxy }))))))));
+                    React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
 });
 const Collapse = ({ isOpen, children }) => {
     if (!isOpen)
@@ -434,7 +441,8 @@ function findMapMatch(key, map) {
     if (typeof key === 'number')
         return;
     for (const entry of map) {
-        if (!!((_a = entry.match) === null || _a === void 0 ? void 0 : _a.match(key)) || (entry.notMatch !== void 0 && !entry.notMatch.match(key))) {
+        const escapedKey = key.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
+        if (!!((_a = entry.match) === null || _a === void 0 ? void 0 : _a.match(escapedKey)) || (entry.notMatch !== void 0 && !entry.notMatch.match(escapedKey))) {
             return entry;
         }
     }
@@ -482,7 +490,7 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, } = props;
+    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
     const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
@@ -509,8 +517,37 @@ 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 }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
+    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 
-export { API };
+const useGetOasNavTree = (apiDescriptionDocument) => {
+    const parsedDocument = useParsedValue(apiDescriptionDocument);
+    const bundledDocument = useBundleRefsIntoDocument(parsedDocument);
+    if (!bundledDocument)
+        return [];
+    const groupSchemas = (tree) => {
+        const targetTitle = 'Schemas';
+        const newTree = tree.reduce((accumulator, currentObject) => {
+            var _a;
+            if (currentObject.title === targetTitle) {
+                accumulator.matchedObject = currentObject;
+            }
+            else if ((_a = currentObject.id) === null || _a === void 0 ? void 0 : _a.includes(targetTitle.toLowerCase())) {
+                accumulator.matchedObject.items = accumulator.matchedObject.items || [];
+                accumulator.matchedObject.items.push(currentObject);
+            }
+            else {
+                accumulator.others = accumulator.others || [];
+                accumulator.others.push(currentObject);
+            }
+            return accumulator;
+        }, {});
+        const navTree = [...newTree.others, newTree.matchedObject];
+        return navTree;
+    };
+    const apiTree = computeAPITree(transformOasToServiceNode(bundledDocument));
+    return groupSchemas(apiTree);
+};
+
+export { API, useGetOasNavTree };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jpmorganchase/elemental",
-  "version": "3.0.1",
+  "version": "3.2.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "main": "./index.js",
@@ -26,11 +26,11 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@jpmorganchase/elemental-core": "^1.1.1",
-    "@stoplight/http-spec": "^5.1.4",
+    "@jpmorganchase/elemental-core": "^1.3.1",
+    "@stoplight/http-spec": "^6.0.0",
     "@stoplight/json": "^3.18.1",
-    "@stoplight/mosaic": "^1.33.0",
-    "@stoplight/types": "^13.7.0",
+    "@stoplight/mosaic": "^1.44.3",
+    "@stoplight/types": "^14.0.0",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",
     "file-saver": "^2.0.5",