@stoplight/elements-core 8.1.4 → 8.3.1

package/index.mjs

@@ -1,6 +1,6 @@
 import { __rest, __awaiter } from 'tslib';
 import * as React from 'react';
-import React__default, { useContext, useMemo } from 'react';
+import React__default, { useContext, memo, useMemo, useState, useEffect } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
 import { resolveInlineRef, hasRef, isPlainObject as isPlainObject$1, safeParse, safeStringify } from '@stoplight/json';
 import isArray from 'lodash/isArray.js';
@@ -17,7 +17,11 @@ import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
+import isString from 'lodash/isString.js';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
+import cloneDeep from 'lodash/cloneDeep.js';
+import find from 'lodash/find.js';
+import findKey from 'lodash/findKey.js';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
 import { hash } from '@stoplight/http-spec/hash';
 import capitalize from 'lodash/capitalize.js';
@@ -32,7 +36,6 @@ import keyBy from 'lodash/keyBy.js';
 import last from 'lodash/last.js';
 import map from 'lodash/map.js';
 import mapValues from 'lodash/mapValues.js';
-import isString from 'lodash/isString.js';
 import pickBy from 'lodash/pickBy.js';
 import { CodeEditor } from '@stoplight/mosaic-code-editor';
 import * as Sampler from '@stoplight/json-schema-sampler';
