@stoplight/elements-core 7.5.2 → 7.5.6

package/__fixtures__/operations/string-numeric-enums.d.ts

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

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

@@ -2,3 +2,4 @@ declare const meta: import("@storybook/react").Meta<import("..").DocsComponentPr
 export default meta;
 export declare const Basic: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export declare const KitchenSink: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const MultipleTryIts: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/index.esm.js

@@ -477,7 +477,8 @@ const getServerUrlWithDefaultValues = (server) => {
     if (url.is('relative') && typeof window !== 'undefined') {
         url = url.absoluteTo(window.location.origin);
     }
-    return url.toString();
+    const stringifiedUrl = url.toString();
+    return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -986,7 +987,7 @@ const booleanOptions = [
     { label: 'True', value: 'true' },
 ];
 function enumOptions(enumValues, required) {
-    const options = map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
+    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1315,7 +1316,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
         const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        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 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 : '' }); })
+            .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
         const url = new URL(URI(serverUrl).segment(expandedPath).toString());
@@ -2007,7 +2010,7 @@ const Body = ({ body, onChange }) => {
         React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
             React.createElement(Select, { "aria-label": "Request 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" })))),
         description && React.createElement(MarkdownViewer, { markdown: description }),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2141,7 +2144,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, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2392,6 +2395,20 @@ const Logo = ({ logo }) => {
         React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))) : (React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))));
 };
 
+function getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const PersistenceContextProvider = Provider;
+function withPersistenceBoundary(WrappedComponent) {
+    const WithPersistenceBoundary = props => {
+        return (React.createElement(PersistenceContextProvider, null,
+            React.createElement(WrappedComponent, Object.assign({}, props))));
+    };
+    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
+    return WithPersistenceBoundary;
+}
+
 function useParsedValue(value) {
     return React.useMemo(() => {
         let parsedValue = value;
@@ -2436,7 +2453,8 @@ const CodeComponent = props => {
         if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
             return null;
         }
-        return (React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
+        return (React__default.createElement(PersistenceContextProvider, null,
+            React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
     }
     const DefaultCode = DefaultSMDComponents.code;
     return React__default.createElement(DefaultCode, Object.assign({}, props));
@@ -2449,23 +2467,40 @@ function parseHttpRequest(data) {
         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: HttpParamStyles.Form,
-                schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
-            })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
+                const defaultVal = Array.isArray(value) ? value[0] : value;
+                return {
+                    name: key,
+                    style: HttpParamStyles.Form,
+                    schema: { default: defaultVal },
+                    required: isHttpRequestParamRequired(defaultVal),
+                };
+            }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
                 name: key,
                 style: HttpParamStyles.Simple,
                 schema: { default: value },
+                required: isHttpRequestParamRequired(value),
             })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
                 name,
                 style: HttpParamStyles.Simple,
                 required: true,
             })) }, (data.body
-            ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
+            ? {
+                body: {
+                    contents: [
+                        {
+                            mediaType: 'application/json',
+                            schema: { default: data.body },
+                        },
+                    ],
+                },
+            }
             : null)),
         responses: [],
     };
+}
+function isHttpRequestParamRequired(value) {
+    return typeof value !== 'undefined';
 }
 
 const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2656,20 +2691,6 @@ const NonIdealState = ({ description, icon, title }) => {
         React.createElement(Text, null, description)));
 };
 
-function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
-const PersistenceContextProvider = Provider;
-function withPersistenceBoundary(WrappedComponent) {
-    const WithPersistenceBoundary = props => {
-        return (React.createElement(PersistenceContextProvider, null,
-            React.createElement(WrappedComponent, Object.assign({}, props))));
-    };
-    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
-    return WithPersistenceBoundary;
-}
-
 function withMosaicProvider(WrappedComponent) {
     const WithMosaicProvider = (props) => {
         try {

package/index.js

@@ -532,7 +532,8 @@ const getServerUrlWithDefaultValues = (server) => {
     if (url.is('relative') && typeof window !== 'undefined') {
         url = url.absoluteTo(window.location.origin);
     }
-    return url.toString();
+    const stringifiedUrl = url.toString();
+    return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1041,7 +1042,7 @@ const booleanOptions = [
     { label: 'True', value: 'true' },
 ];
 function enumOptions(enumValues, required) {
-    const options = map__default["default"](enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
+    const options = map__default["default"](enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1370,7 +1371,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
         const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        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 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 : '' }); })
+            .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
         const url = new URL(URI__default["default"](serverUrl).segment(expandedPath).toString());
@@ -2062,7 +2065,7 @@ const Body = ({ body, onChange }) => {
         React__namespace.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
             React__namespace.createElement(mosaic.Select, { "aria-label": "Request 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" })))),
         description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
-        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2196,7 +2199,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, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
+            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2447,6 +2450,20 @@ 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 getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const PersistenceContextProvider = jotai.Provider;
+function withPersistenceBoundary(WrappedComponent) {
+    const WithPersistenceBoundary = props => {
+        return (React__namespace.createElement(PersistenceContextProvider, null,
+            React__namespace.createElement(WrappedComponent, Object.assign({}, props))));
+    };
+    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
+    return WithPersistenceBoundary;
+}
+
 function useParsedValue(value) {
     return React__namespace.useMemo(() => {
         let parsedValue = value;
@@ -2491,7 +2508,8 @@ const CodeComponent = props => {
         if (!isObject__default["default"](parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
             return null;
         }
-        return (React__default["default"].createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
+        return (React__default["default"].createElement(PersistenceContextProvider, null,
+            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));
@@ -2504,23 +2522,40 @@ function parseHttpRequest(data) {
         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]) => ({
+        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
+                const defaultVal = Array.isArray(value) ? value[0] : value;
+                return {
+                    name: key,
+                    style: types.HttpParamStyles.Form,
+                    schema: { default: defaultVal },
+                    required: isHttpRequestParamRequired(defaultVal),
+                };
+            }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
                 name: key,
                 style: types.HttpParamStyles.Simple,
                 schema: { default: value },
+                required: isHttpRequestParamRequired(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 } }] } }
+            ? {
+                body: {
+                    contents: [
+                        {
+                            mediaType: 'application/json',
+                            schema: { default: data.body },
+                        },
+                    ],
+                },
+            }
             : null)),
         responses: [],
     };
