@stoplight/elements-core 7.13.0 → 7.13.2

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

@@ -1,9 +1,10 @@
 import { HttpSecurityScheme } from '@stoplight/types';
 import React from 'react';
 interface SecuritySchemesProps {
-    schemes: HttpSecurityScheme[];
+    secSchemes: HttpSecurityScheme[][];
     defaultScheme?: string;
     defaultCollapsed?: boolean;
+    parentId: string;
 }
 export declare const SecuritySchemes: React.FC<SecuritySchemesProps>;
 export {};

package/components/Docs/Security/PanelContent.d.ts

@@ -0,0 +1,5 @@
+import { HttpSecurityScheme } from '@stoplight/types';
+import * as React from 'react';
+export declare const PanelContent: React.FC<{
+    schemes: HttpSecurityScheme[];
+}>;

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

@@ -0,0 +1 @@
+export * from './PanelContent';

package/constants.d.ts

@@ -88,3 +88,4 @@ export declare const HttpCodeDescriptions: {
 export declare const badgeDefaultBackgroundColor = "#293742";
 export declare const badgeDefaultColor = "#FFFFFF";
 export declare const CodeToIntentMap: Record<number, IntentVals>;
+export declare const OptionalSecurityMessage = "Requiring authorization is optional.  A user can access data without authorization or with authorization, if provided.";

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, 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 { 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, Callout, 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';
@@ -19,6 +19,7 @@ import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
+import { hash } from '@stoplight/http-spec/hash';
 import capitalize from 'lodash/capitalize.js';
 import filter from 'lodash/filter.js';
 import flatten from 'lodash/flatten.js';
@@ -193,6 +194,9 @@ const parserMap = {
     [NodeType.SpectralRuleset]: parseUnknown,
     [NodeType.Styleguide]: parseUnknown,
     [NodeType.Image]: parseUnknown,
+    [NodeType.HttpCallback]: parseUnknown,
+    [NodeType.StoplightOverride]: parseUnknown,
+    [NodeType.StoplightResolutions]: parseUnknown,
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -357,6 +361,9 @@ const NodeTypeColors = {
     spectral_ruleset: '',
     styleguide: '',
     image: '',
+    http_callback: '',
+    stoplight_override: '',
+    stoplight_resolutions: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -370,6 +377,9 @@ const NodeTypePrettyName = {
     spectral_ruleset: '',
     styleguide: '',
     image: '',
+    http_callback: '',
+    stoplight_override: '',
+    stoplight_resolutions: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -383,6 +393,9 @@ const NodeTypeIconDefs = {
     spectral_ruleset: faQuestionCircle,
     styleguide: faQuestionCircle,
     image: faImage,
+    http_callback: faQuestionCircle,
+    stoplight_override: faQuestionCircle,
+    stoplight_resolutions: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -465,7 +478,8 @@ const HttpCodeDescriptions = {
     599: 'Network connect timeout error',
 };
 const badgeDefaultBackgroundColor = '#293742';
-const badgeDefaultColor = '#FFFFFF';
+const badgeDefaultColor = '#FFFFFF';
+const OptionalSecurityMessage = 'Requiring authorization is optional.  A user can access data without authorization or with authorization, if provided.';
 
 const MockingContext = createNamedContext('MockingContext', { mockUrl: undefined, hideMocking: undefined });
 const MockingProvider = ({ mockUrl, hideMocking, children }) => {
@@ -904,6 +918,9 @@ const shouldAddKey = (auth, operationSecuritySchemes) => {
     if (auth.length !== 1)
         return false;
     return shouldIncludeKey(flatten(operationSecuritySchemes.filter(scheme => scheme.length === 1)), auth[0].type);
+};
+const getSecurityGroupId = (id, position) => {
+    return hash(`http_security_group-${id}-${position}`);
 };
 
 const useUniqueId = (prefix = 'id_') => React.useRef(`${prefix}${nanoid(8)}`).current;
@@ -2252,6 +2269,51 @@ 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;
+    return React.createElement(Comp, Object.assign({}, props));
+});
+const CustomLinkHeading = React.memo(function LinkHeading(_a) {
+    var { id: _id } = _a, props = __rest(_a, ["id"]);
+    const { pathname } = useLocation();
+    const routerKind = React.useContext(RouterTypeContext);
+    const route = pathname.split('#')[0];
+    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
+    return React.createElement(LinkHeading$1, Object.assign({ id: id }, props));
+});
+
+const SectionTitle = ({ title, id, size = 2, children }) => {
+    return (React.createElement(Flex, { w: "full" },
+        React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React.createElement(Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
+};
+const SectionSubtitle = props => {
+    return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
+};
+const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
+    return (React.createElement(Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
+        React.createElement(Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
+            React.createElement("div", { role: "heading" }, title)),
+        hasContent !== false && React.createElement(Panel.Content, null, children)));
+};
+
 const oauthFlowNames = {
     implicit: 'Implicit',
     authorizationCode: 'Authorization Code',
@@ -2321,33 +2383,19 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
-const LinkHeading = React.memo(function LinkHeading(props) {
-    const isUsingRouter = !!useRouterType();
-    const Comp = isUsingRouter ? CustomLinkHeading : LinkHeading$1;
-    return React.createElement(Comp, Object.assign({}, props));
-});
-const CustomLinkHeading = React.memo(function LinkHeading(_a) {
-    var { id: _id } = _a, props = __rest(_a, ["id"]);
-    const { pathname } = useLocation();
-    const routerKind = React.useContext(RouterTypeContext);
-    const route = pathname.split('#')[0];
-    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
-    return React.createElement(LinkHeading$1, Object.assign({ id: id }, props));
-});
-
-const SectionTitle = ({ title, id, size = 2, children }) => {
-    return (React.createElement(Flex, { w: "full" },
-        React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        React.createElement(Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
-};
-const SectionSubtitle = props => {
-    return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
-};
-const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
-    return (React.createElement(Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
-        React.createElement(Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
-            React.createElement("div", { role: "heading" }, title)),
-        hasContent !== false && React.createElement(Panel.Content, null, children)));
+const PanelContent = ({ schemes }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    if (!schemes || !schemes.length) {
+        return null;
+    }
+    const collection = schemes.length > 1;
+    return (React.createElement(Box, null, schemes.map(scheme => {
+        var _a;
+        return (React.createElement(Box, { key: scheme.key, p: 2, m: 2, border: true },
+            collection && (React.createElement(MarkdownViewer$1, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
+            React.createElement(MarkdownViewer$1, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
+            React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
+    })));
 };
 
 const isBodyEmpty = (body) => {
@@ -2454,7 +2502,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         return null;
     return (React.createElement(VStack, { spacing: 8 },
         React.createElement(SectionTitle, { title: "Request" }),
-        React.createElement(SecuritySchemes$1, { schemes: securitySchemes }),
+        React.createElement(SecuritySchemes$1, { schemes: securitySchemes, parentId: operation.id }),
         pathParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Path Parameters" }),
             React.createElement(Parameters, { parameterType: "path", parameters: pathParams }))),
@@ -2473,23 +2521,29 @@ Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
 const SecurityPanel = ({ schemes, includeKey }) => {
     const [expandedState, setExpanded] = useAtom(schemeExpandedState);
-    const { nodeHasChanged } = useOptionsCtx();
-    const collection = schemes.length > 1;
     return (React.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityNames(schemes, includeKey)}`, defaultIsOpen: !!expandedState[getReadableSecurityNames(schemes)], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [getReadableSecurityNames(schemes)]: isOpen })) },
-        React.createElement(Box, { m: -2 }, schemes.map(scheme => {
-            var _a;
-            return (React.createElement(Box, { key: scheme.key, p: 2, m: 2, border: true },
-                collection && (React.createElement(MarkdownViewer, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
-                React.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
-                React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
-        }))));
+        React.createElement(Box, { m: -2 },
+            React.createElement(PanelContent, { schemes: schemes }))));
 };
-const SecuritySchemes$1 = ({ schemes }) => {
+const SecuritySchemes$1 = ({ schemes, parentId }) => {
+    const { nodeHasChanged } = useOptionsCtx();
     if (!schemes.length) {
         return null;
     }
-    return (React.createElement(VStack, { spacing: 3 }, schemes.map((scheme, i) => (React.createElement(Box, { pos: "relative", key: i, p: 0, "data-test": "security-row" },
-        React.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) }))))));
+    const includeOptional = schemes.length > 1 && schemes.some(scheme => scheme.length === 0);
+    return (React.createElement(VStack, { spacing: 3 },
+        includeOptional && React.createElement(OptionalMessage$1, null),
+        schemes
+            .filter(scheme => scheme.length > 0)
+            .map((scheme, i) => {
+            const secGroupId = getSecurityGroupId(parentId, i);
+            return (React.createElement(Box, { pos: "relative", key: secGroupId, p: 0, "data-test": "http-operation-security-row" },
+                React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: secGroupId }) }),
+                React.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) })));
+        })));
+};
+const OptionalMessage$1 = () => {
+    return React.createElement(Callout, { appearance: "outline" }, OptionalSecurityMessage);
 };
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
@@ -2678,21 +2732,33 @@ const ExportButton = ({ original, bundled }) => {
         React.createElement(Menu, { "aria-label": "Export", items: menuItems, placement: "bottom right", renderTrigger: ({ isOpen }) => (React.createElement(Button, { iconRight: "chevron-down", appearance: "default", ml: 2, active: isOpen, size: "sm" }, "Export")) })));
 };
 
-const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, }) => {
+const SecuritySchemes = ({ secSchemes, defaultScheme, defaultCollapsed = false, parentId, }) => {
+    const includeOptional = secSchemes.length > 1 && secSchemes.some(schemes => schemes.length === 0);
+    const { nodeHasChanged } = useOptionsCtx();
     return (React__default.createElement(Panel, { rounded: true, isCollapsible: defaultCollapsed, "data-test": "security-row" },
         React__default.createElement(Panel.Titlebar, { bg: "canvas-300" },
             React__default.createElement(Box, { as: "span", role: "heading" }, "Security")),
-        React__default.createElement(Panel.Content, { p: 0 }, sortBy(schemes, 'type').map((scheme, i) => (React__default.createElement(SecurityScheme, { key: i, scheme: scheme, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1, showSchemeKey: shouldIncludeKey(schemes, scheme.type) }))))));
-};
-const SecurityScheme = ({ scheme, defaultIsOpen, isCollapsible, showSchemeKey }) => {
-    const { nodeHasChanged } = useOptionsCtx();
-    const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id });
+        React__default.createElement(Panel.Content, { p: 0 },
+            includeOptional && React__default.createElement(OptionalMessage, null),
+            secSchemes
+                .filter(scheme => scheme.length > 0)
+                .map((schemes, i) => {
+                const secGroupId = getSecurityGroupId(parentId, i);
+                return (React__default.createElement(Box, { key: secGroupId, "data-test": "http-service-security-row" },
+                    React__default.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: secGroupId }) }),
+                    React__default.createElement(SecurityScheme, { schemes: schemes, defaultIsOpen: defaultScheme ? schemes.length === 1 && schemes[0].key === defaultScheme : i === 0, isCollapsible: secSchemes.length > 1, showSchemeKey: shouldAddKey(schemes, secSchemes) })));
+            }))));
+};
+const SecurityScheme = ({ schemes, defaultIsOpen, isCollapsible, showSchemeKey }) => {
     return (React__default.createElement(Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible, pos: "relative" },
         React__default.createElement(Panel.Titlebar, null,
-            React__default.createElement(Box, { as: "span", role: "heading" }, getReadableSecurityName(scheme, showSchemeKey))),
+            React__default.createElement(Box, { as: "span", role: "heading" }, getReadableSecurityNames(schemes, showSchemeKey))),
         React__default.createElement(Panel.Content, null,
-            React__default.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })),
-        React__default.createElement(NodeAnnotation, { change: hasChanged })));
+            React__default.createElement(PanelContent, { schemes: schemes }))));
+};
+const OptionalMessage = () => {
+    return (React__default.createElement(Box, { p: 2, pl: 6, border: true },
+        React__default.createElement(Text, { fontSize: "base" }, OptionalSecurityMessage)));
 };
 
 const ServerInfo = ({ servers, mockUrl }) => {
@@ -2813,7 +2879,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
         pathname && (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.showPoweredByLink) && (React.createElement(PoweredByLink, { source: (_a = data.name) !== null && _a !== void 0 ? _a : 'no-title', pathname: pathname, packageType: "elements", layout: "stacked" })),
         React.createElement(VStack, { spacing: 6 },
             React.createElement(ServerInfo, { servers: (_b = data.servers) !== null && _b !== void 0 ? _b : [], mockUrl: mocking.mockUrl }),
-            React.createElement(Box, { "data-test": "security" }, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined })) : null),
+            React.createElement(Box, { "data-test": "security" }, ((_c = data.security) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(SecuritySchemes, { secSchemes: data.security, defaultScheme: query.get('security') || undefined, parentId: data.id })) : null),
             React.createElement(Box, { "data-test": "additional-info" }, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React.createElement(AdditionalInfo, { id: data.id, contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "sl-my-5", markdown: data.description }),

package/index.js

@@ -21,6 +21,7 @@ var jotai = require('jotai');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
 var httpsnippetLite = require('httpsnippet-lite');
+var hash = require('@stoplight/http-spec/hash');
 var capitalize = require('lodash/capitalize.js');
 var filter = require('lodash/filter.js');
 var flatten = require('lodash/flatten.js');
@@ -249,6 +250,9 @@ const parserMap = {
     [types.NodeType.SpectralRuleset]: parseUnknown,
     [types.NodeType.Styleguide]: parseUnknown,
     [types.NodeType.Image]: parseUnknown,
+    [types.NodeType.HttpCallback]: parseUnknown,
+    [types.NodeType.StoplightOverride]: parseUnknown,
+    [types.NodeType.StoplightResolutions]: parseUnknown,
     [types.NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -413,6 +417,9 @@ const NodeTypeColors = {
     spectral_ruleset: '',
     styleguide: '',
     image: '',
+    http_callback: '',
+    stoplight_override: '',
+    stoplight_resolutions: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -426,6 +433,9 @@ const NodeTypePrettyName = {
     spectral_ruleset: '',
     styleguide: '',
     image: '',
+    http_callback: '',
+    stoplight_override: '',
+    stoplight_resolutions: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -439,6 +449,9 @@ const NodeTypeIconDefs = {
     spectral_ruleset: faQuestionCircle,
     styleguide: faQuestionCircle,
     image: faImage,
+    http_callback: faQuestionCircle,
+    stoplight_override: faQuestionCircle,
+    stoplight_resolutions: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -521,7 +534,8 @@ const HttpCodeDescriptions = {
     599: 'Network connect timeout error',
 };
 const badgeDefaultBackgroundColor = '#293742';
-const badgeDefaultColor = '#FFFFFF';
+const badgeDefaultColor = '#FFFFFF';
+const OptionalSecurityMessage = 'Requiring authorization is optional.  A user can access data without authorization or with authorization, if provided.';
 
 const MockingContext = createNamedContext('MockingContext', { mockUrl: undefined, hideMocking: undefined });
 const MockingProvider = ({ mockUrl, hideMocking, children }) => {
@@ -960,6 +974,9 @@ const shouldAddKey = (auth, operationSecuritySchemes) => {
     if (auth.length !== 1)
         return false;
     return shouldIncludeKey(flatten__default["default"](operationSecuritySchemes.filter(scheme => scheme.length === 1)), auth[0].type);
+};
+const getSecurityGroupId = (id, position) => {
+    return hash.hash(`http_security_group-${id}-${position}`);
 };
 
 const useUniqueId = (prefix = 'id_') => React__namespace.useRef(`${prefix}${nanoid.nanoid(8)}`).current;
@@ -2308,6 +2325,51 @@ 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;
+    return React__namespace.createElement(Comp, Object.assign({}, props));
+});
+const CustomLinkHeading = React__namespace.memo(function LinkHeading(_a) {
+    var { id: _id } = _a, props = tslib.__rest(_a, ["id"]);
+    const { pathname } = reactRouterDom.useLocation();
+    const routerKind = React__namespace.useContext(RouterTypeContext);
+    const route = pathname.split('#')[0];
+    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
+    return React__namespace.createElement(mosaic.LinkHeading, Object.assign({ id: id }, props));
+});
+
+const SectionTitle = ({ title, id, size = 2, children }) => {
+    return (React__namespace.createElement(mosaic.Flex, { w: "full" },
+        React__namespace.createElement(mosaic.Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React__namespace.createElement(mosaic.Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
+};
+const SectionSubtitle = props => {
+    return React__namespace.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
+};
+const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
+    return (React__namespace.createElement(mosaic.Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
+        React__namespace.createElement(mosaic.Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
+            React__namespace.createElement("div", { role: "heading" }, title)),
+        hasContent !== false && React__namespace.createElement(mosaic.Panel.Content, null, children)));
+};
+
 const oauthFlowNames = {
     implicit: 'Implicit',
     authorizationCode: 'Authorization Code',
@@ -2377,33 +2439,19 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
-const LinkHeading = React__namespace.memo(function LinkHeading(props) {
-    const isUsingRouter = !!useRouterType();
-    const Comp = isUsingRouter ? CustomLinkHeading : mosaic.LinkHeading;
-    return React__namespace.createElement(Comp, Object.assign({}, props));
-});
-const CustomLinkHeading = React__namespace.memo(function LinkHeading(_a) {
-    var { id: _id } = _a, props = tslib.__rest(_a, ["id"]);
-    const { pathname } = reactRouterDom.useLocation();
-    const routerKind = React__namespace.useContext(RouterTypeContext);
-    const route = pathname.split('#')[0];
-    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
-    return React__namespace.createElement(mosaic.LinkHeading, Object.assign({ id: id }, props));
-});
-
-const SectionTitle = ({ title, id, size = 2, children }) => {
-    return (React__namespace.createElement(mosaic.Flex, { w: "full" },
-        React__namespace.createElement(mosaic.Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        React__namespace.createElement(mosaic.Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
-};
-const SectionSubtitle = props => {
-    return React__namespace.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
-};
-const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
-    return (React__namespace.createElement(mosaic.Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
-        React__namespace.createElement(mosaic.Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
-            React__namespace.createElement("div", { role: "heading" }, title)),
-        hasContent !== false && React__namespace.createElement(mosaic.Panel.Content, null, children)));
+const PanelContent = ({ schemes }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    if (!schemes || !schemes.length) {
+        return null;
+    }
+    const collection = schemes.length > 1;
+    return (React__namespace.createElement(mosaic.Box, null, schemes.map(scheme => {
+        var _a;
+        return (React__namespace.createElement(mosaic.Box, { key: scheme.key, p: 2, m: 2, border: true },
+            collection && (React__namespace.createElement(markdownViewer.MarkdownViewer, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
+            React__namespace.createElement(markdownViewer.MarkdownViewer, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
+    })));
 };
 
 const isBodyEmpty = (body) => {
@@ -2510,7 +2558,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         return null;
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8 },
         React__namespace.createElement(SectionTitle, { title: "Request" }),
-        React__namespace.createElement(SecuritySchemes$1, { schemes: securitySchemes }),
+        React__namespace.createElement(SecuritySchemes$1, { schemes: securitySchemes, parentId: operation.id }),
         pathParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
             React__namespace.createElement(SectionSubtitle, { title: "Path Parameters" }),
             React__namespace.createElement(Parameters, { parameterType: "path", parameters: pathParams }))),
@@ -2529,23 +2577,29 @@ Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = utils.atomWithStorage('HttpOperation_security_expanded', {});
 const SecurityPanel = ({ schemes, includeKey }) => {
     const [expandedState, setExpanded] = jotai.useAtom(schemeExpandedState);
-    const { nodeHasChanged } = useOptionsCtx();
-    const collection = schemes.length > 1;
     return (React__namespace.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityNames(schemes, includeKey)}`, defaultIsOpen: !!expandedState[getReadableSecurityNames(schemes)], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [getReadableSecurityNames(schemes)]: isOpen })) },
-        React__namespace.createElement(mosaic.Box, { m: -2 }, schemes.map(scheme => {
-            var _a;
-            return (React__namespace.createElement(mosaic.Box, { key: scheme.key, p: 2, m: 2, border: true },
-                collection && (React__namespace.createElement(MarkdownViewer, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
-                React__namespace.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
-                React__namespace.createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
-        }))));
+        React__namespace.createElement(mosaic.Box, { m: -2 },
+            React__namespace.createElement(PanelContent, { schemes: schemes }))));
 };
-const SecuritySchemes$1 = ({ schemes }) => {
+const SecuritySchemes$1 = ({ schemes, parentId }) => {
+    const { nodeHasChanged } = useOptionsCtx();
     if (!schemes.length) {
         return null;
     }
-    return (React__namespace.createElement(mosaic.VStack, { spacing: 3 }, schemes.map((scheme, i) => (React__namespace.createElement(mosaic.Box, { pos: "relative", key: i, p: 0, "data-test": "security-row" },
-        React__namespace.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) }))))));
+    const includeOptional = schemes.length > 1 && schemes.some(scheme => scheme.length === 0);
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 3 },
+        includeOptional && React__namespace.createElement(OptionalMessage$1, null),
+        schemes
+            .filter(scheme => scheme.length > 0)
+            .map((scheme, i) => {
+            const secGroupId = getSecurityGroupId(parentId, i);
+            return (React__namespace.createElement(mosaic.Box, { pos: "relative", key: secGroupId, p: 0, "data-test": "http-operation-security-row" },
+                React__namespace.createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: secGroupId }) }),
+                React__namespace.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) })));
+        })));
+};
+const OptionalMessage$1 = () => {
+    return React__namespace.createElement(mosaic.Callout, { appearance: "outline" }, OptionalSecurityMessage);
 };
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
@@ -2734,21 +2788,33 @@ const ExportButton = ({ original, bundled }) => {
         React__namespace.createElement(mosaic.Menu, { "aria-label": "Export", items: menuItems, placement: "bottom right", renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { iconRight: "chevron-down", appearance: "default", ml: 2, active: isOpen, size: "sm" }, "Export")) })));
 };
 
