@redocly/openapi-docs 3.0.0-alpha.13 → 3.0.0-alpha.14.beta.2

package/lib/components/common/Dropdown/Dropdown.js

@@ -12,5 +12,5 @@
   polyline {
     color: ${e=>"dark"===e.variant&&"white"};
   }
-`,DropdownComponent=({options:e,onChange:t,handleClear:r,clearable:a,placeholder:n,value:o="",className:l,variant:i="light"})=>react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:i}),a&&(null==o?void 0:o.length)>0&&react_1.default.createElement(ClearButton_1.ClearButton,{handleClear:r}),react_1.default.createElement("select",{onChange:r=>{const{selectedIndex:a}=r.target;t(e[n||!o?a-1:a])},value:o,className:"dropdown-select"},n&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:n},n),!o&&!n&&react_1.default.createElement("option",{disabled:!0}),e.map((({idx:e,value:t,title:r},a)=>react_1.default.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},r||t)))),react_1.default.createElement("label",null,o));exports.Dropdown=(0,react_1.memo)(DropdownComponent);
+`,DropdownComponent=({options:e,onChange:t,handleClear:r,clearable:a,placeholder:n,value:o="",className:l,variant:i="light"})=>{var c;const s=(null===(c=e.find((e=>e.value===o)))||void 0===c?void 0:c.title)||o;return react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:i}),a&&(null==o?void 0:o.length)>0&&react_1.default.createElement(ClearButton_1.ClearButton,{handleClear:r}),react_1.default.createElement("select",{onChange:r=>{const{selectedIndex:a}=r.target;t(e[n||!o?a-1:a])},value:o,className:"dropdown-select"},n&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:n},n),!o&&!n&&react_1.default.createElement("option",{disabled:!0}),e.map((({idx:e,value:t,title:r},a)=>react_1.default.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},r||t)))),react_1.default.createElement("label",null,s))};exports.Dropdown=(0,react_1.memo)(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

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

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,e,r,t){void 0===t&&(t=r);var n=Object.getOwnPropertyDescriptor(e,r);n&&!("get"in n?!e.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(o,t,n)}:function(o,e,r,t){void 0===t&&(t=r),o[t]=e[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,e){Object.defineProperty(o,"default",{enumerable:!0,value:e})}:function(o,e){o.default=e}),__importStar=this&&this.__importStar||function(o){if(o&&o.__esModule)return o;var e={};if(null!=o)for(var r in o)"default"!==r&&Object.prototype.hasOwnProperty.call(o,r)&&__createBinding(e,o,r);return __setModuleDefault(e,o),e};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SchemaMimeTypeDropdown=exports.SchemaDiscriminatorDropdown=exports.VersionDropdown=exports.CollapsingDropdown=exports.SimpleDropdown=exports.Dropdown=void 0;const styled_components_1=__importStar(require("styled-components")),Dropdown_1=require("./Dropdown"),samplesDropdownStyle=styled_components_1.css`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,r,e,t){void 0===t&&(t=e);var n=Object.getOwnPropertyDescriptor(r,e);n&&!("get"in n?!r.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return r[e]}}),Object.defineProperty(o,t,n)}:function(o,r,e,t){void 0===t&&(t=e),o[t]=r[e]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,r){Object.defineProperty(o,"default",{enumerable:!0,value:r})}:function(o,r){o.default=r}),__importStar=this&&this.__importStar||function(o){if(o&&o.__esModule)return o;var r={};if(null!=o)for(var e in o)"default"!==e&&Object.prototype.hasOwnProperty.call(o,e)&&__createBinding(r,o,e);return __setModuleDefault(r,o),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SchemaMimeTypeDropdown=exports.SchemaDiscriminatorDropdown=exports.VersionDropdown=exports.CollapsingDropdown=exports.SimpleDropdown=exports.Dropdown=void 0;const styled_components_1=__importStar(require("styled-components")),Dropdown_1=require("./Dropdown"),darkDropdownStyle=styled_components_1.css`
   background-color: var(--panel-samples-dropdown-background-color);
   border: var(--panel-samples-dropdown-border);
   color: var(--panel-samples-dropdown-color);
@@ -47,7 +47,7 @@
       box-shadow: none;
     }
 
