@redocly/openapi-docs 3.0.0-alpha.10 → 3.0.0-alpha.11

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

@@ -0,0 +1,14 @@
+import type { FormApi, FormState } from 'informed';
+import type { OperationModel } from '../../../models';
+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/rightPanel/AuthPanel/types.js

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CodemirrorInputBase, CodemirrorInputProps } from './types';
+import './helpers';
+export declare const CodemirrorInputComponent: ({ fieldState, fieldApi, onChange, onBlur, forwardedRef, id, mode, schema, }: CodemirrorInputProps) => JSX.Element;
+export declare const CodemirrorInput: React.ComponentType<CodemirrorInputBase>;

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

@@ -0,0 +1,2 @@
+import React from"react";import{useMount,useUnmount}from"@redocly/theme";import{asField}from"informed";import{Controlled as CodeMirror}from"react-codemirror2-react-17";import{MediaTypes}from"../../../constants";import"./helpers";import{CodeMirrorStyles}from"./styled";export const CodemirrorInputComponent=({fieldState:e,fieldApi:t,onChange:o,onBlur:r,forwardedRef:n,id:m,mode:a,schema:i})=>{let s;const c=(e,t)=>{/^[a-zA-Z0-9_":]$/.test(t.key)&&s.execCommand("autocomplete")},l=()=>{s.refresh()},d=()=>s.showHint({completeSingle:!0});useMount((()=>{setTimeout((()=>{s.refresh()}),0),document.addEventListener("click",l)})),useUnmount((()=>{document.removeEventListener("click",l)}));const{value:u}=e,{setValue:p,setTouched:f,setError:C}=t;return React.createElement(React.Fragment,null,React.createElement(CodeMirrorStyles,null),React.createElement(CodeMirror,{editorDidMount:e=>{s=e,s.on("keyup",c)},value:u||"",ref:n,onBeforeChange:(e,t,r)=>{p(r),o&&o(r)},onBlur:e=>{f(!1),r&&r(e)},options:{mode:a||MediaTypes.JSON,theme:"material",matchBrackets:!0,autoCloseBrackets:!0,tabSize:2,foldGutter:!0,extraKeys:{"Cmd-Space":d,"Ctrl-Space":d},hintOptions:{id:m,completeSingle:!1,schema:i},lint:{id:m,schema:i,setError:C}}}))};export const CodemirrorInput=asField(CodemirrorInputComponent);
+//# sourceMappingURL=CodemirrorInput.js.map

package/lib-esm/components/rightPanel/CodemirrorInput/helpers.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,r,t,o){return new(t||(t=Promise))((function(i,n){function a(e){try{s(o.next(e))}catch(e){n(e)}}function c(e){try{s(o.throw(e))}catch(e){n(e)}}function s(e){var r;e.done?i(e.value):(r=e.value,r instanceof t?r:new t((function(e){e(r)}))).then(a,c)}s((o=o.apply(e,r||[])).next())}))};import*as CodeMirror from"codemirror";import{TextDocument,getLanguageService}from"@redocly/vscode-json-languageservice";import"codemirror/mode/javascript/javascript";import"codemirror/addon/edit/matchbrackets";import"codemirror/addon/lint/lint";import"codemirror/addon/hint/show-hint";import"codemirror/addon/edit/closebrackets";import"codemirror/addon/search/searchcursor";import"codemirror/lib/codemirror.css";import"codemirror/theme/material.css";import"codemirror/addon/lint/lint.css";import"codemirror/addon/hint/show-hint.css";const serv=getLanguageService({});CodeMirror.registerHelper("lint","json",(function(e,r){return __awaiter(this,void 0,void 0,(function*(){const{schema:t,setError:o}=r;serv.configure({validate:!0,schemas:[{uri:"stub://"+r.id,fileMatch:["*"],schema:t}]});const i=TextDocument.create(r.id+".json","json",0,e),n=serv.parseJSONDocument(i),a=yield serv.doValidation(i,n);return a.length?o&&o(a[0].message):o&&o(void 0),a.map((e=>({from:CodeMirror.Pos(e.range.start.line,e.range.start.character),to:CodeMirror.Pos(e.range.end.line,e.range.end.character),message:e.message})))}))})),CodeMirror.registerHelper("hint","json",((e,r)=>__awaiter(void 0,void 0,void 0,(function*(){const t=r.schema;if(!t)return;serv.configure({validate:!0,schemas:[{uri:"stub://"+r.id,fileMatch:["*"],schema:t}]});const o=e.getDoc().getCursor(),i=e.getTokenAt(o),n=TextDocument.create(r.id+".json","json",0,e.getValue()),a=serv.parseJSONDocument(n),c=yield serv.doComplete(n,{line:o.line,character:o.ch},a);let s=c?c.items.map((e=>({text:e.insertText,displayText:e.label,filter:e.filterText||e.label,from:{line:e.textEdit.range.start.line,ch:e.textEdit.range.start.character},to:{line:e.textEdit.range.end.line,ch:e.textEdit.range.end.character},hint:(e,r,t)=>{const o="_$__REDOC_CURSOR_HERE";let i=t.text.replace(/(\$1|\${1:[^}]+})/,o)||"";if(i=i.replace(/(\$\d+|\${[^}]+})/g,"")||"",e.setSelection(t.from,t.to),i.indexOf("\n")>-1){const r=e.getLine(e.getCursor().line).search(/(\S|$)/);i=i.replace(/\n/g,"\n"+(e=>{let r="";for(;e--;)r+=" ";return r})(r))}e.replaceSelection(i);const n=e.getSearchCursor(o,t.from);n.findNext()&&(e.setCursor(n.from()),n.replace(""))}}))):[];return/(property|string)/.test(i.type||"")&&(s=s.filter((e=>e.filter.replace(/(^"|"$)/g,"").startsWith(i.string.replace(/(^"|"$)/g,""))))),{from:CodeMirror.Pos(o.line,i.start),to:CodeMirror.Pos(o.line,o.ch),list:s}}))));
+//# sourceMappingURL=helpers.js.map

package/lib-esm/components/rightPanel/CodemirrorInput/index.d.ts

@@ -0,0 +1 @@
+export { CodemirrorInput } from './CodemirrorInput';

package/lib-esm/components/rightPanel/CodemirrorInput/index.js

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

package/lib-esm/components/rightPanel/CodemirrorInput/styled.d.ts

@@ -0,0 +1 @@
+export declare const CodeMirrorStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/lib-esm/components/rightPanel/CodemirrorInput/styled.js

@@ -0,0 +1,50 @@
+import{createGlobalStyle}from"styled-components";export 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);
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/lib-esm/components/rightPanel/CodemirrorInput/types.d.ts

@@ -0,0 +1,22 @@
+import type { Controlled as CodeMirror } from 'react-codemirror2-react-17';
+import type { FieldApi, FieldState } from 'informed';
+import type { LegacyRef } from 'react';
+import type { OpenAPISchema, Referenced } from 'src/types/open-api';
+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;
+}

