@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.
- package/__fixtures__/operations/string-numeric-enums.d.ts +3 -0
- package/components/Docs/Article/Article.stories.d.ts +1 -0
- package/index.esm.js +45 -26
- package/index.js +45 -26
- package/index.mjs +45 -26
- package/package.json +4 -4
|
@@ -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
|
-
|
|
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:
|
|
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",
|
|
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",
|
|
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(
|
|
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
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
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
|
-
? {
|
|
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
|
-
|
|
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:
|
|
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",
|
|
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",
|
|
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(
|
|
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
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
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
|
-
? {
|
|
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
|
-
|
|
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:
|
|
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",
|
|
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",
|
|
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(
|
|
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
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
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
|
-
? {
|
|
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.
|
|
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.
|
|
35
|
-
"@stoplight/mosaic-code-editor": "^1.
|
|
36
|
-
"@stoplight/mosaic-code-viewer": "^1.
|
|
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",
|