@stoplight/elements-core 7.9.0 → 7.11.0

package/components/Docs/Docs.d.ts

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ParsedNode } from '../../types';
 import { ReferenceResolver } from '../../utils/ref-resolving/ReferenceResolver';
 import { ExportButtonProps } from './HttpService/ExportButton';
+declare type NodeUnsupportedFn = (err: 'dataEmpty' | 'invalidType' | Error) => void;
 interface BaseDocsProps {
     className?: string;
     uri?: string;
@@ -25,6 +26,7 @@ interface BaseDocsProps {
         compact?: number | boolean;
     };
     nodeHasChanged?: NodeHasChangedFn<React.ReactNode>;
+    nodeUnsupported?: NodeUnsupportedFn;
 }
 export interface DocsProps extends BaseDocsProps {
     nodeType: NodeType;
@@ -39,5 +41,5 @@ export declare const Docs: React.NamedExoticComponent<DocsProps>;
 export interface ParsedDocsProps extends BaseDocsProps {
     node: ParsedNode;
 }
-export declare const ParsedDocs: ({ node, ...commonProps }: ParsedDocsProps) => JSX.Element | null;
+export declare const ParsedDocs: ({ node, nodeUnsupported, ...commonProps }: ParsedDocsProps) => JSX.Element | null;
 export { DocsSkeleton } from './Skeleton';

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

@@ -3,9 +3,10 @@ interface ResponsesProps {
     responses: IHttpOperationResponse[];
     onMediaTypeChange(mediaType: string): void;
     onStatusCodeChange(statusCode: string): void;
+    isCompact?: boolean;
 }
 export declare const Responses: {
-    ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }: ResponsesProps): JSX.Element | null;
+    ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }: ResponsesProps): JSX.Element | null;
     displayName: string;
 };
 export {};

package/index.esm.js

@@ -7,7 +7,7 @@ import isArray from 'lodash/isArray.js';
 import isPlainObject from 'lodash/isPlainObject.js';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
@@ -486,6 +486,22 @@ function useChosenServerUrl(chosenServerUrl) {
     };
 }
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const chosenServerAtom = atom(undefined);
 
 function isValidServer(server) {
@@ -2410,20 +2426,41 @@ const SecuritySchemes$1 = ({ schemes }) => {
         React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
+    const { isOpen, open, close } = useModalState();
+    const onSelectionChange = React.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResponse = responses === null || responses === void 0 ? void 0 : responses.find(response => response.id === selectedId);
+        if (selectedResponse) {
+            setActiveResponseId(selectedResponse.code);
+            close();
+        }
+    }, [responses, setActiveResponseId, close]);
     React.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