package/lib-esm/components/rightPanel/CodemirrorInput/types.js

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

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

@@ -0,0 +1,3 @@
+import type { ConsoleProps } from './types';
+export declare const ConsoleComponent: ({ operation, store, onResponse, className, rootElement, properties, securityDefaults, onClose, }: ConsoleProps) => JSX.Element;
+export declare const Console: ({ operation, store, onResponse, className, rootElement, properties, securityDefaults, onClose, }: ConsoleProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,o,s){return new(o||(o=Promise))((function(r,n){function a(e){try{c(s.next(e))}catch(e){n(e)}}function i(e){try{c(s.throw(e))}catch(e){n(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,i)}c((s=s.apply(e,t||[])).next())}))},__rest=this&&this.__rest||function(e,t){var o={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(o[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(o[s[r]]=e[s[r]])}return o};import{observer}from"mobx-react";import Swagger from"swagger-client";import React,{useEffect,useState,useRef,useCallback}from"react";import{useMount}from"@redocly/theme";import{unescapeFormId}from"../../../utils";import{StyledCodeHeader}from"../../Panel";import{isFileUploadMime}from"../../common/FileUpload/helper";import{AnalyticsEventType}from"../../../events";import{getFileNameFromHeaders,getParameters,makeRequestInterceptor,unescapeQueryParams,updateStorage}from"../utils";import{ResponsePanel}from"../ResponsePanel";import{ConsoleTabs}from"../ConsoleTabs";import{ActionPanel}from"../ActionPanel";import{Request}from"./Request";import{CloseButton,ConsoleBody}from"../styled";import{ConsoleWrapper}from"./ConsoleWrapper";import{usePrevious}from"../../../hooks";function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}export const ConsoleComponent=({operation:e,store:t,onResponse:o,className:s,rootElement:r,properties:n,securityDefaults:a,onClose:i})=>{let c=useRef();const[l,u]=useState(e.activeServer),[p,d]=useState(0),[m,v]=useState(!1),[y,h]=useState(!1),[f,b]=useState({values:{path:getParameters(e.parameters,"path"),cookie:getParameters(e.parameters,"cookie"),header:getParameters(e.parameters,"header"),query:getParameters(e.parameters,"query")}}),[g,O]=useState(),[S,j]=useState(),[C,P]=useState(),[R,w]=useState(),I=usePrevious(e),q=useCallback((t=>{var{values:o}=t,s=__rest(t,["values"]);const r=Object.assign(Object.assign({},s),{values:Object.assign(Object.assign({},o),{query:unescapeQueryParams(o.query||{})})});b(r),updateStorage(r),e.setRequestValues(o)}),[e]);useMount((()=>__awaiter(void 0,void 0,void 0,(function*(){var o;const s=yield t.dereferenceSpecForTryIt(e);O(s),null===(o=c.current)||void 0===o||o.setValues({})})))),useEffect((()=>{I!==e&&(w(void 0),P(void 0),d(0))}),[e,I]);const E=!(!R&&!C);return React.createElement(ConsoleWrapper,{shaking:y,className:s,rootElement:r},React.createElement(StyledCodeHeader,null,React.createElement(ConsoleTabs,{active:p,hasResponse:E,onChange:e=>{d(e)}}),i&&React.createElement(CloseButton,{onClick:i}," ✕ ")),React.createElement(ConsoleBody,{hidden:0!==p,"data-cy":"console-request-body"},React.createElement(Request,{operation:e,properties:n,securityDefaults:a,form:f,resolvedRawSpec:g,server:l,formApi:c.current,setFormApi:(e,t=e.getState())=>{var{values:o}=t,s=__rest(t,["values"]);c.current=e,setTimeout((()=>{b(Object.assign(Object.assign({},s),{values:Object.assign(Object.assign({},o),{query:unescapeQueryParams(o.query||{})})}))}),0)},handleChange:q,handleServerChange:t=>{u(t),e.setActiveServer(t)}})),React.createElement(ConsoleBody,{hidden:1!==p,"data-cy":"console-response-body"},React.createElement(ResponsePanel,{response:R,error:C,time:S}),";"),React.createElement(ActionPanel,{hasResponse:E,params:f.values,operation:e,loading:m,execute:()=>__awaiter(void 0,void 0,void 0,(function*(){var s,r,n,a,i,u,p,m,y;const{values:b,invalid:O}=(null===(s=null==c?void 0:c.current)||void 0===s?void 0:s.getState())||f||{};if(null===(r=c.current)||void 0===r||r.submitForm(),O)return h(!0),setTimeout((()=>h(!1)),1e3),void(null===(a=null===(n=null==t?void 0:t.options.events)||void 0===n?void 0:n.tryItSent)||void 0===a||a.call(n,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:e.operationId,operationPath:e.path,operationHttpVerb:e.httpVerb,operationSummary:e.description}));const{servers:S,requestBody:C}=e,R=C&&C.content&&C.content.active&&C.content.active.name||"";let I=b.body;if(/json/.test(R))try{I=JSON.parse(I)}catch(e){console.error(e)}v(!0);const q=g,E=(e.httpVerb||"").toLowerCase();if(!S)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 T=S.find((e=>l.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url))),_=Date.now(),F=!!window.document.documentMode;let A,k=b.auth;if(b.auth){const e=Object.keys(b.auth)[0],t=unescapeFormId(e);A=Object.assign(Object.assign({},q),{components:Object.assign(Object.assign({},null==q?void 0:q.components),{securitySchemes:Object.assign(Object.assign({},null==q?void 0:q.components.securitySchemes),{[t]:Object.assign(Object.assign({},null==q?void 0:q.components.securitySchemes[t]),{type:"openIdConnect"===(null==q?void 0:q.components.securitySchemes[t].type)?"oauth2":null==q?void 0:q.components.securitySchemes[t].type})})})}),k=Object.assign(Object.assign({},k),{[t]:k[e]})}else A=Object.assign({},q);A.servers=S;const x=t.options.corsProxyUrl;x&&S.length&&(A.servers=S.map((e=>Object.assign(Object.assign({},e),{url:x+normalizeUrlProtocol(e.url)}))),A.paths=Object.assign(Object.assign({},A.paths),{[e.path]:Object.assign(Object.assign({},A.paths[e.path]),{[E]:Object.assign(Object.assign({},A.paths[e.path][E]),{servers:void 0}),servers:void 0})}));const V=(null===(u=null===(i=null==C?void 0:C.content)||void 0===i?void 0:i.active)||void 0===u?void 0:u.name)||null;if(V&&I&&isFileUploadMime(V)){const e=Object.values(I);I=e.length>1?e:e[0]}const B={userFetch:F&&require("cross-fetch").fetch,server:x?x+normalizeUrlProtocol(T.url):T.url,serverVariables:T.variables,spec:A,pathName:e.path,method:e.httpVerb,parameters:Object.assign(Object.assign(Object.assign(Object.assign({},b.path),b.query),b.header),b.cookie),securities:{authorized:k},requestBody:I,requestContentType:V,responseContentType:(null===(p=b.header)||void 0===p?void 0:p.Accept)||null,requestInterceptor:makeRequestInterceptor(t.options,e,null==k?void 0:k.Authorization)};try{const s=yield Swagger.execute(B),r=null==s?void 0:s.data;r instanceof Blob&&(isFileUploadMime(r.type)&&(s.fileInfo={rawData:r,fileName:getFileNameFromHeaders(s.headers)}),s.data=yield r.text()),null==o||o({request:B,response:s}),w(s),P(void 0)}catch(e){e&&e.response&&e.response.data instanceof Blob&&(e.response.data=yield e.response.data.text(),null==o||o({request:B,response:e.response})),w(void 0),P(e)}finally{v(!1),d(1),j(Date.now()-_),null===(y=null===(m=null==t?void 0:t.options.events)||void 0===m?void 0:m.tryItSent)||void 0===y||y.call(m,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:e.operationId,operationPath:e.path,operationHttpVerb:e.httpVerb,operationSummary:e.description})}}))}))};export const Console=observer(ConsoleComponent);
+//# sourceMappingURL=Console.js.map

