@redocly/openapi-docs 3.0.0-alpha.10

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

@@ -0,0 +1,79 @@
+var __rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};import{asField,useField}from"informed";import styled,{css}from"styled-components";import React,{forwardRef,useCallback,useState}from"react";import{useMount}from"../../hooks";import{FormError}from"./form";import{Dropdown}from"./Dropdown";export const getInvertedInputStyles=e=>css`
+  border: var(--input-border);
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--panel-${e}-input-background-color);
+  color: var(--input-text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--input-placeholder-text-color);
+  }
+
+  &:hover {
+    color: var(--input-hover-text-color);
+    border: var(--input-hover-border);
+  }
+
+  &:focus {
+    color: var(--input-focus-text-color);
+    border: var(--input-focus-border);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--panel-${e}-input-background-color);
+  }
+`;const TextFieldWrapper=styled.div`
+  display: ${({type:e})=>"hidden"===e?"none":"inline-block"};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`,InputWrap=styled.div`
+  position: relative;
+`;export const StyledInput=styled.input`
+  ${({panel:e})=>{return css`
+  border: var(--input-border);
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--panel-${t=e}-input-background-color);
+  color: var(--input-text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--input-placeholder-text-color);
+  }
+
+  &:hover {
+    color: var(--input-hover-text-color);
+    border: var(--input-hover-border);
+  }
+
+  &:focus {
+    color: var(--input-focus-text-color);
+    border: var(--input-focus-border);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--panel-${t}-input-background-color);
+  }
+`;var t}}
+  ${({inputType:e,inputActionButton:t})=>"password"===e||t?"padding-right: 40px;":""};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`;const InputActionButton=styled.span`
+  position: absolute;
+  right: 0;
+  line-height: normal;
+
+  font-size: 0.8em;
+  padding: calc(8px / 0.8);
+  cursor: pointer;
+  text-align: center;
+  color: var(--panel-samples-text-color);
+`;function TextFieldComponent(e,t){var{fullWidth:r,errorMessage:o,type:n,inputActionButton:l,panel:i="samples"}=e,a=__rest(e,["fullWidth","errorMessage","type","inputActionButton","panel"]);const[p,u]=useState("password"===n),c=useCallback((()=>{u(!p)}),[p]);return React.createElement(TextFieldWrapper,{fullWidth:r,type:n},React.createElement(InputWrap,null,React.createElement(StyledInput,Object.assign({fullWidth:r,inputActionButton:l,type:p?"password":"text",inputType:n,ref:t,panel:i},a)),l?React.createElement(InputActionButton,{onClick:l.onClick},l.label):"password"===n?React.createElement(InputActionButton,{onClick:c},p?"show":"hide"):null),o?React.createElement(FormError,null,o):null)}export const TextField=forwardRef(TextFieldComponent);export function FormTextField(e){const t=useField(Object.assign({fieldType:"text"},e)),{userProps:r,render:o,fieldState:n}=t,l=t.informed;return o(React.createElement(TextField,Object.assign({},r,l,{errorMessage:n.error})))}const FormDropdownInt=({initValue:e,options:t,fieldApi:r,fieldState:o})=>{const n=t.map(((e,t)=>({value:e.title||e.value,idx:t,origValue:e.value}))),l=n.find((t=>t.origValue===e)),[i,a]=useState(null==l?void 0:l.value);useMount((()=>{e&&r.setValue(e)}));const p=useCallback((e=>{r.setValue(n[e.idx].origValue),a(n[e.idx].value)}),[r,n]);return React.createElement(TextFieldWrapper,{fullWidth:!0},React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:i,options:n,onChange:p}),o.error?React.createElement(FormError,null,o.error):null)};export const FormDropdown=asField(FormDropdownInt);
+//# sourceMappingURL=TextField.js.map

package/lib-esm/components/common/form.d.ts

