@redocly/openapi-docs 3.10.0-next.7 → 3.10.0-next.8

package/lib/components/Security/OAuthFlow.js

@@ -1,4 +1,2 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.OAuthFlow=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),Markdown_1=require("../Markdown"),SecuritySchemeItem_1=require("./SecuritySchemeItem"),styled_1=require("./styled"),hooks_1=require("../../hooks");function OAuthFlowComponent({flow:e}){const t=Object.keys((null==e?void 0:e.scopes)||{}),r=(0,hooks_1.useTranslate)();return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.authorizationUrl","Authorization URL")}:`,value:(null==e?void 0:e.authorizationUrl)&&(0,jsx_runtime_1.jsx)(styled_1.StyledLink,{target:"_blank",rel:"noopener noreferrer",href:null==e?void 0:e.authorizationUrl,children:null==e?void 0:e.authorizationUrl})}),(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.tokenUrl","Token URL")}:`,value:null==e?void 0:e.tokenUrl}),(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.refreshUrl","Refresh URL")}:`,value:null==e?void 0:e.refreshUrl}),t.length&&(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.scopes","Scopes")}:`,value:" "}),t.map((t=>(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:(0,jsx_runtime_1.jsx)(StyledTag,{className:"tag-grey",children:t}),value:(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:(null==e?void 0:e.scopes[t])||""})},t)))]})||null]})}const StyledTag=(0,styled_components_1.default)(styled_1.Tag)`
-  margin-left: var(--spacing-xs);
-`;exports.OAuthFlow=(0,react_1.memo)(OAuthFlowComponent);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.OAuthFlow=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),SecuritySchemeItem_1=require("./SecuritySchemeItem"),styled_1=require("./styled"),hooks_1=require("../../hooks");function OAuthFlowComponent({flow:e}){const r=(0,hooks_1.useTranslate)();return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.authorizationUrl","Authorization URL")}:`,value:(null==e?void 0:e.authorizationUrl)&&(0,jsx_runtime_1.jsx)(styled_1.StyledLink,{target:"_blank",rel:"noopener noreferrer",href:null==e?void 0:e.authorizationUrl,children:null==e?void 0:e.authorizationUrl})}),(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.tokenUrl","Token URL")}:`,value:null==e?void 0:e.tokenUrl}),(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${r("openapi.refreshUrl","Refresh URL")}:`,value:null==e?void 0:e.refreshUrl})]})}exports.OAuthFlow=(0,react_1.memo)(OAuthFlowComponent);
 //# sourceMappingURL=OAuthFlow.js.map

package/lib/components/Security/OAuthScopes.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+import type { OpenAPISecurityScheme } from '../../types';
+import type { SecurityRequirement } from '../../models';
+export interface OAuthOptionalScopesProps {
+    flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
+}
+export interface OAuthRequiredScopesProps {
+    id: string;
+    securities: SecurityRequirement[];
+    flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
+}
+export declare const OAuthOptionalScopes: import("react").NamedExoticComponent<PropsWithChildren<OAuthOptionalScopesProps>>;
+export declare const OAuthRequiredScopes: import("react").NamedExoticComponent<PropsWithChildren<OAuthRequiredScopesProps>>;

package/lib/components/Security/OAuthScopes.js

@@ -0,0 +1,34 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.OAuthRequiredScopes=exports.OAuthOptionalScopes=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),Markdown_1=require("../Markdown"),SecuritySchemeItem_1=require("./SecuritySchemeItem"),styled_1=require("./styled"),hooks_1=require("../../hooks"),helper_1=require("./helper");function OAuthOptionalScopesComponent({flow:e}){const t=Object.keys((null==e?void 0:e.scopes)||{}),r=(0,hooks_1.useTranslate)(),[s,o]=(0,react_1.useState)(!1);if(!t.length)return null;return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:(0,jsx_runtime_1.jsxs)(ScopeHeader,{onClick:()=>{o((e=>!e))},children:[r(s?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",s?"Hide optional scopes":"Show optional scopes"),(0,jsx_runtime_1.jsx)(AnimatedChevronWrapper,{isOpen:s,children:(0,jsx_runtime_1.jsx)(theme_1.ChevronRightIcon,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),(0,jsx_runtime_1.jsx)(ScopesListWrapper,{isOpen:s,children:t.map((t=>(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:(0,jsx_runtime_1.jsx)(StyledTag,{className:"tag-grey",children:t}),value:(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:(null==e?void 0:e.scopes[t])||""})},t)))})]})}function OAuthRequiredScopesComponent({id:e,securities:t,flow:r}){const s=(0,helper_1.getRequiredScopes)(e,t),o=(0,hooks_1.useTranslate)();return s.length?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:o("openapi.requiredScopes","Required scopes"),value:" "}),(0,jsx_runtime_1.jsx)(Row,{children:s.map((e=>(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:(0,jsx_runtime_1.jsx)(StyledTag,{className:"tag-grey",children:e}),value:(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:(null==r?void 0:r.scopes[e])||""})},e)))})]}):null}const StyledTag=(0,styled_components_1.default)(styled_1.Tag)`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  align-self: flex-start;
+  padding: 0 var(--spacing-xs);
+  border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
+  border-radius: var(--tag-border-radius);
+`,ScopeHeader=styled_components_1.default.div`
+  cursor: pointer;
+  display: flex;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  user-select: none;
+`,Row=styled_components_1.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+  word-break: normal;
+`,ScopesListWrapper=styled_components_1.default.div`
+  max-height: ${e=>e.isOpen?"1000px":"0"};
+  opacity: ${e=>e.isOpen?"1":"0"};
+  overflow: hidden;
+  transition:
+    max-height 0.5s ease-in-out,
+    opacity 0.5s ease-in-out;
+`,AnimatedChevronWrapper=styled_components_1.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
+  transition: transform 0.5s ease-in-out;
+`;exports.OAuthOptionalScopes=(0,react_1.memo)(OAuthOptionalScopesComponent),exports.OAuthRequiredScopes=(0,react_1.memo)(OAuthRequiredScopesComponent);
+//# sourceMappingURL=OAuthScopes.js.map

package/lib/components/Security/SecurityButton.js

@@ -1,28 +1,31 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecurityButton=SecurityButton;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");function SecurityButton({securities:e,onClick:t}){return(0,jsx_runtime_1.jsxs)(StyledButton,{onClick:t,children:[(0,jsx_runtime_1.jsx)(theme_1.SecurityIcon,{}),(0,jsx_runtime_1.jsx)(Title,{children:"Security:"}),(0,jsx_runtime_1.jsx)(SecurityList,{children:e.map((t=>{const n=e.length>1&&t.schemes.length>1;return`\n          ${n?"(":""}\n          ${t.schemes.map((({id:e})=>e)).join(" and ")}\n          ${n?")":""}\n          `})).join(" or ")})]})}const StyledButton=styled_components_1.default.button`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecurityButton=SecurityButton;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),react_1=require("react"),hooks_1=require("../../hooks");function SecurityButton({securities:e,onClick:t}){const r=(0,hooks_1.useTranslate)();return(0,jsx_runtime_1.jsx)(SecurityPanel,{header:()=>(0,jsx_runtime_1.jsxs)(SecurityHeader,{children:[(0,jsx_runtime_1.jsx)(theme_1.SecurityIcon,{}),(0,jsx_runtime_1.jsx)(Title,{children:"Security"}),(0,jsx_runtime_1.jsx)(ViewDetailsButton,{onClick:t,variant:"link",children:r("openapi.viewDetails","View details")})]}),isExpandable:!1,children:(0,jsx_runtime_1.jsx)(SecurityList,{children:e.map(((t,r)=>{const n=e.length>1&&t.schemes.length>1,i=t.schemes.map((({id:e},r)=>(0,jsx_runtime_1.jsxs)(react_1.Fragment,{children:[e,r<t.schemes.length-1&&(0,jsx_runtime_1.jsx)(Conjunction,{children:" and "})]},e)));return(0,jsx_runtime_1.jsxs)(react_1.Fragment,{children:[n?"(":"",i,n?")":"",r<e.length-1&&(0,jsx_runtime_1.jsx)(Conjunction,{children:" or "})]},r)}))})})}const SecurityPanel=(0,styled_components_1.default)(theme_1.Panel)`
+  margin-top: var(--spacing-base);
+  border: var(--panel-border);
+  border-radius: var(--panel-border-radius);
+`,SecurityHeader=styled_components_1.default.div`
   display: flex;
   align-items: center;
-  align-self: flex-start;
-  gap: var(--spacing-xxs);
-  min-height: 32px;
-  background: var(--color-info-bg);
-  padding: 0 var(--spacing-xs);
-  margin-top: var(--spacing-base);
+  justify-content: space-between;
+  gap: var(--spacing-xs);
   color: var(--link-color-primary);
-  border: none;
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-  border-radius: var(--border-radius-md);
-  max-width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background-color: var(--layer-color);
+  border-bottom: var(--panel-border);
+  border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
+`,ViewDetailsButton=(0,styled_components_1.default)(theme_1.Button)`
+  margin-left: auto;
+  font-size: var(--font-size-sm);
 `,Title=styled_components_1.default.span`
-  font-family: var(--font-family-monospaced);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: -0.5px;
-`,SecurityList=styled_components_1.default.span`
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-color-primary);
+`,SecurityList=styled_components_1.default.div`
   flex: 1;
-  cursor: pointer;
-  white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--text-color-primary);
+`,Conjunction=styled_components_1.default.span`
+  color: var(--text-color-description);
 `;
 //# sourceMappingURL=SecurityButton.js.map

package/lib/components/Security/SecurityFlow.js

@@ -1,4 +1,4 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecurityFlow=SecurityFlow;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),SecuritySchemeItem_1=require("./SecuritySchemeItem"),utils_1=require("../../utils"),OAuthFlow_1=require("./OAuthFlow"),styled_1=require("./styled"),Markdown_1=require("../Markdown"),helper_1=require("./helper"),hooks_1=require("../../hooks");function SecurityFlow({type:e,bearerFormat:r,name:t,flows:i,openIdConnectUrl:s,description:n,id:a,securities:o,in:u}){const l=(0,hooks_1.useTranslate)();if(!e||!a)return null;const c=(0,helper_1.getRequiredScopes)(a,o),m={http:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:l("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:e}),(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:l("openapi.bearerFormat","Bearer Format"),value:r})]}),apiKey:(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${(0,utils_1.titleize)(u||"")} ${l("openapi.parameterName","parameter name")}:`,value:t}),oauth2:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:l("openapi.flowType","Flow type"),value:e}),i&&Object.keys(i).map((e=>(0,jsx_runtime_1.jsx)(OAuthFlow_1.OAuthFlow,{flow:i[e]},e)))]}),openIdConnect:(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:l("openapi.connectUrl","Connect URL"),value:s&&(0,jsx_runtime_1.jsx)(styled_1.StyledLink,{target:"_blank",rel:"noopener noreferrer",href:s,children:s})})};return(0,jsx_runtime_1.jsxs)(Wrapper,{children:[(0,jsx_runtime_1.jsx)(TitleSchema,{children:a}),(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:n}),(0,jsx_runtime_1.jsxs)(List,{children:[m[e]||null,(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:l("openapi.requiredScopes","Required scopes"),value:c.length&&(0,jsx_runtime_1.jsx)(Row,{children:c.map((e=>(0,jsx_runtime_1.jsx)(styled_1.Tag,{className:"tag-grey",children:e},e)))})})]})]})}const Wrapper=styled_components_1.default.div`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecurityFlow=SecurityFlow;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),SecuritySchemeItem_1=require("./SecuritySchemeItem"),utils_1=require("../../utils"),OAuthFlow_1=require("./OAuthFlow"),styled_1=require("./styled"),Markdown_1=require("../Markdown"),hooks_1=require("../../hooks"),OAuthScopes_1=require("./OAuthScopes");function SecurityFlow({type:e,bearerFormat:t,name:r,flows:i,openIdConnectUrl:s,description:n,id:o,securities:u,in:a}){const c=(0,hooks_1.useTranslate)();if(!e||!o)return null;const l={http:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:c("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:e}),(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:c("openapi.bearerFormat","Bearer Format"),value:t})]}),apiKey:(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:`${(0,utils_1.titleize)(a||"")} ${c("openapi.parameterName","parameter name")}:`,value:r}),oauth2:(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:c("openapi.flowType","Flow type"),value:e}),i&&Object.keys(i).map((e=>(0,jsx_runtime_1.jsx)(OAuthFlow_1.OAuthFlow,{flow:i[e]},e)))]}),openIdConnect:(0,jsx_runtime_1.jsx)(SecuritySchemeItem_1.SecuritySchemeItem,{label:c("openapi.connectUrl","Connect URL"),value:s&&(0,jsx_runtime_1.jsx)(styled_1.StyledLink,{target:"_blank",rel:"noopener noreferrer",href:s,children:s})})},m=i&&Object.keys(i).map((e=>(0,jsx_runtime_1.jsx)(OAuthScopes_1.OAuthRequiredScopes,{id:o,securities:u,flow:i[e]},e))),_=i&&Object.keys(i).map((e=>(0,jsx_runtime_1.jsx)(OAuthScopes_1.OAuthOptionalScopes,{flow:i[e]},e)));return(0,jsx_runtime_1.jsxs)(Wrapper,{children:[(0,jsx_runtime_1.jsx)(TitleSchema,{children:o}),(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:n}),(0,jsx_runtime_1.jsxs)(List,{children:[l[e]||null,m,_]})]})}const Wrapper=styled_components_1.default.div`
   background: var(--layer-color);
   padding: var(--spacing-base);
   border-radius: var(--border-radius);
@@ -8,11 +8,6 @@
 `,List=styled_components_1.default.div`
   width: 100%;
   margin-top: var(--spacing-md);
-`,Row=styled_components_1.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-  word-break: normal;
 `,TitleSchema=styled_components_1.default.p`
   font-size: var(--font-size-base);
   margin: 0 0 var(--spacing-xs);