package/lib-esm/components/rightPanel/Console/ConsoleLazy.d.ts

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

package/lib-esm/components/rightPanel/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"../../../context";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/rightPanel/Console/ConsoleWrapper.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+export declare const ConsoleWrapper: (props: PropsWithChildren<{
+    shaking: boolean;
+    className?: string;
+    rootElement?: HTMLElement | null;
+}>) => JSX.Element;

package/lib-esm/components/rightPanel/Console/ConsoleWrapper.js

@@ -0,0 +1,2 @@
+import React,{useContext}from"react";import{observer}from"mobx-react";import{ConsoleWrap}from"../styled";import{useDimensions}from"../../../hooks";import{StoreContext}from"../../../context";const ConsoleWrapperComponent=o=>{const{shaking:e,className:t,children:r,rootElement:s}=o,[n]=useDimensions(s),l=useContext(StoreContext);return React.createElement(ConsoleWrap,{scrollYOffset:null==l?void 0:l.options.scrollYOffset,shaking:e,className:t,"data-cy":"console",fullWidth:null==n?void 0:n.width},r)};export const ConsoleWrapper=observer(ConsoleWrapperComponent);
+//# sourceMappingURL=ConsoleWrapper.js.map

package/lib-esm/components/rightPanel/Console/Request.d.ts

@@ -0,0 +1,12 @@
+export declare const Request: ({ operation, properties, securityDefaults, form, resolvedRawSpec, server, formApi, setFormApi, handleChange, handleServerChange, }: {
+    operation: any;
+    properties: any;
+    securityDefaults: any;
+    form: any;
+    resolvedRawSpec: any;
+    server: any;
+    formApi: any;
+    setFormApi: any;
+    handleChange: any;
+    handleServerChange: any;
+}) => JSX.Element;

package/lib-esm/components/rightPanel/Console/Request.js

@@ -0,0 +1,2 @@
+import React,{useContext}from"react";import{observer}from"mobx-react";import{Form,useField}from"informed";import{requiredValidator}from"../utils";import{JsonPointer}from"../../../utils";import{OAuth2}from"../../../services/OAuth2";import{l}from"../../../services";import{Accordion}from"../../Panel";import{ServersDropdown}from"../ServersDropdown";import{TryItPanel}from"../TryItPanel";import{RequestBody}from"../RequestBody";import{RenderHook}from"../../RenderHook";import{OperationParameters}from"../../OperationParameters";import{OptionsContext}from"../../../context";import{AuthPanel}from"../AuthPanel";const RequestComponent=({operation:e,properties:r,securityDefaults:t,form:o,resolvedRawSpec:a,server:n,formApi:i,setFormApi:s,handleChange:u,handleServerChange:c})=>{const d=o.errors||{},m=d.path||d.cookie||d.header||d.query,{hooks:p,authCorsProxyUrl:h}=useContext(OptionsContext),v=a&&JsonPointer.get(a,e.pointer);let y=o.values&&o.values.auth&&Object.keys(o.values.auth)[0];y&&o.values.auth[y]||(y=void 0),!y||void 0===o.values.auth[y].token&&void 0===o.values.auth[y].client_id&&void 0===o.values.auth[y].client_secret||o.values.auth[y].token&&o.values.auth[y].token.access_token||(y=void 0),y&&null!=o.values.auth[y].username&&(o.values.auth[y].username&&o.values.auth[y].password||(y=void 0));const f=e.parameters||[];return!a&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(Form,{onChange:u,getApi:s,style:{flex:1,display:"flex",flexDirection:"column",margin:0}},React.createElement(ServersDropdown,{operation:e,onChange:c}),React.createElement(Accordion,{initialActiveIdx:e.security.length&&y?1:0},e.security.length&&i&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",error:!y&&!!d.auth,success:!!y,renderChildrenHidden:!0},(null==p?void 0:p.ReplaceTryItSecurityPanel)?React.createElement(AuthPanelWrapper,{field:"auth",validate:requiredValidator},(r=>React.createElement(RenderHook,{Hook:null==p?void 0:p.ReplaceTryItSecurityPanel,props:{server:n,operation:e,onChange:r,OAuth2:OAuth2}}))):React.createElement(AuthPanel,{formApi:i,form:o,operation:e,activeServer:n.url,authCorsProxyUrl:h,securityDefaults:t}))||null,e.requestBody&&i&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",error:!!d.body,renderChildrenHidden:!0},React.createElement(RequestBody,{validate:allowBodyErrors,formApi:i,body:e.requestBody,id:e.id,resolvedBody:null==v?void 0:v.requestBody,properties:r}))||null,f.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:m,renderChildrenHidden:!0},React.createElement(OperationParameters,{operation:e,values:o.values,errors:o.errors||{}}))||null))};function AuthPanelWrapper(e){const{fieldApi:r,render:t,userProps:o}=useField(Object.assign({},e)),{setValue:a}=r,{children:n}=o;return t(React.createElement(React.Fragment,null,n(a)))}function allowBodyErrors(){}export const Request=observer(RequestComponent);
+//# sourceMappingURL=Request.js.map

package/lib-esm/components/rightPanel/Console/index.d.ts

@@ -0,0 +1 @@
+export { Console } from './ConsoleLazy';

package/lib-esm/components/rightPanel/Console/index.js

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

package/lib-esm/components/rightPanel/Console/types.d.ts

@@ -0,0 +1,18 @@
+import type { ProStore } from '../../../services';
+import type { OperationModel } from '../../../models';
+import type { SecurityDetails } from '../../../types';
+import type { OpenApiResponseData } from '../types';
+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;
+}

