@stoplight/elements-core 8.2.0 → 8.3.2

package/__fixtures__/articles/schema-with-refs.d.ts

@@ -1 +1 @@
-export declare const schemaWithRefs = "---\ntitle: Schema with refs\n---\n\n# Schema with refs (Swr)\n\n### Schema\n\nThis is bundled schema with refs\n\n```json jsonSchema\n{\n  \"title\": \"DerefTest\",\n  \"type\": \"object\",\n  \"description\": \"Dereferencing test object\",\n  \"properties\": {\n    \"id\": {\n      \"type\": \"string\"\n    },\n    \"inner\": {\n      \"description\": \"Inner object\",\n      \"title\": \"Inner\",\n      \"type\": \"object\",\n      \"properties\": {\n        \"id\": {\n          \"type\": \"string\"\n        },\n        \"referencedObject\": {\n          \"$ref\": \"#/properties/referencedObject\",\n          \"description\": \"Inner referenced object\"\n        }\n      },\n      \"required\": [\n        \"id\",\n        \"bookingRate\"\n      ]\n    },\n    \"referencedObject\": {\n      \"description\": \"Referenced object\",\n      \"title\": \"ReferencedObject\",\n      \"type\": \"object\",\n      \"required\": [\n        \"property1\",\n        \"property2\",\n        \"property3\"\n      ],\n      \"properties\": {\n        \"property1\": {\n          \"type\": \"integer\",\n          \"description\": \"Property 1\"\n        },\n        \"property2\": {\n          \"type\": \"string\",\n          \"description\": \"Property 2\"\n        },\n        \"property3\": {\n          \"type\": \"boolean\",\n          \"description\": \"Property 3\"\n        }\n      }\n    }\n  },\n  \"required\": [\n    \"id\",\n    \"inner\",\n    \"referencedObject\"\n  ]\n}\n```";
+export declare const schemaWithRefs = "---\ntitle: Schema with refs\n---\n\n# Schema with refs (Swr)\n\n### Schema\n\nThis is bundled schema with refs\n\n```json jsonSchema\n{\n  \"title\": \"DerefTest\",\n  \"type\": \"object\",\n  \"description\": \"Dereferencing test object\",\n  \"properties\": {\n    \"id\": {\n      \"type\": \"string\"\n    },\n    \"inner\": {\n      \"description\": \"Inner object\",\n      \"title\": \"Inner\",\n      \"type\": \"object\",\n      \"properties\": {\n        \"id\": {\n          \"type\": \"string\"\n        },\n        \"referencedObject\": {\n          \"$ref\": \"#/properties/referencedObject\",\n          \"description\": \"Inner referenced object\"\n        }\n      },\n      \"required\": [\n        \"id\",\n        \"bookingRate\"\n      ]\n    },\n    \"referencedObject\": {\n      \"description\": \"Referenced object\",\n      \"title\": \"ReferencedObject\",\n      \"type\": \"object\",\n      \"required\": [\n        \"property1\",\n        \"property2\",\n        \"property3\"\n      ],\n      \"properties\": {\n        \"property1\": {\n          \"type\": \"integer\",\n          \"description\": \"Property 1\"\n        },\n        \"property2\": {\n          \"type\": \"string\",\n          \"description\": \"Property 2\"\n        },\n        \"property3\": {\n          \"type\": \"boolean\",\n          \"description\": \"Property 3\"\n        },\n        \"property4\": {\n          \"type\": \"string\",\n          \"enum\": [\n            \"BUSINESS\",\n            \"PERSONAL\",\n            \"OTHER\"\n          ],\n          \"x-enum-descriptions\": {\n            \"BUSINESS\": \"Enum description for BUSINESS\",\n            \"PERSONAL\": \"Enum description for PERSONAL\",\n            \"OTHER\": \"Enum description for OTHER\"\n          }\n        }\n      }\n    }\n  },\n  \"required\": [\n    \"id\",\n    \"inner\",\n    \"referencedObject\"\n  ]\n}\n```";

