@stoplight/elements-core 7.15.2 → 7.16.1

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

@@ -1,7 +1,7 @@
 import { IHttpOperationRequestBody } from '@stoplight/types';
 export interface BodyProps {
     body: IHttpOperationRequestBody;
-    onChange: (requestBodyIndex: number) => void;
+    onChange?: (requestBodyIndex: number) => void;
 }
 export declare const isBodyEmpty: (body?: BodyProps['body']) => boolean;
 export declare const Body: {

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

@@ -0,0 +1,14 @@
+import { IHttpCallbackOperation } from '@stoplight/types';
+export interface CallbacksProps {
+    callbacks: IHttpCallbackOperation[];
+    isCompact?: boolean;
+}
+export interface CallbackProps {
+    data: IHttpCallbackOperation;
+    isCompact?: boolean;
+}
+export declare const Callbacks: {
+    ({ callbacks, isCompact }: CallbacksProps): JSX.Element;
+    displayName: string;
+};
+export declare const Callback: ({ data, isCompact }: CallbackProps) => JSX.Element;

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

@@ -3,3 +3,13 @@ import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type HttpOperationProps = DocsComponentProps<IHttpOperation>;
 export declare const HttpOperation: React.FunctionComponent<HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare function OperationHeader({ id, noHeading, hasBadges, name, isDeprecated, isInternal, method, path, }: {
+    id: string;
+    noHeading?: boolean;
+    hasBadges?: boolean;
+    name?: string;
+    isDeprecated?: boolean;
+    isInternal?: boolean;
+    method: string;
+    path: string;
+}): JSX.Element | null;

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

@@ -2,7 +2,7 @@ import { IHttpOperation } from '@stoplight/types';
 import * as React from 'react';
 interface IRequestProps {
     operation: IHttpOperation;
-    onChange: (requestBodyIndex: number) => void;
+    onChange?: (requestBodyIndex: number) => void;
 }
 export declare const Request: React.FunctionComponent<IRequestProps>;
 export {};

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

@@ -1,8 +1,8 @@
 import { IHttpOperationResponse } from '@stoplight/types';
 interface ResponsesProps {
     responses: IHttpOperationResponse[];
-    onMediaTypeChange(mediaType: string): void;
-    onStatusCodeChange(statusCode: string): void;
+    onMediaTypeChange?: (mediaType: string) => void;
+    onStatusCodeChange?: (statusCode: string) => void;
     isCompact?: boolean;
 }
 export declare const Responses: {

package/index.esm.js

@@ -2312,22 +2312,6 @@ const enhanceVersionString = (version) => {
     return `v${version}`;
 };
 
-const operation = {
-    id: '?http-operation-id?',
-    iid: 'GET-simple',
-    method: 'get',
-    path: '/todos',
-    summary: 'Get 200',
-    responses: [
-        {
-            id: '?http-response-200?',
-            code: '200',
-            description: 'OK',
-        },
-    ],
-    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
-};
-
 const LinkHeading = React.memo(function LinkHeading(props) {
     const isUsingRouter = !!useRouterType();
     const Comp = isUsingRouter ? CustomLinkHeading : LinkHeading$1;
@@ -2357,6 +2341,22 @@ const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultI
         hasContent !== false && React.createElement(Panel.Content, null, children)));
 };
 
+const operation = {
+    id: '?http-operation-id?',
+    iid: 'GET-simple',
+    method: 'get',
+    path: '/todos',
+    summary: 'Get 200',
+    responses: [
+        {
+            id: '?http-response-200?',
+            code: '200',
+            description: 'OK',
+        },
+    ],
+    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
+};
+
 const oauthFlowNames = {
     implicit: 'Implicit',
     authorizationCode: 'Authorization Code',
@@ -2453,7 +2453,7 @@ const Body = ({ body, onChange }) => {
     const [chosenContent, setChosenContent] = React.useState(0);
     const { nodeHasChanged } = useOptionsCtx();
     React.useEffect(() => {
-        onChange(chosenContent);
+        onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
     if (isBodyEmpty(body))
         return null;
@@ -2608,7 +2608,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
         }
     }, [responses, setActiveResponseId, close]);
     React.useEffect(() => {
-        onStatusCodeChange(activeResponseId);
+        onStatusCodeChange === null || onStatusCodeChange === void 0 ? void 0 : onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
@@ -2639,7 +2639,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React.useEffect(() => {
-        responseContent && onMediaTypeChange(responseContent.mediaType);
+        responseContent && (onMediaTypeChange === null || onMediaTypeChange === void 0 ? void 0 : onMediaTypeChange(responseContent.mediaType));
     }, [responseContent]);
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
     return (React.createElement(VStack, { spacing: 8, pt: 8 },
@@ -2670,7 +2670,37 @@ const codeToIntentVal = (code) => {
     }
 };
 
+const Callbacks = ({ callbacks, isCompact }) => {
+    const [selectedCallbackIndex, setSelectedCallbackIndex] = React.useState(0);
+    const callback = React.useMemo(() => callbacks[selectedCallbackIndex], [callbacks, selectedCallbackIndex]);
+    return (React.createElement(VStack, { spacing: 8 },
+        React.createElement(SectionTitle, { title: "Callbacks", isCompact: isCompact }, callbacks.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
+            React.createElement(Select, { "aria-label": "Callback", value: String(selectedCallbackIndex), onChange: value => setSelectedCallbackIndex(parseInt(String(value), 10)), options: callbacks.map((c, index) => ({
+                    label: `${c.key} - ${c.path} - ${c.method}`,
+                    value: index,
+                })), size: "sm" })))),
+        callback && React.createElement(Callback, { data: callback, isCompact: isCompact })));
+};
+Callbacks.displayName = 'HttpOperation.Callbacks';
+const Callback = ({ data, isCompact }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    const isDeprecated = !!data.deprecated;
+    const isInternal = !!data.internal;
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
+    return (React.createElement(VStack, { spacing: 10 },
+        React.createElement(Box, null,
+            React.createElement(SectionSubtitle, { title: data.key, id: "callback-key" }),
+            React.createElement(OperationHeader, { id: data.id, method: data.method, path: `/${data.path}`, isDeprecated: isDeprecated, isInternal: isInternal })),
+        data.description && (React.createElement(Box, { pos: "relative" },
+            React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
+            React.createElement(NodeAnnotation, { change: descriptionChanged }))),
+        React.createElement(Request, { operation: data }),
+        data.responses && React.createElement(Responses, { responses: data.responses, isCompact: isCompact })));
+};
+Callbacks.displayName = 'HttpOperation.Callback';
+
 const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+    var _a;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
@@ -2691,6 +2721,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: 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 }),
         isCompact && tryItPanel));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });

package/index.js

@@ -2369,22 +2369,6 @@ const enhanceVersionString = (version) => {
     return `v${version}`;
 };
 
-const operation = {
-    id: '?http-operation-id?',
-    iid: 'GET-simple',
-    method: 'get',
-    path: '/todos',
-    summary: 'Get 200',
-    responses: [
-        {
-            id: '?http-response-200?',
-            code: '200',
-            description: 'OK',
-        },
-    ],
-    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
-};
-
 const LinkHeading = React__namespace.memo(function LinkHeading(props) {
     const isUsingRouter = !!useRouterType();
     const Comp = isUsingRouter ? CustomLinkHeading : mosaic.LinkHeading;
@@ -2414,6 +2398,22 @@ const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultI
         hasContent !== false && React__namespace.createElement(mosaic.Panel.Content, null, children)));
 };
 
+const operation = {
+    id: '?http-operation-id?',
+    iid: 'GET-simple',
+    method: 'get',
+    path: '/todos',
+    summary: 'Get 200',
+    responses: [
+        {
+            id: '?http-response-200?',
+            code: '200',
+            description: 'OK',
+        },
+    ],
+    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
+};
+
 const oauthFlowNames = {
     implicit: 'Implicit',
     authorizationCode: 'Authorization Code',
@@ -2510,7 +2510,7 @@ const Body = ({ body, onChange }) => {
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     const { nodeHasChanged } = useOptionsCtx();
     React__namespace.useEffect(() => {
-        onChange(chosenContent);
+        onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
     if (isBodyEmpty(body))
         return null;
@@ -2665,7 +2665,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
         }
     }, [responses, setActiveResponseId, close]);
     React__namespace.useEffect(() => {
-        onStatusCodeChange(activeResponseId);
+        onStatusCodeChange === null || onStatusCodeChange === void 0 ? void 0 : onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
@@ -2696,7 +2696,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React__namespace.useEffect(() => {
-        responseContent && onMediaTypeChange(responseContent.mediaType);
+        responseContent && (onMediaTypeChange === null || onMediaTypeChange === void 0 ? void 0 : onMediaTypeChange(responseContent.mediaType));
     }, [responseContent]);
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8, pt: 8 },
@@ -2727,7 +2727,37 @@ const codeToIntentVal = (code) => {
     }
 };
 
+const Callbacks = ({ callbacks, isCompact }) => {
+    const [selectedCallbackIndex, setSelectedCallbackIndex] = React__namespace.useState(0);
+    const callback = React__namespace.useMemo(() => callbacks[selectedCallbackIndex], [callbacks, selectedCallbackIndex]);
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 8 },
+        React__namespace.createElement(SectionTitle, { title: "Callbacks", isCompact: isCompact }, callbacks.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
+            React__namespace.createElement(mosaic.Select, { "aria-label": "Callback", value: String(selectedCallbackIndex), onChange: value => setSelectedCallbackIndex(parseInt(String(value), 10)), options: callbacks.map((c, index) => ({
+                    label: `${c.key} - ${c.path} - ${c.method}`,
+                    value: index,
+                })), size: "sm" })))),
+        callback && React__namespace.createElement(Callback, { data: callback, isCompact: isCompact })));
+};
+Callbacks.displayName = 'HttpOperation.Callbacks';
+const Callback = ({ data, isCompact }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    const isDeprecated = !!data.deprecated;
+    const isInternal = !!data.internal;
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
+        React__namespace.createElement(mosaic.Box, null,
+            React__namespace.createElement(SectionSubtitle, { title: data.key, id: "callback-key" }),
+            React__namespace.createElement(OperationHeader, { id: data.id, method: data.method, path: `/${data.path}`, isDeprecated: isDeprecated, isInternal: isInternal })),
+        data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
+        React__namespace.createElement(Request, { operation: data }),
+        data.responses && React__namespace.createElement(Responses, { responses: data.responses, isCompact: isCompact })));
+};
+Callbacks.displayName = 'HttpOperation.Callback';
+
 const HttpOperationComponent = React__namespace.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+    var _a;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