package/lib-esm/components/rightPanel/Console/types.js

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

package/lib-esm/components/rightPanel/OAuth2Flow/Error.d.ts

@@ -0,0 +1,7 @@
+export declare const Error: ({ token, loading, error, }: {
+    token: {
+        access_token: string;
+    };
+    loading: boolean;
+    error: string | null;
+}) => JSX.Element | null;

package/lib-esm/components/rightPanel/OAuth2Flow/Error.js

@@ -0,0 +1,2 @@
+import React from"react";import{FormError,FormWarning}from"../../common/form";import{OriginalErrorMessage}from"./styled";export const Error=({token:r,loading:e,error:o})=>e?React.createElement(FormWarning,null,"Please, finish your authorization flow or cancel authorization."):o?React.createElement(OriginalErrorMessage,null,React.createElement(FormError,null,o)):(null==r?void 0:r.access_token)?null:React.createElement(FormWarning,null," No Access Token. Please, Authorize. ");
+//# sourceMappingURL=Error.js.map

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

@@ -0,0 +1,2 @@
+import type { OAuth2FlowProps } from './types';
+export declare const OAuth2Flow: ({ usePkce, form, id, formApi, flow, tokenUrl: _tokenUrl, authCorsProxyUrl, tokenEndpointAuthMethod, server, scopes, authorizationUrl, defaultValues, clientId, }: OAuth2FlowProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,o,n){return new(o||(o=Promise))((function(l,r){function a(e){try{c(n.next(e))}catch(e){r(e)}}function i(e){try{c(n.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?l(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,i)}c((n=n.apply(e,t||[])).next())}))};import React,{useEffect,useState,useContext}from"react";import{Button}from"@redocly/theme";import{ButtonsWrapper,PkceOptionsWrapper,PkceDetails}from"./styled";import{LinearProgress}from"../../common/LinearProgress";import{FormControl,FormLabel,FormError,FormWrapper}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";import{Error}from"./Error";import{OptionsContext}from"../../../context";function requiredValidator(e){if(!e)return"Field is required"}export const OAuth2Flow=({usePkce:e,form:t,id:o,formApi:n,flow:l,tokenUrl:r,authCorsProxyUrl:a,tokenEndpointAuthMethod:i,server:c,scopes:u,authorizationUrl:d,defaultValues:s,clientId:m})=>{var p,h,f,v;const{oAuth2RedirectURI:g,routingBasePath:E}=useContext(OptionsContext),[C,k]=useState(null),[R,F]=useState(!1),[S,y]=useState(!1),[O,b]=useState(void 0),[_,x]=useState(void 0),[A,W]=useState(void 0),P=(null===(h=null===(p=t.values)||void 0===p?void 0:p.auth)||void 0===h?void 0:h[o])||{},T=(null===(v=null===(f=t.errors)||void 0===f?void 0:f.auth)||void 0===v?void 0:v[o])||{},w=void 0!==O&&_!==A?{label:"sync",onClick:()=>{O&&x(A)}}:void 0;useEffect((()=>{if(e){const e=randString(43);deriveCodeChallenge(e).then((t=>{b(e),x(t),W(t)}))}}),[e]);const V=()=>{n.setValue(`auth.${o}.token`,"")};if(!d)return React.createElement(FormError,null,"No flow info");let z=fromSessionStorage(`auth.${o}.token`)||JSON.stringify(null==s?void 0:s.token);z=z?JSON.parse(z):"";const B=getSecurityDetailsOptions(o,"client_id"),U={field:`auth.${o}.client_id`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${o}.client_id`)||m||(null==s?void 0:s.client_id),initValue:fromSessionStorage(`auth.${o}.client_id`)||m||(null==s?void 0:s.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: "),B?React.createElement(FormDropdown,Object.assign({},U,{options:B})):React.createElement(FormTextField,Object.assign({},U,{"data-cy":"client-id-input",panel:"try-it"}))),"authorizationCode"===l&&React.createElement(React.Fragment,null,(!(null==e?void 0:e.hideClientSecretInput)||!e)&&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==s?void 0:s.client_secret),validateOnBlur:!0,validateOnChange:!0,panel:"try-it","data-cy":"client-secret-input"})),e&&!e.disableManualConfiguration&&React.createElement(PkceOptionsWrapper,null,React.createElement(Checkbox,{id:"pkce-opitons-toggle",label:"Configure PKCE manually",checked:S,onChange:()=>{y((e=>!e))},"data-cy":"pkce-options-toggle"}),S&&React.createElement(PkceDetails,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Verifier"),React.createElement(TextField,{fullWidth:!0,value:O,onChange:({target:{value:e}})=>__awaiter(void 0,void 0,void 0,(function*(){const t=yield deriveCodeChallenge(e);b(e),W(t)})),panel:"try-it","data-cy":"code-verifier-input"})),React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Challenge"),React.createElement(TextField,{fullWidth:!0,value:_,onChange:({target:{value:e}})=>{x(e)},inputActionButton:w,panel:"try-it","data-cy":"code-challenge-input"}))))),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${o}.token`,type:"hidden",initialValue:z,panel:"try-it"}),React.createElement(Scope,{id:o,scopes:u}),P.token&&P.token.access_token?React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(TextField,{disabled:!0,type:"password",fullWidth:!0,value:P.token.access_token,panel:"try-it"})):null),React.createElement(ButtonsWrapper,null,P.token&&P.token.access_token?React.createElement(Button,{fullWidth:!0,onClick:()=>{V(),k(null)}},"Log out"):R?React.createElement(React.Fragment,null,React.createElement(Button,{fullWidth:!0,onClick:()=>{F(!1),k(null),OAuth2.clearRedirectData(l)}},"Cancel"),React.createElement(LinearProgress,null)):React.createElement(Button,{fullWidth:!0,disabled:!isEmptyObject(T),onClick:()=>{(t=>{if(!t)return;if(n.validate(),!isEmptyObject(T))return;F(!0),k(null);const u=a?a+normalizeUrlProtocol(t):t,d=a&&r?a+normalizeUrlProtocol(r):r,s=n.getValue(`auth.${o}.scopes`),m={authorizationUrl:u.startsWith("http")?u:c+u,clientId:P.client_id,scopes:s,redirectUri:g,routingBasePath:E,successCallback:e=>{n.setValue(`auth.${o}.token`,e),F(!1),k(null)},errorCallback:e=>{F(!1),k((null==e?void 0:e.message)||"Failed to retrieve the access token")}};"implicit"===l&&OAuth2.authorizeImplicit(m),validateTokenEndpointMethod(i)?"authorizationCode"===l&&OAuth2.authorizeAuthorizationCode(Object.assign(Object.assign(Object.assign({},m),{tokenUrl:(null==d?void 0:d.startsWith("http"))?d:c+d,clientSecret:P.client_secret,extraHeaders:getOAuth2TokenEndpointAuthHeader({authMethod:i,clientId:P.client_id,clientSecret:P.client_secret})}),e&&{codeVerifier:O,codeChallenge:_})):console.log(`Unsupported token endpoint auth method: ${i}`)})(d)}},"Authorize")),R||C||!P.token||!P.token.access_token&&React.createElement(Error,{loading:R,error:C,token:P.token}))};
+//# sourceMappingURL=OAuth2Flow.js.map

package/lib-esm/components/rightPanel/OAuth2Flow/index.d.ts

@@ -0,0 +1,2 @@
+export { OAuth2Flow } from './OAuth2Flow';
+export type { OAuth2FlowProps } from './types';

package/lib-esm/components/rightPanel/OAuth2Flow/index.js

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

package/lib-esm/components/rightPanel/OAuth2Flow/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const OriginalErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PkceOptionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PkceDetails: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib-esm/components/rightPanel/OAuth2Flow/styled.js

@@ -0,0 +1,14 @@
+import styled from"styled-components";export const OriginalErrorMessage=styled.div`
+  font-family: var(--font-family-monospaced);
+  margin-top: 10px;
+  line-height: 1;
+  padding-left: 10px;
+  border-left: 1px solid gray;
+`;export const ButtonsWrapper=styled.div`
+  margin-bottom: 15px;
+`;export const PkceOptionsWrapper=styled.div`
+  padding: 8px 0 20px;
+`;export const PkceDetails=styled.div`
+  padding: 4px 0;
+`;
+//# sourceMappingURL=styled.js.map

package/lib-esm/components/rightPanel/OAuth2Flow/types.d.ts

@@ -0,0 +1,20 @@
+import type { SecurityDetails } from '../../../types';
+import type { FormApi, FormState } from 'informed';
+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;
+}

package/lib-esm/components/rightPanel/OAuth2Flow/types.js

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

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

@@ -0,0 +1,21 @@
+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;
+}
+export declare const OAuth2TokenInput: ({ form, id, formApi, server, flow, authCorsProxyUrl, defaultValues, clientId, }: OAuth2TokenInputProps) => JSX.Element;
+export default OAuth2TokenInput;

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

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,o,n){return new(o||(o=Promise))((function(r,l){function i(e){try{c(n.next(e))}catch(e){l(e)}}function a(e){try{c(n.throw(e))}catch(e){l(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(i,a)}c((n=n.apply(e,t||[])).next())}))};import React,{useState}from"react";import{Button}from"@redocly/theme";import{FormControl,FormLabel,FormError,FormWrapper,FormHeader,TokenField,TokenValue,TokenClear,TokenShowHide}from"../common/form";import{fromSessionStorage,getSecurityDetailsOptions,toSessionStorage}from"../../utils";import{OAuth2}from"../../services/OAuth2";import{FormDropdown,FormTextField}from"../common/TextField";import Scope from"./Scope";import{getOAuth2TokenEndpointAuthHeader,normalizeUrlProtocol,validateTokenEndpointMethod}from"./utils";function validateToken(e){if(!e)return"Token is required"}export const OAuth2TokenInput=({form:e,id:t,formApi:o,server:n,flow:r,authCorsProxyUrl:l,defaultValues:i,clientId:a})=>{var c,s,u,d;const[m,p]=useState(""),[h,k]=useState(!1),[f,v]=useState(!0),S=(null===(s=null===(c=null==e?void 0:e.values)||void 0===c?void 0:c.auth)||void 0===s?void 0:s[t])||{},E=(null===(d=null===(u=e.errors)||void 0===u?void 0:u.auth)||void 0===d?void 0:d[t])||{},F=()=>{o.setValue(`auth.${t}.token`,""),toSessionStorage(`auth.${t}.token`,"")},_=Object.keys(r.scopes);let g=fromSessionStorage(`auth.${t}.token`)||JSON.stringify(null==i?void 0:i.token);g=g?JSON.parse(g):"";const T=getSecurityDetailsOptions(t,"client_id"),R={field:`auth.${t}.client_id`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${t}.client_id`)||a||(null==i?void 0:i.client_id),initValue:fromSessionStorage(`auth.${t}.client_id`)||a||(null==i?void 0:i.client_id),placeholder:"Your OAuth2 app Client ID"};return React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,"Client ID:"),T?React.createElement(FormDropdown,Object.assign({},R,{options:T})):React.createElement(FormTextField,Object.assign({},R,{type:"password",panel:"try-it"}))),React.createElement(FormControl,null,React.createElement(FormLabel,null,"Client Secret:"),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${t}.client_secret`,initialValue:fromSessionStorage(`auth.${t}.client_secret`)||(null==i?void 0:i.client_secret),panel:"try-it"})),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${t}.token`,type:"hidden",initialValue:g,validate:validateToken}),React.createElement(Scope,{id:t,scopes:_})),React.createElement(Button,{color:"primary",onClick:()=>__awaiter(void 0,void 0,void 0,(function*(){if(h)return;const e=l&&r.tokenUrl?l+normalizeUrlProtocol(r.tokenUrl):r.tokenUrl;if(E.client_id||E.client_secret)return void console.log("Provide client_id and client_secret");const i=S.client_id,a=S.client_secret;if(!i||!a)return void console.log("Provide client_id and client_secret");k(!0);const c=r["x-tokenEndpointAuthMethod"];validateTokenEndpointMethod(c)?yield OAuth2.authorizeClientCredentials({tokenUrl:e.startsWith("http")?e:n+e,clientId:i,clientSecret:a,scopes:S.scopes,extraHeaders:getOAuth2TokenEndpointAuthHeader({authMethod:c,clientId:i,clientSecret:a}),successCallback:e=>{o.setValue(`auth.${t}.token`,e),k(!1)},errorCallback:e=>{F(),p(e.message),k(!1)}}):console.log(`Unsupported token endpoint auth method: ${c}`)})),blinking:h},h?"Loading...":"Request Token"),React.createElement(FormHeader,null," Access Token "),m?React.createElement(FormError,{style:{marginBottom:"1em"}},"Failed to request token: ",React.createElement("pre",null,m)," "):S.token&&S.token.access_token?React.createElement(TokenField,null,React.createElement(TokenValue,{length:S.token.access_token.length,masked:f},S.token.access_token),React.createElement(TokenShowHide,{onClick:()=>{v((e=>!e))}},f?"Show":"Hide"," "),React.createElement(TokenClear,{onClick:F}," Clear ")):React.createElement(FormError,{style:{marginBottom:"1em"}},"No token"))};export default OAuth2TokenInput;
+//# sourceMappingURL=OAuth2TokenInput.js.map

