@stoplight/elements-core 7.3.3 → 7.3.7

package/index.js

@@ -44,14 +44,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -507,7 +505,7 @@ const getServerUrlWithDefaultValues = (server) => {
     variables.forEach(([variableName, variableInfo]) => {
         urlString = urlString.replace(`{${variableName}}`, variableInfo.default);
     });
-    let url = URI__default['default'](urlString);
+    let url = URI__default["default"](urlString);
     if (url.is('relative') && typeof window !== 'undefined') {
         url = url.absoluteTo(window.location.origin);
     }
@@ -538,7 +536,7 @@ const persistAtom = (key, atomInstance) => {
 
 const convertRequestToSample = (language, library, request) => {
     try {
-        const snippet = new HTTPSnippet__default['default'](request);
+        const snippet = new HTTPSnippet__default["default"](request);
         return snippet.convert(language, library) || null;
     }
     catch (err) {
@@ -722,7 +720,7 @@ const getConfigFor = (language, library) => {
 const selectedLanguageAtom = persistAtom('RequestSamples_selectedLanguage', jotai.atom('Shell'));
 const selectedLibraryAtom = persistAtom('RequestSamples_selectedLibrary', jotai.atom('cURL'));
 const fallbackText = 'Unable to generate code example';
-const RequestSamples = React__default['default'].memo(({ request, embeddedInMd = false }) => {
+const RequestSamples = React__default["default"].memo(({ request, embeddedInMd = false }) => {
     const [selectedLanguage, setSelectedLanguage] = jotai.useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = jotai.useAtom(selectedLibraryAtom);
     const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
@@ -755,16 +753,16 @@ const RequestSamples = React__default['default'].memo(({ request, embeddedInMd =
         });
         return items;
     }, [selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
-    return (React__default['default'].createElement(mosaic.Panel, { rounded: embeddedInMd ? undefined : true, isCollapsible: embeddedInMd },
-        React__default['default'].createElement(mosaic.Panel.Titlebar, { rightComponent: React__default['default'].createElement(mosaic.CopyButton, { size: "sm", copyValue: requestSample || '' }) },
-            React__default['default'].createElement(mosaic.Box, { ml: -2 },
-                React__default['default'].createElement(mosaic.Menu, { "aria-label": "Request Sample Language", closeOnPress: true, items: menuItems, renderTrigger: ({ isOpen }) => (React__default['default'].createElement(mosaic.Button, { size: "sm", iconRight: "chevron-down", appearance: "minimal", active: isOpen },
+    return (React__default["default"].createElement(mosaic.Panel, { rounded: embeddedInMd ? undefined : true, isCollapsible: embeddedInMd },
+        React__default["default"].createElement(mosaic.Panel.Titlebar, { rightComponent: React__default["default"].createElement(mosaic.CopyButton, { size: "sm", copyValue: requestSample || '' }) },
+            React__default["default"].createElement(mosaic.Box, { ml: -2 },
+                React__default["default"].createElement(mosaic.Menu, { "aria-label": "Request Sample Language", closeOnPress: true, items: menuItems, renderTrigger: ({ isOpen }) => (React__default["default"].createElement(mosaic.Button, { size: "sm", iconRight: "chevron-down", appearance: "minimal", active: isOpen },
                         "Request Sample: ",
                         selectedLanguage,
                         " ",
                         selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default['default'].createElement(mosaic.Panel.Content, { p: 0 },
-            React__default['default'].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText }))));
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 },
+            React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText }))));
 });
 
 const useUniqueId = (prefix = 'id_') => React__namespace.useRef(`${prefix}${nanoid.nanoid(8)}`).current;
@@ -924,7 +922,7 @@ const getSecuritySchemeNames = (securitySchemes) => securitySchemes.flatMap(sche
 });
 const securitySchemeValuesAtom = persistAtom('TryIt_securitySchemeValues', jotai.atom({}));
 const usePersistedSecuritySchemeWithValues = () => {
-    const [currentScheme, setCurrentScheme] = React__default['default'].useState();
+    const [currentScheme, setCurrentScheme] = React__default["default"].useState();
     const [securitySchemeValues, setSecuritySchemeValues] = jotai.useAtom(securitySchemeValuesAtom);
     const setPersistedAuthenticationSettings = (securitySchemeWithValues) => {
         setCurrentScheme(securitySchemeWithValues);
@@ -937,7 +935,7 @@ const usePersistedSecuritySchemeWithValues = () => {
         }
     };
     const persistedSecuritySchemeValue = currentScheme && securitySchemeValues[currentScheme.scheme.key];
-    const schemeWithPersistedValue = React__default['default'].useMemo(() => {
+    const schemeWithPersistedValue = React__default["default"].useMemo(() => {
         if (!currentScheme)
             return undefined;
         if (currentScheme.authValue)
@@ -979,12 +977,16 @@ const booleanOptions = [
     { label: 'False', value: 'false' },
     { label: 'True', value: 'true' },
 ];
+function enumOptions(enumValues, required) {
+    const options = lodash.map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
+    return required ? options : [{ label: 'Not Set', value: '' }, ...options];
+}
 function parameterOptions(parameter) {
     var _a, _b;
     return ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'boolean'
         ? booleanOptions
         : ((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== undefined
-            ? lodash.map(parameter.schema.enum, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }))
+            ? enumOptions(parameter.schema.enum, parameter.required)
             : null;
 }
 const selectExampleOption = { value: '', label: 'Pick an example' };
@@ -1032,20 +1034,14 @@ const getValueForParameter = (parameter) => {
     return '';
 };
 const getInitialValueForParameter = (parameter) => {
-    var _a;
     const isRequired = !!parameter.required;
-    const isEnum = !!((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.enum);
-    if (!isEnum && !isRequired)
+    if (!isRequired)
         return '';
     return getValueForParameter(parameter);
 };
 const initialParameterValues = fp.pipe(fp.keyBy((param) => param.name), fp.mapValues(getInitialValueForParameter));
-function mapSchemaPropertiesToParameters(properties) {
-    return Object.entries(properties).map(([name, schema]) => ({
-        name,
-        schema: typeof schema !== 'boolean' ? schema : undefined,
-        examples: typeof schema !== 'boolean' && schema.examples ? [{ key: 'example', value: schema.examples }] : undefined,
-    }));
+function mapSchemaPropertiesToParameters(properties, required) {
+    return Object.entries(properties).map(([name, schema]) => (Object.assign({ name, schema: typeof schema !== 'boolean' ? schema : undefined, examples: typeof schema !== 'boolean' && schema.examples ? [{ key: 'example', value: schema.examples }] : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
 }
 
 const ParameterEditor = ({ parameter, value, onChange, validate }) => {
@@ -1067,6 +1063,7 @@ const ParameterEditor = ({ parameter, value, onChange, validate }) => {
 const FormDataBody = ({ specification, values, onChangeValues }) => {
     const schema = specification.schema;
     const parameters = schema === null || schema === void 0 ? void 0 : schema.properties;
+    const required = schema === null || schema === void 0 ? void 0 : schema.required;
     React__namespace.useEffect(() => {
         if (parameters === undefined) {
             console.warn(`Invalid schema in form data spec: ${json.safeStringify(schema)}`);
@@ -1077,7 +1074,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
     }
     return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
         React__namespace.createElement(mosaic.Panel.Titlebar, null, "Body"),
-        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, mapSchemaPropertiesToParameters(parameters).map(parameter => {
+        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, mapSchemaPropertiesToParameters(parameters, required).map(parameter => {
             const supportsFileUpload = parameterSupportsFileUpload(parameter);
             const value = values[parameter.name];
             if (supportsFileUpload) {
@@ -1149,12 +1146,13 @@ const requestBodyCreators = {
 const useBodyParameterState = (mediaTypeContent) => {
     const isFormDataBody = mediaTypeContent && isFormDataContent(mediaTypeContent);
     const initialState = React__namespace.useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!isFormDataBody) {
             return {};
         }
         const properties = (_b = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.schema) === null || _a === void 0 ? void 0 : _a.properties) !== null && _b !== void 0 ? _b : {};
-        const parameters = mapSchemaPropertiesToParameters(properties);
+        const required = (_c = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.schema) === null || _c === void 0 ? void 0 : _c.required;
+        const parameters = mapSchemaPropertiesToParameters(properties, required);
         return initialParameterValues(parameters);
     }, [isFormDataBody, mediaTypeContent]);
     const [bodyParameterValues, setBodyParameterValues] = React__namespace.useState(initialState);
@@ -1201,7 +1199,7 @@ function ExampleMenu({ examples, requestBody, onChange }) {
 
 const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired } = {}) => {
     const document = useDocument();
-    return React__default['default'].useMemo(() => generateExampleFromMediaTypeContent(mediaTypeContent, document, chosenExampleIndex, {
+    return React__default["default"].useMemo(() => generateExampleFromMediaTypeContent(mediaTypeContent, document, chosenExampleIndex, {
         skipNonRequired,
         skipWriteOnly,
         skipReadOnly,
@@ -1222,6 +1220,7 @@ const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenE
     }
     catch (e) {
         console.warn(e);
+        return `Example cannot be created for this schema\n${e}`;
     }
     return '';
 };
@@ -1251,15 +1250,26 @@ const generateExamplesFromJsonSchema = (schema) => {
     if (examples.length) {
         return examples;
     }
-    const generated = Sampler__namespace.sample(schema);
-    return generated !== null
-        ? [
-            {
-                label: 'default',
-                data: (_b = json.safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
-            },
-        ]
-        : [{ label: 'default', data: '' }];
+    try {
+        const generated = Sampler__namespace.sample(schema, {
+            maxSampleDepth: 4,
+        });
+        return generated !== null
+            ? [
+                {
+                    label: 'default',
+                    data: (_b = json.safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
+                },
+            ]
+            : [{ label: 'default', data: '' }];
+    }
+    catch (e) {
+        console.error(e);
+        return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
+    }
+};
+const exceedsSize = (example, size = 500) => {
+    return example.split(/\r\n|\r|\n/).length > size;
 };
 
 const useTextRequestBodyState = (mediaTypeContent) => {
@@ -1293,10 +1303,12 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security).map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); });
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
-        const url = new URL(URI__default['default'](serverUrl).segment(expandedPath).toString());
+        const url = new URL(URI__default["default"](serverUrl).segment(expandedPath).toString());
         url.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
         const body = typeof bodyInput === 'object' ? yield createRequestBody(mediaTypeContent, bodyInput) : bodyInput;
-        const headers = Object.assign(Object.assign({ 'Content-Type': (_f = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _f !== void 0 ? _f : 'application/json' }, Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair))), mockData === null || mockData === void 0 ? void 0 : mockData.header);
+        const headers = Object.assign(Object.assign(Object.assign({}, ((mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== 'multipart/form-data' && {
+            'Content-Type': (_f = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _f !== void 0 ? _f : 'application/json',
+        })), Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair))), mockData === null || mockData === void 0 ? void 0 : mockData.header);
         return [
             url.toString(),
             {
@@ -1391,7 +1403,7 @@ function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeC
         }
         return {
             method: httpOperation.method.toUpperCase(),
-            url: URI__default['default'](serverUrl).segment(extendedPath).toString(),
+            url: URI__default["default"](serverUrl).segment(extendedPath).toString(),
             httpVersion: 'HTTP/1.1',
             cookies: [],
             headers: [{ name: 'Content-Type', value: mimeType }, ...headerParamsWithAuth],
@@ -1430,6 +1442,9 @@ function getMockData(url, httpOperation, { isEnabled, code, dynamic, example })
     return isEnabled && url ? { url, header: buildPreferHeader({ code, dynamic, example }, httpOperation) } : undefined;
 }
 function buildPreferHeader({ code, example, dynamic }, httpOperation) {
+    if (!code) {
+        return undefined;
+    }
     const isCodeSupported = supportsResponseCode(httpOperation, code);
     const isExampleSupported = isCodeSupported && supportsExample(httpOperation, code, example);
     const args = lodash.compact([
@@ -1600,7 +1615,7 @@ function parseBody(body, type) {
             return json.safeStringify(json.safeParse(body), undefined, 2) || body;
         case 'xml':
             try {
-                return formatXml__default['default'](body);
+                return formatXml__default["default"](body);
             }
             catch (_a) {
                 return body;
@@ -1775,11 +1790,17 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         response && 'error' in response && React__namespace.createElement(ResponseError, { state: response })));
 };
 
+const LoadMore = ({ loading, onClick }) => {
+    return (React__namespace.createElement(mosaic.Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
+        React__namespace.createElement(mosaic.Button, { "aria-label": "load-example", onPress: onClick, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
+        React__namespace.createElement(mosaic.Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default.")));
+};
+
 const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
     var _a;
-    const [chosenExampleIndex, setChosenExampleIndex] = React__default['default'].useState(0);
-    const [show, setShow] = React__default['default'].useState(false);
-    const [loading, setLoading] = React__default['default'].useState(false);
+    const [chosenExampleIndex, setChosenExampleIndex] = React__default["default"].useState(0);
+    const [show, setShow] = React__default["default"].useState(false);
+    const [loading, setLoading] = React__default["default"].useState(false);
     const response = httpOperation.responses.find(response => response.code === responseStatusCode);
     const responseContents = (_a = response === null || response === void 0 ? void 0 : response.contents) === null || _a === void 0 ? void 0 : _a.find(content => content.mediaType === responseMediaType);
     let userDefinedExamples;
@@ -1789,20 +1810,18 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const responseExample = useGenerateExampleFromMediaTypeContent(responseContents, chosenExampleIndex, {
         skipWriteOnly: true,
     });
-    const exceededSize = responseExample.split(/\r\n|\r|\n/).length > 500;
+    const handleLoadMore = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     if (!userDefinedExamples && responseMediaType !== 'application/json')
         return null;
     if (!responseExample)
         return null;
-    const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default['default'].createElement(mosaic.Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
-    return (React__default['default'].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
-        React__default['default'].createElement(mosaic.Panel.Titlebar, null, examplesSelect || React__default['default'].createElement(mosaic.Text, { color: "body" }, "Response Example")),
-        React__default['default'].createElement(mosaic.Panel.Content, { p: 0 }, (exceededSize && show) || !exceededSize ? (React__default['default'].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default['default'].createElement(mosaic.Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
-            React__default['default'].createElement(mosaic.Button, { "aria-label": "load-example", onPress: () => {
-                    setLoading(true);
-                    setTimeout(() => setShow(true), 50);
-                }, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
-            React__default['default'].createElement(mosaic.Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default."))))));
+    const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default["default"].createElement(mosaic.Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
+    return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
+        React__default["default"].createElement(mosaic.Panel.Titlebar, null, examplesSelect || React__default["default"].createElement(mosaic.Text, { color: "body" }, "Response Example")),
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
 };
 
 const TryItWithRequestSamples = (_a) => {
@@ -1816,19 +1835,19 @@ const TryItWithRequestSamples = (_a) => {
         React__namespace.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
-const TwoColumnLayout = ({ header, right, left, className }) => (React__default['default'].createElement(mosaic.Box, { w: "full", className: className },
+const TwoColumnLayout = ({ header, right, left, className }) => (React__default["default"].createElement(mosaic.Box, { w: "full", className: className },
     header,
-    React__default['default'].createElement(mosaic.Flex, { mt: header ? 12 : undefined },
-        React__default['default'].createElement(mosaic.Box, { style: { width: 0 }, flex: 1 }, left),
-        right && (React__default['default'].createElement(mosaic.Box, { ml: 16, pos: "relative", w: "2/5", style: { maxWidth: 500 } }, right)))));
+    React__default["default"].createElement(mosaic.Flex, { mt: header ? 12 : undefined },
+        React__default["default"].createElement(mosaic.Box, { style: { width: 0 }, flex: 1 }, left),
+        right && (React__default["default"].createElement(mosaic.Box, { ml: 16, pos: "relative", w: "2/5", style: { maxWidth: 500 } }, right)))));
 
-const DeprecatedBadge = () => (React__default['default'].createElement(mosaic.Tooltip, { renderTrigger: React__default['default'].createElement(mosaic.Badge, { intent: "warning", icon: freeSolidSvgIcons.faExclamationCircle, "data-testid": "badge-deprecated" }, "Deprecated") }, "This operation has been marked as deprecated, which means it could be removed at some point in the future."));
-const InternalBadge = ({ isHttpService }) => (React__default['default'].createElement(mosaic.Tooltip, { renderTrigger: React__default['default'].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.faEye, "data-testid": "badge-internal", className: "sl-bg-danger sl-ml-0" }, "Internal") }, `This ${isHttpService ? 'operation' : 'model'} is marked as internal and won't be visible in public docs.`));
+const DeprecatedBadge = () => (React__default["default"].createElement(mosaic.Tooltip, { renderTrigger: React__default["default"].createElement(mosaic.Badge, { intent: "warning", icon: freeSolidSvgIcons.faExclamationCircle, "data-testid": "badge-deprecated" }, "Deprecated") }, "This operation has been marked as deprecated, which means it could be removed at some point in the future."));
+const InternalBadge = ({ isHttpService }) => (React__default["default"].createElement(mosaic.Tooltip, { renderTrigger: React__default["default"].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.faEye, "data-testid": "badge-internal", className: "sl-bg-danger sl-ml-0" }, "Internal") }, `This ${isHttpService ? 'operation' : 'model'} is marked as internal and won't be visible in public docs.`));
 const SecurityBadge = ({ scheme, httpServiceUri, includeKey }) => {
-    const badge = (React__default['default'].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.faLock, "data-testid": "badge-security", className: "sl-truncate", style: { backgroundColor: badgeDefaultBackgroundColor, color: badgeDefaultColor } }, getReadableSecurityName(scheme, includeKey)));
-    return httpServiceUri ? (React__default['default'].createElement(reactRouterDom.Link, { to: `${httpServiceUri}?security=${scheme.key}`, className: "sl-no-underline sl-block" }, badge)) : (badge);
+    const badge = (React__default["default"].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.faLock, "data-testid": "badge-security", className: "sl-truncate", style: { backgroundColor: badgeDefaultBackgroundColor, color: badgeDefaultColor } }, getReadableSecurityName(scheme, includeKey)));
+    return httpServiceUri ? (React__default["default"].createElement(reactRouterDom.Link, { to: `${httpServiceUri}?security=${scheme.key}`, className: "sl-no-underline sl-block" }, badge)) : (badge);
 };
-const VersionBadge = ({ value, backgroundColor }) => (React__default['default'].createElement(mosaic.Badge, { appearance: "solid", size: "sm", style: {
+const VersionBadge = ({ value, backgroundColor }) => (React__default["default"].createElement(mosaic.Badge, { appearance: "solid", size: "sm", style: {
         backgroundColor: backgroundColor || badgeDefaultBackgroundColor,
         border: 'none',
         color: badgeDefaultColor,
@@ -1896,22 +1915,23 @@ const Parameters = ({ parameters, parameterType }) => {
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const Parameter = ({ parameter, parameterType }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!parameter)
         return null;
     const description = lodash.get(parameter, 'description') || lodash.get(parameter, 'schema.description');
-    const type = lodash.get(parameter, 'schema.type', 'unknown');
-    const format = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.format;
+    const rootType = lodash.get(parameter, 'schema.type', 'unknown');
+    const type = ((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b['type']) && rootType === 'array' ? `array[${parameter.schema.items['type']}]` : rootType;
+    const format = (_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.format;
     const deprecated = lodash.get(parameter, 'deprecated') || lodash.get(parameter, 'schema.deprecated', false);
-    const parameterExamples = ((_b = parameter.examples) === null || _b === void 0 ? void 0 : _b.map(example => {
+    const parameterExamples = ((_d = parameter.examples) === null || _d === void 0 ? void 0 : _d.map(example => {
         if (isNodeExample(example)) {
             return example.value;
         }
         return example.externalValue;
     })) || [];
-    const schemaExamples = (_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.examples;
+    const schemaExamples = (_e = parameter.schema) === null || _e === void 0 ? void 0 : _e.examples;
     const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
-    const validations = lodash.omitBy(Object.assign(Object.assign(Object.assign({}, lodash.omit(parameter, ['name', 'required', 'deprecated', 'description', 'schema', 'style', 'examples'])), lodash.omit(lodash.get(parameter, 'schema'), ['description', 'type', 'deprecated'])), { examples: [...parameterExamples, ...schemaExamplesArray] }), value => (typeof value === 'object' && lodash.isEmpty(value)) || typeof value === 'undefined');
+    const validations = lodash.omitBy(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash.omit(parameter, ['name', 'required', 'deprecated', 'description', 'schema', 'style', 'examples'])), lodash.omit(lodash.get(parameter, 'schema'), ['description', 'type', 'deprecated'])), lodash.omit(lodash.get(parameter, 'schema.items'), ['description', 'type', 'deprecated'])), { examples: [...parameterExamples, ...schemaExamplesArray] }), value => (typeof value === 'object' && lodash.isEmpty(value)) || typeof value === 'undefined');
     return (React__namespace.createElement("div", { className: "HttpOperation__Parameters" },
         React__namespace.createElement("div", { className: "sl-flex sl-items-center sl-my-2" },
             React__namespace.createElement("div", { className: "sl-flex sl-items-baseline sl-text-base sl-flex-1" },
@@ -2007,7 +2027,7 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
         data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
     const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(mosaic.Box, { className: "HttpOperation__gutter" },
         React__namespace.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy })));
-    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default['default']('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = reactErrorBoundary.withErrorBoundary(HttpOperationComponent, {
@@ -2031,12 +2051,12 @@ const AdditionalInfo = ({ termsOfService, contact, license }) => {
     const licenseUrl = (license === null || license === void 0 ? void 0 : license.url) || `https://spdx.org/licenses/${license === null || license === void 0 ? void 0 : license.identifier}.html`;
     const licenseLink = (license === null || license === void 0 ? void 0 : license.name) && licenseUrl ? `[${license.name} License](${licenseUrl})` : '';
     const tosLink = termsOfService ? `[Terms of Service](${termsOfService})` : '';
-    return contactLink || licenseLink || tosLink ? (React__default['default'].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
-        React__default['default'].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
-            React__default['default'].createElement("span", { role: "heading" }, "Additional Information")),
-        React__default['default'].createElement(mosaic.Panel.Content, { p: 0 },
-            React__default['default'].createElement(mosaic.Panel.Content, null,
-                React__default['default'].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${contactLink}\n \n${licenseLink}\n \n ${tosLink}` }))))) : null;
+    return contactLink || licenseLink || tosLink ? (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
+        React__default["default"].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
+            React__default["default"].createElement("span", { role: "heading" }, "Additional Information")),
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 },
+            React__default["default"].createElement(mosaic.Panel.Content, null,
+                React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${contactLink}\n \n${licenseLink}\n \n ${tosLink}` }))))) : null;
 };
 
 const ExportButton = ({ original, bundled }) => {
@@ -2058,14 +2078,14 @@ const oauthFlowNames = {
     password: 'Password',
 };
 const SecuritySchemes = ({ schemes, defaultScheme }) => {
-    return (React__default['default'].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
-        React__default['default'].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
-            React__default['default'].createElement("span", { role: "heading" }, "Security")),
-        React__default['default'].createElement(mosaic.Panel.Content, { p: 0 }, lodash.sortBy(schemes, 'type').map((scheme, i) => (React__default['default'].createElement(mosaic.Panel, { key: i, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1 },
-            React__default['default'].createElement(mosaic.Panel.Titlebar, null,
-                React__default['default'].createElement("span", { role: "heading" }, getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)))),
-            React__default['default'].createElement(mosaic.Panel.Content, null,
-                React__default['default'].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))))))));
+    return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
+        React__default["default"].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
+            React__default["default"].createElement("span", { role: "heading" }, "Security")),
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, lodash.sortBy(schemes, 'type').map((scheme, i) => (React__default["default"].createElement(mosaic.Panel, { key: i, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1 },
+            React__default["default"].createElement(mosaic.Panel.Titlebar, null,
+                React__default["default"].createElement("span", { role: "heading" }, getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)))),
+            React__default["default"].createElement(mosaic.Panel.Content, null,
+                React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))))))));
 };
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
@@ -2185,10 +2205,16 @@ const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, {
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React__namespace.useState(0);
+    const [show, setShow] = React__namespace.useState(false);
+    const [loading, setLoading] = React__namespace.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
+    const handleLoadMorePress = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     const examples = React__namespace.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React__namespace.createElement(React__namespace.Fragment, null,
@@ -2203,9 +2229,8 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const examplesSelect = examples.length > 1 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
         React__namespace.createElement(mosaic.Panel.Titlebar, null, examplesSelect || (React__namespace.createElement(mosaic.Text, { color: "body", role: "heading" }, "Example"))),
-        React__namespace.createElement(mosaic.Panel.Content, { p: 0 },
-            React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true }))));
-    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default['default']('Model', className), header: header, left: description, right: modelExamples }));
+        React__namespace.createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
+    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('Model', className), header: header, left: description, right: modelExamples }));
 };
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
@@ -2262,8 +2287,84 @@ const Logo = ({ logo }) => {
         React__namespace.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))) : (React__namespace.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))));
 };
 
+function useParsedValue(value) {
+    return React__namespace.useMemo(() => {
+        let parsedValue = value;
+        if (typeof value === 'string') {
+            try {
+                parsedValue = yaml.parse(value);
+            }
+            catch (error) {
+            }
+        }
+        return parsedValue;
+    }, [value]);
+}
+
+function isPartialHttpRequest(maybeHttpRequest) {
+    return (lodash.isObject(maybeHttpRequest) &&
+        'method' in maybeHttpRequest &&
+        typeof maybeHttpRequest['method'] === 'string' &&
+        'url' in maybeHttpRequest &&
+        typeof maybeHttpRequest['url'] === 'string');
+}
+const SchemaAndDescription = ({ title: titleProp, schema }) => {
+    const resolveRef = useInlineRefResolver();
+    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(reactFontawesome.FontAwesomeIcon, { 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, schema: getOriginalObject(schema) })));
+};
+const CodeComponent = props => {
+    const { title, jsonSchema, http, children } = props;
+    const value = String(Array.isArray(children) ? children[0] : children);
+    const parsedValue = useParsedValue(value);
+    if (jsonSchema) {
+        if (!isJSONSchema(parsedValue)) {
+            return null;
+        }
+        return React__default["default"].createElement(SchemaAndDescription, { title: title, schema: parsedValue });
+    }
+    if (http) {
+        if (!lodash.isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
+            return null;
+        }
+        return (React__default["default"].createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
+    }
+    const DefaultCode = markdownViewer.DefaultSMDComponents.code;
+    return React__default["default"].createElement(DefaultCode, Object.assign({}, props));
+};
+function parseHttpRequest(data) {
+    const uri = URI__default["default"](data.url);
+    const pathParam = data.url.match(/[^{\}]+(?=})/g);
+    return {
+        id: '?http-operation-id?',
+        method: data.method,
+        path: uri.is('absolute') ? uri.path() : data.url,
+        servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
+                name: key,
+                style: types.HttpParamStyles.Form,
+                schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
+            })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                name: key,
+                style: types.HttpParamStyles.Simple,
+                schema: { default: value },
+            })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                name,
+                style: types.HttpParamStyles.Simple,
+                required: true,
+            })) }, (data.body
+            ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
+            : null)),
+        responses: [],
+    };
+}
+
 const MarkdownComponentsProvider = ({ value, children }) => {
-    return React__namespace.createElement(markdownViewer.MarkdownViewerProvider, { components: value }, children);
+    return React__namespace.createElement(markdownViewer.MarkdownViewerProvider, { components: Object.assign({ code: CodeComponent }, value) }, children);
 };
 
 const NODE_TYPE_TITLE_ICON = {
@@ -2457,8 +2558,8 @@ function withPersistenceBoundary(WrappedComponent) {
 
 function withMosaicProvider(WrappedComponent) {
     const WithMosaicProvider = (props) => {
-        return (React__default['default'].createElement(mosaic.Provider, { style: { height: '100%' } },
-            React__default['default'].createElement(WrappedComponent, Object.assign({}, props))));
+        return (React__default["default"].createElement(mosaic.Provider, { style: { height: '100%' } },
+            React__default["default"].createElement(WrappedComponent, Object.assign({}, props))));
     };
     WithMosaicProvider.displayName = `WithMosaicProvider(${getDisplayName(WrappedComponent)})`;
     return WithMosaicProvider;
@@ -2474,8 +2575,8 @@ const queryClient = new reactQuery.QueryClient({
 });
 function withQueryClientProvider(WrappedComponent) {
     const WithQueryClientProvider = (props) => {
-        return (React__default['default'].createElement(reactQuery.QueryClientProvider, { client: queryClient },
-            React__default['default'].createElement(WrappedComponent, Object.assign({}, props))));
+        return (React__default["default"].createElement(reactQuery.QueryClientProvider, { client: queryClient },
+            React__default["default"].createElement(WrappedComponent, Object.assign({}, props))));
     };
     WithQueryClientProvider.displayName = `WithQueryClientProvider(${getDisplayName(WrappedComponent)})`;
     return WithQueryClientProvider;
@@ -2485,9 +2586,9 @@ const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
 const ReactRouterMarkdownLink = ({ title, href, children }) => {
     const isExternal = href !== undefined && externalRegex.test(href);
     if (isExternal) {
-        return (React__default['default'].createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
+        return (React__default["default"].createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
     }
-    return (React__default['default'].createElement(reactRouterHashLink.HashLink, { to: href, title: title }, children));
+    return (React__default["default"].createElement(reactRouterHashLink.HashLink, { to: href, title: title }, children));
 };
 
 const RouterComponent = {
@@ -2551,27 +2652,13 @@ function useBundleRefsIntoDocument(document, options) {
 const commonBundleOptions = { continueOnError: true };
 const doBundle = (data, baseUrl) => {
     if (!baseUrl) {
-        return $RefParser__default['default'].bundle(data, commonBundleOptions);
+        return $RefParser__default["default"].bundle(data, commonBundleOptions);
     }
     else {
-        return $RefParser__default['default'].bundle(baseUrl, data, commonBundleOptions);
+        return $RefParser__default["default"].bundle(baseUrl, data, commonBundleOptions);
     }
 };
 
-function useParsedValue(value) {
-    return React__namespace.useMemo(() => {
-        let parsedValue = value;
-        if (typeof value === 'string') {
-            try {
-                parsedValue = yaml.parse(value);
-            }
-            catch (error) {
-            }
-        }
-        return parsedValue;
-    }, [value]);
-}
-
 const scopeClassName = 'sl-elements';
 class Styled extends React__namespace.Component {
     getChildContext() {
@@ -2696,9 +2783,7 @@ const createElementClass = (Component, propDescriptors) => {
 
 Object.defineProperty(exports, 'DefaultSMDComponents', {
   enumerable: true,
-  get: function () {
-    return markdownViewer.DefaultSMDComponents;
-  }
+  get: function () { return markdownViewer.DefaultSMDComponents; }
 });
 exports.DeprecatedBadge = DeprecatedBadge;
 exports.Docs = Docs;