@stoplight/elements-core 8.4.4 → 8.4.5

package/components/Docs/HttpOperation/Body.d.ts

@@ -2,9 +2,10 @@ import { IHttpOperationRequestBody } from '@stoplight/types';
 export interface BodyProps {
     body: IHttpOperationRequestBody;
     onChange?: (requestBodyIndex: number) => void;
+    isHttpWebhookOperation?: boolean;
 }
 export declare const isBodyEmpty: (body?: BodyProps['body']) => boolean;
 export declare const Body: {
-    ({ body, onChange }: BodyProps): JSX.Element | null;
+    ({ body, onChange, isHttpWebhookOperation }: BodyProps): JSX.Element | null;
     displayName: string;
 };

package/components/Docs/HttpOperation/Request.d.ts

@@ -4,6 +4,7 @@ interface IRequestProps {
     operation: IHttpEndpointOperation;
     hideSecurityInfo?: boolean;
     onChange?: (requestBodyIndex: number) => void;
+    isHttpWebhookOperation?: boolean;
 }
 export declare const Request: React.FunctionComponent<IRequestProps>;
 export {};

package/components/TryIt/Body/useTextRequestBodyState.d.ts

@@ -1,3 +1,3 @@
 import { IMediaTypeContent } from '@stoplight/types';
 import * as React from 'react';
-export declare const useTextRequestBodyState: (mediaTypeContent: IMediaTypeContent | undefined) => [string, React.Dispatch<React.SetStateAction<string>>];
+export declare const useTextRequestBodyState: (mediaTypeContent: IMediaTypeContent | undefined, skipReadOnly: boolean) => [string, React.Dispatch<React.SetStateAction<string>>];

package/index.esm.js

@@ -1694,9 +1694,9 @@ const exceedsSize = (example, size = 500) => {
     return example.split(/\r\n|\r|\n/).length > size;
 };
 
-const useTextRequestBodyState = (mediaTypeContent) => {
+const useTextRequestBodyState = (mediaTypeContent, skipReadOnly) => {
     const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
-        skipReadOnly: true,
+        skipReadOnly,
     });
     const [textRequestBody, setTextRequestBody] = React.useState(initialRequestBody);
     React.useEffect(() => {
@@ -2263,7 +2263,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { allParameters, updateParameterValue, parameterValuesWithDefaults } = useRequestParameters(httpOperation);
     const [mockingOptions, setMockingOptions] = useMockingOptions();
     const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] = useBodyParameterState(mediaTypeContent);
-    const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
+    const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent, !isHttpWebhookOperation(httpOperation));
     const [operationAuthValue, setOperationAuthValue, setCurrentScheme] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
         return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
@@ -2641,7 +2641,7 @@ const isBodyEmpty = (body) => {
     const { contents = [], description } = body;
     return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
 };
-const Body = ({ body, onChange }) => {
+const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
@@ -2660,7 +2660,7 @@ const Body = ({ body, onChange }) => {
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2727,7 +2727,7 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     return schema;
 };
 
-const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, }) => {
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
@@ -2755,7 +2755,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         cookieParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
-        body && React.createElement(Body, { onChange: onChange, body: body })));
+        body && React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation })));
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
@@ -2922,7 +2922,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo }),
+        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data) }),
         data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
         isCompact && tryItPanel));

package/index.js

@@ -1716,9 +1716,9 @@ const exceedsSize = (example, size = 500) => {
     return example.split(/\r\n|\r|\n/).length > size;
 };
 
-const useTextRequestBodyState = (mediaTypeContent) => {
+const useTextRequestBodyState = (mediaTypeContent, skipReadOnly) => {
     const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
-        skipReadOnly: true,
+        skipReadOnly,
     });
     const [textRequestBody, setTextRequestBody] = React__namespace.useState(initialRequestBody);
     React__namespace.useEffect(() => {
@@ -2285,7 +2285,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { allParameters, updateParameterValue, parameterValuesWithDefaults } = useRequestParameters(httpOperation);
     const [mockingOptions, setMockingOptions] = useMockingOptions();
     const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] = useBodyParameterState(mediaTypeContent);
-    const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
+    const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent, !isHttpWebhookOperation(httpOperation));
     const [operationAuthValue, setOperationAuthValue, setCurrentScheme] = usePersistedSecuritySchemeWithValues();
     const servers = React__namespace.useMemo(() => {
         return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
@@ -2663,7 +2663,7 @@ const isBodyEmpty = (body) => {
     const { contents = [], description } = body;
     return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
 };
-const Body = ({ body, onChange }) => {
+const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
@@ -2682,7 +2682,7 @@ const Body = ({ body, onChange }) => {
         description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { markdown: description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2749,7 +2749,7 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     return schema;
 };
 
-const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, }) => {
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
@@ -2777,7 +2777,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         cookieParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
             React__namespace.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React__namespace.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
-        body && React__namespace.createElement(Body, { onChange: onChange, body: body })));
+        body && React__namespace.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation })));
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = utils.atomWithStorage('HttpOperation_security_expanded', {});
@@ -2944,7 +2944,7 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
             React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         React__namespace.createElement(NodeVendorExtensions, { data: data }),
-        React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo }),
+        React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data) }),
         data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React__namespace.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
         isCompact && tryItPanel));

package/index.mjs

@@ -1694,9 +1694,9 @@ const exceedsSize = (example, size = 500) => {
     return example.split(/\r\n|\r|\n/).length > size;
 };
 
-const useTextRequestBodyState = (mediaTypeContent) => {
+const useTextRequestBodyState = (mediaTypeContent, skipReadOnly) => {
     const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
-        skipReadOnly: true,
+        skipReadOnly,
     });
     const [textRequestBody, setTextRequestBody] = React.useState(initialRequestBody);
     React.useEffect(() => {
@@ -2263,7 +2263,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const { allParameters, updateParameterValue, parameterValuesWithDefaults } = useRequestParameters(httpOperation);
     const [mockingOptions, setMockingOptions] = useMockingOptions();
     const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] = useBodyParameterState(mediaTypeContent);
-    const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
+    const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent, !isHttpWebhookOperation(httpOperation));
     const [operationAuthValue, setOperationAuthValue, setCurrentScheme] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
         return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
@@ -2641,7 +2641,7 @@ const isBodyEmpty = (body) => {
     const { contents = [], description } = body;
     return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
 };
-const Body = ({ body, onChange }) => {
+const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
@@ -2660,7 +2660,7 @@ const Body = ({ body, onChange }) => {
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2727,7 +2727,7 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     return schema;
 };
 
-const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, }) => {
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
@@ -2755,7 +2755,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         cookieParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
-        body && React.createElement(Body, { onChange: onChange, body: body })));
+        body && React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation })));
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
@@ -2922,7 +2922,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo }),
+        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data) }),
         data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
         isCompact && tryItPanel));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.4.4",
+  "version": "8.4.5",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",