package/lib-esm/components/rightPanel/OpenIDConnect.d.ts

@@ -0,0 +1,17 @@
+import type { FormApi, FormState } from 'informed';
+import type { SecurityScheme } from '../../models';
+import type { SecurityDetails } from '../../types';
+export interface OpenIDConnectProps {
+    server: string;
+    authCorsProxyUrl: Maybe<string>;
+    id: string;
+    form: FormState;
+    formApi: FormApi;
+    scheme: SecurityScheme;
+    clientId?: string;
+    defaultValues?: SecurityDetails;
+}
+export declare function OpenIDConnect(props: OpenIDConnectProps): JSX.Element;
+export declare function Error({ message }: {
+    message: string;
+}): JSX.Element;

package/lib-esm/components/rightPanel/ParameterArray.d.ts

@@ -0,0 +1,9 @@
+import type { FieldModel } from '../../models';
+interface ParameterArrayProps {
+    name: string;
+    param: FieldModel;
+    place: string;
+    renderParameter: any;
+}
+export declare const ParameterArray: ({ name, param, place, renderParameter, }: ParameterArrayProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import React,{useState}from"react";import{asField}from"informed";import{useMount}from"@redocly/theme";import{TryItDropdown}from"./styled";const ParameterEnumDropdownComponent=({initValue:e,paramEnum:t,fieldApi:r})=>{const[a,o]=useState(),n=t.map(((e,t)=>({idx:t,value:e})));useMount((()=>{if(e)if(Array.isArray(e)){const t=e.length?e[0]:"";o(t),r.setValue(t)}else o(e),r.setValue(e)}));return React.createElement(TryItDropdown,{clearable:!0,fullWidth:!0,variant:"dark",value:a,options:n,handleClear:()=>{r.setValue(""),o("")},onChange:e=>{r.setValue(e.value),o(e.value)}})};export const ParameterEnumDropdown=asField(ParameterEnumDropdownComponent);
+//# sourceMappingURL=ParameterDropdown.js.map

package/lib-esm/components/rightPanel/RequestBody/Body.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BodyProps } from './types';
+export declare const Body: React.FC<BodyProps>;