@@ -0,0 +1,17 @@
+export declare const Table: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GroupLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormControl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormLabel: import("styled-components").StyledComponent<"label", any, {
+    required?: boolean | undefined;
+}, never>;
+export declare const FormError: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormWarning: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenField: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenValue: import("styled-components").StyledComponent<"code", any, {
+    masked?: boolean | undefined;
+    length: number;
+}, never>;
+export declare const TokenShowHide: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenClear: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const FormHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,65 @@
+import styled,{css}from"styled-components";export const Table=styled.div`
+  display: table;
+  width: 100%;
+`;export const GroupLabel=styled.div`
+  color: #969a9a;
+  font-size: 1em;
+  font-weight: normal;
+  text-align: left;
+  position: absolute;
+`;export const FormControl=styled.div`
+  width: 100%;
+  font-family: var(--code-font-family);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;export const FormWrapper=styled.div`
+  width: 100%;
+  margin-bottom: 20px;
+`;export const FormLabel=styled.label`
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({required:o})=>o&&css`
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: var(--color-error-500);
+      }
+    `}
+`;export const FormError=styled.div`
+  color: var(--color-error-500);
+  font-size: 0.9em;
+  & pre {
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+`;export const FormWarning=styled.div`
+  color: var(--color-warning-500);
+  font-size: 0.9em;
+`;function placeholder(o,e){let t="";for(let r=0;r<o;r++)t+=e;return'"'+t+'"'}export const TokenField=styled.div`
+  position: relative;
+  margin-bottom: 1em;
+  display: flex;
+`;export const TokenValue=styled.code`
+  flex: 1;
+  overflow-wrap: anywhere;
+  ${({masked:o,length:e})=>o&&`\n  color: transparent;\n\n  &:before {\n    content: ${placeholder(e,"*")};\n    color: white;\n    position: absolute;\n    right: 100px;\n  }\n  `||""}
+`;export const TokenShowHide=styled.span`
+  padding: 0 5px;
+  cursor: pointer;
+`;export const TokenClear=styled(TokenShowHide)`
+  color: var(--color-error-500);
+`;export const FormHeader=styled.div`
+  font-weight: bold;
+  font-size: 1.2em;
+  margin: 1em 0;
+`;
+//# sourceMappingURL=form.js.map

package/lib-esm/components/console/ActionPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FormValues } from 'informed';
+import type { OperationModel } from '../../redoc-lib';
+export interface ActionPanelProps {
+    execute: () => void;
+    loading: boolean;
+    operation: OperationModel;
+    params: FormValues;
+    hasResponse: boolean;
+}
+export declare const ActionPanelComponent: ({ loading, operation, hasResponse, execute, params, }: ActionPanelProps) => JSX.Element;
+export declare const ActionPanel: React.NamedExoticComponent<ActionPanelProps>;

package/lib-esm/components/console/ActionPanel.js

@@ -0,0 +1,4 @@
+import React,{memo}from"react";import styled from"styled-components";import{Button}from"@redocly/theme";import{serializeParameterValue}from"../../redoc-lib";import{CodeHeader}from"../Panel";import{Path,PathWrapper}from"../Endpoint";import{HttpVerb}from"../shared";import{expandVariables}from"./utils";function formatPath(e,t,r){const n=t.path||{},a=t.query||{},o=Object.keys(a);let m=expandVariables(e,n);return o.length&&(m+="?"+o.map((e=>{if(!a[e])return"";const t=(e=>r.find((t=>t.name===e&&"query"===t.in)))(e);return t?serializeParameterValue(t,a[e]):`${e}=${encodeURIComponent(a[e])}`})).filter(Boolean).join("&")),m}export const ActionPanelComponent=({loading:e,operation:t,hasResponse:r,execute:n,params:a={}})=>React.createElement(CodeHeader,null,React.createElement(PathWrapper,null,React.createElement(HttpVerb,{type:t.httpVerb},t.httpVerb),React.createElement(Path,{wrap:"true"},formatPath(t.path,a,t.parameters))),React.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&n()},e?"Sending...":r?"Resend":"Send"));const SendButton=styled(Button)`
+  width: var(--panel-try-it-action-button-width);
+`;export const ActionPanel=memo(ActionPanelComponent);
+//# sourceMappingURL=ActionPanel.js.map

package/lib-esm/components/console/AuthPanel/AuthPanel.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import type { AuthPanelProps, AuthPanelState } from './types';
+import type { DropdownOption } from '../../common/Dropdown';
+export declare class AuthPanel extends Component<AuthPanelProps, AuthPanelState> {
+    static getDerivedStateFromProps(props: AuthPanelProps): AuthPanelState;
+    state: {
+        activeScheme: number;
+    };
+    handleSchemeChange: (option: DropdownOption & {
+        idx: number;
+    }) => void;
+    render(): JSX.Element | null;
+}

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

@@ -0,0 +1,2 @@
+import React,{Component,Fragment}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"../../../redoc-lib/src/services/Labels";import OAuth2TokenInputCmp from"../OAuth2TokenInput";export class AuthPanel extends Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeScheme:0}}),Object.defineProperty(this,"handleSchemeChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({activeScheme:e.idx}),toSessionStorage("securityRequirementName",e.value)}})}static getDerivedStateFromProps(e){const t=e.operation.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),o=fromSessionStorage("securityRequirementName"),r=t.findIndex((e=>e===o));return{activeScheme:r<0?0:r}}render(){const{securityDefaults:e}=this.props,{activeScheme:t}=this.state,o=this.props.operation.security,r=o.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));return 0===r.length?React.createElement(Error,{message:"Cannot find security schema in the definition"}):React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,r.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(TryItDropdown,{variant:"dark",fullWidth:!0,options:r,value:r[t].value,onChange:this.handleSchemeChange}))||null,o[t].schemes.map((t=>{var o,r,a,i,n,s,u;const c=escapeFormId(t.id);if("apiKey"===t.type){const o=getSecurityDetailsOptions(c,""),r={field:`auth.${c}`,fullWidth:!0,initialValue:fromCookie(t)||fromSessionStorage(`auth.${c}`)||(null==e?void 0:e[c]),initValue:fromCookie(t)||fromSessionStorage(`auth.${c}`)||(null==e?void 0:e[c]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(FormControl,{key:c},React.createElement(FormLabel,null," ",t.name,": "),o?React.createElement(FormDropdown,Object.assign({},r,{options:o})):React.createElement(FormTextField,Object.assign({},r,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=getSecurityDetailsOptions(c,"username"),i={field:`auth.${c}.username`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${c}.username`)||(null===(o=null==e?void 0:e[c])||void 0===o?void 0:o.username),initValue:fromSessionStorage(`auth.${c}.username`)||(null===(r=null==e?void 0:e[c])||void 0===r?void 0:r.username),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:c},React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicUsername"),": "),t?React.createElement(FormDropdown,Object.assign({},i,{options:t})):React.createElement(FormTextField,Object.assign({},i,{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.${c}.password`,initialValue:fromSessionStorage(`auth.${c}.password`)||(null===(a=null==e?void 0:e[c])||void 0===a?void 0:a.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=getSecurityDetailsOptions(c,""),o={field:`auth.${c}`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${c}`)||(null==e?void 0:e[c]),initValue:fromSessionStorage(`auth.${c}`)||(null==e?void 0:e[c]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:c},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(OAuth2TokenInputCmp,{key:c,flow:t.flows.clientCredentials,server:this.props.activeServer,authCorsProxyUrl:this.props.authCorsProxyUrl,id:c,form:this.props.form,formApi:this.props.formApi,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[c]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return React.createElement(OAuth2Flow,{key:c,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:this.props.authCorsProxyUrl,scopes:Object.keys((null===(n=null===(i=null==t?void 0:t.flows)||void 0===i?void 0:i.implicit)||void 0===n?void 0:n.scopes)||{}),server:this.props.activeServer,id:c,form:this.props.form,formApi:this.props.formApi,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[c]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return React.createElement(OAuth2Flow,{key:c,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:this.props.authCorsProxyUrl,scopes:Object.keys((null===(s=t.flows.authorizationCode)||void 0===s?void 0:s.scopes)||{}),server:this.props.activeServer,id:c,form:this.props.form,formApi:this.props.formApi,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[c]});if("oauth2"===t.type){let t=fromSessionStorage(`auth.${c}.token`)||JSON.stringify(null===(u=null==e?void 0:e[c])||void 0===u?void 0:u.token);return t=t?JSON.parse(t):{},React.createElement(Fragment,{key:c},React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token Type: "),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${c}.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.${c}.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:c,server:this.props.activeServer,authCorsProxyUrl:this.props.authCorsProxyUrl,id:c,form:this.props.form,formApi:this.props.formApi,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[c]})}}))),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/components/console/AuthPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { AuthPanel } from './AuthPanel';
+export type { AuthPanelProps, AuthPanelState } from './types';

