@stoplight/elements-core 7.5.0 → 7.5.4

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.
Files changed (5) hide show
  1. package/components/Docs/Article/Article.stories.d.ts +1 -0
  2. package/index.esm.js +47 -27
  3. package/index.js +46 -26
  4. package/index.mjs +47 -27
  5. package/package.json +4 -4
package/components/Docs/Article/Article.stories.d.ts CHANGED
@@ -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
@@ -8,7 +8,7 @@ import isPlainObject from 'lodash/isPlainObject.js';
8
8
  import { parse } from '@stoplight/markdown';
9
9
  import { NodeType, HttpParamStyles } from '@stoplight/types';
10
10
  import { parse as parse$1 } from '@stoplight/yaml';
11
- import { isArray as isArray$1, Box, Flex, Icon, Popover, Button, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
11
+ import { isArray as isArray$1, Box, Flex, Icon, Button, Popover, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
12
12
  import { withErrorBoundary } from '@stoplight/react-error-boundary';
13
13
  import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
14
14
  export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
@@ -294,9 +294,10 @@ const Headings = ({ headings, className, title = 'On This Page', minimal, maxWid
294
294
  React.createElement(Box, { as: Icon, icon: faStream, mr: 2 }),
295
295
  title)),
296
296
  headings.map((heading, i) => (React.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
297
+ const button = React.createElement(Button, { pos: "sticky", size: "sm", borderColor: "light", icon: faStream, style: { top: 10 } });
297
298
  if (minimal) {
298
- return (React.createElement(Box, { pos: "absolute", top: 0, right: 0, style: { top: 10 } },
299
- React.createElement(Popover, { renderTrigger: React.createElement(Button, { size: "sm", borderColor: "light", icon: faStream }), placement: "bottom" },
299
+ return (React.createElement(Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
300
+ React.createElement(Popover, { renderTrigger: button, placement: "bottom" },
300
301
  React.createElement(Box, { className: className }, component))));
301
302
  }
302
303
  return (React.createElement(Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
@@ -476,7 +477,8 @@ const getServerUrlWithDefaultValues = (server) => {
476
477
  if (url.is('relative') && typeof window !== 'undefined') {
477
478
  url = url.absoluteTo(window.location.origin);
478
479
  }
479
- return url.toString();
480
+ const stringifiedUrl = url.toString();
481
+ return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
480
482
  };
481
483
 
482
484
  const persistAtom = (key, atomInstance) => {
@@ -2006,7 +2008,7 @@ const Body = ({ body, onChange }) => {
2006
2008
  React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
2007
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" })))),
2008
2010
  description && React.createElement(MarkdownViewer, { markdown: description }),
2009
- 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 }))));
2010
2012
  };
2011
2013
  Body.displayName = 'HttpOperation.Body';
2012
2014
 
@@ -2140,7 +2142,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2140
2142
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2141
2143
  React.createElement(Flex, { flex: 1, justify: "end" },
2142
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" }))),
2143
- 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 }))))));
2144
2146
  };
2145
2147
  Response.displayName = 'HttpOperation.Response';
2146
2148
  const codeToIntentVal = (code) => {
@@ -2391,6 +2393,20 @@ const Logo = ({ logo }) => {
2391
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 }))));
2392
2394
  };
2393
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
+
2394
2410
  function useParsedValue(value) {
2395
2411
  return React.useMemo(() => {
2396
2412
  let parsedValue = value;
@@ -2435,7 +2451,8 @@ const CodeComponent = props => {
2435
2451
  if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
2436
2452
  return null;
2437
2453
  }
2438
- 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 })));
2439
2456
  }
2440
2457
  const DefaultCode = DefaultSMDComponents.code;
2441
2458
  return React__default.createElement(DefaultCode, Object.assign({}, props));
