@jpmorganchase/elemental 6.0.1 → 7.0.1

package/components/API/APIWithResponsiveSidebarLayout.d.ts

@@ -0,0 +1,19 @@
+import { ExportButtonProps } from '@jpmorganchase/elemental-core';
+import { ExtensionAddonRenderer } from '@jpmorganchase/elemental-core/components/Docs';
+import * as React from 'react';
+import { ServiceNode } from '../../utils/oas/types';
+declare type SidebarLayoutProps = {
+    serviceNode: ServiceNode;
+    logo?: string;
+    hideTryIt?: boolean;
+    hideSchemas?: boolean;
+    hideInternal?: boolean;
+    hideExport?: boolean;
+    exportProps?: ExportButtonProps;
+    tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
+    tryItCorsProxy?: string;
+    compact?: number | boolean;
+    renderExtensionAddon?: ExtensionAddonRenderer;
+};
+export declare const APIWithResponsiveSidebarLayout: React.FC<SidebarLayoutProps>;
+export {};

package/components/API/APIWithSidebarLayout.d.ts

@@ -1,4 +1,5 @@
-import { ExportButtonProps } from '@jpmorganchase/elemental-core';
+import { ExportButtonProps, TableOfContentsItem } from '@jpmorganchase/elemental-core';
+import { ExtensionAddonRenderer } from '@jpmorganchase/elemental-core/components/Docs';
 import * as React from 'react';
 import { ServiceNode } from '../../utils/oas/types';
 declare type SidebarLayoutProps = {
@@ -12,9 +13,18 @@ declare type SidebarLayoutProps = {
     exportProps?: ExportButtonProps;
     tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
     tryItCorsProxy?: string;
+    renderExtensionAddon?: ExtensionAddonRenderer;
     tryItOutDefaultServer?: string;
     useCustomNav?: boolean;
     layout?: 'sidebar' | 'drawer';
 };
 export declare const APIWithSidebarLayout: React.FC<SidebarLayoutProps>;
+declare type SidebarProps = {
+    serviceNode: ServiceNode;
+    logo?: string;
+    container: React.RefObject<HTMLElement>;
+    pathname: string;
+    tree: TableOfContentsItem[];
+};
+export declare const Sidebar: React.FC<SidebarProps>;
 export {};

package/components/API/APIWithStackedLayout.d.ts

@@ -1,7 +1,15 @@
 import { ExportButtonProps } from '@jpmorganchase/elemental-core';
+import { ExtensionAddonRenderer } from '@jpmorganchase/elemental-core/components/Docs';
 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 +18,9 @@ declare type StackedLayoutProps = {
     exportProps?: ExportButtonProps;
     tryItCredentialsPolicy?: TryItCredentialsPolicy;
     tryItCorsProxy?: string;
+    showPoweredByLink?: boolean;
+    location: Location;
+    renderExtensionAddon?: ExtensionAddonRenderer;
     tryItOutDefaultServer?: string;
 };
 export declare const APIWithStackedLayout: React.FC<StackedLayoutProps>;

package/components/API/utils.d.ts

@@ -1,12 +1,13 @@
 import { TableOfContentsItem } from '@jpmorganchase/elemental-core';
-import { OperationNode, ServiceChildNode, ServiceNode } from '../../utils/oas/types';
-export declare type TagGroup = {
+import { OperationNode, SchemaNode, ServiceChildNode, ServiceNode, WebhookNode } from '../../utils/oas/types';
+declare type GroupableNode = OperationNode | WebhookNode | SchemaNode;
+export declare type TagGroup<T extends GroupableNode> = {
     title: string;
-    items: OperationNode[];
+    items: T[];
 };
-export declare const computeTagGroups: (serviceNode: ServiceNode) => {
-    groups: TagGroup[];
-    ungrouped: OperationNode[];
+export declare function computeTagGroups<T extends GroupableNode>(serviceNode: ServiceNode, nodeType: T['type']): {
+    groups: TagGroup<T>[];
+    ungrouped: T[];
 };
 interface ComputeAPITreeConfig {
     hideSchemas?: boolean;

package/containers/API.d.ts

@@ -1,4 +1,5 @@
 import { RoutingProps } from '@jpmorganchase/elemental-core';
+import { ExtensionAddonRenderer } from '@jpmorganchase/elemental-core/components/Docs';
 import * as React from 'react';
 export declare type APIProps = APIPropsWithDocument | APIPropsWithUrl;
 export declare type APIPropsWithUrl = {
@@ -9,7 +10,7 @@ export declare type APIPropsWithDocument = {
     apiDescriptionUrl?: string;
 } & CommonAPIProps;
 export interface CommonAPIProps extends RoutingProps {
-    layout?: 'sidebar' | 'stacked' | 'drawer';
+    layout?: 'sidebar' | 'stacked' | 'responsive' | 'drawer';
     logo?: string;
     hideTryIt?: boolean;
     hideSchemas?: boolean;
@@ -18,6 +19,8 @@ export interface CommonAPIProps extends RoutingProps {
     hideInlineExamples?: boolean;
     tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
     tryItCorsProxy?: string;
+    maxRefDepth?: number;
+    renderExtensionAddon?: ExtensionAddonRenderer;
     tryItOutDefaultServer?: string;
     useCustomNav?: boolean;
 }

package/containers/API.stories.d.ts

@@ -50,7 +50,9 @@ export declare const APIWithInternalOperations: import("@storybook/types").Annot
 export declare const OpenApi3Schema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
 export declare const BadgesForSchema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
 export declare const StackedLayout: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
+export declare const ResponsiveLayout: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
 export declare const Box: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
 export declare const DigitalOcean: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
 export declare const Github: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
 export declare const Instagram: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
+export declare const WithExtensionRenderer: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;

package/containers/story-helper.d.ts

@@ -0,0 +1,2 @@
+export declare const renderExtensionRenderer: (props: any) => JSX.Element | null;
+export declare const wrapOptionsContext: (story: any) => JSX.Element;

package/index.d.ts

@@ -1,5 +1,7 @@
+export { APIWithStackedLayout } from './components/API/APIWithStackedLayout';
 export type { APIProps } from './containers/API';
 export { API } from './containers/API';
 export { useGetOasNavTree } from './hooks/oas-nav-tree/useGetOasNavTree';
 export { useExportDocumentProps } from './hooks/useExportDocumentProps';
 export { transformOasToServiceNode } from './utils/oas';
+export type { ServiceNode } from './utils/oas/types';

package/index.esm.js

@@ -1,14 +1,15 @@
-import { isHttpOperation, isHttpService, Logo, TableOfContents, PoweredByLink, SidebarLayout, ParsedDocs, HttpMethodColors, DeprecatedBadge, TryItWithRequestSamples, Docs, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@jpmorganchase/elemental-core';
-import { Flex, Heading, Box, Icon, Tabs, TabList, Tab, TabPanels, TabPanel } from '@stoplight/mosaic';
-import flow from 'lodash/flow.js';
+import { isHttpOperation, isHttpWebhookOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, ResponsiveSidebarLayout, ElementsOptionsProvider, SidebarLayout, Logo, TableOfContents, PoweredByLink, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useResponsiveLayout, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@jpmorganchase/elemental-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 { OPERATION_CONFIG, WEBHOOK_CONFIG } from '@stoplight/http-spec/oas';
 import { transformOas2Service, transformOas2Operation } from '@stoplight/http-spec/oas2';
 import { transformOas3Service, transformOas3Operation } from '@stoplight/http-spec/oas3';
 import { encodePointerFragment, pointerToPath } from '@stoplight/json';
@@ -16,13 +17,12 @@ import get from 'lodash/get.js';
 import isObject from 'lodash/isObject.js';
 import last from 'lodash/last.js';
 
-const computeTagGroups = (serviceNode) => {
+function computeTagGroups(serviceNode, nodeType) {
     const groupsByTagId = {};
     const ungrouped = [];
     const lowerCaseServiceTags = serviceNode.tags.map(tn => tn.toLowerCase());
-    for (const node of serviceNode.children) {
-        if (node.type !== NodeType.HttpOperation)
-            continue;
+    const groupableNodes = serviceNode.children.filter(n => n.type === nodeType);
+    for (const node of groupableNodes) {
         const tagName = node.tags[0];
         if (tagName) {
             const tagId = tagName.toLowerCase();
@@ -58,7 +58,7 @@ const computeTagGroups = (serviceNode) => {
     })
         .map(([, tagGroup]) => tagGroup);
     return { groups: orderedTagGroups, ungrouped };
-};
+}
 const defaultComputerAPITreeConfig = {
     hideSchemas: false,
     hideInternal: false,
@@ -73,62 +73,32 @@ const computeAPITree = (serviceNode, config = {}) => {
         type: 'overview',
         meta: '',
     });
-    const operationNodes = serviceNode.children.filter(node => node.type === NodeType.HttpOperation);
-    if (operationNodes.length) {
+    const hasOperationNodes = serviceNode.children.some(node => node.type === NodeType.HttpOperation);
+    if (hasOperationNodes) {
         tree.push({
             title: 'Endpoints',
         });
-        const { groups, ungrouped } = computeTagGroups(serviceNode);
-        ungrouped.forEach(operationNode => {
-            if (mergedConfig.hideInternal && operationNode.data.internal) {
-                return;
-            }
-            tree.push({
-                id: operationNode.uri,
-                slug: operationNode.uri,
-                title: operationNode.name,
-                type: operationNode.type,
-                meta: operationNode.data.method,
-            });
-        });
-        groups.forEach(group => {
-            const items = group.items.flatMap(operationNode => {
-                if (mergedConfig.hideInternal && operationNode.data.internal) {
-                    return [];
-                }
-                return {
-                    id: operationNode.uri,
-                    slug: operationNode.uri,
-                    title: operationNode.name,
-                    type: operationNode.type,
-                    meta: operationNode.data.method,
-                };
-            });
-            if (items.length > 0) {
-                tree.push({
-                    title: group.title,
-                    items,
-                });
-            }
+        const { groups, ungrouped } = computeTagGroups(serviceNode, NodeType.HttpOperation);
+        addTagGroupsToTree(groups, ungrouped, tree, NodeType.HttpOperation, mergedConfig.hideInternal);
+    }
+    const hasWebhookNodes = serviceNode.children.some(node => node.type === NodeType.HttpWebhook);
+    if (hasWebhookNodes) {
+        tree.push({
+            title: 'Webhooks',
         });
+        const { groups, ungrouped } = computeTagGroups(serviceNode, NodeType.HttpWebhook);
+        addTagGroupsToTree(groups, ungrouped, tree, NodeType.HttpWebhook, mergedConfig.hideInternal);
     }
     let schemaNodes = serviceNode.children.filter(node => node.type === NodeType.Model);
     if (mergedConfig.hideInternal) {
-        schemaNodes = schemaNodes.filter(node => !node.data['x-internal']);
+        schemaNodes = schemaNodes.filter(n => !isInternal(n));
     }
     if (!mergedConfig.hideSchemas && schemaNodes.length) {
         tree.push({
             title: 'Schemas',
         });
-        schemaNodes.forEach(node => {
-            tree.push({
-                id: node.uri,
-                slug: node.uri,
-                title: node.name,
-                type: node.type,
-                meta: '',
-            });
-        });
+        const { groups, ungrouped } = computeTagGroups(serviceNode, NodeType.Model);
+        addTagGroupsToTree(groups, ungrouped, tree, NodeType.Model, mergedConfig.hideInternal);
     }
     return tree;
 };
@@ -148,52 +118,48 @@ const findFirstNodeSlug = (tree) => {
 };
 const isInternal = (node) => {
     const data = node.data;
-    if (isHttpOperation(data)) {
+    if (isHttpOperation(data) || isHttpWebhookOperation(data)) {
         return !!data.internal;
     }
     if (isHttpService(data)) {
         return false;
     }
     return !!data['x-internal'];
-};
-
-const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples = false, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, layout, }) => {
-    const container = React.useRef(null);
-    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, hideInlineExamples, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node, hideInlineExamples]);
-    if (!node) {
-        const firstSlug = findFirstNodeSlug(tree);
-        if (firstSlug) {
-            return React.createElement(Redirect, { to: firstSlug });
+};
+const addTagGroupsToTree = (groups, ungrouped, tree, itemsType, hideInternal) => {
+    ungrouped.forEach(node => {
+        if (hideInternal && isInternal(node)) {
+            return;
         }
-    }
-    if (hideInternal && node && isInternal(node)) {
-        return React.createElement(Redirect, { to: "/" });
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
+        tree.push({
+            id: node.uri,
+            slug: node.uri,
+            title: node.name,
+            type: node.type,
+            meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '',
+        });
+    });
+    groups.forEach(group => {
+        const items = group.items.flatMap(node => {
+            if (hideInternal && isInternal(node)) {
+                return [];
+            }
+            return {
+                id: node.uri,
+                slug: node.uri,
+                title: node.name,
+                type: node.type,
+                meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '',
+            };
+        });
+        if (items.length > 0) {
+            tree.push({
+                title: group.title,
+                items,
+                itemsType,
+            });
         }
-    };
-    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, renderSideBar: !useCustomNav, layout: layout }, 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 itemUriMatchesPathname = (itemUri, pathname) => itemUri === pathname;
@@ -202,24 +168,39 @@ const TryItContext = React.createContext({
     tryItCredentialsPolicy: 'omit',
 });
 TryItContext.displayName = 'TryItContext';
-const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, hideInlineExamples, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
-    const location = useLocation();
-    const { groups } = computeTagGroups(serviceNode);
-    return (React.createElement(TryItContext.Provider, { value: {
-            hideTryIt,
-            hideInlineExamples,
-            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 })),
-            groups.map(group => (React.createElement(Group, { key: group.title, group: group }))))));
+const LocationContext = React.createContext({
+    location: {
+        hash: '',
+        key: '',
+        pathname: '',
+        search: '',
+        state: '',
+    },
+});
+LocationContext.displayName = 'LocationContext';
+const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, hideInlineExamples, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, showPoweredByLink = true, location, tryItOutDefaultServer, }) => {
+    const { groups: operationGroups } = computeTagGroups(serviceNode, NodeType.HttpOperation);
+    const { groups: webhookGroups } = computeTagGroups(serviceNode, NodeType.HttpWebhook);
+    return (React.createElement(LocationContext.Provider, { value: { location } },
+        React.createElement(TryItContext.Provider, { value: {
+                hideTryIt,
+                tryItCredentialsPolicy,
+                corsProxy: tryItCorsProxy,
+                hideInlineExamples,
+                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, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, renderExtensionAddon: renderExtensionAddon, tryItOutDefaultServer: tryItOutDefaultServer })),
+                operationGroups.length > 0 && webhookGroups.length > 0 ? React.createElement(Heading, { size: 2 }, "Endpoints") : null,
+                operationGroups.map(group => (React.createElement(Group, { key: group.title, group: group }))),
+                webhookGroups.length > 0 ? React.createElement(Heading, { size: 2 }, "Webhooks") : null,
+                webhookGroups.map(group => (React.createElement(Group, { key: group.title, group: group })))))));
 };
+APIWithStackedLayout.displayName = 'APIWithStackedLayout';
 const Group = React.memo(({ group }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const { pathname } = useLocation();
+    const { location: { pathname }, } = React.useContext(LocationContext);
     const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
     const shouldExpand = React.useMemo(() => {
         return group.items.some(item => itemUriMatchesPathname(item.uri, pathname));
@@ -237,8 +218,9 @@ const Group = React.memo(({ group }) => {
             return React.createElement(Item, { key: item.uri, item: item });
         }))));
 });
+Group.displayName = 'Group';
 const Item = React.memo(({ item }) => {
-    const location = useLocation();
+    const { location } = React.useContext(LocationContext);
     const { pathname } = location;
     const [isExpanded, setIsExpanded] = React.useState(false);
     const scrollRef = React.useRef(null);
@@ -262,7 +244,7 @@ const Item = React.memo(({ item }) => {
     return (React.createElement(Box, { ref: scrollRef, w: "full", my: 2, border: true, borderColor: { default: isExpanded ? 'light' : 'transparent', hover: 'light' }, bg: { default: isExpanded ? 'code' : 'transparent', hover: 'code' } },
         React.createElement(Flex, { mx: "auto", alignItems: "center", cursor: "pointer", fontSize: "lg", p: 2, onClick: onClick, color: "current" },
             React.createElement(Box, { w: 24, textTransform: "uppercase", textAlign: "center", fontWeight: "semibold", border: true, rounded: true, px: 2, bg: "canvas", className: cn(`sl-mr-5 sl-text-base`, `sl-text-${color}`, `sl-border-${color}`) }, item.data.method || 'UNKNOWN'),
-            React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.data.path),
+            React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.type === NodeType.HttpOperation ? item.data.path : item.name),
             isDeprecated && React.createElement(DeprecatedBadge, null)),
         React.createElement(Collapse, { isOpen: isExpanded },
             React.createElement(Box, { flex: 1, p: 2, fontWeight: "medium", mx: "auto", fontSize: "xl" }, item.name),
@@ -276,17 +258,91 @@ const Item = React.memo(({ item }) => {
                     React.createElement(TabPanel, null,
                         React.createElement(TryItWithRequestSamples, { httpOperation: item.data, hideInlineExamples: hideInlineExamples, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
 });
+Item.displayName = 'Item';
 const Collapse = ({ isOpen, children }) => {
     if (!isOpen)
         return null;
     return React.createElement(Box, null, children);
+};
+Collapse.displayName = 'Collapse';
+
+const APIWithResponsiveSidebarLayout = ({ serviceNode, logo, hideTryIt, compact, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, }) => {
+    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, compact: compact, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node, compact]);
+    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();
+        }
+    };
+    return (React.createElement(ResponsiveSidebarLayout, { onTocClick: handleTocClick, tree: tree, logo: logo !== null && logo !== void 0 ? logo : serviceNode.data.logo, ref: container, name: serviceNode.name }, node && (React.createElement(ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
+        React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon })))));
 };
 
+const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples = false, exportProps, tryItCredentialsPolicy, tryItCorsProxy, renderExtensionAddon, tryItOutDefaultServer, useCustomNav, layout, }) => {
+    const container = React.useRef(null);
+    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, hideInlineExamples, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node, hideInlineExamples]);
+    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 sidebar = (React.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: pathname, tree: tree }));
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav, layout: layout }, node && (React.createElement(ElementsOptionsProvider, { renderExtensionAddon: renderExtensionAddon },
+        React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, tryItOutDefaultServer: tryItOutDefaultServer })))));
+};
+const Sidebar = ({ serviceNode, logo, container, pathname, tree }) => {
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (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" })));
+};
+Sidebar.displayName = 'Sidebar';
+
 var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["Paths"] = "paths";
     NodeTypes["Path"] = "path";
     NodeTypes["Operation"] = "operation";
+    NodeTypes["Webhooks"] = "webhooks";
+    NodeTypes["Webhook"] = "webhook";
     NodeTypes["Components"] = "components";
     NodeTypes["Models"] = "models";
     NodeTypes["Model"] = "model";
@@ -338,6 +394,22 @@ const oas3SourceMap = [
             },
         ],
     },