+}
+function isHttpRequestParamRequired(value) {
+    return typeof value !== 'undefined';
 }
 
 const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2711,20 +2746,6 @@ const NonIdealState = ({ description, icon, title }) => {
         React__namespace.createElement(mosaic.Text, null, description)));
 };
 
-function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
-const PersistenceContextProvider = jotai.Provider;
-function withPersistenceBoundary(WrappedComponent) {
-    const WithPersistenceBoundary = props => {
-        return (React__namespace.createElement(PersistenceContextProvider, null,
-            React__namespace.createElement(WrappedComponent, Object.assign({}, props))));
-    };
-    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
-    return WithPersistenceBoundary;
-}
-
 function withMosaicProvider(WrappedComponent) {
     const WithMosaicProvider = (props) => {
         try {

package/index.mjs

@@ -477,7 +477,8 @@ const getServerUrlWithDefaultValues = (server) => {
     if (url.is('relative') && typeof window !== 'undefined') {
         url = url.absoluteTo(window.location.origin);
     }
-    return url.toString();
+    const stringifiedUrl = url.toString();
+    return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -986,7 +987,7 @@ const booleanOptions = [
     { label: 'True', value: 'true' },
 ];
 function enumOptions(enumValues, required) {
-    const options = map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
+    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1315,7 +1316,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
         const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        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 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 : '' }); })
+            .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
         const url = new URL(URI(serverUrl).segment(expandedPath).toString());
@@ -2007,7 +2010,7 @@ const Body = ({ body, onChange }) => {
         React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
             React.createElement(Select, { "aria-label": "Request 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" })))),
         description && React.createElement(MarkdownViewer, { markdown: description }),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2141,7 +2144,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, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2392,6 +2395,20 @@ const Logo = ({ logo }) => {
         React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))) : (React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))));
 };
 
+function getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const PersistenceContextProvider = Provider;
+function withPersistenceBoundary(WrappedComponent) {
+    const WithPersistenceBoundary = props => {
+        return (React.createElement(PersistenceContextProvider, null,
+            React.createElement(WrappedComponent, Object.assign({}, props))));
+    };
+    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
+    return WithPersistenceBoundary;
+}
+
 function useParsedValue(value) {
     return React.useMemo(() => {
         let parsedValue = value;
@@ -2436,7 +2453,8 @@ const CodeComponent = props => {
         if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
             return null;
         }
-        return (React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
+        return (React__default.createElement(PersistenceContextProvider, null,
+            React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
     }
     const DefaultCode = DefaultSMDComponents.code;
     return React__default.createElement(DefaultCode, Object.assign({}, props));
@@ -2449,23 +2467,40 @@ function parseHttpRequest(data) {
         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: HttpParamStyles.Form,
-                schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
-            })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
+                const defaultVal = Array.isArray(value) ? value[0] : value;
+                return {
+                    name: key,
+                    style: HttpParamStyles.Form,
+                    schema: { default: defaultVal },
+                    required: isHttpRequestParamRequired(defaultVal),
+                };
+            }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
                 name: key,
                 style: HttpParamStyles.Simple,
                 schema: { default: value },
+                required: isHttpRequestParamRequired(value),
             })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
                 name,
                 style: HttpParamStyles.Simple,
                 required: true,
             })) }, (data.body
-            ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
+            ? {
+                body: {
+                    contents: [
+                        {
+                            mediaType: 'application/json',
+                            schema: { default: data.body },
+                        },
+                    ],
+                },
+            }
             : null)),
         responses: [],
     };
+}
+function isHttpRequestParamRequired(value) {
+    return typeof value !== 'undefined';
 }
 
 const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2656,20 +2691,6 @@ const NonIdealState = ({ description, icon, title }) => {
         React.createElement(Text, null, description)));
 };
 
-function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
-const PersistenceContextProvider = Provider;
-function withPersistenceBoundary(WrappedComponent) {
-    const WithPersistenceBoundary = props => {
-        return (React.createElement(PersistenceContextProvider, null,
-            React.createElement(WrappedComponent, Object.assign({}, props))));
-    };
-    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
-    return WithPersistenceBoundary;
-}
-
 function withMosaicProvider(WrappedComponent) {
     const WithMosaicProvider = (props) => {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.5.2",
+  "version": "7.5.6",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -31,9 +31,9 @@
     "@stoplight/json-schema-viewer": "^4.4.2",
     "@stoplight/markdown": "^3.1.1",
     "@stoplight/markdown-viewer": "^5.3.2",
-    "@stoplight/mosaic": "^1.14.0",
-    "@stoplight/mosaic-code-editor": "^1.14.0",
-    "@stoplight/mosaic-code-viewer": "^1.14.0",
+    "@stoplight/mosaic": "^1.15.2",
+    "@stoplight/mosaic-code-editor": "^1.15.2",
+    "@stoplight/mosaic-code-viewer": "^1.15.2",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^2.0.0",
     "@stoplight/types": "^12.0.0",