@@ -41,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';
@@ -161,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) {
@@ -447,6 +451,9 @@ const HttpMethodColors = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 const HttpCodeColor = {
     0: 'red',
@@ -620,6 +627,29 @@ const getServerUrlWithVariableValues = (server, values) => {
     return urlString;
 };
 
+const extractCodeSamples = (obj) => {
+    if (!isPlainObject$1(obj) || !isPlainObject$1(obj.extensions)) {
+        return [];
+    }
+    const codeSamples = obj.extensions['x-codeSamples'];
+    if (!Array.isArray(codeSamples)) {
+        return [];
+    }
+    return codeSamples.reduce((extracted, item) => {
+        if (isPlainObject$1(item) && isString(item['lang']) && isString(item['source'])) {
+            const lib = isString(item['lib']) ? item['lib'] : undefined;
+            const label = isString(item['label']) ? item['label'] : lib !== null && lib !== void 0 ? lib : item['lang'];
+            extracted.push({
+                lang: item['lang'],
+                lib,
+                label,
+                source: item['source'],
+            });
+        }
+        return extracted;
+    }, []);
+};
+
 const persistAtom = (key, atomInstance) => {
     if (typeof window === 'undefined' || window.localStorage === undefined) {
         return atomInstance;
@@ -825,76 +855,149 @@ const requestSampleConfigs = {
         mosaicCodeViewerLanguage: 'swift',
         httpSnippetLanguage: 'swift',
     },
-};
-const getConfigFor = (language, library) => {
-    var _a;
-    const languageConfig = requestSampleConfigs[language];
-    const libraryConfig = ((_a = languageConfig.libraries) === null || _a === void 0 ? void 0 : _a[library]) || {};
-    return Object.assign(Object.assign({}, languageConfig), libraryConfig);
 };
 
-const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', atom('Shell'));
-const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', atom('cURL'));
+const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', atom('shell'));
+const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', atom('curl'));
 const fallbackText = 'Unable to generate code example';
-const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) => {
+const RequestSamples = memo(({ request, embeddedInMd = false, customCodeSamples = [] }) => {
     const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
-    const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const [requestSample, setRequestSample] = React__default.useState(null);
-    React__default.useEffect(() => {
-        let isStale = false;
-        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
-            .then(example => {
-            if (!isStale) {
-                setRequestSample(example);
+    const allRequestSamples = useMemo(() => {
+        var _a;
+        const requestSamples = cloneDeep(requestSampleConfigs);
+        Object.entries(requestSamples).forEach(([languageKey, value]) => {
+            var _a;
+            value.displayText = languageKey;
+            Object.entries(((_a = value.libraries) !== null && _a !== void 0 ? _a : (value.libraries = {}))).forEach(([libKey, value]) => {
+                value.displayText = `${languageKey} / ${libKey}`;
+            });
+        });
+        for (const customCodeSample of customCodeSamples) {
+            const existingLanguageSampleKey = findKey(requestSamples, {
+                httpSnippetLanguage: customCodeSample.lang.toLowerCase(),
+            });
+            const existingLanguageSample = requestSamples[existingLanguageSampleKey];
+            if (!existingLanguageSample) {
+                const newLanguageSample = {
+                    displayText: customCodeSample.lang,
+                    mosaicCodeViewerLanguage: customCodeSample.lang,
+                    httpSnippetLanguage: customCodeSample.lang,
+                    libraries: {},
+                };
+                if (customCodeSample.lib) {
+                    newLanguageSample.libraries[customCodeSample.lib] = {
+                        displayText: `${customCodeSample.lang} / ${customCodeSample.lib}`,
+                        httpSnippetLibrary: customCodeSample.lib,
+                        sampleCode: customCodeSample.source,
+                    };
+                }
+                else {
+                    newLanguageSample.sampleCode = customCodeSample.source;
+                }
+                requestSamples[customCodeSample.label] = newLanguageSample;
             }
-        })
-            .catch(() => {
-            if (!isStale) {
-                setRequestSample(fallbackText);
+            else {
+                (_a = existingLanguageSample.libraries) !== null && _a !== void 0 ? _a : (existingLanguageSample.libraries = {});
+                if (customCodeSample.lib) {
+                    const existingLibrarySampleKey = findKey(existingLanguageSample.libraries, {
+                        httpSnippetLibrary: customCodeSample.lib,
+                    });
+                    const existingLibrarySample = existingLanguageSample.libraries[existingLibrarySampleKey];
+                    if (!existingLibrarySample) {
+                        const newLibrarySample = {
+                            displayText: `${existingLanguageSample} / ${customCodeSample.lib}`,
+                            httpSnippetLibrary: customCodeSample.lib,
+                            sampleCode: customCodeSample.source,
+                        };
+                        existingLanguageSample.libraries[customCodeSample.lib] = newLibrarySample;
+                    }
+                    else {
+                        existingLibrarySample.displayText = `${existingLanguageSampleKey} / ${existingLibrarySampleKey}`;
+                        existingLibrarySample.sampleCode = customCodeSample.source;
+                    }
+                }
+                else {
+                    existingLanguageSample.sampleCode = customCodeSample.source;
+                }
             }
-        });
-        return () => {
-            isStale = true;
-        };
-    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
-    const menuItems = useMemo(() => {
-        const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
-            const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
+        }
+        return requestSamples;
+    }, [customCodeSamples]);
+    const [menuItems, selectedSampleConfig] = useMemo(() => {
+        var _a, _b;
+        const items = Object.entries(allRequestSamples).map(([languageLabel, languageConfig]) => {
+            var _a;
+            const hasLibraries = Object.keys((_a = languageConfig.libraries) !== null && _a !== void 0 ? _a : {}).length > 0;
             return {
-                id: language,
-                title: language,
-                isChecked: selectedLanguage === language,
+                id: languageLabel,
+                title: languageLabel,
+                isChecked: selectedLanguage === languageConfig.httpSnippetLanguage,
+                closeOnPress: !hasLibraries,
                 onPress: hasLibraries
                     ? undefined
                     : () => {
-                        setSelectedLanguage(language);
+                        setSelectedLanguage(languageConfig.httpSnippetLanguage);
                         setSelectedLibrary('');
                     },
-                children: config.libraries
-                    ? Object.keys(config.libraries).map(library => ({
-                        id: `${language}-${library}`,
-                        title: library,
-                        isChecked: selectedLanguage === language && selectedLibrary === library,
+                children: hasLibraries
+                    ? Object.entries(languageConfig.libraries).map(([libraryLabel, libraryConfig]) => ({
+                        id: `${languageLabel}-${libraryLabel}`,
+                        title: libraryLabel,
+                        isChecked: selectedLanguage === languageConfig.httpSnippetLanguage &&
+                            selectedLibrary === libraryConfig.httpSnippetLibrary,
                         onPress: () => {
-                            setSelectedLanguage(language);
-                            setSelectedLibrary(library);
+                            setSelectedLanguage(languageConfig.httpSnippetLanguage);
+                            setSelectedLibrary(libraryConfig.httpSnippetLibrary);
                         },
                     }))
                     : undefined,
             };
         });
-        return items;
-    }, [selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+        const selectedLanguageSample = find(allRequestSamples, { httpSnippetLanguage: selectedLanguage });
+        const selectedLibrarySample = find((_a = selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.libraries) !== null && _a !== void 0 ? _a : {}, {
+            httpSnippetLibrary: selectedLibrary,
+        });
+        return [
+            items,
+            Object.assign(Object.assign(Object.assign({}, selectedLibrarySample), selectedLanguageSample), { displayText: (_b = selectedLibrarySample === null || selectedLibrarySample === void 0 ? void 0 : selectedLibrarySample.displayText) !== null && _b !== void 0 ? _b : selectedLanguageSample === null || selectedLanguageSample === void 0 ? void 0 : selectedLanguageSample.displayText }),
+        ];
+    }, [allRequestSamples, selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
+    const [requestSample, setRequestSample] = useState(null);
+    useEffect(() => {
+        let isStale = false;
+        if (selectedSampleConfig) {
+            if (selectedSampleConfig.sampleCode) {
+                setRequestSample(selectedSampleConfig.sampleCode);
+            }
+            else {
+                convertRequestToSample(selectedSampleConfig.httpSnippetLanguage, selectedSampleConfig.httpSnippetLibrary, request)
+                    .then(example => {
+                    if (!isStale) {
+                        setRequestSample(example);
+                    }
+                })
+                    .catch(() => {
+                    if (!isStale) {
+                        setRequestSample(fallbackText);
+                    }
+                });
+            }
+        }
+        else {
+            setRequestSample(fallbackText);
+        }
+        return () => {
+            isStale = true;
+        };
+    }, [request, selectedSampleConfig]);
     return (React__default.createElement(Panel, { rounded: embeddedInMd ? undefined : true, isCollapsible: embeddedInMd },
         React__default.createElement(Panel.Titlebar, { rightComponent: React__default.createElement(CopyButton, { size: "sm", copyValue: requestSample || '' }) },
             React__default.createElement(Box, { ml: -2 },
                 React__default.createElement(Menu, { "aria-label": "Request Sample Language", closeOnPress: true, items: menuItems, renderTrigger: ({ isOpen }) => (React__default.createElement(Button, { size: "sm", iconRight: "chevron-down", appearance: "minimal", active: isOpen },
                         "Request Sample: ",
-                        selectedLanguage,
-                        " ",
-                        selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                        selectedSampleConfig.displayText)) }))),
+        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: selectedSampleConfig === null || selectedSampleConfig === void 0 ? void 0 : selectedSampleConfig.mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
                 ? undefined
                 :
                     {
@@ -2158,6 +2261,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
+    const customCodeSamples = extractCodeSamples(httpOperation);
     const getValues = () => Object.keys(bodyParameterValues)
         .filter(param => { var _a; return (_a = !isAllowedEmptyValues[param]) !== null && _a !== void 0 ? _a : true; })
         .reduce((previousValue, currentValue) => {
@@ -2287,11 +2391,11 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             tryItPanelContents));
     }
     else {
-        tryItPanelElem = (React.createElement(Box, { className: "TryItPanel", bg: "canvas-100", rounded: "lg" }, tryItPanelContents));
+        tryItPanelElem = (React.createElement(Box, { className: "TryItPanel", bg: "canvas-100" }, tryItPanelContents));
     }
     return (React.createElement(Box, { rounded: "lg", overflowY: "hidden" },
         tryItPanelElem,
-        requestData && embeddedInMd && React.createElement(RequestSamples, { request: requestData, embeddedInMd: true }),
+        requestData && embeddedInMd && (React.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples, embeddedInMd: true })),
         response && !('error' in response) && React.createElement(TryItResponse, { response: response }),
         response && 'error' in response && React.createElement(ResponseError, { state: response })));
 };
@@ -2335,14 +2439,41 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
 const TryItWithRequestSamples = (_a) => {
     var { hideTryIt } = _a, props = __rest(_a, ["hideTryIt"]);
     const [requestData, setRequestData] = React.useState();
+    const customCodeSamples = extractCodeSamples(props.httpOperation);
     return (React.createElement(VStack, { spacing: 6 },
         !hideTryIt && (React.createElement(InvertTheme, null,
             React.createElement(Box, null,
                 React.createElement(TryIt, Object.assign({}, props, { onRequestChange: setRequestData }))))),
-        requestData && React.createElement(RequestSamples, { request: requestData }),
+        requestData && React.createElement(RequestSamples, { request: requestData, customCodeSamples: customCodeSamples }),
         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,
@@ -2500,7 +2631,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]);
@@ -2515,7 +2646,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';
 
@@ -2539,12 +2670,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 }) => {
@@ -2684,7 +2815,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(() => {
@@ -2702,7 +2833,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) => {
@@ -2778,6 +2909,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,
@@ -3029,7 +3161,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;
@@ -3052,8 +3184,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 }) => {
@@ -3076,7 +3209,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');
@@ -3086,7 +3219,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"]);
@@ -3192,6 +3325,9 @@ const NODE_META_COLOR = {
     put: 'warning',
     patch: 'warning',
     delete: 'danger',
+    head: '#9061F9',
+    options: '#0D5AA7',
+    trace: '#0D0B28',
 };
 
 function getHtmlIdFromItemId(id) {
@@ -3545,12 +3681,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;
@@ -3895,4 +4032,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.1.4",
+  "version": "8.3.1",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -25,9 +25,9 @@
   },
   "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/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",