+    {
+        match: 'webhooks',
+        type: NodeTypes.Webhooks,
+        children: [
+            {
+                notMatch: '^x-',
+                type: NodeTypes.Webhook,
+                children: [
+                    {
+                        match: 'get|post|put|delete|options|head|patch|trace',
+                        type: NodeTypes.Webhook,
+                    },
+                ],
+            },
+        ],
+    },
     {
         match: 'components',
         type: NodeTypes.Components,
@@ -392,7 +464,7 @@ function computeServiceNode(document, map, transformService, transformOperation)
     return serviceNode;
 }
 function computeChildNodes(document, data, map, transformer, parentUri = '') {
-    var _a;
+    var _a, _b;
     const nodes = [];
     if (!isObject(data))
         return nodes;
@@ -405,7 +477,12 @@ function computeChildNodes(document, data, map, transformer, parentUri = '') {
             if (match.type === NodeTypes.Operation && jsonPath.length === 3) {
                 const path = String(jsonPath[1]);
                 const method = String(jsonPath[2]);
-                const operationDocument = transformer({ document, path, method });
+                const operationDocument = transformer({
+                    document,
+                    name: path,
+                    method,
+                    config: OPERATION_CONFIG,
+                });
                 let parsedUri;
                 const encodedPath = String(encodePointerFragment(path));
                 if (operationDocument.iid) {
@@ -422,6 +499,31 @@ function computeChildNodes(document, data, map, transformer, parentUri = '') {
                     tags: ((_a = operationDocument.tags) === null || _a === void 0 ? void 0 : _a.map(tag => tag.name)) || [],
                 });
             }
+            else if (match.type === NodeTypes.Webhook && jsonPath.length === 3) {
+                const name = String(jsonPath[1]);
+                const method = String(jsonPath[2]);
+                const webhookDocument = transformer({
+                    document,
+                    name,
+                    method,
+                    config: WEBHOOK_CONFIG,
+                });
+                let parsedUri;
+                const encodedPath = String(encodePointerFragment(name));
+                if (webhookDocument.iid) {
+                    parsedUri = `/webhooks/${webhookDocument.iid}`;
+                }
+                else {
+                    parsedUri = uri.replace(encodedPath, slugify(name));
+                }
+                nodes.push({
+                    type: NodeType.HttpWebhook,
+                    uri: parsedUri,
+                    data: webhookDocument,
+                    name: webhookDocument.summary || webhookDocument.name,
+                    tags: ((_b = webhookDocument.tags) === null || _b === void 0 ? void 0 : _b.map(tag => tag.name)) || [],
+                });
+            }
             else if (match.type === NodeTypes.Model) {
                 const schemaDocument = get(document, jsonPath);
                 const parsedUri = uri.replace(OAS_MODEL_REGEXP, 'schemas/');
@@ -494,8 +596,10 @@ const propsAreWithDocument = (props) => {
     return props.hasOwnProperty('apiDescriptionDocument');
 };
 const APIImpl = props => {
-    const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
+    const { layout = 'sidebar', apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples, tryItCredentialsPolicy, tryItCorsProxy, maxRefDepth, renderExtensionAddon, tryItOutDefaultServer, useCustomNav, } = props;
+    const location = useLocation();
     const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
+    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
     const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
         if (res.ok) {
             return res.text();
@@ -521,7 +625,10 @@ 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, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav, layout: layout }))));
+    return (React.createElement(InlineRefResolverProvider, { document: parsedDocument, maxRefDepth: maxRefDepth },
+        layout === 'stacked' && (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, location: location, tryItOutDefaultServer: tryItOutDefaultServer })),
+        layout === 'sidebar' && (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav, layout: layout })),
+        layout === 'responsive' && (React.createElement(APIWithResponsiveSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, renderExtensionAddon: renderExtensionAddon, compact: isResponsiveLayoutEnabled }))));
 };
 const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
 
@@ -554,4 +661,4 @@ const useGetOasNavTree = (apiDescriptionDocument) => {
     return groupSchemas(apiTree);
 };
 
-export { API, transformOasToServiceNode, useExportDocumentProps, useGetOasNavTree };
+export { API, APIWithStackedLayout, transformOasToServiceNode, useExportDocumentProps, useGetOasNavTree };