package/lib/components/Security/SecuritySchemeItem.js

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-bottom: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xs);
   font-size: var(--font-size-sm);
   color: var(--text-color-secondary);
 `,Label=styled_components_1.default.div`

package/lib-esm/components/Security/OAuthFlow.js

@@ -1,4 +1,2 @@
-import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{Markdown}from"../Markdown";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{StyledLink,Tag}from"./styled";import{useTranslate}from"../../hooks";function OAuthFlowComponent({flow:e}){const r=Object.keys((null==e?void 0:e.scopes)||{}),o=useTranslate();return _jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:`${o("openapi.authorizationUrl","Authorization URL")}:`,value:(null==e?void 0:e.authorizationUrl)&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:null==e?void 0:e.authorizationUrl,children:null==e?void 0:e.authorizationUrl})}),_jsx(SecuritySchemeItem,{label:`${o("openapi.tokenUrl","Token URL")}:`,value:null==e?void 0:e.tokenUrl}),_jsx(SecuritySchemeItem,{label:`${o("openapi.refreshUrl","Refresh URL")}:`,value:null==e?void 0:e.refreshUrl}),r.length&&_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:`${o("openapi.scopes","Scopes")}:`,value:" "}),r.map((r=>_jsx(SecuritySchemeItem,{label:_jsx(StyledTag,{className:"tag-grey",children:r}),value:_jsx(Markdown,{source:(null==e?void 0:e.scopes[r])||""})},r)))]})||null]})}const StyledTag=styled(Tag)`
-  margin-left: var(--spacing-xs);
-`;export const OAuthFlow=memo(OAuthFlowComponent);
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{StyledLink}from"./styled";import{useTranslate}from"../../hooks";function OAuthFlowComponent({flow:e}){const r=useTranslate();return _jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:`${r("openapi.authorizationUrl","Authorization URL")}:`,value:(null==e?void 0:e.authorizationUrl)&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:null==e?void 0:e.authorizationUrl,children:null==e?void 0:e.authorizationUrl})}),_jsx(SecuritySchemeItem,{label:`${r("openapi.tokenUrl","Token URL")}:`,value:null==e?void 0:e.tokenUrl}),_jsx(SecuritySchemeItem,{label:`${r("openapi.refreshUrl","Refresh URL")}:`,value:null==e?void 0:e.refreshUrl})]})}export const OAuthFlow=memo(OAuthFlowComponent);
 //# sourceMappingURL=OAuthFlow.js.map