@@ -2448,23 +2465,40 @@ function parseHttpRequest(data) {
2448
2465
  method: data.method,
2449
2466
  path: uri.is('absolute') ? uri.path() : data.url,
2450
2467
  servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
2451
- request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
2452
- name: key,
2453
- style: HttpParamStyles.Form,
2454
- schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
2455
- })), 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]) => ({
2456
2477
  name: key,
2457
2478
  style: HttpParamStyles.Simple,
2458
2479
  schema: { default: value },
2480
+ required: isHttpRequestParamRequired(value),
2459
2481
  })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
2460
2482
  name,
2461
2483
  style: HttpParamStyles.Simple,
2462
2484
  required: true,
2463
2485
  })) }, (data.body
2464
- ? { 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
+ }
2465
2496
  : null)),
2466
2497
  responses: [],
2467
2498
  };
2499
+ }
2500
+ function isHttpRequestParamRequired(value) {
2501
+ return typeof value !== 'undefined';
2468
2502
  }
2469
2503
 
2470
2504
  const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2655,20 +2689,6 @@ const NonIdealState = ({ description, icon, title }) => {
2655
2689
  React.createElement(Text, null, description)));
2656
2690
  };
2657
2691
 
2658
- function getDisplayName(WrappedComponent) {
2659
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2660
- }
2661
-
2662
- const PersistenceContextProvider = Provider;
2663
- function withPersistenceBoundary(WrappedComponent) {
2664
- const WithPersistenceBoundary = props => {
2665
- return (React.createElement(PersistenceContextProvider, null,
2666
- React.createElement(WrappedComponent, Object.assign({}, props))));
2667
- };
2668
- WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2669
- return WithPersistenceBoundary;
2670
- }
2671
-
2672
2692
  function withMosaicProvider(WrappedComponent) {
2673
2693
  const WithMosaicProvider = (props) => {
2674
2694
  try {
package/index.js CHANGED
@@ -349,9 +349,10 @@ const Headings = ({ headings, className, title = 'On This Page', minimal, maxWid
349
349
  React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faStream, mr: 2 }),
350
350
  title)),
351
351
  headings.map((heading, i) => (React__namespace.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
352
+ const button = React__namespace.createElement(mosaic.Button, { pos: "sticky", size: "sm", borderColor: "light", icon: freeSolidSvgIcons.faStream, style: { top: 10 } });
352
353
  if (minimal) {
353
- return (React__namespace.createElement(mosaic.Box, { pos: "absolute", top: 0, right: 0, style: { top: 10 } },
354
- React__namespace.createElement(mosaic.Popover, { renderTrigger: React__namespace.createElement(mosaic.Button, { size: "sm", borderColor: "light", icon: freeSolidSvgIcons.faStream }), placement: "bottom" },
354
+ return (React__namespace.createElement(mosaic.Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
355
+ React__namespace.createElement(mosaic.Popover, { renderTrigger: button, placement: "bottom" },
355
356
  React__namespace.createElement(mosaic.Box, { className: className }, component))));
356
357
  }
357
358
  return (React__namespace.createElement(mosaic.Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
@@ -531,7 +532,8 @@ const getServerUrlWithDefaultValues = (server) => {
531
532
  if (url.is('relative') && typeof window !== 'undefined') {
532
533
  url = url.absoluteTo(window.location.origin);
533
534
  }
534
- return url.toString();
535
+ const stringifiedUrl = url.toString();
536
+ return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
535
537
  };
536
538
 
537
539
  const persistAtom = (key, atomInstance) => {
@@ -2061,7 +2063,7 @@ const Body = ({ body, onChange }) => {
2061
2063
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
2062
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" })))),
2063
2065
  description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
2064
- 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 }))));
2065
2067
  };
2066
2068
  Body.displayName = 'HttpOperation.Body';
2067
2069
 
@@ -2195,7 +2197,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2195
2197
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2196
2198
  React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
2197
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" }))),
2198
- 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 }))))));
2199
2201
  };
2200
2202
  Response.displayName = 'HttpOperation.Response';
2201
2203
  const codeToIntentVal = (code) => {
@@ -2446,6 +2448,20 @@ const Logo = ({ logo }) => {
2446
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 }))));
2447
2449
  };
