@stoplight/elements-core 7.5.1 → 7.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ import { IHttpOperation } from '@stoplight/types';
2
+ export declare const httpOperation: IHttpOperation;
3
+ export default httpOperation;
@@ -2,3 +2,4 @@ declare const meta: import("@storybook/react").Meta<import("..").DocsComponentPr
2
2
  export default meta;
3
3
  export declare const Basic: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
4
4
  export declare const KitchenSink: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
5
+ 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 CHANGED
@@ -477,7 +477,8 @@ const getServerUrlWithDefaultValues = (server) => {
477
477
  if (url.is('relative') && typeof window !== 'undefined') {
478
478
  url = url.absoluteTo(window.location.origin);
479
479
  }
480
- return url.toString();
480
+ const stringifiedUrl = url.toString();
481
+ return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
481
482
  };
482
483
 
483
484
  const persistAtom = (key, atomInstance) => {
@@ -986,7 +987,7 @@ const booleanOptions = [
986
987
  { label: 'True', value: 'true' },
987
988
  ];
988
989
  function enumOptions(enumValues, required) {
989
- const options = map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
990
+ const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
990
991
  return required ? options : [{ label: 'Not Set', value: '' }, ...options];
991
992
  }
992
993
  function parameterOptions(parameter) {
@@ -2007,7 +2008,7 @@ const Body = ({ body, onChange }) => {
2007
2008
  React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
2008
2009
  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" })))),
2009
2010
  description && React.createElement(MarkdownViewer, { markdown: description }),
2010
- isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
2011
+ isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
2011
2012
  };
2012
2013
  Body.displayName = 'HttpOperation.Body';
2013
2014
 
@@ -2141,7 +2142,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2141
2142
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2142
2143
  React.createElement(Flex, { flex: 1, justify: "end" },
2143
2144
  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" }))),
2144
- schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
2145
+ schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
2145
2146
  };
2146
2147
  Response.displayName = 'HttpOperation.Response';
2147
2148
  const codeToIntentVal = (code) => {
@@ -2382,7 +2383,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
2382
2383
  paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
2383
2384
  minWidth: `${sidebarWidth}px`,
2384
2385
  } }, sidebar),
2385
- React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
2386
+ React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
2386
2387
  React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
2387
2388
  });
2388
2389
 
@@ -2392,6 +2393,20 @@ const Logo = ({ logo }) => {
2392
2393
  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 }))));
2393
2394
  };
2394
2395
 
2396
+ function getDisplayName(WrappedComponent) {
2397
+ return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2398
+ }
2399
+
2400
+ const PersistenceContextProvider = Provider;
2401
+ function withPersistenceBoundary(WrappedComponent) {
2402
+ const WithPersistenceBoundary = props => {
2403
+ return (React.createElement(PersistenceContextProvider, null,
2404
+ React.createElement(WrappedComponent, Object.assign({}, props))));
2405
+ };
2406
+ WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2407
+ return WithPersistenceBoundary;
2408
+ }
2409
+
2395
2410
  function useParsedValue(value) {
2396
2411
  return React.useMemo(() => {
2397
2412
  let parsedValue = value;
@@ -2436,7 +2451,8 @@ const CodeComponent = props => {
2436
2451
  if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
2437
2452
  return null;
2438
2453
  }
2439
- return (React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
2454
+ return (React__default.createElement(PersistenceContextProvider, null,
2455
+ React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
2440
2456
  }
2441
2457
  const DefaultCode = DefaultSMDComponents.code;
2442
2458
  return React__default.createElement(DefaultCode, Object.assign({}, props));
@@ -2449,23 +2465,40 @@ function parseHttpRequest(data) {
2449
2465
  method: data.method,
2450
2466
  path: uri.is('absolute') ? uri.path() : data.url,
2451
2467
  servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
2452
- request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
2453
- name: key,
2454
- style: HttpParamStyles.Form,
2455
- schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
2456
- })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
2468
+ request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
2469
+ const defaultVal = Array.isArray(value) ? value[0] : value;
2470
+ return {
2471
+ name: key,
2472
+ style: HttpParamStyles.Form,
2473
+ schema: { default: defaultVal },
2474
+ required: isHttpRequestParamRequired(defaultVal),
2475
+ };
2476
+ }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
2457
2477
  name: key,
2458
2478
  style: HttpParamStyles.Simple,
2459
2479
  schema: { default: value },
2480
+ required: isHttpRequestParamRequired(value),
2460
2481
  })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
2461
2482
  name,
2462
2483
  style: HttpParamStyles.Simple,
2463
2484
  required: true,
2464
2485
  })) }, (data.body
2465
- ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
2486
+ ? {
2487
+ body: {
2488
+ contents: [
2489
+ {
2490
+ mediaType: 'application/json',
2491
+ schema: { default: data.body },
2492
+ },
2493
+ ],
2494
+ },
2495
+ }
2466
2496
  : null)),