-    ${({variant:o})=>"dark"===o?samplesDropdownStyle:""};
+    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
   }
 
   .dropdown-select {
@@ -66,7 +66,7 @@
     font-size: 14px;
     font-family: inherit;
     padding: var(--dropdown-padding);
-    ${({variant:o})=>"dark"===o?samplesDropdownStyle:""};
+    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
   }
 `,exports.SimpleDropdown=(0,styled_components_1.default)(exports.Dropdown)`
   svg {
@@ -94,7 +94,7 @@
     transform: translateY(-60%);
   }
   label {
-    ${samplesDropdownStyle};
+    ${darkDropdownStyle};
 
     height: 40px;
     border-radius: 0 var(--border-radius) 0 0;

package/lib/components/common/form.js

@@ -9,7 +9,7 @@
   position: absolute;
 `,exports.FormControl=styled_components_1.default.div`
   width: 100%;
-  font-family: var(--code-font-family);
+  /* font-family: var(--code-font-family); */
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;

package/lib/components/rightPanel/AuthPanel/AuthPanel.js

@@ -1,2 +1,2 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,l,r){void 0===r&&(r=l);var a=Object.getOwnPropertyDescriptor(t,l);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[l]}}),Object.defineProperty(e,r,a)}:function(e,t,l,r){void 0===r&&(r=l),e[r]=t[l]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)"default"!==l&&Object.prototype.hasOwnProperty.call(e,l)&&__createBinding(t,e,l);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AuthPanel=void 0;const react_1=__importStar(require("react")),utils_1=require("../../../utils"),styled_1=require("../styled"),form_1=require("../../common/form"),TextField_1=require("../../common/TextField"),OpenIDConnect_1=require("../OpenIDConnect"),utils_2=require("../utils"),OAuth2Flow_1=require("../OAuth2Flow"),services_1=require("../../../services"),OAuth2TokenInput_1=__importDefault(require("../OAuth2TokenInput")),AuthPanel=({securityDefaults:e,operation:t,activeServer:l,authCorsProxyUrl:r,form:a,formApi:i})=>{const[o,n]=(0,react_1.useState)(0);(0,react_1.useEffect)((()=>{const e=t.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),l=(0,utils_1.fromSessionStorage)("securityRequirementName"),r=e.findIndex((e=>e===l));n(r<0?0:r)}),[t]);const u=t.security,s=u.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));return 0===s.length?react_1.default.createElement(OpenIDConnect_1.Error,{message:"Cannot find security schema in the definition"}):react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(form_1.FormWrapper,null,s.length>1&&react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Security scheme: "),react_1.default.createElement(styled_1.TryItDropdown,{variant:"dark",fullWidth:!0,options:s,value:s[o].value,onChange:e=>{n(e.idx),(0,utils_1.toSessionStorage)("securityRequirementName",e.value)}}))||null,u[o].schemes.map((t=>{var o,n,u,s,d,c,f;const m=(0,utils_1.escapeFormId)(t.id);if("apiKey"===t.type){const l=(0,utils_1.getSecurityDetailsOptions)(m,""),r={field:`auth.${m}`,fullWidth:!0,initialValue:(0,utils_2.fromCookie)(t)||(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),initValue:(0,utils_2.fromCookie)(t)||(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(form_1.FormControl,{key:m},react_1.default.createElement(form_1.FormLabel,null," ",t.name,": "),l?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},r,{options:l})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},r,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=(0,utils_1.getSecurityDetailsOptions)(m,"username"),l={field:`auth.${m}.username`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${m}.username`)||(null===(o=null==e?void 0:e[m])||void 0===o?void 0:o.username),initValue:(0,utils_1.fromSessionStorage)(`auth.${m}.username`)||(null===(n=null==e?void 0:e[m])||void 0===n?void 0:n.username),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(react_1.Fragment,{key:m},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," ",(0,services_1.l)("tryItAuthBasicUsername"),": "),t?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},l,{options:t})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},l,{panel:"try-it"}))),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," ",(0,services_1.l)("tryItAuthBasicPassword"),": "),react_1.default.createElement(TextField_1.FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:`auth.${m}.password`,initialValue:(0,utils_1.fromSessionStorage)(`auth.${m}.password`)||(null===(u=null==e?void 0:e[m])||void 0===u?void 0:u.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=(0,utils_1.getSecurityDetailsOptions)(m,""),l={field:`auth.${m}`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),initValue:(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(react_1.Fragment,{key:m},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Bearer Token: "),t?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},l,{options:t})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},l,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===t.type&&t.flows&&t.flows.clientCredentials)return react_1.default.createElement(OAuth2TokenInput_1.default,{key:m,flow:t.flows.clientCredentials,server:l,authCorsProxyUrl:r,id:m,form:a,formApi:i,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return react_1.default.createElement(OAuth2Flow_1.OAuth2Flow,{key:m,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:r,scopes:Object.keys((null===(d=null===(s=null==t?void 0:t.flows)||void 0===s?void 0:s.implicit)||void 0===d?void 0:d.scopes)||{}),server:l,id:m,form:a,formApi:i,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return react_1.default.createElement(OAuth2Flow_1.OAuth2Flow,{key:m,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:r,scopes:Object.keys((null===(c=t.flows.authorizationCode)||void 0===c?void 0:c.scopes)||{}),server:l,id:m,form:a,formApi:i,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type){let t=(0,utils_1.fromSessionStorage)(`auth.${m}.token`)||JSON.stringify(null===(f=null==e?void 0:e[m])||void 0===f?void 0:f.token);return t=t?JSON.parse(t):{},react_1.default.createElement(react_1.Fragment,{key:m},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token Type: "),react_1.default.createElement(TextField_1.FormTextField,{fullWidth:!0,field:`auth.${m}.token.token_type`,initialValue:t.token_type||"Bearer",panel:"try-it"})),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token: "),react_1.default.createElement(TextField_1.FormTextField,{type:"password",fullWidth:!0,field:`auth.${m}.token.access_token`,validate:utils_2.requiredValidator,initialValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return react_1.default.createElement(OpenIDConnect_1.OpenIDConnect,{key:m,server:l,authCorsProxyUrl:r,id:m,form:a,formApi:i,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[m]})}}))),react_1.default.createElement("small",null,react_1.default.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))};exports.AuthPanel=AuthPanel;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,l){void 0===l&&(l=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,l,a)}:function(e,t,r,l){void 0===l&&(l=r),e[l]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AuthPanel=void 0;const react_1=__importStar(require("react")),RenderHook_1=require("../../RenderHook"),utils_1=require("../../../utils"),styled_1=require("../styled"),form_1=require("../../common/form"),TextField_1=require("../../common/TextField"),OpenIDConnect_1=require("../OpenIDConnect"),utils_2=require("../utils"),OAuth2Flow_1=require("../OAuth2Flow"),services_1=require("../../../services"),OAuth2TokenInput_1=__importDefault(require("../OAuth2TokenInput")),OptionsProvider_1=require("../../../context/OptionsProvider"),AuthPanel=({securityDefaults:e,operation:t,activeServer:r,authCorsProxyUrl:l,form:a,formApi:o})=>{const[i,n]=(0,react_1.useState)(0),{hooks:u}=react_1.default.useContext(OptionsProvider_1.OptionsContext);(0,react_1.useEffect)((()=>{const e=t.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),r=(0,utils_1.fromSessionStorage)("securityRequirementName"),l=e.findIndex((e=>e===r));n(l<0?0:l)}),[t]);const s=t.security,d=s.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));if(0===d.length)return react_1.default.createElement(OpenIDConnect_1.Error,{message:"Cannot find security schema in the definition"});const c=s[i],f=(0,utils_1.escapeFormId)(c.schemes[0].id);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(form_1.FormWrapper,null,d.length>1&&react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Security scheme: "),react_1.default.createElement(styled_1.TryItDropdown,{variant:"dark",fullWidth:!0,options:d,value:d[i].value,onChange:e=>{n(e.idx),(0,utils_1.toSessionStorage)("securityRequirementName",e.value)}}))||null,react_1.default.createElement(RenderHook_1.RenderHook,{Hook:null==u?void 0:u.BeforeSecurityPanel,props:{server:t.activeServer,operation:t,value:o.getValue(`auth.${f}`),onChange:e=>{o.setValue(`auth.${f}`,e)}}}),s[i].schemes.map((t=>{var i,n,u,s,d,c,f;const m=(0,utils_1.escapeFormId)(t.id);if("apiKey"===t.type){const r=(0,utils_1.getSecurityDetailsOptions)(m,""),l={field:`auth.${m}`,fullWidth:!0,initialValue:(0,utils_2.fromCookie)(t)||(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),initValue:(0,utils_2.fromCookie)(t)||(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(form_1.FormControl,{key:m},react_1.default.createElement(form_1.FormLabel,null," ",t.name,": "),r?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},l,{options:r})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},l,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=(0,utils_1.getSecurityDetailsOptions)(m,"username"),r={field:`auth.${m}.username`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${m}.username`)||(null===(i=null==e?void 0:e[m])||void 0===i?void 0:i.username),initValue:(0,utils_1.fromSessionStorage)(`auth.${m}.username`)||(null===(n=null==e?void 0:e[m])||void 0===n?void 0:n.username),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(react_1.Fragment,{key:m},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," ",(0,services_1.l)("tryItAuthBasicUsername"),": "),t?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},r,{options:t})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},r,{panel:"try-it"}))),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," ",(0,services_1.l)("tryItAuthBasicPassword"),": "),react_1.default.createElement(TextField_1.FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:`auth.${m}.password`,initialValue:(0,utils_1.fromSessionStorage)(`auth.${m}.password`)||(null===(u=null==e?void 0:e[m])||void 0===u?void 0:u.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=(0,utils_1.getSecurityDetailsOptions)(m,""),r={field:`auth.${m}`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),initValue:(0,utils_1.fromSessionStorage)(`auth.${m}`)||(null==e?void 0:e[m]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(react_1.Fragment,{key:m},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Bearer Token: "),t?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},r,{options:t})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},r,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===t.type&&t.flows&&t.flows.clientCredentials)return react_1.default.createElement(OAuth2TokenInput_1.default,{key:m,flow:t.flows.clientCredentials,server:r,authCorsProxyUrl:l,id:m,form:a,formApi:o,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return react_1.default.createElement(OAuth2Flow_1.OAuth2Flow,{key:m,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:l,scopes:Object.keys((null===(d=null===(s=null==t?void 0:t.flows)||void 0===s?void 0:s.implicit)||void 0===d?void 0:d.scopes)||{}),server:r,id:m,form:a,formApi:o,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return react_1.default.createElement(OAuth2Flow_1.OAuth2Flow,{key:m,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:l,scopes:Object.keys((null===(c=t.flows.authorizationCode)||void 0===c?void 0:c.scopes)||{}),server:r,id:m,form:a,formApi:o,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type){let t=(0,utils_1.fromSessionStorage)(`auth.${m}.token`)||JSON.stringify(null===(f=null==e?void 0:e[m])||void 0===f?void 0:f.token);return t=t?JSON.parse(t):{},react_1.default.createElement(react_1.Fragment,{key:m},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token Type: "),react_1.default.createElement(TextField_1.FormTextField,{fullWidth:!0,field:`auth.${m}.token.token_type`,initialValue:t.token_type||"Bearer",panel:"try-it"})),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token: "),react_1.default.createElement(TextField_1.FormTextField,{type:"password",fullWidth:!0,field:`auth.${m}.token.access_token`,validate:utils_2.requiredValidator,initialValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return react_1.default.createElement(OpenIDConnect_1.OpenIDConnect,{key:m,server:r,authCorsProxyUrl:l,id:m,form:a,formApi:o,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[m]})}}))),react_1.default.createElement("small",null,react_1.default.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))};exports.AuthPanel=AuthPanel;
 //# sourceMappingURL=AuthPanel.js.map

package/lib/services/types.d.ts

@@ -105,6 +105,9 @@ export interface SecurityPanelHookProps {
     OAuth2: OAuth2;
 }
 export type AuthPanelHookProps = SecurityPanelHookProps;
+export type BeforeSecurityPanelHookProps = Omit<SecurityPanelHookProps, 'OAuth2'> & {
+    value: unknown;
+};
 export interface HookRawHtml {
     html: string;
 }
@@ -126,6 +129,7 @@ export interface HooksConfig {
     AfterOperation?: HookConfig<{
         operation: OperationModel;
     }>;
+    BeforeSecurityPanel?: HookConfig<BeforeSecurityPanelHookProps>;
     ReplaceTryItSecurityPanel?: HookConfig<SecurityPanelHookProps>;
     onInit?: (args: {
         store: ProStore;

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './open-api';
 export * from './server';
 export * from './security';
+export type { SecurityPanelHookProps } from '../services/types';

package/lib-esm/components/common/Dropdown/Dropdown.js

@@ -12,5 +12,5 @@ import React,{memo}from"react";import styled from"styled-components";import{Clea
   polyline {
     color: ${e=>"dark"===e.variant&&"white"};
   }
-`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:a,placeholder:n,value:r="",className:l,variant:s="light"})=>React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),a&&(null==r?void 0:r.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:a}=o.target;t(e[n||!r?a-1:a])},value:r,className:"dropdown-select"},n&&React.createElement("option",{disabled:!0,hidden:!0,value:n},n),!r&&!n&&React.createElement("option",{disabled:!0}),e.map((({idx:e,value:t,title:o},a)=>React.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},o||t)))),React.createElement("label",null,r));export const Dropdown=memo(DropdownComponent);
+`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:a,placeholder:n,value:r="",className:l,variant:s="light"})=>{var c;const i=(null===(c=e.find((e=>e.value===r)))||void 0===c?void 0:c.title)||r;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),a&&(null==r?void 0:r.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:a}=o.target;t(e[n||!r?a-1:a])},value:r,className:"dropdown-select"},n&&React.createElement("option",{disabled:!0,hidden:!0,value:n},n),!r&&!n&&React.createElement("option",{disabled:!0}),e.map((({idx:e,value:t,title:o},a)=>React.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},o||t)))),React.createElement("label",null,i))};export const Dropdown=memo(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

package/lib-esm/components/common/Dropdown/styled.js

@@ -1,4 +1,4 @@
-import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";const samplesDropdownStyle=css`
+import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";const darkDropdownStyle=css`
   background-color: var(--panel-samples-dropdown-background-color);
   border: var(--panel-samples-dropdown-border);
   color: var(--panel-samples-dropdown-color);
@@ -47,7 +47,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
       box-shadow: none;
     }
 