@@ -2748,6 +2778,7 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: 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 }),
         isCompact && tryItPanel));
     return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });

package/index.mjs

@@ -2312,22 +2312,6 @@ const enhanceVersionString = (version) => {
     return `v${version}`;
 };
 
-const operation = {
-    id: '?http-operation-id?',
-    iid: 'GET-simple',
-    method: 'get',
-    path: '/todos',
-    summary: 'Get 200',
-    responses: [
-        {
-            id: '?http-response-200?',
-            code: '200',
-            description: 'OK',
-        },
-    ],
-    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
-};
-
 const LinkHeading = React.memo(function LinkHeading(props) {
     const isUsingRouter = !!useRouterType();
     const Comp = isUsingRouter ? CustomLinkHeading : LinkHeading$1;
@@ -2357,6 +2341,22 @@ const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultI
         hasContent !== false && React.createElement(Panel.Content, null, children)));
 };
 
+const operation = {
+    id: '?http-operation-id?',
+    iid: 'GET-simple',
+    method: 'get',
+    path: '/todos',
+    summary: 'Get 200',
+    responses: [
+        {
+            id: '?http-response-200?',
+            code: '200',
+            description: 'OK',
+        },
+    ],
+    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
+};
+
 const oauthFlowNames = {
     implicit: 'Implicit',
     authorizationCode: 'Authorization Code',
@@ -2453,7 +2453,7 @@ const Body = ({ body, onChange }) => {
     const [chosenContent, setChosenContent] = React.useState(0);
     const { nodeHasChanged } = useOptionsCtx();
     React.useEffect(() => {
-        onChange(chosenContent);
+        onChange === null || onChange === void 0 ? void 0 : onChange(chosenContent);
     }, [chosenContent]);
     if (isBodyEmpty(body))
         return null;
@@ -2608,7 +2608,7 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
         }
     }, [responses, setActiveResponseId, close]);
     React.useEffect(() => {
-        onStatusCodeChange(activeResponseId);
+        onStatusCodeChange === null || onStatusCodeChange === void 0 ? void 0 : onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
@@ -2639,7 +2639,7 @@ const Response = ({ response, onMediaTypeChange }) => {
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React.useEffect(() => {
-        responseContent && onMediaTypeChange(responseContent.mediaType);
+        responseContent && (onMediaTypeChange === null || onMediaTypeChange === void 0 ? void 0 : onMediaTypeChange(responseContent.mediaType));
     }, [responseContent]);
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
     return (React.createElement(VStack, { spacing: 8, pt: 8 },
@@ -2670,7 +2670,37 @@ const codeToIntentVal = (code) => {
     }
 };
 
+const Callbacks = ({ callbacks, isCompact }) => {
+    const [selectedCallbackIndex, setSelectedCallbackIndex] = React.useState(0);
+    const callback = React.useMemo(() => callbacks[selectedCallbackIndex], [callbacks, selectedCallbackIndex]);
+    return (React.createElement(VStack, { spacing: 8 },
+        React.createElement(SectionTitle, { title: "Callbacks", isCompact: isCompact }, callbacks.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
+            React.createElement(Select, { "aria-label": "Callback", value: String(selectedCallbackIndex), onChange: value => setSelectedCallbackIndex(parseInt(String(value), 10)), options: callbacks.map((c, index) => ({
+                    label: `${c.key} - ${c.path} - ${c.method}`,
+                    value: index,
+                })), size: "sm" })))),
+        callback && React.createElement(Callback, { data: callback, isCompact: isCompact })));
+};
+Callbacks.displayName = 'HttpOperation.Callbacks';
+const Callback = ({ data, isCompact }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    const isDeprecated = !!data.deprecated;
+    const isInternal = !!data.internal;
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
+    return (React.createElement(VStack, { spacing: 10 },
+        React.createElement(Box, null,
+            React.createElement(SectionSubtitle, { title: data.key, id: "callback-key" }),
+            React.createElement(OperationHeader, { id: data.id, method: data.method, path: `/${data.path}`, isDeprecated: isDeprecated, isInternal: isInternal })),
+        data.description && (React.createElement(Box, { pos: "relative" },
+            React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
+            React.createElement(NodeAnnotation, { change: descriptionChanged }))),
+        React.createElement(Request, { operation: data }),
+        data.responses && React.createElement(Responses, { responses: data.responses, isCompact: isCompact })));
+};
+Callbacks.displayName = 'HttpOperation.Callback';
+
 const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+    var _a;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
@@ -2691,6 +2721,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: 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 }),
         isCompact && tryItPanel));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.15.2",
+  "version": "7.16.1",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -28,8 +28,8 @@
     "@stoplight/json": "^3.18.1",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.3",
-    "@stoplight/json-schema-tree": "^2.3.0",
-    "@stoplight/json-schema-viewer": "^4.14.0",
+    "@stoplight/json-schema-tree": "^3.0.0",
+    "@stoplight/json-schema-viewer": "^4.14.1",
     "@stoplight/markdown-viewer": "^5.6.0",
     "@stoplight/mosaic": "^1.46.1",
     "@stoplight/mosaic-code-editor": "^1.46.1",