2448
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
+
2449
2465
  function useParsedValue(value) {
2450
2466
  return React__namespace.useMemo(() => {
2451
2467
  let parsedValue = value;
@@ -2490,7 +2506,8 @@ const CodeComponent = props => {
2490
2506
  if (!isObject__default["default"](parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
2491
2507
  return null;
2492
2508
  }
2493
- 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 })));
2494
2511
  }
2495
2512
  const DefaultCode = markdownViewer.DefaultSMDComponents.code;
2496
2513
  return React__default["default"].createElement(DefaultCode, Object.assign({}, props));
@@ -2503,23 +2520,40 @@ function parseHttpRequest(data) {
2503
2520
  method: data.method,
2504
2521
  path: uri.is('absolute') ? uri.path() : data.url,
2505
2522
  servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
2506
- request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
2507
- name: key,
2508
- style: types.HttpParamStyles.Form,
2509
- schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
2510
- })), 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]) => ({
2511
2532
  name: key,
2512
2533
  style: types.HttpParamStyles.Simple,
2513
2534
  schema: { default: value },
2535
+ required: isHttpRequestParamRequired(value),
2514
2536
  })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
2515
2537
  name,
2516
2538
  style: types.HttpParamStyles.Simple,
2517
2539
  required: true,
2518
2540
  })) }, (data.body
2519
- ? { 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
+ }
2520
2551
  : null)),
2521
2552
  responses: [],
2522
2553
  };
2554
+ }
2555
+ function isHttpRequestParamRequired(value) {
2556
+ return typeof value !== 'undefined';
2523
2557
  }
2524
2558
 
2525
2559
  const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2710,20 +2744,6 @@ const NonIdealState = ({ description, icon, title }) => {
2710
2744
  React__namespace.createElement(mosaic.Text, null, description)));
2711
2745
  };
2712
2746
 
2713
- function getDisplayName(WrappedComponent) {
2714
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2715
- }
2716
-
2717
- const PersistenceContextProvider = jotai.Provider;
2718
- function withPersistenceBoundary(WrappedComponent) {
2719
- const WithPersistenceBoundary = props => {
2720
- return (React__namespace.createElement(PersistenceContextProvider, null,
2721
- React__namespace.createElement(WrappedComponent, Object.assign({}, props))));
2722
- };
2723
- WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2724
- return WithPersistenceBoundary;
2725
- }
2726
-
2727
2747
  function withMosaicProvider(WrappedComponent) {
2728
2748
  const WithMosaicProvider = (props) => {
2729
2749
  try {
package/index.mjs CHANGED
@@ -8,7 +8,7 @@ import isPlainObject from 'lodash/isPlainObject.js';
8
8
  import { parse } from '@stoplight/markdown';
9
9
  import { NodeType, HttpParamStyles } from '@stoplight/types';
10
10
  import { parse as parse$1 } from '@stoplight/yaml';
11
- import { isArray as isArray$1, Box, Flex, Icon, Popover, Button, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
11
+ import { isArray as isArray$1, Box, Flex, Icon, Button, Popover, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
12
12
  import { withErrorBoundary } from '@stoplight/react-error-boundary';
13
13
  import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
14
14
  export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
@@ -294,9 +294,10 @@ const Headings = ({ headings, className, title = 'On This Page', minimal, maxWid
294
294
  React.createElement(Box, { as: Icon, icon: faStream, mr: 2 }),
295
295
  title)),
296
296
  headings.map((heading, i) => (React.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
297
+ const button = React.createElement(Button, { pos: "sticky", size: "sm", borderColor: "light", icon: faStream, style: { top: 10 } });
297
298
  if (minimal) {
298
- return (React.createElement(Box, { pos: "absolute", top: 0, right: 0, style: { top: 10 } },
299
- React.createElement(Popover, { renderTrigger: React.createElement(Button, { size: "sm", borderColor: "light", icon: faStream }), placement: "bottom" },
299
+ return (React.createElement(Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
300
+ React.createElement(Popover, { renderTrigger: button, placement: "bottom" },
300
301
  React.createElement(Box, { className: className }, component))));
301
302
  }
302
303
  return (React.createElement(Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
@@ -476,7 +477,8 @@ const getServerUrlWithDefaultValues = (server) => {
476
477
  if (url.is('relative') && typeof window !== 'undefined') {
477
478
  url = url.absoluteTo(window.location.origin);
478
479
  }
479
- return url.toString();
480
+ const stringifiedUrl = url.toString();
481
+ return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
480
482
  };
481
483
 
482
484
  const persistAtom = (key, atomInstance) => {
@@ -2006,7 +2008,7 @@ const Body = ({ body, onChange }) => {
2006
2008
  React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
2007
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" })))),
2008
2010
  description && React.createElement(MarkdownViewer, { markdown: description }),
2009
- 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 }))));
2010
2012
  };
2011
2013
  Body.displayName = 'HttpOperation.Body';
2012
2014
 
@@ -2140,7 +2142,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2140
2142
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2141
2143
  React.createElement(Flex, { flex: 1, justify: "end" },
2142
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" }))),
2143
- 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 }))))));
2144
2146
  };
2145
2147
  Response.displayName = 'HttpOperation.Response';
2146
2148
  const codeToIntentVal = (code) => {
@@ -2391,6 +2393,20 @@ const Logo = ({ logo }) => {
2391
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 }))));
2392
2394
  };