package/lib-esm/components/Security/OAuthScopes.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+import type { OpenAPISecurityScheme } from '../../types';
+import type { SecurityRequirement } from '../../models';
+export interface OAuthOptionalScopesProps {
+    flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
+}
+export interface OAuthRequiredScopesProps {
+    id: string;
+    securities: SecurityRequirement[];
+    flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
+}
+export declare const OAuthOptionalScopes: import("react").NamedExoticComponent<PropsWithChildren<OAuthOptionalScopesProps>>;
+export declare const OAuthRequiredScopes: import("react").NamedExoticComponent<PropsWithChildren<OAuthRequiredScopesProps>>;

package/lib-esm/components/Security/OAuthScopes.js

@@ -0,0 +1,34 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useState}from"react";import styled from"styled-components";import{ChevronRightIcon}from"@redocly/theme";import{Markdown}from"../Markdown";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{Tag}from"./styled";import{useTranslate}from"../../hooks";import{getRequiredScopes}from"./helper";function OAuthOptionalScopesComponent({flow:e}){const t=Object.keys((null==e?void 0:e.scopes)||{}),o=useTranslate(),[r,s]=useState(!1);if(!t.length)return null;return _jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:_jsxs(ScopeHeader,{onClick:()=>{s((e=>!e))},children:[o(r?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",r?"Hide optional scopes":"Show optional scopes"),_jsx(AnimatedChevronWrapper,{isOpen:r,children:_jsx(ChevronRightIcon,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),_jsx(ScopesListWrapper,{isOpen:r,children:t.map((t=>_jsx(SecuritySchemeItem,{label:_jsx(StyledTag,{className:"tag-grey",children:t}),value:_jsx(Markdown,{source:(null==e?void 0:e.scopes[t])||""})},t)))})]})}function OAuthRequiredScopesComponent({id:e,securities:t,flow:o}){const r=getRequiredScopes(e,t),s=useTranslate();return r.length?_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:s("openapi.requiredScopes","Required scopes"),value:" "}),_jsx(Row,{children:r.map((e=>_jsx(SecuritySchemeItem,{label:_jsx(StyledTag,{className:"tag-grey",children:e}),value:_jsx(Markdown,{source:(null==o?void 0:o.scopes[e])||""})},e)))})]}):null}const StyledTag=styled(Tag)`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  align-self: flex-start;
+  padding: 0 var(--spacing-xs);
+  border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
+  border-radius: var(--tag-border-radius);
+`,ScopeHeader=styled.div`
+  cursor: pointer;
+  display: flex;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  user-select: none;
+`,Row=styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+  word-break: normal;
+`,ScopesListWrapper=styled.div`
+  max-height: ${e=>e.isOpen?"1000px":"0"};
+  opacity: ${e=>e.isOpen?"1":"0"};
+  overflow: hidden;
+  transition:
+    max-height 0.5s ease-in-out,
+    opacity 0.5s ease-in-out;
+`,AnimatedChevronWrapper=styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
+  transition: transform 0.5s ease-in-out;
+`;export const OAuthOptionalScopes=memo(OAuthOptionalScopesComponent);export const OAuthRequiredScopes=memo(OAuthRequiredScopesComponent);
+//# sourceMappingURL=OAuthScopes.js.map

package/lib-esm/components/Security/SecurityButton.js

@@ -1,28 +1,31 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecurityIcon}from"@redocly/theme";export function SecurityButton({securities:e,onClick:t}){return _jsxs(StyledButton,{onClick:t,children:[_jsx(SecurityIcon,{}),_jsx(Title,{children:"Security:"}),_jsx(SecurityList,{children:e.map((t=>{const i=e.length>1&&t.schemes.length>1;return`\n          ${i?"(":""}\n          ${t.schemes.map((({id:e})=>e)).join(" and ")}\n          ${i?")":""}\n          `})).join(" or ")})]})}const StyledButton=styled.button`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecurityIcon,Panel,Button}from"@redocly/theme";import{Fragment}from"react";import{useTranslate}from"../../hooks";export function SecurityButton({securities:e,onClick:r}){const t=useTranslate();return _jsx(SecurityPanel,{header:()=>_jsxs(SecurityHeader,{children:[_jsx(SecurityIcon,{}),_jsx(Title,{children:"Security"}),_jsx(ViewDetailsButton,{onClick:r,variant:"link",children:t("openapi.viewDetails","View details")})]}),isExpandable:!1,children:_jsx(SecurityList,{children:e.map(((r,t)=>{const i=e.length>1&&r.schemes.length>1,n=r.schemes.map((({id:e},t)=>_jsxs(Fragment,{children:[e,t<r.schemes.length-1&&_jsx(Conjunction,{children:" and "})]},e)));return _jsxs(Fragment,{children:[i?"(":"",n,i?")":"",t<e.length-1&&_jsx(Conjunction,{children:" or "})]},t)}))})})}const SecurityPanel=styled(Panel)`
+  margin-top: var(--spacing-base);
+  border: var(--panel-border);
+  border-radius: var(--panel-border-radius);
+`,SecurityHeader=styled.div`
   display: flex;
   align-items: center;
-  align-self: flex-start;
-  gap: var(--spacing-xxs);
-  min-height: 32px;
-  background: var(--color-info-bg);
-  padding: 0 var(--spacing-xs);
-  margin-top: var(--spacing-base);
+  justify-content: space-between;
+  gap: var(--spacing-xs);
   color: var(--link-color-primary);
-  border: none;
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-  border-radius: var(--border-radius-md);
-  max-width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background-color: var(--layer-color);
+  border-bottom: var(--panel-border);
+  border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
+`,ViewDetailsButton=styled(Button)`
+  margin-left: auto;
+  font-size: var(--font-size-sm);
 `,Title=styled.span`
-  font-family: var(--font-family-monospaced);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: -0.5px;
-`,SecurityList=styled.span`
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-color-primary);
+`,SecurityList=styled.div`
   flex: 1;
-  cursor: pointer;
-  white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--text-color-primary);
+`,Conjunction=styled.span`
+  color: var(--text-color-description);
 `;
 //# sourceMappingURL=SecurityButton.js.map

package/lib-esm/components/Security/SecurityFlow.js

@@ -1,4 +1,4 @@
-import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{titleize}from"../../utils";import{OAuthFlow}from"./OAuthFlow";import{StyledLink,Tag}from"./styled";import{Markdown}from"../Markdown";import{getRequiredScopes}from"./helper";import{useTranslate}from"../../hooks";export function SecurityFlow({type:e,bearerFormat:r,name:t,flows:a,openIdConnectUrl:o,description:i,id:s,securities:n,in:l}){const m=useTranslate();if(!e||!s)return null;const p=getRequiredScopes(s,n),c={http:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:e}),_jsx(SecuritySchemeItem,{label:m("openapi.bearerFormat","Bearer Format"),value:r})]}),apiKey:_jsx(SecuritySchemeItem,{label:`${titleize(l||"")} ${m("openapi.parameterName","parameter name")}:`,value:t}),oauth2:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.flowType","Flow type"),value:e}),a&&Object.keys(a).map((e=>_jsx(OAuthFlow,{flow:a[e]},e)))]}),openIdConnect:_jsx(SecuritySchemeItem,{label:m("openapi.connectUrl","Connect URL"),value:o&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:o,children:o})})};return _jsxs(Wrapper,{children:[_jsx(TitleSchema,{children:s}),_jsx(Markdown,{source:i}),_jsxs(List,{children:[c[e]||null,_jsx(SecuritySchemeItem,{label:m("openapi.requiredScopes","Required scopes"),value:p.length&&_jsx(Row,{children:p.map((e=>_jsx(Tag,{className:"tag-grey",children:e},e)))})})]})]})}const Wrapper=styled.div`
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{titleize}from"../../utils";import{OAuthFlow}from"./OAuthFlow";import{StyledLink}from"./styled";import{Markdown}from"../Markdown";import{useTranslate}from"../../hooks";import{OAuthRequiredScopes,OAuthOptionalScopes}from"./OAuthScopes";export function SecurityFlow({type:e,bearerFormat:r,name:t,flows:o,openIdConnectUrl:a,description:i,id:s,securities:n,in:l}){const m=useTranslate();if(!e||!s)return null;const c={http:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:e}),_jsx(SecuritySchemeItem,{label:m("openapi.bearerFormat","Bearer Format"),value:r})]}),apiKey:_jsx(SecuritySchemeItem,{label:`${titleize(l||"")} ${m("openapi.parameterName","parameter name")}:`,value:t}),oauth2:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.flowType","Flow type"),value:e}),o&&Object.keys(o).map((e=>_jsx(OAuthFlow,{flow:o[e]},e)))]}),openIdConnect:_jsx(SecuritySchemeItem,{label:m("openapi.connectUrl","Connect URL"),value:a&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:a,children:a})})},p=o&&Object.keys(o).map((e=>_jsx(OAuthRequiredScopes,{id:s,securities:n,flow:o[e]},e))),d=o&&Object.keys(o).map((e=>_jsx(OAuthOptionalScopes,{flow:o[e]},e)));return _jsxs(Wrapper,{children:[_jsx(TitleSchema,{children:s}),_jsx(Markdown,{source:i}),_jsxs(List,{children:[c[e]||null,p,d]})]})}const Wrapper=styled.div`
   background: var(--layer-color);
   padding: var(--spacing-base);
   border-radius: var(--border-radius);
