@redocly/openapi-docs 3.0.0-alpha.15 → 3.0.0-alpha.17

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"})=>{const s=(0,react_1.useMemo)((()=>e.map((({idx:e,value:t,title:r},a)=>{const n=(0,utils_1.normalizeText)(t);return react_1.default.createElement("option",{key:e||n+a,value:n,className:"dropdown-option"},r||n)}))),[e]),u=(0,utils_1.normalizeText)(o);return react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:i}),a&&(null==u?void 0:u.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:u,className:"dropdown-select"},n&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:n},n),!u&&!n&&react_1.default.createElement("option",{disabled:!0}),s),react_1.default.createElement("label",null,u))};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 s;const u=(0,react_1.useMemo)((()=>e.map((({idx:e,value:t,title:r},a)=>{const n=(0,utils_1.normalizeText)(t);return react_1.default.createElement("option",{key:e||n+a,value:n,className:"dropdown-option"},r||n)}))),[e]),c=(0,utils_1.normalizeText)(o),d=(null===(s=e.find((e=>e.value===o)))||void 0===s?void 0:s.title)||c;return react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:i}),a&&(null==c?void 0:c.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:c,className:"dropdown-select"},n&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:n},n),!c&&!n&&react_1.default.createElement("option",{disabled:!0}),u),react_1.default.createElement("label",null,d))};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,6 @@
   position: absolute;
 `,exports.FormControl=styled_components_1.default.div`
   width: 100%;
-  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,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")),recoil_1=require("recoil"),theme_1=require("@redocly/theme"),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")),store_1=require("../../../recoil/store"),AuthPanel=({securityDefaults:e,operation:t,activeServer:l,authCorsProxyUrl:r,form:a,formApi:i})=>{var o,n;const[u,s]=(0,react_1.useState)(0),{parser:d}=(0,recoil_1.useRecoilValue)(store_1.globalStoreSelector);(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));s(r<0?0:r)}),[t]);const c=t.security,f=c.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));if(0===f.length)return react_1.default.createElement(OpenIDConnect_1.Error,{message:"Cannot find security schema in the definition"});const m=c[u],_=(0,utils_1.escapeFormId)(m.schemes[0].id);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(form_1.FormWrapper,null,f.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:f,value:f[u].value,onChange:e=>{s(e.idx),(0,utils_1.toSessionStorage)("securityRequirementName",e.value)}}))||null,react_1.default.createElement(theme_1.TryItSecurityApps,{apiId:null===(n=null===(o=null==d?void 0:d.definition.info)||void 0===o?void 0:o["x-metadata"])||void 0===n?void 0:n.apiId,value:i.getValue(`auth.${_}`),onChange:e=>{i.setValue(`auth.${_}`,e)}}),c[u].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;
 //# sourceMappingURL=AuthPanel.js.map

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

@@ -12,5 +12,5 @@ import React,{memo,useMemo}from"react";import styled from"styled-components";imp
   polyline {
     color: ${e=>"dark"===e.variant&&"white"};
   }
-`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:n,placeholder:a,value:r="",className:l,variant:s="light"})=>{const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const a=normalizeText(t);return React.createElement("option",{key:e||a+n,value:a,className:"dropdown-option"},o||a)}))),[e]),i=normalizeText(r);return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),n&&(null==i?void 0:i.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[a||!r?n-1:n])},value:i,className:"dropdown-select"},a&&React.createElement("option",{disabled:!0,hidden:!0,value:a},a),!i&&!a&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,i))};export const Dropdown=memo(DropdownComponent);
+`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:n,placeholder:a,value:r="",className:l,variant:s="light"})=>{var i;const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const a=normalizeText(t);return React.createElement("option",{key:e||a+n,value:a,className:"dropdown-option"},o||a)}))),[e]),m=normalizeText(r),d=(null===(i=e.find((e=>e.value===r)))||void 0===i?void 0:i.title)||m;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),n&&(null==m?void 0:m.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[a||!r?n-1:n])},value:m,className:"dropdown-select"},a&&React.createElement("option",{disabled:!0,hidden:!0,value:a},a),!m&&!a&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,d))};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,6 @@ 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);
   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{useRecoilValue}from"recoil";import{TryItSecurityApps}from"@redocly/theme";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{globalStoreSelector}from"../../../recoil/store";export const AuthPanel=({securityDefaults:e,operation:t,activeServer:o,authCorsProxyUrl:a,form:r,formApi:i})=>{var n,s;const[u,c]=useState(0),{parser:m}=useRecoilValue(globalStoreSelector);useEffect((()=>{const e=t.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),o=fromSessionStorage("securityRequirementName"),a=e.findIndex((e=>e===o));c(a<0?0:a)}),[t]);const d=t.security,p=d.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));if(0===p.length)return React.createElement(Error,{message:"Cannot find security schema in the definition"});const f=d[u],h=escapeFormId(f.schemes[0].id);return React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,p.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(TryItDropdown,{variant:"dark",fullWidth:!0,options:p,value:p[u].value,onChange:e=>{c(e.idx),toSessionStorage("securityRequirementName",e.value)}}))||null,React.createElement(TryItSecurityApps,{apiId:null===(s=null===(n=null==m?void 0:m.definition.info)||void 0===n?void 0:n["x-metadata"])||void 0===s?void 0:s.apiId,value:i.getValue(`auth.${h}`),onChange:e=>{i.setValue(`auth.${h}`,e)}}),d[u].schemes.map((t=>{var n,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===(n=null==e?void 0:e[f])||void 0===n?void 0:n.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:i,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:i,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: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[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:i,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/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.0.0-alpha.15",
+  "version": "3.0.0-alpha.17",
   "description": "Redocly OpenAPI 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",
     "core-js": "^3.1.4",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0",
@@ -92,7 +93,7 @@
   "devDependencies": {
     "@percy/cli": "^1.10.3",
     "@percy/cypress": "^3.1.1",
-    "@redocly/theme": "^0.8.2",
+    "@redocly/theme": "^0.9.0",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",