package/lib-esm/components/rightPanel/RequestBody/Body.js

@@ -0,0 +1,2 @@
+import React,{useCallback}from"react";import{observer}from"mobx-react";import{isRootFileUpload}from"../../common/FileUpload/helper";import{MediaTypes}from"../../../constants";import{ExampleSwitch,useExampleKey}from"../../Samples";import{fromSessionStorage,toSessionStorage}from"../../../utils";import{encodeSample,getStorageExampleKey}from"../utils";import{RequestBodyForm}from"../RequestBodyForm";import{CodemirrorInput}from"../CodemirrorInput";function BodyComponent({mediaType:e,mediaContent:o,properties:a,id:t,resolvedBody:m,formApi:r,getActiveSample:l,validate:n}){const i=e.examples||{},p=Object.keys(i),s=e.schema,d=isRootFileUpload(s||{},e.name)||e.name===MediaTypes.MULTIPART||e.name===MediaTypes.URL_ENCODED,{exampleKey:c}=useExampleKey(e.operation,i),y=fromSessionStorage(getStorageExampleKey(t,e.name,c,i))||encodeSample(i[c],a),u=useCallback(((e="",o="",a=[])=>m=>{toSessionStorage(getStorageExampleKey(t,e,o,a),m)}),[t]),g=useCallback((e=>{null==o||o.activateExampleName(e),r.setValue("body",l(e))}),[r,l,o]),S=useCallback(((e,o)=>{r.setValue(`body.${e}`,o)}),[r]);return React.createElement(React.Fragment,null,p.length&&1!==p.length&&React.createElement(ExampleSwitch,{examples:i,onChange:g,exampleKey:c,panel:"try-it"})||null,d?React.createElement(RequestBodyForm,{mediaType:e,formApi:r,onChange:S}):React.createElement(CodemirrorInput,{id:"body"+t,field:"body",initialValue:y,schema:((null==m?void 0:m.content[e.name])||{}).schema,mode:e.name,validate:n,onChange:u(e.name,c,i)}))}export const Body=observer(BodyComponent);
+//# sourceMappingURL=Body.js.map

package/lib-esm/components/rightPanel/RequestBody/RequestBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { RequestBodyProps } from './types';
+export declare const RequestBody: React.FC<RequestBodyProps>;

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

@@ -0,0 +1,2 @@
+import React,{useCallback,useEffect}from"react";import{observer}from"mobx-react";import merge from"deepmerge";import{DropdownOrLabel}from"../../DropdownOrLabel";import{MediaTypesSwitch}from"../../MediaTypeSwitch";import{arrayMergeStrategy}from"../../../services/utils";import{Dropdown}from"../../common";import{RequestMimeLabel}from"../RequestMimeLabel";import{getStorageExampleKey}from"../utils";import{fromSessionStorage}from"../../../utils";import{Body}from"./Body";function RequestBodyComponent({body:e,formApi:o,resolvedBody:t,properties:r,id:i,validate:a}){var l,n;const m=e.content,d=useCallback((e=>{var o;if(!m||!m.hasSample)return"";const t=null===(o=m.active)||void 0===o?void 0:o.examples;if(!(null==t?void 0:t[e]))return"";const i=null==t?void 0:t[e].value,a=r?merge(i,r,{arrayMerge:arrayMergeStrategy}):i;return JSON.stringify(a,null,2)}),[m,r]),p=null===(l=null==m?void 0:m.operation)||void 0===l?void 0:l.activeExampleName;useEffect((()=>{var e,t;if(null===(e=null==m?void 0:m.operation)||void 0===e?void 0:e.activeMimeName){const e=getStorageExampleKey(i,m.operation.activeMimeName,p,null===(t=null==m?void 0:m.active)||void 0===t?void 0:t.examples);o.setValue("body",fromSessionStorage(e)||d(p||""))}else o.setValue("body",JSON.stringify(r||{},null,2))}),[p,null===(n=null==m?void 0:m.operation)||void 0===n?void 0:n.activeMimeName,null==m?void 0:m.active]);return React.createElement(React.Fragment,null,React.createElement(MediaTypesSwitch,{content:e.content,renderDropdown:e=>React.createElement(DropdownOrLabel,Object.assign({},e,{variant:"dark",fullWidth:!0,Label:RequestMimeLabel,Dropdown:Dropdown}))},(e=>React.createElement(Body,{mediaType:e,mediaContent:m,resolvedBody:t,id:i,properties:r,getActiveSample:d,formApi:o,validate:a}))))}export const RequestBody=observer(RequestBodyComponent);
+//# sourceMappingURL=RequestBody.js.map

package/lib-esm/components/rightPanel/RequestBody/types.d.ts