package/lib-esm/components/console/AuthPanel/index.js

@@ -0,0 +1,2 @@
+export{AuthPanel}from"./AuthPanel";
+//# sourceMappingURL=index.js.map

package/lib-esm/components/console/AuthPanel/types.d.ts

@@ -0,0 +1,14 @@
+import type { FormApi, FormState } from 'informed';
+import type { OperationModel } from '../../../redoc-lib';
+import type { SecurityDetails } from '../../../types';
+export interface AuthPanelProps {
+    operation: OperationModel;
+    form: FormState;
+    formApi: FormApi;
+    activeServer: string;
+    authCorsProxyUrl: Maybe<string>;
+    securityDefaults?: Record<string, SecurityDetails | string>;
+}
+export interface AuthPanelState {
+    activeScheme: number;
+}

package/lib-esm/components/console/AuthPanel/types.js

@@ -0,0 +1,2 @@
+export{};
+//# sourceMappingURL=types.js.map

package/lib-esm/components/console/CodemirrorInput.d.ts

@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import { Controlled as CodeMirror } from 'react-codemirror2-react-17';
+import type { Editor } from 'codemirror';
+import type { FieldApi, FieldState } from 'informed';
+import type { LegacyRef } from 'react';
+import type { OpenAPISchema, Referenced } from '../../redoc-lib';
+import './codemirror-helpers';
+export interface CodemirrorInputBase {
+    forwardedRef?: LegacyRef<CodeMirror>;
+    mode?: string;
+    field: string;
+    initialValue: string;
+    validate: () => string | undefined;
+    schema?: Referenced<OpenAPISchema>;
+    id: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+}
+export interface CodemirrorInputProps extends CodemirrorInputBase {
+    fieldApi: FieldApi;
+    fieldState: FieldState<string>;
+    render: any;
+    userProps: any;
+    ref: any;
+}
+export declare class CodemirrorInput extends PureComponent<CodemirrorInputProps> {
+    editor: Editor;
+    _onKeyUp: (_cm: CodeMirror.Doc, event: {
+        key: string;
+    }) => void;
+    initEditor: (editor: Editor) => void;
+    refreshEditor: () => void;
+    showHintHandler: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentType<CodemirrorInputBase>;
+export default _default;

package/lib-esm/components/console/CodemirrorInput.js

@@ -0,0 +1,50 @@
+import React,{PureComponent}from"react";import{asField}from"informed";import{Controlled as CodeMirror}from"react-codemirror2-react-17";import{createGlobalStyle}from"styled-components";import"./codemirror-helpers";import{MediaTypes}from"../../types";const CodeMirrorStyles=createGlobalStyle`
+  .cm-s-material.CodeMirror {
+    background-color: var(--panel-samples-controls-background-color)!important;
+    color: var(--text-color-inverse)!important;
+    font-family: var(--code-font-family);
+    line-height: 18px;
+    padding: 10px;
+  }
+
+  .CodeMirror-lint-mark-error {
+    background-size: 4px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;
+  }
+
+  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.3) !important;
+  }
+
+  .cm-s-material .CodeMirror-code .cm-string.cm-property {
+    color: var(--code-block-tokens-property-string-color);
+  }
+
+  .cm-s-material .CodeMirror-code .cm-string {
+    color: var(--code-block-tokens-string-color);
+  }
+
+  .cm-s-material .CodeMirror-code .cm-atom {
+    color: var(--text-color-inverse);
+  }
+
+  div .cm-s-material .CodeMirror-matchingbracket {
+    outline: 1px solid grey;
+    text-decoration: none;
+  }
+
+  .react-codemirror2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    flex: 1;
+  }
+
+  .CodeMirror {
+    flex: 1;
+    border-radius: var(--panel-border-radius);
+  }
+`;export class CodemirrorInput extends PureComponent{constructor(){super(...arguments),Object.defineProperty(this,"editor",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_onKeyUp",{enumerable:!0,configurable:!0,writable:!0,value:(e,r)=>{/^[a-zA-Z0-9_":]$/.test(r.key)&&this.editor.execCommand("autocomplete")}}),Object.defineProperty(this,"initEditor",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.editor=e,e.on("keyup",this._onKeyUp)}}),Object.defineProperty(this,"refreshEditor",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.editor.refresh()}}),Object.defineProperty(this,"showHintHandler",{enumerable:!0,configurable:!0,writable:!0,value:()=>this.editor.showHint({completeSingle:!0})})}componentDidMount(){setTimeout((()=>{this.editor.refresh()}),0),document.addEventListener("click",this.refreshEditor)}componentWillUnmount(){document.removeEventListener("click",this.refreshEditor)}render(){const{value:e}=this.props.fieldState,{setValue:r,setTouched:o,setError:t}=this.props.fieldApi,{onChange:i,onBlur:a,forwardedRef:n}=this.props;return React.createElement(React.Fragment,null,React.createElement(CodeMirrorStyles,null),React.createElement(CodeMirror,{editorDidMount:this.initEditor,value:e||"",ref:n,onBeforeChange:(e,o,t)=>{r(t),i&&i(t)},onBlur:e=>{o(!1),a&&a(e)},options:{mode:this.props.mode||MediaTypes.JSON,theme:"material",matchBrackets:!0,autoCloseBrackets:!0,tabSize:2,foldGutter:!0,extraKeys:{"Cmd-Space":this.showHintHandler,"Ctrl-Space":this.showHintHandler},hintOptions:{id:this.props.id,completeSingle:!1,schema:this.props.schema},lint:{id:this.props.id,schema:this.props.schema,setError:t}}}))}}export default asField(CodemirrorInput);
+//# sourceMappingURL=CodemirrorInput.js.map