@@ -8,11 +8,6 @@ import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";i
 `,List=styled.div`
   width: 100%;
   margin-top: var(--spacing-md);
-`,Row=styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-  word-break: normal;
 `,TitleSchema=styled.p`
   font-size: var(--font-size-base);
   margin: 0 0 var(--spacing-xs);

package/lib-esm/components/Security/SecuritySchemeItem.js

@@ -2,7 +2,7 @@ import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styl
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-bottom: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xs);
   font-size: var(--font-size-sm);
   color: var(--text-color-secondary);
 `,Label=styled.div`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.10.0-next.7",
+  "version": "3.10.0-next.8",
   "description": "Redocly OpenAPI Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -46,7 +46,7 @@
     "util": "~0.12.5",
     "web-vitals": "3.3.1",
     "@redocly/config": "0.25.0",
-    "@redocly/replay": "0.13.0-next.6"
+    "@redocly/replay": "0.13.0-next.7"
   },
   "devDependencies": {
     "@shikijs/transformers": "1.24.0",
@@ -92,7 +92,7 @@
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
-    "@redocly/theme": "0.54.0-next.6"
+    "@redocly/theme": "0.54.0-next.7"
   },
   "scripts": {
     "start": "npm run copy-highlight-hook && webpack serve --mode=development --hot",