@@ -0,0 +1,16 @@
+import type { FormApi } from 'informed';
+import type { RequestBodyModel, MediaContentModel, MediaTypeModel } from '../../../models';
+import type { OpenAPIRequestBody } from '../../../types';
+export interface RequestBodyProps {
+    body: RequestBodyModel;
+    resolvedBody: OpenAPIRequestBody;
+    validate: () => string | undefined;
+    formApi: FormApi;
+    id: string;
+    properties: any;
+}
+export interface BodyProps extends Pick<RequestBodyProps, 'resolvedBody' | 'validate' | 'formApi' | 'id' | 'properties'> {
+    mediaType: MediaTypeModel;
+    mediaContent?: MediaContentModel;
+    getActiveSample: (key: string) => string;
+}

package/lib-esm/components/rightPanel/RequestBody/types.js

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

package/lib-esm/components/rightPanel/RequestBodyForm.d.ts

@@ -0,0 +1,8 @@
+import type { FormApi } from 'informed';
+import type { FieldModel, MediaTypeModel, UploadFileType } from '../../models';
+export declare const RequestBodyForm: (props: {
+    mediaType: MediaTypeModel;
+    onChange(key: string, file: UploadFileType): void;
+    formApi?: FormApi<import("informed").FormValues> | undefined;
+}) => JSX.Element | null;
+export declare function getRequestBodyFormFields(mediaType: MediaTypeModel): FieldModel[];

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

@@ -0,0 +1,10 @@
+import React,{useEffect}from"react";import{observer}from"mobx-react";import styled from"styled-components";import{isMultipartFileUploadProperty,isRootFileUpload,mimeTypeToAccept}from"../common/FileUpload/helper";import{FormControl,FormLabel}from"../common/form";import{FileUpload}from"../common/FileUpload";import{FormTextField,getInvertedInputStyles}from"../common/TextField";import{DefinitionTypes}from"../../models";import{MediaTypes}from"../../constants";import{useExampleKey}from"../Samples";export const RequestBodyForm=observer((e=>{var o;const{mediaType:t,onChange:l,formApi:a}=e,n=t.examples||{},{exampleKey:m}=useExampleKey(t.operation,n),r=null===(o=n[m])||void 0===o?void 0:o.rawValue,i=getRequestBodyFormFields(t);useEffect((()=>a&&i.forEach((e=>{var o,t;const l=null==r?void 0:r[e.name],n=null!==(t=null!==(o=e.example)&&void 0!==o?o:null==l?void 0:l.example)&&void 0!==t?t:l,m="object"==typeof n?JSON.stringify(n):n;void 0!==n&&a.setValue("body."+e.name,`${m}`)}))),[m]);const d=t.schema||{};return isRootFileUpload(d,t.name)?React.createElement(FileFormControlWrapper,null,React.createElement(FormControl,null,React.createElement(StyledFileUpload,{fullWidth:!0,id:`body.${t.name}`,name:`body.${t.name}`,accept:mimeTypeToAccept(t.name),schema:d,contentName:t.name,onChange:l}))):d.type===DefinitionTypes.OBJECT||i?React.createElement(FileFormControlWrapper,null,i.map((e=>{const o=e.schema||{contentMediaType:"",type:"",description:""},a=t.name===MediaTypes.MULTIPART&&isMultipartFileUploadProperty(o),n=o.contentMediaType||"",m=a?React.createElement(StyledFileUpload,{fullWidth:!0,id:"body."+e.name,name:"body."+e.name,accept:mimeTypeToAccept(n),multiple:"array"===o.type,schema:o,contentName:e.name,onChange:l}):React.createElement(FormTextField,{fullWidth:!0,id:"body."+e.name,field:"body."+e.name,placeholder:o.description||e.name,panel:"try-it"});return React.createElement(FormControl,{key:e.name},React.createElement(FormLabel,null,e.name,":"),m)}))):(console.warn(`Invalid schema for request body and mime type: "${t.name}"`,d),null)}));export function getRequestBodyFormFields(e){var o,t,l,a,n;return((null===(t=null===(o=e.schema)||void 0===o?void 0:o.oneOf)||void 0===t?void 0:t.length)?(null===(l=e.schema)||void 0===l?void 0:l.oneOf[null===(a=e.schema)||void 0===a?void 0:a.activeOneOf].fields)||[]:(null===(n=e.schema)||void 0===n?void 0:n.fields)||[]).filter((e=>!e.schema.readOnly))}const FileFormControlWrapper=styled.div`
+  > div {
+    margin-top: 10px;
+  }
+`,StyledFileUpload=styled(FileUpload)`
+  ${getInvertedInputStyles("try-it")};
+  ${({inputType:e})=>"password"===e?"padding-right: 40px;":""};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`;
+//# sourceMappingURL=RequestBodyForm.js.map

package/lib-esm/components/rightPanel/ResponseBody.d.ts

@@ -0,0 +1,4 @@
+import type { OpenApiResponseData } from './types';
+export declare function ResponseBody({ response }: {
+    response: OpenApiResponseData;
+}): JSX.Element;

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

@@ -0,0 +1,2 @@
+import*as React from"react";import{JsonViewer,SourceCode}from"@redocly/theme";import{langFromMime}from"../../utils";import{PanelPreCodeBlock,ResponseHeader}from"./styled";import{SourceCodeWithFile}from"../SourceCodeWithFile";export function ResponseBody({response:e}){return React.createElement(React.Fragment,null,React.createElement(ResponseHeader,null," Body: "),getResponseBody(e))}function getResponseBody(e){return e.body?React.createElement(JsonViewer,{data:e.body,jsonSampleExpandLevel:1}):e.fileInfo?React.createElement(SourceCodeWithFile,{fileInfo:e.fileInfo}):null!==e.data?e.data?React.createElement(SourceCode,{lang:langFromMime(e.headers["Content-Type"]||"text/plain"),source:e.data,withCopyButton:!0}):React.createElement(PanelPreCodeBlock,null,React.createElement("i",null,"(no content)")):null}
+//# sourceMappingURL=ResponseBody.js.map

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

@@ -0,0 +1,10 @@
+import React,{useContext,useState}from"react";import styled from"styled-components";import{OptionsContext}from"../../context";import{ResponseHeader,PanelPreCodeBlock}from"./styled";export function ResponseHeadersList({headers:e}){const t=useContext(OptionsContext),[a,o]=useState(!0),{maxResponseHeadersToShowInTryIt:r}=t,n=Object.keys(e),l=!!r&&n.length>r,s=l&&a?[...n].splice(0,r):[...n];return React.createElement(React.Fragment,null,React.createElement(ResponseHeader,null," Headers: "),React.createElement(PanelPreCodeBlock,null,s.map((t=>React.createElement("div",{key:t},React.createElement(HeaderName,null,t,":"),React.createElement("code",null,e[t])))),l&&React.createElement(StyledShowMoreLabel,{onClick:()=>{o(!a)}},a?"Show more...":"Hide headers")))}const HeaderName=styled.strong`
+  text-transform: capitalize;
+  display: inline-block;
+  padding-right: 5px;
+`,StyledShowMoreLabel=styled.div`
+  cursor: pointer;
+  margin-top: 5px;
+  font-size: 14px;
+`;HeaderName.displayName="HeaderName",StyledShowMoreLabel.displayName="StyledShowMoreLabel";
+//# sourceMappingURL=ResponseHeadersList.js.map