-    ${({variant:o})=>"dark"===o?samplesDropdownStyle:""};
+    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
   }
 
   .dropdown-select {
@@ -66,7 +66,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     font-size: 14px;
     font-family: inherit;
     padding: var(--dropdown-padding);
-    ${({variant:o})=>"dark"===o?samplesDropdownStyle:""};
+    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
   }
 `;export const SimpleDropdown=styled(Dropdown)`
   svg {
@@ -94,7 +94,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     transform: translateY(-60%);
   }
   label {
-    ${samplesDropdownStyle};
+    ${darkDropdownStyle};
 
     height: 40px;
     border-radius: 0 var(--border-radius) 0 0;

package/lib-esm/components/common/form.js

@@ -9,7 +9,7 @@ import styled,{css}from"styled-components";export const Table=styled.div`
   position: absolute;
 `;export const FormControl=styled.div`
   width: 100%;
-  font-family: var(--code-font-family);
+  /* font-family: var(--code-font-family); */
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;

package/lib-esm/components/rightPanel/AuthPanel/AuthPanel.js

@@ -1,2 +1,2 @@
-import React,{Fragment,useEffect,useState}from"react";import{escapeFormId,fromSessionStorage,getSecurityDetailsOptions,toSessionStorage}from"../../../utils";import{TryItDropdown}from"../styled";import{FormControl,FormLabel,FormWrapper}from"../../common/form";import{FormDropdown,FormTextField}from"../../common/TextField";import{OpenIDConnect,Error}from"../OpenIDConnect";import{fromCookie,requiredValidator}from"../utils";import{OAuth2Flow}from"../OAuth2Flow";import{l}from"../../../services";import OAuth2TokenInputComponent from"../OAuth2TokenInput";export const AuthPanel=({securityDefaults:e,operation:t,activeServer:o,authCorsProxyUrl:a,form:r,formApi:n})=>{const[i,s]=useState(0);useEffect((()=>{const e=t.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),o=fromSessionStorage("securityRequirementName"),a=e.findIndex((e=>e===o));s(a<0?0:a)}),[t]);const u=t.security,c=u.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));return 0===c.length?React.createElement(Error,{message:"Cannot find security schema in the definition"}):React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,c.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(TryItDropdown,{variant:"dark",fullWidth:!0,options:c,value:c[i].value,onChange:e=>{s(e.idx),toSessionStorage("securityRequirementName",e.value)}}))||null,u[i].schemes.map((t=>{var i,s,u,c,m,d,f;const p=escapeFormId(t.id);if("apiKey"===t.type){const o=getSecurityDetailsOptions(p,""),a={field:`auth.${p}`,fullWidth:!0,initialValue:fromCookie(t)||fromSessionStorage(`auth.${p}`)||(null==e?void 0:e[p]),initValue:fromCookie(t)||fromSessionStorage(`auth.${p}`)||(null==e?void 0:e[p]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(FormControl,{key:p},React.createElement(FormLabel,null," ",t.name,": "),o?React.createElement(FormDropdown,Object.assign({},a,{options:o})):React.createElement(FormTextField,Object.assign({},a,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=getSecurityDetailsOptions(p,"username"),o={field:`auth.${p}.username`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${p}.username`)||(null===(i=null==e?void 0:e[p])||void 0===i?void 0:i.username),initValue:fromSessionStorage(`auth.${p}.username`)||(null===(s=null==e?void 0:e[p])||void 0===s?void 0:s.username),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:p},React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicUsername"),": "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{panel:"try-it"}))),React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicPassword"),": "),React.createElement(FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:`auth.${p}.password`,initialValue:fromSessionStorage(`auth.${p}.password`)||(null===(u=null==e?void 0:e[p])||void 0===u?void 0:u.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=getSecurityDetailsOptions(p,""),o={field:`auth.${p}`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${p}`)||(null==e?void 0:e[p]),initValue:fromSessionStorage(`auth.${p}`)||(null==e?void 0:e[p]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:p},React.createElement(FormControl,null,React.createElement(FormLabel,null," Bearer Token: "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===t.type&&t.flows&&t.flows.clientCredentials)return React.createElement(OAuth2TokenInputComponent,{key:p,flow:t.flows.clientCredentials,server:o,authCorsProxyUrl:a,id:p,form:r,formApi:n,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[p]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return React.createElement(OAuth2Flow,{key:p,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(m=null===(c=null==t?void 0:t.flows)||void 0===c?void 0:c.implicit)||void 0===m?void 0:m.scopes)||{}),server:o,id:p,form:r,formApi:n,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[p]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return React.createElement(OAuth2Flow,{key:p,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(d=t.flows.authorizationCode)||void 0===d?void 0:d.scopes)||{}),server:o,id:p,form:r,formApi:n,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[p]});if("oauth2"===t.type){let t=fromSessionStorage(`auth.${p}.token`)||JSON.stringify(null===(f=null==e?void 0:e[p])||void 0===f?void 0:f.token);return t=t?JSON.parse(t):{},React.createElement(Fragment,{key:p},React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token Type: "),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${p}.token.token_type`,initialValue:t.token_type||"Bearer",panel:"try-it"})),React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${p}.token.access_token`,validate:requiredValidator,initialValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return React.createElement(OpenIDConnect,{key:p,server:o,authCorsProxyUrl:a,id:p,form:r,formApi:n,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[p]})}}))),React.createElement("small",null,React.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))};
+import React,{Fragment,useEffect,useState}from"react";import{RenderHook}from"../../RenderHook";import{escapeFormId,fromSessionStorage,getSecurityDetailsOptions,toSessionStorage}from"../../../utils";import{TryItDropdown}from"../styled";import{FormControl,FormLabel,FormWrapper}from"../../common/form";import{FormDropdown,FormTextField}from"../../common/TextField";import{OpenIDConnect,Error}from"../OpenIDConnect";import{fromCookie,requiredValidator}from"../utils";import{OAuth2Flow}from"../OAuth2Flow";import{l}from"../../../services";import OAuth2TokenInputComponent from"../OAuth2TokenInput";import{OptionsContext}from"../../../context/OptionsProvider";export const AuthPanel=({securityDefaults:e,operation:t,activeServer:o,authCorsProxyUrl:a,form:r,formApi:n})=>{const[i,s]=useState(0),{hooks:u}=React.useContext(OptionsContext);useEffect((()=>{const e=t.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),o=fromSessionStorage("securityRequirementName"),a=e.findIndex((e=>e===o));s(a<0?0:a)}),[t]);const c=t.security,m=c.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));if(0===m.length)return React.createElement(Error,{message:"Cannot find security schema in the definition"});const d=c[i],p=escapeFormId(d.schemes[0].id);return React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,m.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(TryItDropdown,{variant:"dark",fullWidth:!0,options:m,value:m[i].value,onChange:e=>{s(e.idx),toSessionStorage("securityRequirementName",e.value)}}))||null,React.createElement(RenderHook,{Hook:null==u?void 0:u.BeforeSecurityPanel,props:{server:t.activeServer,operation:t,value:n.getValue(`auth.${p}`),onChange:e=>{n.setValue(`auth.${p}`,e)}}}),c[i].schemes.map((t=>{var i,s,u,c,m,d,p;const f=escapeFormId(t.id);if("apiKey"===t.type){const o=getSecurityDetailsOptions(f,""),a={field:`auth.${f}`,fullWidth:!0,initialValue:fromCookie(t)||fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),initValue:fromCookie(t)||fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(FormControl,{key:f},React.createElement(FormLabel,null," ",t.name,": "),o?React.createElement(FormDropdown,Object.assign({},a,{options:o})):React.createElement(FormTextField,Object.assign({},a,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=getSecurityDetailsOptions(f,"username"),o={field:`auth.${f}.username`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${f}.username`)||(null===(i=null==e?void 0:e[f])||void 0===i?void 0:i.username),initValue:fromSessionStorage(`auth.${f}.username`)||(null===(s=null==e?void 0:e[f])||void 0===s?void 0:s.username),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:f},React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicUsername"),": "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{panel:"try-it"}))),React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicPassword"),": "),React.createElement(FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:`auth.${f}.password`,initialValue:fromSessionStorage(`auth.${f}.password`)||(null===(u=null==e?void 0:e[f])||void 0===u?void 0:u.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=getSecurityDetailsOptions(f,""),o={field:`auth.${f}`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),initValue:fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:f},React.createElement(FormControl,null,React.createElement(FormLabel,null," Bearer Token: "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===t.type&&t.flows&&t.flows.clientCredentials)return React.createElement(OAuth2TokenInputComponent,{key:f,flow:t.flows.clientCredentials,server:o,authCorsProxyUrl:a,id:f,form:r,formApi:n,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[f]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return React.createElement(OAuth2Flow,{key:f,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(m=null===(c=null==t?void 0:t.flows)||void 0===c?void 0:c.implicit)||void 0===m?void 0:m.scopes)||{}),server:o,id:f,form:r,formApi:n,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[f]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return React.createElement(OAuth2Flow,{key:f,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(d=t.flows.authorizationCode)||void 0===d?void 0:d.scopes)||{}),server:o,id:f,form:r,formApi:n,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[f]});if("oauth2"===t.type){let t=fromSessionStorage(`auth.${f}.token`)||JSON.stringify(null===(p=null==e?void 0:e[f])||void 0===p?void 0:p.token);return t=t?JSON.parse(t):{},React.createElement(Fragment,{key:f},React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token Type: "),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${f}.token.token_type`,initialValue:t.token_type||"Bearer",panel:"try-it"})),React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${f}.token.access_token`,validate:requiredValidator,initialValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return React.createElement(OpenIDConnect,{key:f,server:o,authCorsProxyUrl:a,id:f,form:r,formApi:n,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[f]})}}))),React.createElement("small",null,React.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))};
 //# sourceMappingURL=AuthPanel.js.map

package/lib-esm/services/types.d.ts

@@ -105,6 +105,9 @@ export interface SecurityPanelHookProps {
     OAuth2: OAuth2;
 }
 export type AuthPanelHookProps = SecurityPanelHookProps;
+export type BeforeSecurityPanelHookProps = Omit<SecurityPanelHookProps, 'OAuth2'> & {
+    value: unknown;
+};
 export interface HookRawHtml {
     html: string;
 }
@@ -126,6 +129,7 @@ export interface HooksConfig {
     AfterOperation?: HookConfig<{
         operation: OperationModel;
     }>;
+    BeforeSecurityPanel?: HookConfig<BeforeSecurityPanelHookProps>;
     ReplaceTryItSecurityPanel?: HookConfig<SecurityPanelHookProps>;
     onInit?: (args: {
         store: ProStore;

package/lib-esm/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './open-api';
 export * from './server';
 export * from './security';
+export type { SecurityPanelHookProps } from '../services/types';

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.0.0-alpha.13",
+  "version": "3.0.0-alpha.14.beta.2",
   "description": "Redocly Reference Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
+  "types": "lib/index.d.ts",
   "author": "Roman Hotsiy <roman@redoc.ly>",
   "license": "SEE LICENSE IN LICENSE.md",
   "engines": {
@@ -83,7 +84,7 @@
     "cdn-serve": "http-server playground/cdn-test/server-dist"
   },
   "peerDependencies": {
-    "@redocly/theme": "^0.8.0",
+    "@redocly/theme": "^0.9.0-beta.1",
     "core-js": "^3.1.4",
     "mobx": "^6.6.2",
     "react": "^16.8.4 || ^17.0.0",
@@ -93,7 +94,7 @@
   "devDependencies": {
     "@percy/cli": "^1.10.3",
     "@percy/cypress": "^3.1.1",
-    "@redocly/theme": "^0.8.0",
+    "@redocly/theme": "^0.9.0-beta.3",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",