2467
2497
  responses: [],
2468
2498
  };
2499
+ }
2500
+ function isHttpRequestParamRequired(value) {
2501
+ return typeof value !== 'undefined';
2469
2502
  }
2470
2503
 
2471
2504
  const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2656,20 +2689,6 @@ const NonIdealState = ({ description, icon, title }) => {
2656
2689
  React.createElement(Text, null, description)));
2657
2690
  };
2658
2691
 
2659
- function getDisplayName(WrappedComponent) {
2660
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2661
- }
2662
-
2663
- const PersistenceContextProvider = Provider;
2664
- function withPersistenceBoundary(WrappedComponent) {
2665
- const WithPersistenceBoundary = props => {
2666
- return (React.createElement(PersistenceContextProvider, null,
2667
- React.createElement(WrappedComponent, Object.assign({}, props))));
2668
- };
2669
- WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2670
- return WithPersistenceBoundary;
2671
- }
2672
-
2673
2692
  function withMosaicProvider(WrappedComponent) {
2674
2693
  const WithMosaicProvider = (props) => {
2675
2694
  try {
package/index.js CHANGED
@@ -532,7 +532,8 @@ const getServerUrlWithDefaultValues = (server) => {
532
532
  if (url.is('relative') && typeof window !== 'undefined') {
533
533
  url = url.absoluteTo(window.location.origin);
534
534
  }
535
- return url.toString();
535
+ const stringifiedUrl = url.toString();
536
+ return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
536
537
  };
537
538
 
538
539
  const persistAtom = (key, atomInstance) => {
@@ -1041,7 +1042,7 @@ const booleanOptions = [
1041
1042
  { label: 'True', value: 'true' },
1042
1043
  ];
1043
1044
  function enumOptions(enumValues, required) {
1044
- const options = map__default["default"](enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
1045
+ const options = map__default["default"](enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
1045
1046
  return required ? options : [{ label: 'Not Set', value: '' }, ...options];
1046
1047
  }
1047
1048
  function parameterOptions(parameter) {
@@ -2062,7 +2063,7 @@ const Body = ({ body, onChange }) => {
2062
2063
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
2063
2064
  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" })))),
2064
2065
  description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
2065
- isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
2066
+ isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
2066
2067
  };
2067
2068
  Body.displayName = 'HttpOperation.Body';
2068
2069
 
@@ -2196,7 +2197,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2196
2197
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2197
2198
  React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
2198
2199
  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" }))),
2199
- schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
2200
+ schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
2200
2201
  };
2201
2202
  Response.displayName = 'HttpOperation.Response';
2202
2203
  const codeToIntentVal = (code) => {
@@ -2437,7 +2438,7 @@ const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxConte
2437
2438
  paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
2438
2439
  minWidth: `${sidebarWidth}px`,
2439
2440
  } }, sidebar),
2440
- React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
2441
+ React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
2441
2442
  React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
2442
2443
  });
2443
2444
 
@@ -2447,6 +2448,20 @@ const Logo = ({ logo }) => {
2447
2448
  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 }))));
2448
2449
  };
2449
2450
 