package/lib-esm/components/console/Console.d.ts

@@ -0,0 +1,47 @@
+import { Component } from 'react';
+import type { FormApi, FormState } from 'informed';
+import type { SecurityDetails } from '../../types';
+import type { ProStore } from '../../services';
+import type { OperationModel, Server } from '../../redoc-lib';
+import type { OpenApiResponseData } from './ResponsePanel';
+export declare type RequestAndResponseType = {
+    request: Record<string, unknown>;
+    response: OpenApiResponseData;
+};
+export interface ConsoleProps {
+    store: ProStore;
+    operation: OperationModel;
+    className?: string;
+    rootElement?: HTMLElement | null;
+    onClose?: () => void;
+    properties?: any;
+    securityDefaults?: Record<string, SecurityDetails | string>;
+    onResponse?: (arg: RequestAndResponseType) => void;
+}
+export interface ConsoleState {
+    form: FormState<any>;
+    shaking: boolean;
+    loading: boolean;
+    activeTab: number;
+    error?: Error & {
+        response?: OpenApiResponseData;
+    };
+    resolvedRawSpec?: GenericObject;
+    response?: OpenApiResponseData;
+    time?: number;
+    server: Server;
+}
+export declare class Console extends Component<ConsoleProps, ConsoleState> {
+    formApi: FormApi | undefined;
+    constructor(props: ConsoleProps);
+    setFormApi: (formApi: FormApi, { values, ...rest }?: FormState<import("informed").FormValues>) => void;
+    handleChange: ({ values, ...rest }: ConsoleState['form']) => void;
+    handleTabChange: (idx: number) => void;
+    handleServerChange: (server: Server) => void;
+    handleExecute: () => Promise<void>;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: Readonly<ConsoleProps>): void;
+    render(): JSX.Element;
+    renderRequest(): JSX.Element;
+    renderResponse(): JSX.Element;
+}

package/lib-esm/components/console/Console.js