+    const response = responses.find(r => r.code === activeResponseId) || responses[0];
+    const compactResponses = (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onPress: open, iconRight: React.createElement(Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
+                color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+            } }, activeResponseId),
+        React.createElement(Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React.createElement(HStack, { justifyContent: "end" },
+                React.createElement(Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
+            React.createElement(ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React.createElement(ListBoxItem, { key: response.id },
+                React.createElement(Box, { p: 3, bg: { hover: 'primary-tint' } },
+                    React.createElement(Flex, { w: "2xl", align: "center", justify: "end" },
+                        response.code === activeResponseId && React.createElement(Box, { as: Icon, icon: "check" }),
+                        React.createElement(Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
+    const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React.createElement(SectionTitle, { title: "Responses" },
-            React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
-        React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
+        React.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
@@ -2468,6 +2505,7 @@ const codeToIntentVal = (code) => {
 const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const mocking = React.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -2477,15 +2515,16 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
     const header = (React.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
-    return (React.createElement(TwoColumnLayout, { className: cn('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        isCompact && tryItPanel));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = withErrorBoundary(HttpOperationComponent, {
@@ -2717,22 +2756,6 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const getBreakpoints = (compact) => {
-    if (!compact)
-        return undefined;
-    if (typeof compact === 'number') {
-        return [
-            ['compact', compact],
-            ['regular', Infinity],
-        ];
-    }
-    return [['compact', Infinity]];
-};
-function useIsCompact(layoutOptions) {
-    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
-    return { ref: ref, isCompact: breakpoint === 'compact' };
-}
-
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const resolveRef = useSchemaInlineRefResolver();
@@ -2783,9 +2806,11 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
+    var _b;
     var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
+        (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
     let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
@@ -2795,7 +2820,7 @@ const Docs = React.memo((_a) => {
     return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
-    var { node } = _a, commonProps = __rest(_a, ["node"]);
+    var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
@@ -2806,6 +2831,7 @@ const ParsedDocs = (_a) => {
         case 'model':
             return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
+            nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
     }
 };

package/index.js

@@ -542,6 +542,22 @@ function useChosenServerUrl(chosenServerUrl) {
     };
 }
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = mosaic.useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const chosenServerAtom = jotai.atom(undefined);
 
 function isValidServer(server) {
@@ -2466,20 +2482,41 @@ const SecuritySchemes$1 = ({ schemes }) => {
         React__namespace.createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy__default["default"](uniqBy__default["default"](unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React__namespace.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
+    const { isOpen, open, close } = mosaic.useModalState();
+    const onSelectionChange = React__namespace.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResponse = responses === null || responses === void 0 ? void 0 : responses.find(response => response.id === selectedId);
+        if (selectedResponse) {
+            setActiveResponseId(selectedResponse.code);
+            close();
+        }
+    }, [responses, setActiveResponseId, close]);
     React__namespace.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
+    const response = responses.find(r => r.code === activeResponseId) || responses[0];
+    const compactResponses = (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(mosaic.Button, { onPress: open, iconRight: React__namespace.createElement(mosaic.Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
+                color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+            } }, activeResponseId),
+        React__namespace.createElement(mosaic.Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React__namespace.createElement(mosaic.HStack, { justifyContent: "end" },
+                React__namespace.createElement(mosaic.Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
+            React__namespace.createElement(mosaic.ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React__namespace.createElement(mosaic.ListBoxItem, { key: response.id },
+                React__namespace.createElement(mosaic.Box, { p: 3, bg: { hover: 'primary-tint' } },
+                    React__namespace.createElement(mosaic.Flex, { w: "2xl", align: "center", justify: "end" },
+                        response.code === activeResponseId && React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: "check" }),
+                        React__namespace.createElement(mosaic.Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
+    const tabResponses = (React__namespace.createElement(mosaic.TabList, { density: "compact" }, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8, as: mosaic.Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React__namespace.createElement(SectionTitle, { title: "Responses" },
-            React__namespace.createElement(mosaic.TabList, { density: "compact" }, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
-        React__namespace.createElement(mosaic.TabPanels, { p: 0 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
-            React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
+        React__namespace.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        isCompact ? (React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React__namespace.createElement(mosaic.TabPanels, { p: 0 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
+            React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
@@ -2524,6 +2561,7 @@ const codeToIntentVal = (code) => {
 const HttpOperationComponent = React__namespace.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const mocking = React__namespace.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -2533,15 +2571,16 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
     const header = (React__namespace.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
         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, { onChange: setTextRequestBodyIndex, operation: data }),
-        data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
-    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+        data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        isCompact && tryItPanel));
+    return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = reactErrorBoundary.withErrorBoundary(HttpOperationComponent, {
@@ -2773,22 +2812,6 @@ const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, loca
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const getBreakpoints = (compact) => {
-    if (!compact)
-        return undefined;
-    if (typeof compact === 'number') {
-        return [
-            ['compact', compact],
-            ['regular', Infinity],
-        ];
-    }
-    return [['compact', Infinity]];
-};
-function useIsCompact(layoutOptions) {
-    const { ref, breakpoint } = mosaic.useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
-    return { ref: ref, isCompact: breakpoint === 'compact' };
-}
-
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const resolveRef = useSchemaInlineRefResolver();
@@ -2839,9 +2862,11 @@ const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) =>
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React__namespace.memo((_a) => {
+    var _b;
     var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
+        (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
     let elem = React__namespace.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
@@ -2851,7 +2876,7 @@ const Docs = React__namespace.memo((_a) => {
     return React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
-    var { node } = _a, commonProps = tslib.__rest(_a, ["node"]);
+    var { node, nodeUnsupported } = _a, commonProps = tslib.__rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React__namespace.createElement(Article, Object.assign({ data: node.data }, commonProps));
@@ -2862,6 +2887,7 @@ const ParsedDocs = (_a) => {
         case 'model':
             return React__namespace.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
+            nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
     }
 };

package/index.mjs

@@ -7,7 +7,7 @@ import isArray from 'lodash/isArray.js';
 import isPlainObject from 'lodash/isPlainObject.js';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
@@ -486,6 +486,22 @@ function useChosenServerUrl(chosenServerUrl) {
     };
 }
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const chosenServerAtom = atom(undefined);
 
 function isValidServer(server) {
@@ -2410,20 +2426,41 @@ const SecuritySchemes$1 = ({ schemes }) => {
         React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
+    const { isOpen, open, close } = useModalState();
+    const onSelectionChange = React.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResponse = responses === null || responses === void 0 ? void 0 : responses.find(response => response.id === selectedId);
+        if (selectedResponse) {
+            setActiveResponseId(selectedResponse.code);
+            close();
+        }
+    }, [responses, setActiveResponseId, close]);
     React.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
+    const response = responses.find(r => r.code === activeResponseId) || responses[0];
+    const compactResponses = (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onPress: open, iconRight: React.createElement(Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
+                color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+            } }, activeResponseId),
+        React.createElement(Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React.createElement(HStack, { justifyContent: "end" },
+                React.createElement(Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
+            React.createElement(ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React.createElement(ListBoxItem, { key: response.id },
+                React.createElement(Box, { p: 3, bg: { hover: 'primary-tint' } },
+                    React.createElement(Flex, { w: "2xl", align: "center", justify: "end" },
+                        response.code === activeResponseId && React.createElement(Box, { as: Icon, icon: "check" }),
+                        React.createElement(Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
+    const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React.createElement(SectionTitle, { title: "Responses" },
-            React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
-        React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
+        React.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
@@ -2468,6 +2505,7 @@ const codeToIntentVal = (code) => {
 const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const mocking = React.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -2477,15 +2515,16 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
     const header = (React.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
-    return (React.createElement(TwoColumnLayout, { className: cn('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        isCompact && tryItPanel));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = withErrorBoundary(HttpOperationComponent, {
@@ -2717,22 +2756,6 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const getBreakpoints = (compact) => {
-    if (!compact)
-        return undefined;
-    if (typeof compact === 'number') {
-        return [
-            ['compact', compact],
-            ['regular', Infinity],
-        ];
-    }
-    return [['compact', Infinity]];
-};
-function useIsCompact(layoutOptions) {
-    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
-    return { ref: ref, isCompact: breakpoint === 'compact' };
-}
-
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const resolveRef = useSchemaInlineRefResolver();
@@ -2783,9 +2806,11 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
+    var _b;
     var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
+        (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
     let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
@@ -2795,7 +2820,7 @@ const Docs = React.memo((_a) => {
     return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
-    var { node } = _a, commonProps = __rest(_a, ["node"]);
+    var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
@@ -2806,6 +2831,7 @@ const ParsedDocs = (_a) => {
         case 'model':
             return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
+            nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
     }
 };

package/package.json

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