@stoplight/elements-core 7.15.1 → 7.16.0

package/components/Docs/Article/Article.stories.d.ts

@@ -1,13 +1,13 @@
-declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
-export declare const KitchenSink: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+export declare const KitchenSink: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
-export declare const MultipleTryIts: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+export declare const MultipleTryIts: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Article/index.d.ts

@@ -1,5 +1,6 @@
 import { IMarkdownViewerProps } from '@stoplight/markdown-viewer';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 declare type ArticleProps = DocsComponentProps<IMarkdownViewerProps['markdown']>;
-export declare const Article: import("react").FunctionComponent<ArticleProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Article: React.FunctionComponent<ArticleProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export {};

package/components/Docs/Docs.stories.d.ts

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react';
 import { DocsProps } from './Docs';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, DocsProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, DocsProps>;
 export default _default;
 export declare const DocsStory: Story<DocsProps>;

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

@@ -1,4 +1,15 @@
 import { IHttpOperation } from '@stoplight/types';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type HttpOperationProps = DocsComponentProps<IHttpOperation>;
-export declare const HttpOperation: import("react").FunctionComponent<HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+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/HttpOperation.stories.d.ts

@@ -1,7 +1,7 @@
-declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

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/components/Docs/HttpService/HttpService.d.ts

@@ -1,4 +1,5 @@
 import { IHttpService } from '@stoplight/types';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type HttpServiceProps = DocsComponentProps<Partial<IHttpService>>;
-export declare const HttpService: import("react").FunctionComponent<HttpServiceProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const HttpService: React.FunctionComponent<HttpServiceProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/HttpService/HttpService.stories.d.ts

@@ -1,7 +1,7 @@
-declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Model/Model.d.ts

@@ -1,4 +1,5 @@
 import { JSONSchema7 } from 'json-schema';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type ModelProps = DocsComponentProps<JSONSchema7>;
-export declare const Model: import("react").FunctionComponent<ModelProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Model: React.FunctionComponent<ModelProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Model/Model.stories.d.ts

@@ -1,7 +1,7 @@
-declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
     data: any;
 } & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/RequestSamples/RequestSamples.stories.d.ts

@@ -1,4 +1,4 @@
 import { RequestSamplesProps } from './RequestSamples';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, RequestSamplesProps>;
 export default _default;
-export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;
+export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, RequestSamplesProps>;

package/components/ResponseExamples/ResponseExamples.stories.d.ts

@@ -1,4 +1,4 @@
 import { ResponseExamplesProps } from './ResponseExamples';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ResponseExamplesProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, ResponseExamplesProps>;
 export default _default;
-export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ResponseExamplesProps>;
+export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, ResponseExamplesProps>;

package/components/TryIt/TryIt.stories.d.ts

@@ -1,13 +1,13 @@
 import { TryItProps } from './TryIt';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
 export default _default;
-export declare const SimpleGET: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const WithParameters: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const WithVariables: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const UrlEncoded: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const UrlEncodedOneOf: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const Multipart: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const RequestBodySchema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const RequestBodyExamples: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const TryItAuth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
-export declare const TryItAuthDuplicated: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const SimpleGET: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const WithParameters: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const WithVariables: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const UrlEncoded: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const UrlEncodedOneOf: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const Multipart: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const RequestBodySchema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const RequestBodyExamples: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const TryItAuth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;
+export declare const TryItAuthDuplicated: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItProps>;

package/components/TryIt/TryItWithRequestSamples.stories.d.ts

@@ -1,5 +1,5 @@
 import { TryItWithRequestSamplesProps } from './TryItWithRequestSamples';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TryItWithRequestSamplesProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, TryItWithRequestSamplesProps>;
 export default _default;
-export declare const WithParameters: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItWithRequestSamplesProps>;
-export declare const WithVariables: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItWithRequestSamplesProps>;
+export declare const WithParameters: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItWithRequestSamplesProps>;
+export declare const WithVariables: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, TryItWithRequestSamplesProps>;

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;
@@ -2519,7 +2519,12 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
         const paramDescription = description || paramSchema.description;
         const paramDeprecated = !!(deprecated || paramSchema.deprecated);
-        const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
+        const paramStyleUnspecified = style === HttpParamStyles.Unspecified;
+        const paramStyle = paramStyleUnspecified
+            ? undefined
+            : style && defaultStyle[parameterType] !== style
+                ? readableStyles[style] || style
+                : undefined;
         if (isPlainObject$1(schema.properties)) {
             schema.properties[p.name] = Object.assign(Object.assign({}, paramSchema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (isPlainObject$1(paramSchema['x-stoplight']) ? paramSchema['x-stoplight'] : {})), { id: p.id }) });
         }
@@ -2603,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;
@@ -2634,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 },
@@ -2665,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);
@@ -2686,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;
@@ -2576,7 +2576,12 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
         const paramDescription = description || paramSchema.description;
         const paramDeprecated = !!(deprecated || paramSchema.deprecated);
-        const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
+        const paramStyleUnspecified = style === types.HttpParamStyles.Unspecified;
+        const paramStyle = paramStyleUnspecified
+            ? undefined
+            : style && defaultStyle[parameterType] !== style
+                ? readableStyles[style] || style
+                : undefined;
         if (json.isPlainObject(schema.properties)) {
             schema.properties[p.name] = Object.assign(Object.assign({}, paramSchema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (json.isPlainObject(paramSchema['x-stoplight']) ? paramSchema['x-stoplight'] : {})), { id: p.id }) });
         }
@@ -2660,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;
@@ -2691,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 },
@@ -2722,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);
@@ -2743,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;
@@ -2519,7 +2519,12 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
         const paramDescription = description || paramSchema.description;
         const paramDeprecated = !!(deprecated || paramSchema.deprecated);
-        const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
+        const paramStyleUnspecified = style === HttpParamStyles.Unspecified;
+        const paramStyle = paramStyleUnspecified
+            ? undefined
+            : style && defaultStyle[parameterType] !== style
+                ? readableStyles[style] || style
+                : undefined;
         if (isPlainObject$1(schema.properties)) {
             schema.properties[p.name] = Object.assign(Object.assign({}, paramSchema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (isPlainObject$1(paramSchema['x-stoplight']) ? paramSchema['x-stoplight'] : {})), { id: p.id }) });
         }
@@ -2603,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;
@@ -2634,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 },
@@ -2665,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);
@@ -2686,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.1",
+  "version": "7.16.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -35,7 +35,7 @@
     "@stoplight/mosaic-code-editor": "^1.46.1",
     "@stoplight/mosaic-code-viewer": "^1.46.1",
     "@stoplight/path": "^1.3.2",
-    "@stoplight/react-error-boundary": "^2.0.0",
+    "@stoplight/react-error-boundary": "^3.0.0",
     "@stoplight/types": "^14.0.0",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",