@@ -0,0 +1,2 @@
+var __decorate=this&&this.__decorate||function(e,t,r,o){var s,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var i=e.length-1;i>=0;i--)(s=e[i])&&(n=(a<3?s(n):a>3?s(t,r,n):s(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n},__awaiter=this&&this.__awaiter||function(e,t,r,o){return new(r||(r=Promise))((function(s,a){function n(e){try{l(o.next(e))}catch(e){a(e)}}function i(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(n,i)}l((o=o.apply(e,t||[])).next())}))},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(o=Object.getOwnPropertySymbols(e);s<o.length;s++)t.indexOf(o[s])<0&&Object.prototype.propertyIsEnumerable.call(e,o[s])&&(r[o[s]]=e[o[s]])}return r};import{Form,useField}from"informed";import{observer}from"mobx-react";import Swagger from"swagger-client";import React,{Component,useContext}from"react";import{unescapeFormId}from"../../utils";import{JsonPointer,StoreContext}from"../../redoc-lib";import{RenderHook}from"../../redoc-lib/src/components/RenderHook";import{l}from"../../redoc-lib/src/services/Labels";import{Accordion,StyledCodeHeader}from"../Panel";import{OAuth2}from"../../services/OAuth2";import{isFileUploadMime}from"../common/FileUpload/helper";import{OperationParameters}from"../OperationParameters";import{useDimensions}from"../../hooks";import{AnalyticsEventType}from"../../events";import{getFileNameFromHeaders,getParameters,makeRequestInterceptor,unescapeQueryParams,updateStorage,requiredValidator}from"./utils";import{AuthPanel}from"./AuthPanel";import{RequestBody}from"./RequestBody/RequestBody";import{ResponsePanel}from"./ResponsePanel";import{ActionPanel}from"./ActionPanel";import{ServersDropdown}from"./ServersDropdown";import{TryItPanel}from"./TryItPanel";import{ConsoleTabs}from"./ConsoleTabs";import{CloseButton,ConsoleBody,ConsoleWrap}from"./styled";function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}const flexColumn={flex:1,display:"flex",flexDirection:"column"};let Console=class extends Component{constructor(e){super(e),Object.defineProperty(this,"formApi",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"setFormApi",{enumerable:!0,configurable:!0,writable:!0,value:(e,t=e.getState())=>{var{values:r}=t,o=__rest(t,["values"]);this.formApi=e,setTimeout((()=>{const e=Object.assign(Object.assign({},o),{values:Object.assign(Object.assign({},r),{query:unescapeQueryParams(r.query||{})})});this.setState({form:e})}),0)}}),Object.defineProperty(this,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var{values:t}=e,r=__rest(e,["values"]);const o=Object.assign(Object.assign({},r),{values:Object.assign(Object.assign({},t),{query:unescapeQueryParams(t.query||{})})});this.setState({form:o}),updateStorage(o),this.props.operation.setRequestValues(t)}}),Object.defineProperty(this,"handleTabChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({activeTab:e})}}),Object.defineProperty(this,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({server:e}),this.props.operation.setActiveServer(e)}}),Object.defineProperty(this,"handleExecute",{enumerable:!0,configurable:!0,writable:!0,value:()=>__awaiter(this,void 0,void 0,(function*(){var e,t,r,o,s,a,n,i;const{store:l,operation:c,onResponse:u}=this.props,{values:p,invalid:d}=this.state.form;if(null===(e=this.formApi)||void 0===e||e.submitForm(),d)return this.setState({shaking:!0}),setTimeout((()=>this.setState({shaking:!1})),1e3),void(null===(r=null===(t=null==l?void 0:l.options.events)||void 0===t?void 0:t.tryItSent)||void 0===r||r.call(t,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:c.operationId,operationPath:c.path,operationHttpVerb:c.httpVerb,operationSummary:c.description}));const{servers:h,requestBody:m}=this.props.operation,v=m&&m.content&&m.content.active&&m.content.active.name||"";let y=p.body;if(/json/.test(v))try{y=JSON.parse(y)}catch(e){console.error(e)}this.setState({loading:!0});const f=this.state.resolvedRawSpec,b=(c.httpVerb||"").toLowerCase();if(!h)throw console.error("Servers are not specified in your OpenAPI file. You can't use Try It Out console without specifying servers. If you use OpenAPI 2, make sure you configured host and basepath"),new Error("Servers are not specified");const g=h.find((e=>this.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url))),O=Date.now(),P=!!window.document.documentMode;let R,j=p.auth;if(p.auth){const e=Object.keys(p.auth)[0],t=unescapeFormId(e);R=Object.assign(Object.assign({},f),{components:Object.assign(Object.assign({},null==f?void 0:f.components),{securitySchemes:Object.assign(Object.assign({},null==f?void 0:f.components.securitySchemes),{[t]:Object.assign(Object.assign({},null==f?void 0:f.components.securitySchemes[t]),{type:"openIdConnect"===(null==f?void 0:f.components.securitySchemes[t].type)?"oauth2":null==f?void 0:f.components.securitySchemes[t].type})})})}),j=Object.assign(Object.assign({},j),{[t]:j[e]})}else R=Object.assign({},f);R.servers=h;const S=l.options.corsProxyUrl;S&&h.length&&(R.servers=h.map((e=>Object.assign(Object.assign({},e),{url:S+normalizeUrlProtocol(e.url)}))),R.paths=Object.assign(Object.assign({},R.paths),{[c.path]:Object.assign(Object.assign({},R.paths[c.path]),{[b]:Object.assign(Object.assign({},R.paths[c.path][b]),{servers:void 0}),servers:void 0})}));const C=(null===(s=null===(o=null==m?void 0:m.content)||void 0===o?void 0:o.active)||void 0===s?void 0:s.name)||null;if(C&&y&&isFileUploadMime(C)){const e=Object.values(y);y=e.length>1?e:e[0]}const w={userFetch:P&&require("cross-fetch").fetch,server:S?S+normalizeUrlProtocol(g.url):g.url,serverVariables:this.state.server.variables,spec:R,pathName:c.path,method:c.httpVerb,parameters:Object.assign(Object.assign(Object.assign(Object.assign({},p.path),p.query),p.header),p.cookie),securities:{authorized:j},requestBody:y,requestContentType:C,responseContentType:(null===(a=p.header)||void 0===a?void 0:a.Accept)||null,requestInterceptor:makeRequestInterceptor(l.options,c,null==j?void 0:j.Authorization)};try{const e=yield Swagger.execute(w),t=null==e?void 0:e.data;t instanceof Blob&&(isFileUploadMime(t.type)&&(e.fileInfo={rawData:t,fileName:getFileNameFromHeaders(e.headers)}),e.data=yield t.text()),null==u||u({request:w,response:e}),this.setState({response:e,error:void 0})}catch(e){e&&e.response&&e.response.data instanceof Blob&&(e.response.data=yield e.response.data.text(),null==u||u({request:w,response:e.response})),this.setState({response:void 0,error:e})}finally{this.setState({loading:!1,activeTab:1,time:Date.now()-O}),null===(i=null===(n=null==l?void 0:l.options.events)||void 0===n?void 0:n.tryItSent)||void 0===i||i.call(n,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:c.operationId,operationPath:c.path,operationHttpVerb:c.httpVerb,operationSummary:c.description})}}))}),this.state={form:{values:{path:getParameters(e.operation.parameters,"path"),cookie:getParameters(e.operation.parameters,"cookie"),header:getParameters(e.operation.parameters,"header"),query:getParameters(e.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}}}componentDidMount(){var e;return __awaiter(this,void 0,void 0,(function*(){const{store:t,operation:r}=this.props,o=yield t.dereferenceSpecForTryIt(r);this.setState({resolvedRawSpec:o}),null===(e=this.formApi)||void 0===e||e.setValues({})}))}componentDidUpdate(e){e.operation!==this.props.operation&&this.setState({response:void 0,error:void 0,activeTab:0})}render(){const{operation:e,className:t,rootElement:r}=this.props,{shaking:o,activeTab:s,form:a,response:n,loading:i,error:l}=this.state,c=!(!n&&!l);return React.createElement(ConsoleWrapHook,{shaking:o,className:t,rootElement:r},React.createElement(StyledCodeHeader,null,React.createElement(ConsoleTabs,{active:s,hasResponse:c,onChange:this.handleTabChange}),this.props.onClose&&React.createElement(CloseButton,{onClick:this.props.onClose}," ✕ ")),React.createElement(ConsoleBody,{hidden:0!==s,"data-cy":"console-request-body"},this.renderRequest()),React.createElement(ConsoleBody,{hidden:1!==s,"data-cy":"console-response-body"},this.renderResponse()),React.createElement(ActionPanel,{hasResponse:c,params:a.values,operation:e,loading:i,execute:this.handleExecute}))}renderRequest(){var e;const{operation:t,store:r,properties:o,securityDefaults:s}=this.props,{form:a,resolvedRawSpec:n,server:i}=this.state,c=a.errors||{},u=c.path||c.cookie||c.header||c.query,p=n&&JsonPointer.get(n,t.pointer);let d=a.values&&a.values.auth&&Object.keys(a.values.auth)[0];d&&a.values.auth[d]||(d=void 0),!d||void 0===a.values.auth[d].token&&void 0===a.values.auth[d].client_id&&void 0===a.values.auth[d].client_secret||a.values.auth[d].token&&a.values.auth[d].token.access_token||(d=void 0),d&&null!=a.values.auth[d].username&&(a.values.auth[d].username&&a.values.auth[d].password||(d=void 0));const h=t.parameters||[],m=null===(e=null==r?void 0:r.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!n&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(Form,{onChange:this.handleChange,getApi:this.setFormApi,style:Object.assign(Object.assign({},flexColumn),{margin:0})},React.createElement(ServersDropdown,{operation:t,onChange:this.handleServerChange}),React.createElement(Accordion,{initialActiveIdx:t.security.length&&d?1:0},t.security.length&&this.formApi&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",error:!d&&!!c.auth,success:!!d,renderChildrenHidden:!0},m?React.createElement(AuthPanelHook,{field:"auth",validate:requiredValidator},(e=>React.createElement(RenderHook,{Hook:m,props:{server:i,operation:t,onChange:e,OAuth2:OAuth2}}))):React.createElement(AuthPanel,{formApi:this.formApi,form:a,operation:t,activeServer:i.url,authCorsProxyUrl:r.options.authCorsProxyUrl,securityDefaults:s}))||null,t.requestBody&&this.formApi&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",error:!!c.body,renderChildrenHidden:!0},React.createElement(RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:t.requestBody,id:t.id,resolvedBody:null==p?void 0:p.requestBody,properties:o}))||null,h.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:u,renderChildrenHidden:!0},React.createElement(OperationParameters,{operation:t,values:a.values,errors:a.errors||{}}))||null))}renderResponse(){const{response:e,error:t,time:r}=this.state;return React.createElement(ResponsePanel,{response:e,error:t,time:r})}};Console=__decorate([observer],Console);export{Console};function allowBodyErrors(){}function ConsoleWrapHook(e){const{shaking:t,className:r,children:o,rootElement:s}=e,[a]=useDimensions(s),n=useContext(StoreContext);return React.createElement(ConsoleWrap,{scrollYOffset:null==n?void 0:n.options.scrollYOffset,shaking:t,className:r,"data-cy":"console",fullWidth:null==a?void 0:a.width},o)}function AuthPanelHook(e){const{fieldApi:t,render:r,userProps:o}=useField(Object.assign({},e)),{setValue:s}=t,{children:a}=o;return r(React.createElement(React.Fragment,null,a(s)))}
+//# sourceMappingURL=Console.js.map

package/lib-esm/components/console/ConsoleLazy.d.ts

@@ -0,0 +1,2 @@
+import type { ConsoleProps } from './Console';
+export declare function Console(props: ConsoleProps): JSX.Element;

package/lib-esm/components/console/ConsoleLazy.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,o,n){return new(o||(o=Promise))((function(s,r){function i(e){try{l(n.next(e))}catch(e){r(e)}}function a(e){try{l(n.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?s(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(i,a)}l((n=n.apply(e,t||[])).next())}))};import React,{useContext,useState,useEffect}from"react";import{useDimensions}from"../../hooks";import{CodeHeader}from"../Panel";import{StoreContext}from"../../redoc-lib";import{ConsoleWrap}from"./styled";export function Console(e){const[t,o]=useState({}),n=useContext(StoreContext),[s]=useDimensions(e.rootElement);return useEffect((()=>{(()=>{__awaiter(this,void 0,void 0,(function*(){const e=yield import("./Console");o({Console:e.Console})}))})()}),[]),t.Console?React.createElement(t.Console,Object.assign({},e)):React.createElement(ConsoleWrap,{scrollYOffset:null==n?void 0:n.options.scrollYOffset,className:e.className,fullWidth:null==s?void 0:s.width},React.createElement(CodeHeader,null,"Loading..."))}
+//# sourceMappingURL=ConsoleLazy.js.map

package/lib-esm/components/console/ConsoleTabs/ConsoleTabs.d.ts

@@ -0,0 +1,6 @@
+export interface ConsoleTabsProps {
+    onChange: (activeTab: number) => void;
+    active: number;
+    hasResponse: boolean;
+}
+export declare function ConsoleTabs({ onChange, active, hasResponse }: ConsoleTabsProps): JSX.Element;

package/lib-esm/components/console/ConsoleTabs/ConsoleTabs.js

@@ -0,0 +1,2 @@
+import React from"react";import{TabsWrap,Tab}from"./styled";export function ConsoleTabs({onChange:e,active:t,hasResponse:a}){return React.createElement(TabsWrap,null,React.createElement(Tab,{onClick:()=>e(0),active:0===t},a?"Edit Request":"Request"),React.createElement(Tab,{onClick:()=>a&&e(1),active:1===t,disabled:!a}," ","Response"," "))}
+//# sourceMappingURL=ConsoleTabs.js.map

package/lib-esm/components/console/ConsoleTabs/index.d.ts

@@ -0,0 +1,2 @@
+export { ConsoleTabs } from './ConsoleTabs';
+export type { ConsoleTabsProps } from './ConsoleTabs';

package/lib-esm/components/console/ConsoleTabs/index.js

@@ -0,0 +1,2 @@
+export{ConsoleTabs}from"./ConsoleTabs";
+//# sourceMappingURL=index.js.map

package/lib-esm/components/console/ConsoleTabs/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const TabsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tab: import("styled-components").StyledComponent<"button", any, {
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/lib-esm/components/console/ConsoleTabs/styled.js

@@ -0,0 +1,48 @@
+import styled,{css}from"styled-components";export const TabsWrap=styled.div`
+  display: flex;
+  font-size: 12px;
+  button {
+    margin: 0;
+  }
+`;export const Tab=styled.button`
+  outline: none;
+  border: none;
+  background-color: var(--panel-try-it-tabs-background-color);
+  text-align: center;
+  cursor: pointer;
+  color: var(--panel-try-it-tabs-text-color);
+  min-width: 80px;
+  min-height: 30px;
+  border-radius: var(--border-radius);
+  font-size: var(--panel-try-it-tabs-font-size);
+  font-family: var(--panel-try-it-tabs-font-family);
+  font-weight: var(--panel-try-it-tabs-font-weight);
+  padding: 0 10px;
+  border-bottom: 4px solid var(--panel-try-it-tabs-border-color);
+
+  &:first-child {
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+  }
+
+  &:last-child {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--panel-try-it-tabs-hover-border-color);
+    background-color: var(--panel-try-it-tabs-hover-background-color);
+  }
+
+  ${({active:r})=>r&&css`
+        border-color: var(--panel-try-it-tabs-active-border-color);
+        background-color: var(--panel-try-it-tabs-active-background-color);
+      `||""}
+
+  ${({disabled:r})=>r&&css`
+        cursor: default;
+        border-color: var(--panel-try-it-tabs-disables-border-color)
+        background-color: var(--panel-try-it-tabs-disabled-background-color);
+        color: var(--panel-try-it-tabs-disabled-text-color);
+      `||""}
+`;
+//# sourceMappingURL=styled.js.map

package/lib-esm/components/console/OAuth2Flow.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { ChangeEvent, Context } from 'react';
+import type { FormApi, FormState } from 'informed';
+import type { InputActionButtonProps } from '../common/TextField';
+import type { SecurityDetails } from '../../types';
+import type { RedocProNormalizedOptions } from '../../services';
+export interface OAuth2FlowProps {
+    authorizationUrl: string;
+    tokenUrl?: string;
+    usePkce?: {
+        disableManualConfiguration: boolean;
+        hideClientSecretInput: boolean;
+    };
+    authCorsProxyUrl: Maybe<string>;
+    scopes: string[];
+    server: string;
+    id: string;
+    form: FormState;
+    formApi: FormApi;
+    flow: 'implicit' | 'authorizationCode';
+    tokenEndpointAuthMethod?: string | string[];
+    clientId?: string;
+    defaultValues?: SecurityDetails;
+}
+interface OAuth2FlowState {
+    error: string | null;
+    loading: boolean;
+    showPkceOptions: boolean;
+    codeVerifier?: string;
+    codeChallenge?: string;
+    validCodeChallenge?: string;
+}
+export declare class OAuth2Flow extends React.Component<OAuth2FlowProps, OAuth2FlowState> {
+    static contextType: Context<RedocProNormalizedOptions>;
+    context: RedocProNormalizedOptions;
+    state: OAuth2FlowState;
+    get values(): {
+        client_id: string;
+        client_secret: string;
+        scopes: string[];
+        token: {
+            access_token: string;
+            token_type: string;
+        };
+    };
+    get errors(): GenericObject;
+    get pkceInputActionButtonProps(): InputActionButtonProps | undefined;
+    componentDidMount(): void;
+    handleAuthorize(_authorizationUrl: string): void;
+    handleLogout(): void;
+    handleCancel(): void;
+    clearToken: () => void;
+    togglePkceOptions: () => void;
+    handleCodeVerifierChange: ({ target: { value: codeVerifier }, }: ChangeEvent<HTMLInputElement>) => Promise<void>;
+    render(): JSX.Element;
+}
+export {};

package/lib-esm/components/console/OAuth2Flow.js

@@ -0,0 +1,14 @@
+var __awaiter=this&&this.__awaiter||function(e,t,o,r){return new(o||(o=Promise))((function(i,l){function n(e){try{s(r.next(e))}catch(e){l(e)}}function a(e){try{s(r.throw(e))}catch(e){l(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(n,a)}s((r=r.apply(e,t||[])).next())}))};import React from"react";import styled from"styled-components";import{Button}from"@redocly/theme";import{OptionsContext}from"../../redoc-lib";import{LinearProgress}from"../common/LinearProgress";import{FormControl,FormLabel,FormError,FormWrapper,FormWarning}from"../common/form";import{FormDropdown,FormTextField,TextField}from"../common/TextField";import{Checkbox}from"../common/Checkbox";import{OAuth2,deriveCodeChallenge}from"../../services/OAuth2";import{fromSessionStorage,getSecurityDetailsOptions}from"../../utils";import{isEmptyObject,randString}from"../../services/utils";import{getOAuth2TokenEndpointAuthHeader,normalizeUrlProtocol,validateTokenEndpointMethod}from"./utils";import Scope from"./Scope";function requiredValidator(e){if(!e)return"Field is required"}export class OAuth2Flow extends React.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{error:null,loading:!1,showPkceOptions:!1}}),Object.defineProperty(this,"clearToken",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.props.formApi.setValue(`auth.${this.props.id}.token`,"")}}),Object.defineProperty(this,"togglePkceOptions",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.setState((({showPkceOptions:e})=>({showPkceOptions:!e})))}}),Object.defineProperty(this,"handleCodeVerifierChange",{enumerable:!0,configurable:!0,writable:!0,value:({target:{value:e}})=>__awaiter(this,void 0,void 0,(function*(){const t=yield deriveCodeChallenge(e);this.setState({codeVerifier:e,validCodeChallenge:t})}))})}get values(){var e,t;return(null===(t=null===(e=this.props.form.values)||void 0===e?void 0:e.auth)||void 0===t?void 0:t[this.props.id])||{}}get errors(){var e,t;return(null===(t=null===(e=this.props.form.errors)||void 0===e?void 0:e.auth)||void 0===t?void 0:t[this.props.id])||{}}get pkceInputActionButtonProps(){if(void 0!==this.state.codeVerifier&&this.state.codeChallenge!==this.state.validCodeChallenge)return{label:"sync",onClick:()=>{this.state.codeVerifier&&this.setState({codeChallenge:this.state.validCodeChallenge})}}}componentDidMount(){if(this.props.usePkce){const e=randString(43);deriveCodeChallenge(e).then((t=>{this.setState({codeVerifier:e,codeChallenge:t,validCodeChallenge:t})}))}}handleAuthorize(e){if(!e)return;this.props.formApi.validate();const{flow:t,usePkce:o,id:r,tokenUrl:i,authCorsProxyUrl:l,tokenEndpointAuthMethod:n}=this.props;if(!isEmptyObject(this.errors))return;this.setState({loading:!0,error:null});const a=l?l+normalizeUrlProtocol(e):e,s=l&&i?l+normalizeUrlProtocol(i):i,c=this.props.formApi.getValue(`auth.${r}.scopes`),u={authorizationUrl:a.startsWith("http")?a:this.props.server+a,clientId:this.values.client_id,scopes:c,redirectUri:this.context.oAuth2RedirectURI,routingBasePath:this.context.routingBasePath,successCallback:e=>{this.props.formApi.setValue(`auth.${this.props.id}.token`,e),this.setState({loading:!1,error:null})},errorCallback:e=>{this.setState({loading:!1,error:(null==e?void 0:e.message)||"Failed to retrieve the access token"})}};"implicit"===t&&OAuth2.authorizeImplicit(u),validateTokenEndpointMethod(n)?"authorizationCode"===t&&OAuth2.authorizeAuthorizationCode(Object.assign(Object.assign(Object.assign({},u),{tokenUrl:(null==s?void 0:s.startsWith("http"))?s:this.props.server+s,clientSecret:this.values.client_secret,extraHeaders:getOAuth2TokenEndpointAuthHeader({authMethod:n,clientId:this.values.client_id,clientSecret:this.values.client_secret})}),o&&{codeVerifier:this.state.codeVerifier,codeChallenge:this.state.codeChallenge})):console.log(`Unsupported token endpoint auth method: ${n}`)}handleLogout(){this.clearToken(),this.setState({error:null})}handleCancel(){this.setState({loading:!1,error:null}),OAuth2.clearRedirectData(this.props.flow)}render(){const{error:e,loading:t}=this.state,{id:o,scopes:r,authorizationUrl:i,flow:l,usePkce:n,defaultValues:a}=this.props;if(!i)return React.createElement(FormError,null,"No flow info");let s=fromSessionStorage(`auth.${o}.token`)||JSON.stringify(null==a?void 0:a.token);s=s?JSON.parse(s):"";const c=getSecurityDetailsOptions(o,"client_id"),u={field:`auth.${o}.client_id`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${o}.client_id`)||this.props.clientId||(null==a?void 0:a.client_id),initValue:fromSessionStorage(`auth.${o}.client_id`)||this.props.clientId||(null==a?void 0:a.client_id),placeholder:"Your OAuth2 app Client ID",validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement("div",null,React.createElement(FormWrapper,null,React.createElement(FormControl,null,React.createElement(FormLabel,null," Client ID: "),c?React.createElement(FormDropdown,Object.assign({},u,{options:c})):React.createElement(FormTextField,Object.assign({},u,{"data-cy":"client-id-input",panel:"try-it"}))),"authorizationCode"===l&&React.createElement(React.Fragment,null,(!(null==n?void 0:n.hideClientSecretInput)||!n)&&React.createElement(FormControl,null,React.createElement(FormLabel,null,"Client Secret:"),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${o}.client_secret`,initialValue:fromSessionStorage(`auth.${o}.client_secret`)||(null==a?void 0:a.client_secret),validateOnBlur:!0,validateOnChange:!0,panel:"try-it","data-cy":"client-secret-input"})),n&&!n.disableManualConfiguration&&React.createElement(PkceOptionsWrapper,null,React.createElement(Checkbox,{id:"pkce-opitons-toggle",label:"Configure PKCE manually",checked:this.state.showPkceOptions,onChange:this.togglePkceOptions,"data-cy":"pkce-options-toggle"}),this.state.showPkceOptions&&React.createElement(PkceDetails,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Verifier"),React.createElement(TextField,{fullWidth:!0,value:this.state.codeVerifier,onChange:this.handleCodeVerifierChange,panel:"try-it","data-cy":"code-verifier-input"})),React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Challenge"),React.createElement(TextField,{fullWidth:!0,value:this.state.codeChallenge,onChange:({target:{value:e}})=>{this.setState({codeChallenge:e})},inputActionButton:this.pkceInputActionButtonProps,panel:"try-it","data-cy":"code-challenge-input"}))))),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${o}.token`,type:"hidden",initialValue:s,panel:"try-it"}),React.createElement(Scope,{id:o,scopes:r}),this.values.token&&this.values.token.access_token?React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(TextField,{disabled:!0,type:"password",fullWidth:!0,value:this.values.token.access_token,panel:"try-it"})):null),React.createElement(ButtonsWrapper,null,this.values.token&&this.values.token.access_token?React.createElement(Button,{fullWidth:!0,onClick:()=>{this.handleLogout()}},"Log out"):t?React.createElement(React.Fragment,null,React.createElement(Button,{fullWidth:!0,onClick:()=>{this.handleCancel()}},"Cancel"),React.createElement(LinearProgress,null)):React.createElement(Button,{fullWidth:!0,disabled:!isEmptyObject(this.errors),onClick:()=>{this.handleAuthorize(i)}},"Authorize")),t||e||!this.values.token||!this.values.token.access_token&&React.createElement(FormWrapper,null,React.createElement(FormControl,null,t?React.createElement(FormWarning,null,"Please, finish your authorization flow or cancel authorization."):e?React.createElement(React.Fragment,null,React.createElement(OriginalErrorMessage,null,React.createElement(FormError,null,e))):this.values.token&&this.values.token.access_token?null:React.createElement(FormWarning,null," No Access Token. Please, Authorize. "))))}}Object.defineProperty(OAuth2Flow,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:OptionsContext});const OriginalErrorMessage=styled.div`
+  font-family: var(--font-family-monospaced);
+  margin-top: 10px;
+  line-height: 1;
+  padding-left: 10px;
+  border-left: 1px solid gray;
+`,ButtonsWrapper=styled.div`
+  margin-bottom: 15px;
+`,PkceOptionsWrapper=styled.div`
+  padding: 8px 0 20px;
+`,PkceDetails=styled.div`
+  padding: 4px 0;
+`;
+//# sourceMappingURL=OAuth2Flow.js.map

package/lib-esm/components/console/OAuth2TokenInput.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { SecurityDetails } from '../../types';
+export interface OAuth2TokenInputProps {
+    flow: {
+        refreshUrl?: string;
+        'x-tokenEndpointAuthMethod'?: 'none' | 'client_secret_basic' | string;
+        scopes: Record<string, string>;
+        tokenUrl: string;
+    };
+    authCorsProxyUrl: Maybe<string>;
+    server: string;
+    id: string;
+    form: {
+        values: any;
+        errors: any;
+    };
+    formApi: any;
+    clientId?: string;
+    defaultValues?: SecurityDetails;
+}
+interface OAuth2TokenInputState {
+    error: string;
+    loading: boolean;
+    tokenMasked: boolean;
+}
+export declare class OAuth2TokenInput extends React.Component<OAuth2TokenInputProps, OAuth2TokenInputState> {
+    state: OAuth2TokenInputState;
+    get values(): GenericObject;
+    get errors(): GenericObject;
+    clearToken: () => void;
+    toggleTokenMask: () => void;
+    requestToken: () => Promise<void>;
+    render(): JSX.Element;
+}
+export default OAuth2TokenInput;