package/components/Docs/Article/Article.stories.d.ts

@@ -1,13 +1,17 @@
 declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export declare const KitchenSink: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export declare const MultipleTryIts: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Docs.d.ts

@@ -1,3 +1,4 @@
+import { SchemaNode } from '@stoplight/json-schema-tree';
 import type { NodeHasChangedFn, NodeType } from '@stoplight/types';
 import { Location } from 'history';
 import * as React from 'react';
@@ -5,6 +6,13 @@ import { ParsedNode } from '../../types';
 import { ReferenceResolver } from '../../utils/ref-resolving/ReferenceResolver';
 import { ExportButtonProps } from './HttpService/ExportButton';
 declare type NodeUnsupportedFn = (err: 'dataEmpty' | 'invalidType' | Error) => void;
+export declare type VendorExtensionsData = Record<string, unknown>;
+export declare type ExtensionRowProps = {
+    schemaNode: SchemaNode;
+    nestingLevel: number;
+    vendorExtensions: VendorExtensionsData;
+};
+export declare type ExtensionAddonRenderer = (props: ExtensionRowProps) => React.ReactNode;
 interface BaseDocsProps {
     className?: string;
     uri?: string;
@@ -27,6 +35,7 @@ interface BaseDocsProps {
     };
     nodeHasChanged?: NodeHasChangedFn<React.ReactNode>;
     nodeUnsupported?: NodeUnsupportedFn;
+    renderExtensionAddon?: ExtensionAddonRenderer;
 }
 export interface DocsProps extends BaseDocsProps {
     nodeType: NodeType;

package/components/Docs/HttpOperation/Callbacks.d.ts

@@ -1,4 +1,5 @@
 import { IHttpCallbackOperation } from '@stoplight/types';
+import { ExtensionAddonRenderer } from '../Docs';
 export interface CallbacksProps {
     callbacks: IHttpCallbackOperation[];
     isCompact?: boolean;
@@ -6,6 +7,7 @@ export interface CallbacksProps {
 export interface CallbackProps {
     data: IHttpCallbackOperation;
     isCompact?: boolean;
+    renderExtensionAddon?: ExtensionAddonRenderer;
 }
 export declare const Callbacks: {
     ({ callbacks, isCompact }: CallbacksProps): JSX.Element;

package/components/Docs/HttpOperation/HttpOperation.stories.d.ts

@@ -1,10 +1,9 @@
 declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
 export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
-} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
-export declare const StoryWithCustomCodeSamples: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
-    data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/HttpService/HttpService.stories.d.ts

@@ -1,7 +1,9 @@
 declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
 export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Model/Model.stories.d.ts

@@ -1,7 +1,9 @@
 declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
 export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
     data: any;
+    renderExtensionAddon?: import("..").ExtensionAddonRenderer | undefined;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/NodeVendorExtensions.d.ts

@@ -0,0 +1,7 @@
+import { INode } from '@stoplight/types';
+import type { JSONSchema7 } from 'json-schema';
+import * as React from 'react';
+export declare type NodeVendorExtensionsProps = {
+    data: INode | JSONSchema7;
+};
+export declare const NodeVendorExtensions: React.NamedExoticComponent<NodeVendorExtensionsProps>;

package/components/Docs/story-helper.d.ts

@@ -1,8 +1,10 @@
 import type { ErrorBoundaryProps } from '@stoplight/react-error-boundary';
 import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
+import { ExtensionAddonRenderer } from './Docs';
 declare type DocsProps = {
     data: any;
+    renderExtensionAddon?: ExtensionAddonRenderer;
 } & ErrorBoundaryProps;
 declare type storyOptions = DocsProps & {
     layoutOptions?: object;

package/components/Docs/story-renderer-helper.d.ts

@@ -0,0 +1,3 @@
+import { ExtensionAddonRenderer } from './Docs';
+export declare const renderExtensionRenderer: ExtensionAddonRenderer;
+export declare const wrapOptionsContext: (story: any) => JSX.Element;

package/components/TableOfContents/constants.d.ts

@@ -24,4 +24,7 @@ export declare const NODE_META_COLOR: {
     put: string;
     patch: string;
     delete: string;
+    head: string;
+    options: string;
+    trace: string;
 };

package/constants.d.ts

@@ -11,6 +11,9 @@ export declare const HttpMethodColors: {
     readonly put: "warning";
     readonly patch: "warning";
     readonly delete: "danger";
+    readonly head: "#9061F9";
+    readonly options: "#0D5AA7";
+    readonly trace: "#0D0B28";
 };
 export declare const HttpCodeColor: {
     readonly 0: "red";

package/context/Options.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { DocsProps } from '../components/Docs';
-export declare type ElementsOptionsContextProps = Pick<DocsProps, 'nodeHasChanged'>;
+export declare type ElementsOptionsContextProps = Pick<DocsProps, 'nodeHasChanged' | 'renderExtensionAddon'>;
 export declare const ElementsOptionsContext: React.Context<ElementsOptionsContextProps>;
 export declare const useOptionsCtx: () => ElementsOptionsContextProps;
 export declare type ProviderProps = Partial<ElementsOptionsContextProps> & {
     children: React.ReactNode;
 };
-export declare function ElementsOptionsProvider({ children, nodeHasChanged }: ProviderProps): JSX.Element;
+export declare function ElementsOptionsProvider({ children, nodeHasChanged, renderExtensionAddon }: ProviderProps): JSX.Element;

package/index.d.ts

@@ -1,4 +1,4 @@
-export { Docs, DocsProps, ParsedDocs } from './components/Docs';
+export { Docs, DocsProps, ExtensionAddonRenderer, ExtensionRowProps, ParsedDocs } from './components/Docs';
 export { DeprecatedBadge } from './components/Docs/HttpOperation/Badges';
 export { ExportButton, ExportButtonProps } from './components/Docs/HttpService/ExportButton';
 export { ResponsiveSidebarLayout } from './components/Layout/ResponsiveSidebarLayout';
@@ -17,6 +17,7 @@ export { TryIt, TryItProps, TryItWithRequestSamples, TryItWithRequestSamplesProp
 export { HttpMethodColors, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName } from './constants';
 export { MockingProvider } from './containers/MockingProvider';
 export { InlineRefResolverProvider } from './context/InlineRefResolver';
+export { ElementsOptionsProvider } from './context/Options';
 export { PersistenceContextProvider, withPersistenceBoundary } from './context/Persistence';
 export { RouterTypeContext } from './context/RouterType';
 export { withMosaicProvider } from './hoc/withMosaicProvider';

package/index.esm.js

@@ -44,6 +44,7 @@ import uniq from 'lodash/uniq.js';
 import orderBy from 'lodash/orderBy.js';
 import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
+import memoize from 'lodash/memoize.js';
 import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
 import sortBy from 'lodash/sortBy.js';
@@ -164,8 +165,8 @@ const ElementsOptionsContext = React.createContext(DEFAULT_CONTEXT);
 const useOptionsCtx = () => {
     return React.useContext(ElementsOptionsContext) || DEFAULT_CONTEXT;
 };
-function ElementsOptionsProvider({ children, nodeHasChanged }) {
-    return (React.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged }) }, children));
+function ElementsOptionsProvider({ children, nodeHasChanged, renderExtensionAddon }) {
+    return (React.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged, renderExtensionAddon }) }, children));
 }
 
 function isSMDASTRoot(maybeAst) {
@@ -450,6 +451,9 @@ const HttpMethodColors = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 const HttpCodeColor = {
     0: 'red',
@@ -2444,6 +2448,32 @@ const TryItWithRequestSamples = (_a) => {
         React.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
+const getVendorExtensions = memoize((data) => {
+    const vendorExtensionNames = Object.keys(data).filter(item => item.startsWith('x-'));
+    const vendorExtensions = vendorExtensionNames.reduce((previousValue, currentValue, currentIndex) => {
+        return Object.assign(Object.assign({}, previousValue), { [currentValue]: data[currentValue] });
+    }, {});
+    return vendorExtensions;
+});
+const NodeVendorExtensions = React.memo(({ data }) => {
+    const { renderExtensionAddon } = useOptionsCtx();
+    if (!renderExtensionAddon) {
+        return null;
+    }
+    const originalObject = getOriginalObject(data);
+    const vendorExtensions = originalObject.extensions ? originalObject.extensions : getVendorExtensions(originalObject);
+    const vendorExtensionKeys = Object.keys(vendorExtensions);
+    if (vendorExtensionKeys.length === 0) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, renderExtensionAddon({
+        nestingLevel: -1,
+        schemaNode: originalObject,
+        vendorExtensions,
+    })));
+});
+NodeVendorExtensions.displayName = 'NodeVendorExtensions';
+
 const TwoColumnLayout = React__default.forwardRef(({ header, right, left, className }, ref) => (React__default.createElement(VStack, { ref: ref, w: "full", className: className, spacing: 8 },
     header,
     React__default.createElement(Flex, null,
@@ -2516,42 +2546,43 @@ const oauthFlowNames = {
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
         case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
+            return getApiKeyDescription(scheme);
         case 'http':
             switch (scheme.scheme) {
                 case 'basic':
-                    return getBasicAuthDescription();
+                    return getBasicAuthDescription(scheme);
                 case 'bearer':
-                    return getBearerAuthDescription();
+                    return getBearerAuthDescription(scheme);
                 case 'digest':
-                    return getDigestAuthDescription();
+                    return getDigestAuthDescription(scheme);
             }
         case 'oauth2':
             return getOAuthDescription(scheme);
     }
     return '';
 }
-function getApiKeyDescription(inProperty, name) {
+function getApiKeyDescription(scheme) {
+    const { in: inProperty, name } = scheme;
     return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
 
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
 }
-function getBasicAuthDescription() {
+function getBasicAuthDescription(schema) {
     return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
   To use it, send your HTTP requests with an Authorization header that contains the word Basic
   followed by a space and a base64-encoded string \`username:password\`.
 
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
 }
-function getBearerAuthDescription() {
+function getBearerAuthDescription(schema) {
     return `Provide your bearer token in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Bearer 123\``;
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
 }
-function getDigestAuthDescription() {
+function getDigestAuthDescription(schema) {
     return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(schema)}`;
 }
 function getOAuthDescription(scheme) {
     const flows = keys(scheme.flows);
@@ -2574,6 +2605,11 @@ function getOAuthFlowDescription(title, flow) {
 ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     }
     return description;
+}
+function getSecuritySchemeRoles(scheme) {
+    var _a;
+    const scopes = (_a = scheme.extensions) === null || _a === void 0 ? void 0 : _a['x-scopes'];
+    return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
 }
 
 const PanelContent = ({ schemes }) => {
@@ -2601,7 +2637,7 @@ const Body = ({ body, onChange }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     React.useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
@@ -2616,7 +2652,7 @@ const Body = ({ body, onChange }) => {
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2640,12 +2676,12 @@ const defaultStyle = {
     cookie: HttpParamStyles.Form,
 };
 const Parameters = ({ parameters, parameterType }) => {
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
+    return (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2785,7 +2821,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React.useEffect(() => {
@@ -2803,7 +2839,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2879,6 +2915,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
+        React.createElement(NodeVendorExtensions, { data: data }),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
@@ -3130,7 +3167,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
@@ -3153,8 +3190,9 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         data.description && data.type === 'object' && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
+        React.createElement(NodeVendorExtensions, { data: data }),
         isCompact && modelExamples,
-        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
@@ -3177,7 +3215,7 @@ const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -3187,7 +3225,7 @@ const Docs = React.memo((_a) => {
     if (useNodeForRefResolving) {
         elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
-    return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
+    return (React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
 const ParsedDocs = (_a) => {
     var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
@@ -3293,6 +3331,9 @@ const NODE_META_COLOR = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 
 function getHtmlIdFromItemId(id) {
@@ -3646,12 +3687,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+    const { renderExtensionAddon } = useOptionsCtx();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default.createElement(Box, { py: 2 },
         title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
             React__default.createElement(Icon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
             React__default.createElement(Box, { color: "muted", px: 2 }, title))),
-        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
+        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), renderExtensionAddon: renderExtensionAddon })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -3996,4 +4038,4 @@ const createElementClass = (Component, propDescriptors) => {
     };
 };
 
-export { DeprecatedBadge, Docs, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };
+export { DeprecatedBadge, Docs, ElementsOptionsProvider, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };

package/index.js

@@ -46,6 +46,7 @@ var uniq = require('lodash/uniq.js');
 var orderBy = require('lodash/orderBy.js');
 var uniqBy = require('lodash/uniqBy.js');
 var formatXml = require('xml-formatter');
+var memoize = require('lodash/memoize.js');
 var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
 var sortBy = require('lodash/sortBy.js');
@@ -106,6 +107,7 @@ var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
 var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var formatXml__default = /*#__PURE__*/_interopDefaultLegacy(formatXml);
+var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
 var entries__default = /*#__PURE__*/_interopDefaultLegacy(entries);
 var keys__default = /*#__PURE__*/_interopDefaultLegacy(keys);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
@@ -224,8 +226,8 @@ const ElementsOptionsContext = React__namespace.createContext(DEFAULT_CONTEXT);
 const useOptionsCtx = () => {
     return React__namespace.useContext(ElementsOptionsContext) || DEFAULT_CONTEXT;
 };
-function ElementsOptionsProvider({ children, nodeHasChanged }) {
-    return (React__namespace.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged }) }, children));
+function ElementsOptionsProvider({ children, nodeHasChanged, renderExtensionAddon }) {
+    return (React__namespace.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged, renderExtensionAddon }) }, children));
 }
 
 function isSMDASTRoot(maybeAst) {
@@ -510,6 +512,9 @@ const HttpMethodColors = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 const HttpCodeColor = {
     0: 'red',
@@ -2504,6 +2509,32 @@ const TryItWithRequestSamples = (_a) => {
         React__namespace.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
+const getVendorExtensions = memoize__default["default"]((data) => {
+    const vendorExtensionNames = Object.keys(data).filter(item => item.startsWith('x-'));
+    const vendorExtensions = vendorExtensionNames.reduce((previousValue, currentValue, currentIndex) => {
+        return Object.assign(Object.assign({}, previousValue), { [currentValue]: data[currentValue] });
+    }, {});
+    return vendorExtensions;
+});
+const NodeVendorExtensions = React__namespace.memo(({ data }) => {
+    const { renderExtensionAddon } = useOptionsCtx();
+    if (!renderExtensionAddon) {
+        return null;
+    }
+    const originalObject = getOriginalObject(data);
+    const vendorExtensions = originalObject.extensions ? originalObject.extensions : getVendorExtensions(originalObject);
+    const vendorExtensionKeys = Object.keys(vendorExtensions);
+    if (vendorExtensionKeys.length === 0) {
+        return null;
+    }
+    return (React__namespace.createElement(React__namespace.Fragment, null, renderExtensionAddon({
+        nestingLevel: -1,
+        schemaNode: originalObject,
+        vendorExtensions,
+    })));
+});
+NodeVendorExtensions.displayName = 'NodeVendorExtensions';
+
 const TwoColumnLayout = React__default["default"].forwardRef(({ header, right, left, className }, ref) => (React__default["default"].createElement(mosaic.VStack, { ref: ref, w: "full", className: className, spacing: 8 },
     header,
     React__default["default"].createElement(mosaic.Flex, null,
@@ -2576,42 +2607,43 @@ const oauthFlowNames = {
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
         case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
+            return getApiKeyDescription(scheme);
         case 'http':
             switch (scheme.scheme) {
                 case 'basic':
-                    return getBasicAuthDescription();
+                    return getBasicAuthDescription(scheme);
                 case 'bearer':
-                    return getBearerAuthDescription();
+                    return getBearerAuthDescription(scheme);
                 case 'digest':
-                    return getDigestAuthDescription();
+                    return getDigestAuthDescription(scheme);
             }
         case 'oauth2':
             return getOAuthDescription(scheme);
     }
     return '';
 }
-function getApiKeyDescription(inProperty, name) {
+function getApiKeyDescription(scheme) {
+    const { in: inProperty, name } = scheme;
     return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
 
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
 }
-function getBasicAuthDescription() {
+function getBasicAuthDescription(schema) {
     return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
   To use it, send your HTTP requests with an Authorization header that contains the word Basic
   followed by a space and a base64-encoded string \`username:password\`.
 
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
 }
-function getBearerAuthDescription() {
+function getBearerAuthDescription(schema) {
     return `Provide your bearer token in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Bearer 123\``;
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
 }
-function getDigestAuthDescription() {
+function getDigestAuthDescription(schema) {
     return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(schema)}`;
 }
 function getOAuthDescription(scheme) {
     const flows = keys__default["default"](scheme.flows);
@@ -2634,6 +2666,11 @@ function getOAuthFlowDescription(title, flow) {
 ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     }
     return description;
+}
+function getSecuritySchemeRoles(scheme) {
+    var _a;
+    const scopes = (_a = scheme.extensions) === null || _a === void 0 ? void 0 : _a['x-scopes'];
+    return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
 }
 
 const PanelContent = ({ schemes }) => {
@@ -2661,7 +2698,7 @@ const Body = ({ body, onChange }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     React__namespace.useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
@@ -2676,7 +2713,7 @@ const Body = ({ body, onChange }) => {
         description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { markdown: description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2700,12 +2737,12 @@ const defaultStyle = {
     cookie: types.HttpParamStyles.Form,
 };
 const Parameters = ({ parameters, parameterType }) => {
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React__namespace.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
+    return (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2845,7 +2882,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React__namespace.useEffect(() => {
@@ -2863,7 +2900,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
                     React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2939,6 +2976,7 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
         data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
+        React__namespace.createElement(NodeVendorExtensions, { data: data }),
         React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React__namespace.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
@@ -3190,7 +3228,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
@@ -3213,8 +3251,9 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         data.description && data.type === 'object' && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
+        React__namespace.createElement(NodeVendorExtensions, { data: data }),
         isCompact && modelExamples,
-        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
     return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) => {
@@ -3237,7 +3276,7 @@ const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverable
 
 const Docs = React__namespace.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -3247,7 +3286,7 @@ const Docs = React__namespace.memo((_a) => {
     if (useNodeForRefResolving) {
         elem = (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
-    return React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
+    return (React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
 const ParsedDocs = (_a) => {
     var { node, nodeUnsupported } = _a, commonProps = tslib.__rest(_a, ["node", "nodeUnsupported"]);
@@ -3353,6 +3392,9 @@ const NODE_META_COLOR = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 
 function getHtmlIdFromItemId(id) {
@@ -3706,12 +3748,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+    const { renderExtensionAddon } = useOptionsCtx();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default["default"].createElement(mosaic.Box, { py: 2 },
         title && (React__default["default"].createElement(mosaic.Flex, { alignItems: "center", p: 2 },
             React__default["default"].createElement(mosaic.Icon, { icon: NodeTypeIconDefs[types.NodeType.Model], color: NodeTypeColors[types.NodeType.Model] }),
             React__default["default"].createElement(mosaic.Box, { color: "muted", px: 2 }, title))),
-        React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
+        React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), renderExtensionAddon: renderExtensionAddon })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -4062,6 +4105,7 @@ Object.defineProperty(exports, 'DefaultSMDComponents', {
 });
 exports.DeprecatedBadge = DeprecatedBadge;
 exports.Docs = Docs;
+exports.ElementsOptionsProvider = ElementsOptionsProvider;
 exports.ExportButton = ExportButton;
 exports.HttpMethodColors = HttpMethodColors;
 exports.InlineRefResolverProvider = InlineRefResolverProvider;

package/index.mjs

@@ -44,6 +44,7 @@ import uniq from 'lodash/uniq.js';
 import orderBy from 'lodash/orderBy.js';
 import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
+import memoize from 'lodash/memoize.js';
 import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
 import sortBy from 'lodash/sortBy.js';
@@ -164,8 +165,8 @@ const ElementsOptionsContext = React.createContext(DEFAULT_CONTEXT);
 const useOptionsCtx = () => {
     return React.useContext(ElementsOptionsContext) || DEFAULT_CONTEXT;
 };
-function ElementsOptionsProvider({ children, nodeHasChanged }) {
-    return (React.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged }) }, children));
+function ElementsOptionsProvider({ children, nodeHasChanged, renderExtensionAddon }) {
+    return (React.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged, renderExtensionAddon }) }, children));
 }
 
 function isSMDASTRoot(maybeAst) {
@@ -450,6 +451,9 @@ const HttpMethodColors = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 const HttpCodeColor = {
     0: 'red',
@@ -2444,6 +2448,32 @@ const TryItWithRequestSamples = (_a) => {
         React.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
+const getVendorExtensions = memoize((data) => {
+    const vendorExtensionNames = Object.keys(data).filter(item => item.startsWith('x-'));
+    const vendorExtensions = vendorExtensionNames.reduce((previousValue, currentValue, currentIndex) => {
+        return Object.assign(Object.assign({}, previousValue), { [currentValue]: data[currentValue] });
+    }, {});
+    return vendorExtensions;
+});
+const NodeVendorExtensions = React.memo(({ data }) => {
+    const { renderExtensionAddon } = useOptionsCtx();
+    if (!renderExtensionAddon) {
+        return null;
+    }
+    const originalObject = getOriginalObject(data);
+    const vendorExtensions = originalObject.extensions ? originalObject.extensions : getVendorExtensions(originalObject);
+    const vendorExtensionKeys = Object.keys(vendorExtensions);
+    if (vendorExtensionKeys.length === 0) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, renderExtensionAddon({
+        nestingLevel: -1,
+        schemaNode: originalObject,
+        vendorExtensions,
+    })));
+});
+NodeVendorExtensions.displayName = 'NodeVendorExtensions';
+
 const TwoColumnLayout = React__default.forwardRef(({ header, right, left, className }, ref) => (React__default.createElement(VStack, { ref: ref, w: "full", className: className, spacing: 8 },
     header,
     React__default.createElement(Flex, null,
@@ -2516,42 +2546,43 @@ const oauthFlowNames = {
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
         case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
+            return getApiKeyDescription(scheme);
         case 'http':
             switch (scheme.scheme) {
                 case 'basic':
-                    return getBasicAuthDescription();
+                    return getBasicAuthDescription(scheme);
                 case 'bearer':
-                    return getBearerAuthDescription();
+                    return getBearerAuthDescription(scheme);
                 case 'digest':
-                    return getDigestAuthDescription();
+                    return getDigestAuthDescription(scheme);
             }
         case 'oauth2':
             return getOAuthDescription(scheme);
     }
     return '';
 }
-function getApiKeyDescription(inProperty, name) {
+function getApiKeyDescription(scheme) {
+    const { in: inProperty, name } = scheme;
     return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
 
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
 }
-function getBasicAuthDescription() {
+function getBasicAuthDescription(schema) {
     return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
   To use it, send your HTTP requests with an Authorization header that contains the word Basic
   followed by a space and a base64-encoded string \`username:password\`.
 
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
 }
-function getBearerAuthDescription() {
+function getBearerAuthDescription(schema) {
     return `Provide your bearer token in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Bearer 123\``;
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
 }
-function getDigestAuthDescription() {
+function getDigestAuthDescription(schema) {
     return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(schema)}`;
 }
 function getOAuthDescription(scheme) {
     const flows = keys(scheme.flows);
@@ -2574,6 +2605,11 @@ function getOAuthFlowDescription(title, flow) {
 ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     }
     return description;
+}
+function getSecuritySchemeRoles(scheme) {
+    var _a;
+    const scopes = (_a = scheme.extensions) === null || _a === void 0 ? void 0 : _a['x-scopes'];
+    return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
 }
 
 const PanelContent = ({ schemes }) => {
@@ -2601,7 +2637,7 @@ const Body = ({ body, onChange }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     React.useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
@@ -2616,7 +2652,7 @@ const Body = ({ body, onChange }) => {
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2640,12 +2676,12 @@ const defaultStyle = {
     cookie: HttpParamStyles.Form,
 };
 const Parameters = ({ parameters, parameterType }) => {
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
+    return (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2785,7 +2821,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React.useEffect(() => {
@@ -2803,7 +2839,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2879,6 +2915,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
+        React.createElement(NodeVendorExtensions, { data: data }),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
@@ -3130,7 +3167,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
-    const { nodeHasChanged } = useOptionsCtx();
+    const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
@@ -3153,8 +3190,9 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         data.description && data.type === 'object' && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
+        React.createElement(NodeVendorExtensions, { data: data }),
         isCompact && modelExamples,
-        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
@@ -3177,7 +3215,7 @@ const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -3187,7 +3225,7 @@ const Docs = React.memo((_a) => {
     if (useNodeForRefResolving) {
         elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
-    return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
+    return (React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
 const ParsedDocs = (_a) => {
     var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
@@ -3293,6 +3331,9 @@ const NODE_META_COLOR = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 
 function getHtmlIdFromItemId(id) {
@@ -3646,12 +3687,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+    const { renderExtensionAddon } = useOptionsCtx();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default.createElement(Box, { py: 2 },
         title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
             React__default.createElement(Icon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
             React__default.createElement(Box, { color: "muted", px: 2 }, title))),
-        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
+        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), renderExtensionAddon: renderExtensionAddon })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -3996,4 +4038,4 @@ const createElementClass = (Component, propDescriptors) => {
     };
 };
 
-export { DeprecatedBadge, Docs, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };
+export { DeprecatedBadge, Docs, ElementsOptionsProvider, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.2.0",
+  "version": "8.3.2",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -24,10 +24,10 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@stoplight/http-spec": "^7.0.3",
-    "@stoplight/json": "^3.18.1",
-    "@stoplight/json-schema-ref-parser": "^9.0.5",
-    "@stoplight/json-schema-sampler": "0.2.3",
+    "@stoplight/http-spec": "^7.1.0",
+    "@stoplight/json": "^3.21.0",
+    "@stoplight/json-schema-ref-parser": "^9.2.7",
+    "@stoplight/json-schema-sampler": "0.3.0",
     "@stoplight/json-schema-tree": "^4.0.0",
     "@stoplight/json-schema-viewer": "4.16.1",
     "@stoplight/markdown-viewer": "^5.7.0",
@@ -37,7 +37,7 @@
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^3.0.0",
     "@stoplight/types": "^14.1.1",
-    "@stoplight/yaml": "^4.2.3",
+    "@stoplight/yaml": "^4.3.0",
     "classnames": "^2.2.6",
     "httpsnippet-lite": "^3.0.5",
     "jotai": "1.3.9",

package/__fixtures__/operations/x-code-samples.d.ts

@@ -1,2 +0,0 @@
-import { IHttpOperation } from '@stoplight/types';
-export declare const xcodeSamples: IHttpOperation;