-const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, }) => {
+const SecuritySchemes = ({ secSchemes, defaultScheme, defaultCollapsed = false, parentId, }) => {
+    const includeOptional = secSchemes.length > 1 && secSchemes.some(schemes => schemes.length === 0);
+    const { nodeHasChanged } = useOptionsCtx();
     return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: defaultCollapsed, "data-test": "security-row" },
         React__default["default"].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
             React__default["default"].createElement(mosaic.Box, { as: "span", role: "heading" }, "Security")),
-        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, sortBy__default["default"](schemes, 'type').map((scheme, i) => (React__default["default"].createElement(SecurityScheme, { key: i, scheme: scheme, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1, showSchemeKey: shouldIncludeKey(schemes, scheme.type) }))))));
-};
-const SecurityScheme = ({ scheme, defaultIsOpen, isCollapsible, showSchemeKey }) => {
-    const { nodeHasChanged } = useOptionsCtx();
-    const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id });
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 },
+            includeOptional && React__default["default"].createElement(OptionalMessage, null),
+            secSchemes
+                .filter(scheme => scheme.length > 0)
+                .map((schemes, i) => {
+                const secGroupId = getSecurityGroupId(parentId, i);
+                return (React__default["default"].createElement(mosaic.Box, { key: secGroupId, "data-test": "http-service-security-row" },
+                    React__default["default"].createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: secGroupId }) }),
+                    React__default["default"].createElement(SecurityScheme, { schemes: schemes, defaultIsOpen: defaultScheme ? schemes.length === 1 && schemes[0].key === defaultScheme : i === 0, isCollapsible: secSchemes.length > 1, showSchemeKey: shouldAddKey(schemes, secSchemes) })));
+            }))));
+};
+const SecurityScheme = ({ schemes, defaultIsOpen, isCollapsible, showSchemeKey }) => {
     return (React__default["default"].createElement(mosaic.Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible, pos: "relative" },
         React__default["default"].createElement(mosaic.Panel.Titlebar, null,
-            React__default["default"].createElement(mosaic.Box, { as: "span", role: "heading" }, getReadableSecurityName(scheme, showSchemeKey))),
+            React__default["default"].createElement(mosaic.Box, { as: "span", role: "heading" }, getReadableSecurityNames(schemes, showSchemeKey))),
         React__default["default"].createElement(mosaic.Panel.Content, null,
-            React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })),
-        React__default["default"].createElement(mosaic.NodeAnnotation, { change: hasChanged })));
+            React__default["default"].createElement(PanelContent, { schemes: schemes }))));
+};
+const OptionalMessage = () => {
+    return (React__default["default"].createElement(mosaic.Box, { p: 2, pl: 6, border: true },
+        React__default["default"].createElement(mosaic.Text, { fontSize: "base" }, OptionalSecurityMessage)));
 };
 
 const ServerInfo = ({ servers, mockUrl }) => {
@@ -2869,7 +2935,7 @@ const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, loca
         pathname && (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.showPoweredByLink) && (React__namespace.createElement(PoweredByLink, { source: (_a = data.name) !== null && _a !== void 0 ? _a : 'no-title', pathname: pathname, packageType: "elements", layout: "stacked" })),
         React__namespace.createElement(mosaic.VStack, { spacing: 6 },
             React__namespace.createElement(ServerInfo, { servers: (_b = data.servers) !== null && _b !== void 0 ? _b : [], mockUrl: mocking.mockUrl }),
-            React__namespace.createElement(mosaic.Box, { "data-test": "security" }, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) ? (React__namespace.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined })) : null),
+            React__namespace.createElement(mosaic.Box, { "data-test": "security" }, ((_c = data.security) === null || _c === void 0 ? void 0 : _c.length) ? (React__namespace.createElement(SecuritySchemes, { secSchemes: data.security, defaultScheme: query.get('security') || undefined, parentId: data.id })) : null),
             React__namespace.createElement(mosaic.Box, { "data-test": "additional-info" }, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React__namespace.createElement(AdditionalInfo, { id: data.id, contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
         data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { className: "sl-my-5", markdown: data.description }),

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, 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 { 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, Callout, 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';
@@ -19,6 +19,7 @@ import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
+import { hash } from '@stoplight/http-spec/hash';
 import capitalize from 'lodash/capitalize.js';
 import filter from 'lodash/filter.js';
 import flatten from 'lodash/flatten.js';
@@ -193,6 +194,9 @@ const parserMap = {
     [NodeType.SpectralRuleset]: parseUnknown,
     [NodeType.Styleguide]: parseUnknown,
     [NodeType.Image]: parseUnknown,
+    [NodeType.HttpCallback]: parseUnknown,
+    [NodeType.StoplightOverride]: parseUnknown,
+    [NodeType.StoplightResolutions]: parseUnknown,
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -357,6 +361,9 @@ const NodeTypeColors = {
     spectral_ruleset: '',
     styleguide: '',
     image: '',
+    http_callback: '',
+    stoplight_override: '',
+    stoplight_resolutions: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -370,6 +377,9 @@ const NodeTypePrettyName = {
     spectral_ruleset: '',
     styleguide: '',
     image: '',
+    http_callback: '',
+    stoplight_override: '',
+    stoplight_resolutions: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -383,6 +393,9 @@ const NodeTypeIconDefs = {
     spectral_ruleset: faQuestionCircle,
     styleguide: faQuestionCircle,
     image: faImage,
+    http_callback: faQuestionCircle,
+    stoplight_override: faQuestionCircle,
+    stoplight_resolutions: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -465,7 +478,8 @@ const HttpCodeDescriptions = {
     599: 'Network connect timeout error',
 };
 const badgeDefaultBackgroundColor = '#293742';
-const badgeDefaultColor = '#FFFFFF';
+const badgeDefaultColor = '#FFFFFF';
+const OptionalSecurityMessage = 'Requiring authorization is optional.  A user can access data without authorization or with authorization, if provided.';
 
 const MockingContext = createNamedContext('MockingContext', { mockUrl: undefined, hideMocking: undefined });
 const MockingProvider = ({ mockUrl, hideMocking, children }) => {
@@ -904,6 +918,9 @@ const shouldAddKey = (auth, operationSecuritySchemes) => {
     if (auth.length !== 1)
         return false;
     return shouldIncludeKey(flatten(operationSecuritySchemes.filter(scheme => scheme.length === 1)), auth[0].type);
+};
+const getSecurityGroupId = (id, position) => {
+    return hash(`http_security_group-${id}-${position}`);
 };
 
 const useUniqueId = (prefix = 'id_') => React.useRef(`${prefix}${nanoid(8)}`).current;
@@ -2252,6 +2269,51 @@ 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;
+    return React.createElement(Comp, Object.assign({}, props));
+});
+const CustomLinkHeading = React.memo(function LinkHeading(_a) {
+    var { id: _id } = _a, props = __rest(_a, ["id"]);
+    const { pathname } = useLocation();
+    const routerKind = React.useContext(RouterTypeContext);
+    const route = pathname.split('#')[0];
+    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
+    return React.createElement(LinkHeading$1, Object.assign({ id: id }, props));
+});
+
+const SectionTitle = ({ title, id, size = 2, children }) => {
+    return (React.createElement(Flex, { w: "full" },
+        React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React.createElement(Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
+};
+const SectionSubtitle = props => {
+    return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
+};
+const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
+    return (React.createElement(Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
+        React.createElement(Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
+            React.createElement("div", { role: "heading" }, title)),
+        hasContent !== false && React.createElement(Panel.Content, null, children)));
+};
+
 const oauthFlowNames = {
     implicit: 'Implicit',
     authorizationCode: 'Authorization Code',
@@ -2321,33 +2383,19 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
-const LinkHeading = React.memo(function LinkHeading(props) {
-    const isUsingRouter = !!useRouterType();
-    const Comp = isUsingRouter ? CustomLinkHeading : LinkHeading$1;
-    return React.createElement(Comp, Object.assign({}, props));
-});
-const CustomLinkHeading = React.memo(function LinkHeading(_a) {
-    var { id: _id } = _a, props = __rest(_a, ["id"]);
-    const { pathname } = useLocation();
-    const routerKind = React.useContext(RouterTypeContext);
-    const route = pathname.split('#')[0];
-    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
-    return React.createElement(LinkHeading$1, Object.assign({ id: id }, props));
-});
-
-const SectionTitle = ({ title, id, size = 2, children }) => {
-    return (React.createElement(Flex, { w: "full" },
-        React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        React.createElement(Box, { alignSelf: 'center', py: 1, flexGrow: true, style: { minWidth: 0 } }, children)));
-};
-const SectionSubtitle = props => {
-    return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
-};
-const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
-    return (React.createElement(Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
-        React.createElement(Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
-            React.createElement("div", { role: "heading" }, title)),
-        hasContent !== false && React.createElement(Panel.Content, null, children)));
+const PanelContent = ({ schemes }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    if (!schemes || !schemes.length) {
+        return null;
+    }
+    const collection = schemes.length > 1;
+    return (React.createElement(Box, null, schemes.map(scheme => {
+        var _a;
+        return (React.createElement(Box, { key: scheme.key, p: 2, m: 2, border: true },
+            collection && (React.createElement(MarkdownViewer$1, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
+            React.createElement(MarkdownViewer$1, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
+            React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
+    })));
 };
 
 const isBodyEmpty = (body) => {
@@ -2454,7 +2502,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         return null;
     return (React.createElement(VStack, { spacing: 8 },
         React.createElement(SectionTitle, { title: "Request" }),
-        React.createElement(SecuritySchemes$1, { schemes: securitySchemes }),
+        React.createElement(SecuritySchemes$1, { schemes: securitySchemes, parentId: operation.id }),
         pathParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Path Parameters" }),
             React.createElement(Parameters, { parameterType: "path", parameters: pathParams }))),
@@ -2473,23 +2521,29 @@ Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
 const SecurityPanel = ({ schemes, includeKey }) => {
     const [expandedState, setExpanded] = useAtom(schemeExpandedState);
-    const { nodeHasChanged } = useOptionsCtx();
-    const collection = schemes.length > 1;
     return (React.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityNames(schemes, includeKey)}`, defaultIsOpen: !!expandedState[getReadableSecurityNames(schemes)], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [getReadableSecurityNames(schemes)]: isOpen })) },
-        React.createElement(Box, { m: -2 }, schemes.map(scheme => {
-            var _a;
-            return (React.createElement(Box, { key: scheme.key, p: 2, m: 2, border: true },
-                collection && (React.createElement(MarkdownViewer, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
-                React.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
-                React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
-        }))));
+        React.createElement(Box, { m: -2 },
+            React.createElement(PanelContent, { schemes: schemes }))));
 };
-const SecuritySchemes$1 = ({ schemes }) => {
+const SecuritySchemes$1 = ({ schemes, parentId }) => {
+    const { nodeHasChanged } = useOptionsCtx();
     if (!schemes.length) {
         return null;
     }
-    return (React.createElement(VStack, { spacing: 3 }, schemes.map((scheme, i) => (React.createElement(Box, { pos: "relative", key: i, p: 0, "data-test": "security-row" },
-        React.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) }))))));
+    const includeOptional = schemes.length > 1 && schemes.some(scheme => scheme.length === 0);
+    return (React.createElement(VStack, { spacing: 3 },
+        includeOptional && React.createElement(OptionalMessage$1, null),
+        schemes
+            .filter(scheme => scheme.length > 0)
+            .map((scheme, i) => {
+            const secGroupId = getSecurityGroupId(parentId, i);
+            return (React.createElement(Box, { pos: "relative", key: secGroupId, p: 0, "data-test": "http-operation-security-row" },
+                React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: secGroupId }) }),
+                React.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) })));
+        })));
+};
+const OptionalMessage$1 = () => {
+    return React.createElement(Callout, { appearance: "outline" }, OptionalSecurityMessage);
 };
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
@@ -2678,21 +2732,33 @@ const ExportButton = ({ original, bundled }) => {
         React.createElement(Menu, { "aria-label": "Export", items: menuItems, placement: "bottom right", renderTrigger: ({ isOpen }) => (React.createElement(Button, { iconRight: "chevron-down", appearance: "default", ml: 2, active: isOpen, size: "sm" }, "Export")) })));
 };
 
-const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, }) => {
+const SecuritySchemes = ({ secSchemes, defaultScheme, defaultCollapsed = false, parentId, }) => {
+    const includeOptional = secSchemes.length > 1 && secSchemes.some(schemes => schemes.length === 0);
+    const { nodeHasChanged } = useOptionsCtx();
     return (React__default.createElement(Panel, { rounded: true, isCollapsible: defaultCollapsed, "data-test": "security-row" },
         React__default.createElement(Panel.Titlebar, { bg: "canvas-300" },
             React__default.createElement(Box, { as: "span", role: "heading" }, "Security")),
-        React__default.createElement(Panel.Content, { p: 0 }, sortBy(schemes, 'type').map((scheme, i) => (React__default.createElement(SecurityScheme, { key: i, scheme: scheme, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1, showSchemeKey: shouldIncludeKey(schemes, scheme.type) }))))));
-};
-const SecurityScheme = ({ scheme, defaultIsOpen, isCollapsible, showSchemeKey }) => {
-    const { nodeHasChanged } = useOptionsCtx();
-    const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id });
+        React__default.createElement(Panel.Content, { p: 0 },
+            includeOptional && React__default.createElement(OptionalMessage, null),
+            secSchemes
+                .filter(scheme => scheme.length > 0)
+                .map((schemes, i) => {
+                const secGroupId = getSecurityGroupId(parentId, i);
+                return (React__default.createElement(Box, { key: secGroupId, "data-test": "http-service-security-row" },
+                    React__default.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: secGroupId }) }),
+                    React__default.createElement(SecurityScheme, { schemes: schemes, defaultIsOpen: defaultScheme ? schemes.length === 1 && schemes[0].key === defaultScheme : i === 0, isCollapsible: secSchemes.length > 1, showSchemeKey: shouldAddKey(schemes, secSchemes) })));
+            }))));
+};
+const SecurityScheme = ({ schemes, defaultIsOpen, isCollapsible, showSchemeKey }) => {
     return (React__default.createElement(Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible, pos: "relative" },
         React__default.createElement(Panel.Titlebar, null,
-            React__default.createElement(Box, { as: "span", role: "heading" }, getReadableSecurityName(scheme, showSchemeKey))),
+            React__default.createElement(Box, { as: "span", role: "heading" }, getReadableSecurityNames(schemes, showSchemeKey))),
         React__default.createElement(Panel.Content, null,
-            React__default.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })),
-        React__default.createElement(NodeAnnotation, { change: hasChanged })));
+            React__default.createElement(PanelContent, { schemes: schemes }))));
+};
+const OptionalMessage = () => {
+    return (React__default.createElement(Box, { p: 2, pl: 6, border: true },
+        React__default.createElement(Text, { fontSize: "base" }, OptionalSecurityMessage)));
 };
 
 const ServerInfo = ({ servers, mockUrl }) => {
@@ -2813,7 +2879,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
         pathname && (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.showPoweredByLink) && (React.createElement(PoweredByLink, { source: (_a = data.name) !== null && _a !== void 0 ? _a : 'no-title', pathname: pathname, packageType: "elements", layout: "stacked" })),
         React.createElement(VStack, { spacing: 6 },
             React.createElement(ServerInfo, { servers: (_b = data.servers) !== null && _b !== void 0 ? _b : [], mockUrl: mocking.mockUrl }),
-            React.createElement(Box, { "data-test": "security" }, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined })) : null),
+            React.createElement(Box, { "data-test": "security" }, ((_c = data.security) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(SecuritySchemes, { secSchemes: data.security, defaultScheme: query.get('security') || undefined, parentId: data.id })) : null),
             React.createElement(Box, { "data-test": "additional-info" }, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React.createElement(AdditionalInfo, { id: data.id, contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "sl-my-5", markdown: data.description }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.13.0",
+  "version": "7.13.2",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -24,18 +24,18 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@stoplight/http-spec": "^5.1.4",
+    "@stoplight/http-spec": "^6.0.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.3",
-    "@stoplight/json-schema-viewer": "^4.10.2",
+    "@stoplight/json-schema-viewer": "^4.12.0",
     "@stoplight/markdown-viewer": "^5.6.0",
     "@stoplight/mosaic": "^1.33.0",
     "@stoplight/mosaic-code-editor": "^1.33.0",
     "@stoplight/mosaic-code-viewer": "^1.33.0",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^2.0.0",
-    "@stoplight/types": "^13.7.0",
+    "@stoplight/types": "^14.0.0",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",
     "httpsnippet-lite": "^3.0.1",

package/utils/oas/security.d.ts

@@ -7,3 +7,4 @@ export declare const isOauth2AuthorizationCodeFlow: (maybeFlow: IOauth2Flow) =>
 export declare const isOauth2ClientCredentialsOrPasswordFlow: (maybeFlow: IOauth2Flow) => maybeFlow is IOauth2ClientCredentialsFlow | IOauth2PasswordFlow;
 export declare function shouldIncludeKey(schemes: HttpSecurityScheme[], type: HttpSecurityScheme['type']): boolean;
 export declare const shouldAddKey: (auth: HttpSecurityScheme[], operationSecuritySchemes: HttpSecurityScheme[][]) => boolean;
+export declare const getSecurityGroupId: (id: string, position: number) => string;

package/utils/securitySchemes.d.ts

@@ -1,2 +1,3 @@
 import { HttpSecurityScheme } from '@stoplight/types';
 export declare function getDefaultDescription(scheme: HttpSecurityScheme): string;
+export declare function getOptionalAuthDescription(): string;