2393
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
+
2394
2410
  function useParsedValue(value) {
2395
2411
  return React.useMemo(() => {
2396
2412
  let parsedValue = value;
@@ -2435,7 +2451,8 @@ const CodeComponent = props => {
2435
2451
  if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
2436
2452
  return null;
2437
2453
  }
2438
- 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 })));
2439
2456
  }
2440
2457
  const DefaultCode = DefaultSMDComponents.code;
2441
2458
  return React__default.createElement(DefaultCode, Object.assign({}, props));
@@ -2448,23 +2465,40 @@ function parseHttpRequest(data) {
2448
2465
  method: data.method,
2449
2466
  path: uri.is('absolute') ? uri.path() : data.url,
2450
2467
  servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
2451
- request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
2452
- name: key,
2453
- style: HttpParamStyles.Form,
2454
- schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
2455
- })), 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]) => ({
2456
2477
  name: key,
2457
2478
  style: HttpParamStyles.Simple,
2458
2479
  schema: { default: value },
2480
+ required: isHttpRequestParamRequired(value),
2459
2481
  })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
2460
2482
  name,
2461
2483
  style: HttpParamStyles.Simple,
2462
2484
  required: true,
2463
2485
  })) }, (data.body
2464
- ? { 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
+ }
2465
2496
  : null)),
2466
2497
  responses: [],
2467
2498
  };
2499
+ }
2500
+ function isHttpRequestParamRequired(value) {
2501
+ return typeof value !== 'undefined';
2468
2502
  }
2469
2503
 
2470
2504
  const MarkdownComponentsProvider = ({ value, children }) => {
@@ -2655,20 +2689,6 @@ const NonIdealState = ({ description, icon, title }) => {
2655
2689
  React.createElement(Text, null, description)));
2656
2690
  };
2657
2691
 
2658
- function getDisplayName(WrappedComponent) {
2659
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
2660
- }
2661
-
2662
- const PersistenceContextProvider = Provider;
2663
- function withPersistenceBoundary(WrappedComponent) {
2664
- const WithPersistenceBoundary = props => {
2665
- return (React.createElement(PersistenceContextProvider, null,
2666
- React.createElement(WrappedComponent, Object.assign({}, props))));
2667
- };
2668
- WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
2669
- return WithPersistenceBoundary;
2670
- }
2671
-
2672
2692
  function withMosaicProvider(WrappedComponent) {
2673
2693
  const WithMosaicProvider = (props) => {
2674
2694
  try {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoplight/elements-core",
3
- "version": "7.5.0",
3
+ "version": "7.5.4",
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",