package/lib-esm/components/rightPanel/ResponsePanel.d.ts

@@ -0,0 +1,9 @@
+import type { OpenApiResponseData } from './types';
+export interface ResponsePanelProps {
+    response?: OpenApiResponseData;
+    error?: Error & {
+        response?: OpenApiResponseData;
+    };
+    time?: number;
+}
+export declare const ResponsePanel: ({ error, response, time }: ResponsePanelProps) => JSX.Element;

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

@@ -0,0 +1,18 @@
+import React from"react";import styled from"styled-components";import{ResponseBody}from"./ResponseBody";import{ResponseHeadersList}from"./ResponseHeadersList";const ResponseBadges=styled.div`
+  margin-bottom: 10px;
+`,ResponseBadgeBase=styled.div`
+  display: inline-block;
+  margin-right: 20px;
+  padding: 2px 0;
+  text-align: center;
+  color: var(--text-color-inverse);
+`,ResponseBadge=styled(ResponseBadgeBase)`
+  color: ${({code:e})=>e>=200&&e<300?"var(--response-success-text-color)":e>=300&&e<400?"var(--response-redirect-text-color)":e>400?"var(--response-error-text-color)":"var(--response-info-text-color)"};
+`,ErrorHeader=styled.header`
+  font-weight: bold;
+  margin-bottom: 10px;
+`,ErrorDetails=styled.code`
+  border-left: 3px solid #ff4040;
+  padding-left: 5px;
+`;export const ResponsePanel=({error:e,response:t,time:n})=>{const r=t||e&&e.response,s=r&&r.data&&r.data.length||0;let a;return a=s>1e6?(s/1e6).toFixed(2)+" MB":s>1e3?(s/1e3).toFixed(2)+" KB":s+" B",e&&!e.response||!r?React.createElement(React.Fragment,null,React.createElement(ErrorHeader,null," Could not get any response "),React.createElement(ErrorDetails,null,e&&e.message||"Unknown error"),React.createElement("br",null),React.createElement(ErrorHeader,null," Why this might have happened:"),React.createElement("div",null," - CORS is misconfigured on the server"),React.createElement("div",null," - The server couldn't send a response"),React.createElement("div",null," - No internet access"),React.createElement("div",null," - Documentation issue - contact API owner"),React.createElement("div",null," - Misconfigured security definition")):r?React.createElement(React.Fragment,null,React.createElement(ResponseBadges,null,React.createElement(ResponseBadge,{code:r.status},React.createElement("span",null," Status: "),r.status," ",r.statusText),React.createElement(ResponseBadgeBase,null,React.createElement("span",null," Time: "),n,"ms"),React.createElement(ResponseBadgeBase,null,React.createElement("span",null," Size: "),a)),React.createElement("div",null,React.createElement(ResponseHeadersList,{headers:r.headers}),React.createElement(ResponseBody,{response:r}))):React.createElement(React.Fragment,null,"Something went wrong")};
+//# sourceMappingURL=ResponsePanel.js.map

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

@@ -0,0 +1,5 @@
+import React,{useCallback}from"react";import styled from"styled-components";import{Markdown}from"../Markdown";import{FormControl,FormLabel}from"../common/form";import{TextField}from"../common/TextField";import{TryItDropdown}from"./styled";export default function ServerVariable({name:e,value:t,description:o,variableEnum:a,onChange:r,defaultValue:l}){const n=useCallback((e=>r(e.target.value)),[r]),m=useCallback((e=>r(e.value)),[r]),c=a?a.map(((e,t)=>({value:e,idx:t}))):[];return React.createElement(FormControl,null,React.createElement(FormLabel,null,e,":"),c&&c.length?React.createElement(TryItDropdown,{fullWidth:!0,variant:"dark",value:t,options:c,onChange:m}):React.createElement(TextField,{fullWidth:!0,value:t,onChange:n,placeholder:l,panel:"try-it"}),o&&React.createElement(StyledMarkdown,{compact:!0,source:o}))}const StyledMarkdown=styled(Markdown)`
+  margin-top: 5px;
+  color: #d0d0d0;
+`;
+//# sourceMappingURL=ServerVariable.js.map

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

@@ -0,0 +1,4 @@
+import React,{useState}from"react";import{observer}from"mobx-react";import styled from"styled-components";import{useMount}from"@redocly/theme";import{fromSessionStorage,toSessionStorage}from"../../../utils";import{FormControl,FormLabel}from"../../common/form";import{expandDefaultServerVariables,expandVariables,getServerWithVariables,getDefaultOrStoredVariables,updateVariablesStorage}from"../utils";import ServerVariable from"../ServerVariable";import{TryItDropdown}from"../styled";export const ServersDropdown=observer((({operation:e,onChange:r})=>{const a=fromSessionStorage("serverUrl"),t=e.servers.findIndex((e=>e.url===a)),[o,s]=useState(t<0?0:t),[l,n]=useState({});useMount((()=>{const a=getServerWithVariables(e.servers,o);r(a),n(a.variables)}));const i=e.servers.map(((e,r)=>({idx:r,serverUrl:e.url,value:`\n          ${expandDefaultServerVariables(expandVariables(e.url,l),e.variables)}\n        - ${e.description||"Default"}\n      `}))),v=Object.keys(l);return React.createElement(ServerDropdownWrap,{"data-cy":"console-target-server"},React.createElement(FormLabel,{htmlFor:"server"},"Target server: "),React.createElement(FormControl,null,React.createElement(TryItDropdown,{variant:"dark",value:i[o].value,options:i,fullWidth:!0,onChange:a=>{const t=e.servers.find((e=>e.url===a.serverUrl)),o=e.servers.findIndex((e=>e.url===a.serverUrl)),l=getDefaultOrStoredVariables(t);r({url:a.serverUrl||"",variables:l}),toSessionStorage("serverUrl",a.serverUrl||""),s(o),n(l)}})),null==v?void 0:v.map((a=>{var t;const s=null===(t=e.servers[o].variables)||void 0===t?void 0:t[a];if(s)return React.createElement(ServerVariable,{key:a,name:a,value:l[a],defaultValue:s.default,onChange:t=>((a,t)=>{const s=e.servers[o],i=t||""===t?t:getDefaultOrStoredVariables(s)[a],v=Object.assign(Object.assign({},l),{[a]:i});n(v),updateVariablesStorage(a,i),r(Object.assign(Object.assign({},s),{variables:v}))})(a,t),variableEnum:s.enum,description:s.description})})))}));const ServerDropdownWrap=styled.div`
+  margin-bottom: 20px;
+`;
+//# sourceMappingURL=ServersDropdown.js.map