2451
+ function getDisplayName(WrappedComponent) {
2452
+ return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2453
+ }
2454
+
2455
+ const PersistenceContextProvider = jotai.Provider;
2456
+ function withPersistenceBoundary(WrappedComponent) {
2457
+ const WithPersistenceBoundary = props => {
2458
+ return (React__namespace.createElement(PersistenceContextProvider, null,
2459
+ React__namespace.createElement(WrappedComponent, Object.assign({}, props))));
2460
+ };
2461
+ WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2462
+ return WithPersistenceBoundary;
2463
+ }
2464
+
2450
2465
  function useParsedValue(value) {
2451
2466
  return React__namespace.useMemo(() => {
2452
2467
  let parsedValue = value;
@@ -2491,7 +2506,8 @@ const CodeComponent = props => {
2491
2506
  if (!isObject__default["default"](parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
2492
2507
  return null;
2493
2508
  }
2494
- return (React__default["default"].createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
2509
+ return (React__default["default"].createElement(PersistenceContextProvider, null,
2510
+ React__default["default"].createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
2495
2511
  }
2496
2512
  const DefaultCode = markdownViewer.DefaultSMDComponents.code;
2497
2513
  return React__default["default"].createElement(DefaultCode, Object.assign({}, props));
@@ -2504,23 +2520,40 @@ function parseHttpRequest(data) {
2504
2520
  method: data.method,
2505
2521
  path: uri.is('absolute') ? uri.path() : data.url,
2506
2522
  servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
2507
- request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
2508
- name: key,
2509
- style: types.HttpParamStyles.Form,
2510
- schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
2511
- })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
2523
+ request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
2524
+ const defaultVal = Array.isArray(value) ? value[0] : value;
2525
+ return {
2526
+ name: key,
2527
+ style: types.HttpParamStyles.Form,
2528
+ schema: { default: defaultVal },
2529
+ required: isHttpRequestParamRequired(defaultVal),
2530
+ };
2531
+ }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
2512
2532
  name: key,
2513
2533
  style: types.HttpParamStyles.Simple,
2514
2534
  schema: { default: value },
2535
+ required: isHttpRequestParamRequired(value),
2515
2536
  })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
2516
2537
  name,
2517
2538
  style: types.HttpParamStyles.Simple,
2518
2539
  required: true,
2519
2540
  })) }, (data.body
2520
- ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
2541
+ ? {
2542
+ body: {
2543
+ contents: [
2544
+ {
2545
+ mediaType: 'application/json',
2546
+ schema: { default: data.body },
2547
+ },
2548
+ ],
2549
+ },
2550
+ }
2521
2551
  : null)),
2522
2552
  responses: [],
2523
2553
  };
2554
+ }
2555
+ function isHttpRequestParamRequired(value) {
2556
+ return typeof value !== 'undefined';
2524
2557
  }
2525
2558
 
2526
2559
  const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2711,20 +2744,6 @@ const NonIdealState = ({ description, icon, title }) => {
2711
2744
  React__namespace.createElement(mosaic.Text, null, description)));
2712
2745
  };
2713
2746
 
2714
- function getDisplayName(WrappedComponent) {
2715
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2716
- }
2717
-
2718
- const PersistenceContextProvider = jotai.Provider;
2719
- function withPersistenceBoundary(WrappedComponent) {
2720
- const WithPersistenceBoundary = props => {
2721
- return (React__namespace.createElement(PersistenceContextProvider, null,
2722
- React__namespace.createElement(WrappedComponent, Object.assign({}, props))));
2723
- };
2724
- WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2725
- return WithPersistenceBoundary;
2726
- }
2727
-
2728
2747
  function withMosaicProvider(WrappedComponent) {
2729
2748
  const WithMosaicProvider = (props) => {
2730
2749
  try {
package/index.mjs CHANGED
@@ -477,7 +477,8 @@ const getServerUrlWithDefaultValues = (server) => {
477
477
  if (url.is('relative') && typeof window !== 'undefined') {
478
478
  url = url.absoluteTo(window.location.origin);
479
479
  }
480
- return url.toString();
480
+ const stringifiedUrl = url.toString();
481
+ return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
481
482
  };
482
483
 
483
484
  const persistAtom = (key, atomInstance) => {
@@ -986,7 +987,7 @@ const booleanOptions = [
986
987
  { label: 'True', value: 'true' },
987
988
  ];
988
989
  function enumOptions(enumValues, required) {
989
- const options = map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
990
+ const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
990
991
  return required ? options : [{ label: 'Not Set', value: '' }, ...options];
991
992
  }
992
993
  function parameterOptions(parameter) {
@@ -2007,7 +2008,7 @@ const Body = ({ body, onChange }) => {
2007
2008
  React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
2008
2009
  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" })))),
2009
2010
  description && React.createElement(MarkdownViewer, { markdown: description }),
2010
- isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
2011
+ isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
2011
2012
  };
2012
2013
  Body.displayName = 'HttpOperation.Body';
2013
2014
 
@@ -2141,7 +2142,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2141
2142
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2142
2143
  React.createElement(Flex, { flex: 1, justify: "end" },
2143
2144
  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" }))),
2144
- schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
2145
+ schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
2145
2146
  };
2146
2147
  Response.displayName = 'HttpOperation.Response';
2147
2148
  const codeToIntentVal = (code) => {
@@ -2382,7 +2383,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
2382
2383
  paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
2383
2384
  minWidth: `${sidebarWidth}px`,
2384
2385
  } }, sidebar),
2385
- React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
2386
+ React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
2386
2387
  React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
2387
2388
  });
2388
2389
 
@@ -2392,6 +2393,20 @@ const Logo = ({ logo }) => {
2392
2393
  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 }))));
2393
2394
  };
2394
2395
 
