@redocly/openapi-docs 3.11.0 → 3.12.0-next.0

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

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

package/lib/components/Security/OAuthScopes.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as c,Fragment as d}from"react/jsx-runtime";import{memo as m,useState as f}from"react";import{ChevronRightIcon as v}from"@redocly/theme";import{Markdown as g}from"../Markdown/index.js";import{SecuritySchemeItem as i}from"./SecuritySchemeItem.js";import{Tag as S}from"./styled.js";import{useTranslate as u}from"../../hooks/index.js";import{getRequiredScopes as x}from"./helper.js";import{styled as s}from"../../styled-components.js";function b({flow:o}){const a=Object.keys(o?.scopes||{}),p=u(),[t,l]=f(!1);return a.length?c(d,{children:[e(i,{label:c(O,{onClick:()=>{l(r=>!r)},children:[p(t?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",t?"Hide optional scopes":"Show optional scopes"),e(q,{isOpen:t,children:e(v,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),e(j,{isOpen:t,children:a.map(r=>e(i,{label:e(h,{className:"tag-grey",children:r}),value:e(g,{source:o?.scopes[r]||""})},r))})]}):null}function y({id:o,securities:a,flow:p}){const t=x(o,a),l=u();return t.length?c(d,{children:[e(i,{label:l("openapi.requiredScopes","Required scopes"),value:" "}),e(w,{children:t.map(n=>e(i,{label:e(h,{className:"tag-grey",children:n}),value:e(g,{source:p?.scopes[n]||""})},n))})]}):null}const h=s(S)`
+import{jsx as r,Fragment as p,jsxs as c}from"react/jsx-runtime";import{memo as S,useState as v}from"react";import{ChevronRightIcon as b}from"@redocly/theme";import{Markdown as d}from"../Markdown/index.js";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{Tag as m}from"./styled.js";import{useTranslate as l}from"../../hooks/index.js";import{getOptionalScopes as O,getRequiredScopes as x}from"./helper.js";import{styled as i}from"../../styled-components.js";function y({id:e,securities:t,flows:n}){const o=x(e,t);return c(p,{children:[r(w,{flows:n,requiredScopes:o}),r(q,{flows:n,requiredScopes:o})]})}function q({flows:e,requiredScopes:t}){return e&&Object.keys(e).map(n=>r(j,{flow:e[n],requiredScopes:t},n))}function j({flow:e,requiredScopes:t}){const n=l(),[o,h]=v(!1),f=Object.keys(e?.scopes||{}),u=O(t,f);return u.length===0?null:c(p,{children:[r(a,{label:c(A,{onClick:()=>{h(s=>!s)},children:[n(o?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",o?"Hide optional scopes":"Show optional scopes"),r(C,{isOpen:o,children:r(b,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),r(z,{isOpen:o,children:u.map(s=>r(a,{label:r(g,{className:"tag-grey",children:s}),value:r(d,{source:e?.scopes[s]||""})},s))})]})}function w({requiredScopes:e,flows:t}){const n=l();return e.length===0?null:t&&Object.keys(t).length>0?Object.keys(t).map(o=>r(k,{flow:t[o],requiredScopes:e},o)):r(a,{label:n("openapi.requiredScopes","Required scopes"),value:r(R,{children:e.map(o=>r(m,{className:"tag-grey",children:o},o))})})}function k({flow:e,requiredScopes:t}){const n=l();return c(p,{children:[r(a,{label:n("openapi.requiredScopes","Required scopes"),value:" "}),t.map(o=>r(a,{label:r(g,{className:"tag-grey",children:o}),value:r(d,{source:e?.scopes[o]||""})},o))]})}const g=i(m)`
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
@@ -6,28 +6,28 @@ import{jsx as e,jsxs as c,Fragment as d}from"react/jsx-runtime";import{memo as m
   padding: 0 var(--spacing-xs);
   border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
   border-radius: var(--tag-border-radius);
-`,O=s.div`
+`,A=i.div`
   cursor: pointer;
   display: flex;
   gap: var(--spacing-xxs);
   align-items: center;
   user-select: none;
-`,w=s.div`
+`,R=i.div`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-xxs);
   word-break: normal;
-`,j=s.div`
-  max-height: ${o=>o.isOpen?"1000px":"0"};
-  opacity: ${o=>o.isOpen?"1":"0"};
+`,z=i.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;
-`,q=s.span`
+`,C=i.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transform: ${o=>o.isOpen?"rotate(90deg)":"rotate(0deg)"};
+  transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
   transition: transform 0.5s ease-in-out;
-`,F=m(b),H=m(y);export{F as OAuthOptionalScopes,H as OAuthRequiredScopes};
+`,B=S(y);export{B as OAuthScopes};

package/lib/components/Security/SecurityFlow.js

@@ -1,16 +1,16 @@
-import{jsx as e,Fragment as s,jsxs as n}from"react/jsx-runtime";import{SecuritySchemeItem as t}from"./SecuritySchemeItem.js";import{titleize as S}from"../../utils/index.js";import{OAuthFlow as x}from"./OAuthFlow.js";import{StyledLink as j}from"./styled.js";import{Markdown as k}from"../Markdown/index.js";import{useTranslate as y}from"../../hooks/index.js";import{OAuthRequiredScopes as F,OAuthOptionalScopes as O}from"./OAuthScopes.js";import{styled as m}from"../../styled-components.js";function M({type:i,bearerFormat:l,name:d,flows:r,openIdConnectUrl:p,description:u,id:c,securities:h,in:b}){const o=y();if(!i||!c)return null;const v={http:n(s,{children:[e(t,{label:o("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:i}),e(t,{label:o("openapi.bearerFormat","Bearer Format"),value:l})]}),apiKey:e(t,{label:`${S(b||"")} ${o("openapi.parameterName","parameter name")}:`,value:d}),oauth2:n(s,{children:[e(t,{label:o("openapi.flowType","Flow type"),value:i}),r&&Object.keys(r).map(a=>e(x,{flow:r[a]},a))]}),openIdConnect:e(t,{label:o("openapi.connectUrl","Connect URL"),value:p&&e(j,{target:"_blank",rel:"noopener noreferrer",href:p,children:p})})},f=r&&Object.keys(r).map(a=>e(F,{id:c,securities:h,flow:r[a]},a)),g=r&&Object.keys(r).map(a=>e(O,{flow:r[a]},a));return n(z,{children:[e(A,{children:c}),e(k,{source:u}),n(T,{children:[v[i]||null,f,g]})]})}const z=m.div`
+import{jsx as r,Fragment as p,jsxs as i}from"react/jsx-runtime";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{titleize as v}from"../../utils/index.js";import{OAuthFlow as g}from"./OAuthFlow.js";import{StyledLink as w}from"./styled.js";import{Markdown as x}from"../Markdown/index.js";import{useTranslate as S}from"../../hooks/index.js";import{OAuthScopes as y}from"./OAuthScopes.js";import{styled as m}from"../../styled-components.js";function K({type:o,bearerFormat:c,name:d,flows:t,openIdConnectUrl:n,description:h,id:l,securities:u,in:f}){const e=S();if(!o||!l)return null;const b={http:i(p,{children:[r(a,{label:e("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:o}),r(a,{label:e("openapi.bearerFormat","Bearer Format"),value:c})]}),apiKey:r(a,{label:`${v(f||"")} ${e("openapi.parameterName","parameter name")}:`,value:d}),oauth2:i(p,{children:[r(a,{label:e("openapi.flowType","Flow type"),value:o}),t&&Object.keys(t).map(s=>r(g,{flow:t[s]},s))]}),openIdConnect:r(a,{label:e("openapi.connectUrl","Connect URL"),value:n&&r(w,{target:"_blank",rel:"noopener noreferrer",href:n,children:n})})};return i(F,{children:[r(T,{children:l}),r(x,{source:h}),i(z,{children:[b[o]||null,r(y,{id:l,securities:u,flows:t})]})]})}const F=m.div`
   background: var(--layer-color);
   padding: var(--spacing-base);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color-secondary);
   width: 100%;
   margin-top: var(--spacing-base);
-`,T=m.div`
+`,z=m.div`
   width: 100%;
   margin-top: var(--spacing-md);
-`,A=m.p`
+`,T=m.p`
   font-size: var(--font-size-base);
   margin: 0 0 var(--spacing-xs);
   text-transform: capitalize;
   font-weight: var(--font-weight-semibold);
-`;export{M as SecurityFlow};
+`;export{K as SecurityFlow};

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

@@ -1,2 +1,3 @@
 import type { SecurityRequirement } from '../../models/index.js';
 export declare function getRequiredScopes(id: string, securities: SecurityRequirement[]): string[];
+export declare function getOptionalScopes(requiredScopes: string[], allScopes: string[]): string[];

package/lib/components/Security/helper.js

@@ -1 +1 @@
-function n(e,o){const r=new Set;return o.forEach(({schemes:c})=>{c.forEach(({id:a,scopes:f})=>{a===e&&f.forEach(t=>r.add(t))})}),Array.from(r)}export{n as getRequiredScopes};
+function f(r,o){const e=new Set;return o.forEach(({schemes:t})=>{t.forEach(({id:c,scopes:n})=>{c===r&&n.forEach(a=>e.add(a))})}),Array.from(e)}function i(r,o){const e=new Set(r);return o.filter(t=>!e.has(t))}export{i as getOptionalScopes,f as getRequiredScopes};

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

@@ -3,7 +3,7 @@ export { SecurityButton } from './SecurityButton.js';
 export { SecurityFlow } from './SecurityFlow.js';
 export { SecuritySchemeItem } from './SecuritySchemeItem.js';
 export { OAuthFlow } from './OAuthFlow.js';
-export { OAuthOptionalScopes, OAuthRequiredScopes } from './OAuthScopes.js';
+export { OAuthScopes } from './OAuthScopes.js';
 export { SecurityModal } from './SecurityModal.js';
 export { Divider } from './Divider.js';
 export * from './helper.js';

package/lib/components/Security/index.js

@@ -1 +1 @@
-import{Security as e}from"./Security.js";import{SecurityButton as p}from"./SecurityButton.js";import{SecurityFlow as f}from"./SecurityFlow.js";import{SecuritySchemeItem as x}from"./SecuritySchemeItem.js";import{OAuthFlow as c}from"./OAuthFlow.js";import{OAuthOptionalScopes as y,OAuthRequiredScopes as h}from"./OAuthScopes.js";import{SecurityModal as O}from"./SecurityModal.js";import{Divider as A}from"./Divider.js";export*from"./helper.js";export*from"./styled.js";export{A as Divider,c as OAuthFlow,y as OAuthOptionalScopes,h as OAuthRequiredScopes,e as Security,p as SecurityButton,f as SecurityFlow,O as SecurityModal,x as SecuritySchemeItem};
+import{Security as e}from"./Security.js";import{SecurityButton as m}from"./SecurityButton.js";import{SecurityFlow as f}from"./SecurityFlow.js";import{SecuritySchemeItem as u}from"./SecuritySchemeItem.js";import{OAuthFlow as i}from"./OAuthFlow.js";import{OAuthScopes as y}from"./OAuthScopes.js";import{SecurityModal as l}from"./SecurityModal.js";import{Divider as w}from"./Divider.js";export*from"./helper.js";export*from"./styled.js";export{w as Divider,i as OAuthFlow,y as OAuthScopes,e as Security,m as SecurityButton,f as SecurityFlow,l as SecurityModal,u as SecuritySchemeItem};

package/lib/components/common/Select/styled.d.ts

@@ -1,4 +1,3 @@
 export declare const Select: any;
 export declare const SimpleSelect: any;
-export declare const CollapsingSelect: any;
 export declare const Arrow: any;

package/lib/components/common/Select/styled.js

@@ -1,4 +1,4 @@
-import{css as t}from"styled-components";import{ChevronDownIcon as a}from"@redocly/theme";import{Select as i}from"./Select.js";import{styled as r}from"../../../styled-components.js";const e=t`
+import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocly/theme";import{Select as i}from"./Select.js";import{styled as e}from"../../../styled-components.js";const r=n`
   background-color: var(--panel-samples-dropdown-bg-color);
   border: var(--panel-samples-dropdown-border);
   color: var(--panel-samples-dropdown-color);
@@ -8,7 +8,7 @@ import{css as t}from"styled-components";import{ChevronDownIcon as a}from"@redocl
   &:focus-within {
     box-shadow: none;
   }
-`,n=r(i)`
+`,a=e(i)`
   box-sizing: border-box;
   outline: none;
   display: inline-block;
@@ -43,7 +43,7 @@ import{css as t}from"styled-components";import{ChevronDownIcon as a}from"@redocl
       box-shadow: none;
     }
 
-    ${({variant:o})=>o==="dark"?e:""};
+    ${({variant:o})=>o==="dark"?r:""};
   }
 
   .dropdown-select {
@@ -62,9 +62,9 @@ import{css as t}from"styled-components";import{ChevronDownIcon as a}from"@redocl
     font-size: var(--font-size-base);
     font-family: inherit;
     padding: var(--docs-dropdown-padding);
-    ${({variant:o})=>o==="dark"?e:""};
+    ${({variant:o})=>o==="dark"?r:""};
   }
-`,c=r(n)`
+`,c=e(a)`
   svg {
     top: 60%;
     transform: translateY(-60%);
@@ -82,29 +82,8 @@ import{css as t}from"styled-components";import{ChevronDownIcon as a}from"@redocl
       box-shadow: none;
     }
   }
-`,b=r(n)`
-  svg {
-    top: 60%;
-    transform: translateY(-60%);
-  }
-  label {
-    ${e};
-
-    border-radius: var(--border-radius-lg);
-    margin-left: 5px;
-    transition: none;
-    min-width: auto;
-    background-color: ${({active:o})=>o?"var(--panel-samples-tabs-bg-color-active)":"var(--bg-color-raised)"};
-    & {
-      &[open],
-      &:focus-within,
-      &:hover {
-        background-color: var(--bg-color-tonal);
-      }
-    }
-  }
-`,h=r(a)`
+`,h=e(t)`
   position: absolute;
   right: 10px;
   top: 10px;
-`;export{h as Arrow,b as CollapsingSelect,n as Select,c as SimpleSelect};
+`;export{h as Arrow,a as Select,c as SimpleSelect};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.11.0",
+  "version": "3.12.0-next.0",
   "description": "Redocly OpenAPI Docs",
   "type": "module",
   "main": "lib/index.js",
@@ -14,7 +14,7 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
-    "@redocly/theme": ">=0.55.0-next.0",
+    "@redocly/theme": ">=0.56.0-next.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
@@ -36,8 +36,8 @@
     "url-template": "^2.0.8",
     "util": "~0.12.5",
     "web-vitals": "3.3.1",
-    "@redocly/replay": "0.14.0",
-    "@redocly/config": "0.26.2"
+    "@redocly/config": "0.26.2",
+    "@redocly/replay": "0.15.0-next.0"
   },
   "devDependencies": {
     "@jest/globals": "29.5.0",
@@ -74,7 +74,7 @@
     "typescript": "5.6.2",
     "url": "~0.11.0",
     "vite": "^6.3.5",
-    "@redocly/theme": "0.55.0"
+    "@redocly/theme": "0.56.0-next.0"
   },
   "scripts": {
     "start": "npm run copy-highlight-hook && vite",