2396
+ function getDisplayName(WrappedComponent) {
2397
+ return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2398
+ }
2399
+
2400
+ const PersistenceContextProvider = Provider;
2401
+ function withPersistenceBoundary(WrappedComponent) {
2402
+ const WithPersistenceBoundary = props => {
2403
+ return (React.createElement(PersistenceContextProvider, null,
2404
+ React.createElement(WrappedComponent, Object.assign({}, props))));
2405
+ };
2406
+ WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2407
+ return WithPersistenceBoundary;
2408
+ }
2409
+
2395
2410
  function useParsedValue(value) {
2396
2411
  return React.useMemo(() => {
2397
2412
  let parsedValue = value;
@@ -2436,7 +2451,8 @@ const CodeComponent = props => {
2436
2451
  if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
2437
2452
  return null;
2438
2453
  }
2439
- return (React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
2454
+ return (React__default.createElement(PersistenceContextProvider, null,
2455
+ React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
2440
2456
  }
2441
2457
  const DefaultCode = DefaultSMDComponents.code;
2442
2458
  return React__default.createElement(DefaultCode, Object.assign({}, props));
@@ -2449,23 +2465,40 @@ function parseHttpRequest(data) {
2449
2465
  method: data.method,
2450
2466
  path: uri.is('absolute') ? uri.path() : data.url,
2451
2467
  servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
2452
- request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
2453
- name: key,
2454
- style: HttpParamStyles.Form,
2455
- schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
2456
- })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
2468
+ request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
2469
+ const defaultVal = Array.isArray(value) ? value[0] : value;
2470
+ return {
2471
+ name: key,
2472
+ style: HttpParamStyles.Form,
2473
+ schema: { default: defaultVal },
2474
+ required: isHttpRequestParamRequired(defaultVal),
2475
+ };
2476
+ }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
2457
2477
  name: key,
2458
2478
  style: HttpParamStyles.Simple,
2459
2479
  schema: { default: value },
2480
+ required: isHttpRequestParamRequired(value),
2460
2481
  })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
2461
2482
  name,
2462
2483
  style: HttpParamStyles.Simple,
2463
2484
  required: true,
2464
2485
  })) }, (data.body
2465
- ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
2486
+ ? {
2487
+ body: {
2488
+ contents: [
2489
+ {
2490
+ mediaType: 'application/json',
2491
+ schema: { default: data.body },
2492
+ },
2493
+ ],
2494
+ },
2495
+ }
2466
2496
  : null)),
2467
2497
  responses: [],
2468
2498
  };
2499
+ }
2500
+ function isHttpRequestParamRequired(value) {
2501
+ return typeof value !== 'undefined';
2469
2502
  }
2470
2503
 
2471
2504
  const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2656,20 +2689,6 @@ const NonIdealState = ({ description, icon, title }) => {
2656
2689
  React.createElement(Text, null, description)));
2657
2690
  };
2658
2691
 
2659
- function getDisplayName(WrappedComponent) {
2660
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2661
- }
2662
-
2663
- const PersistenceContextProvider = Provider;
2664
- function withPersistenceBoundary(WrappedComponent) {
2665
- const WithPersistenceBoundary = props => {
2666
- return (React.createElement(PersistenceContextProvider, null,
2667
- React.createElement(WrappedComponent, Object.assign({}, props))));
2668
- };
2669
- WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2670
- return WithPersistenceBoundary;
2671
- }
2672
-
2673
2692
  function withMosaicProvider(WrappedComponent) {
2674
2693
  const WithMosaicProvider = (props) => {
2675
2694
  try {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoplight/elements-core",
3
- "version": "7.5.1",
3
+ "version": "7.5.5",
4
4
  "main": "./index.js",
5
5
  "sideEffects": [
6
6
  "web-components.min.js",
@@ -31,9 +31,9 @@
31
31
  "@stoplight/json-schema-viewer": "^4.4.2",
32
32
  "@stoplight/markdown": "^3.1.1",
33
33
  "@stoplight/markdown-viewer": "^5.3.2",
34
- "@stoplight/mosaic": "^1.14.0",
35
- "@stoplight/mosaic-code-editor": "^1.14.0",
36
- "@stoplight/mosaic-code-viewer": "^1.14.0",
34
+ "@stoplight/mosaic": "^1.15.2",
35
+ "@stoplight/mosaic-code-editor": "^1.15.2",
36
+ "@stoplight/mosaic-code-viewer": "^1.15.2",
37
37
  "@stoplight/path": "^1.3.2",
38
38
  "@stoplight/react-error-boundary": "^2.0.0",
39
39
  "@stoplight/types": "^12.0.0",