@redocly/openapi-docs 3.0.0-alpha.75 → 3.0.0-alpha.76

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { AuthPanelProps } from './types';
-export declare const AuthPanel: ({ securityDefaults, operation, activeServer, authCorsProxyUrl, form, formApi, }: AuthPanelProps) => JSX.Element | null;
+export declare const AuthPanel: ({ securityDefaults, operation, activeServer, authCorsProxyUrl, }: AuthPanelProps) => JSX.Element | null;

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

@@ -1,2 +1,2 @@
-import React,{Fragment,useEffect,useState}from"react";import{useAtomValue}from"jotai";import{TryItSecurityApps}from"@redocly/theme";import{escapeFormId,fromSessionStorage,getSecurityDetailsOptions,toSessionStorage}from"../../../utils";import{TryItDropdown}from"../styled";import{FormControl,FormLabel,FormWrapper}from"../../common/form";import{FormDropdown,FormTextField}from"../../common/TextField";import{OpenIDConnect,Error}from"../OpenIDConnect";import{fromCookie,requiredValidator}from"../utils";import{OAuth2Flow}from"../OAuth2Flow";import{l}from"../../../services";import OAuth2TokenInputComponent from"../OAuth2TokenInput";import{globalStoreAtom}from"../../../jotai/store";export const AuthPanel=({securityDefaults:e,operation:t,activeServer:o,authCorsProxyUrl:a,form:r,formApi:i})=>{var n,s;const[u,m]=useState(0),{parser:c}=useAtomValue(globalStoreAtom);useEffect((()=>{const e=t.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),o=fromSessionStorage("securityRequirementName"),a=e.findIndex((e=>e===o));m(a<0?0:a)}),[t]);const d=t.security,p=d.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));if(0===p.length)return React.createElement(Error,{message:"Cannot find security schema in the definition"});const f=d[u],h=escapeFormId(f.schemes[0].id);return React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,p.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(TryItDropdown,{variant:"dark",fullWidth:!0,options:p,value:p[u].value,onChange:e=>{m(e.idx),toSessionStorage("securityRequirementName",e.value)}}))||null,React.createElement(TryItSecurityApps,{apiId:null===(s=null===(n=null==c?void 0:c.definition.info)||void 0===n?void 0:n["x-metadata"])||void 0===s?void 0:s.apiId,value:i.getValue(`auth.${h}`),onChange:e=>{i.setValue(`auth.${h}`,e)}}),d[u].schemes.map((t=>{var n,s,u,m,c,d,p;const f=escapeFormId(t.id);if("apiKey"===t.type){const o=getSecurityDetailsOptions(f,""),a={field:`auth.${f}`,fullWidth:!0,initialValue:fromCookie(t)||fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),initValue:fromCookie(t)||fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(FormControl,{key:f},React.createElement(FormLabel,null," ",t.name,": "),o?React.createElement(FormDropdown,Object.assign({},a,{options:o})):React.createElement(FormTextField,Object.assign({},a,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=getSecurityDetailsOptions(f,"username"),o={field:`auth.${f}.username`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${f}.username`)||(null===(n=null==e?void 0:e[f])||void 0===n?void 0:n.username),initValue:fromSessionStorage(`auth.${f}.username`)||(null===(s=null==e?void 0:e[f])||void 0===s?void 0:s.username),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:f},React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicUsername"),": "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{panel:"try-it"}))),React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicPassword"),": "),React.createElement(FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:`auth.${f}.password`,initialValue:fromSessionStorage(`auth.${f}.password`)||(null===(u=null==e?void 0:e[f])||void 0===u?void 0:u.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=getSecurityDetailsOptions(f,""),o={field:`auth.${f}`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),initValue:fromSessionStorage(`auth.${f}`)||(null==e?void 0:e[f]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:f},React.createElement(FormControl,null,React.createElement(FormLabel,null," Bearer Token: "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===t.type&&t.flows&&t.flows.clientCredentials)return React.createElement(OAuth2TokenInputComponent,{key:f,flow:t.flows.clientCredentials,server:o,authCorsProxyUrl:a,id:f,form:r,formApi:i,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[f]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return React.createElement(OAuth2Flow,{key:f,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(c=null===(m=null==t?void 0:t.flows)||void 0===m?void 0:m.implicit)||void 0===c?void 0:c.scopes)||{}),server:o,id:f,form:r,formApi:i,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[f]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return React.createElement(OAuth2Flow,{key:f,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(d=t.flows.authorizationCode)||void 0===d?void 0:d.scopes)||{}),server:o,id:f,form:r,formApi:i,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[f]});if("oauth2"===t.type){let t=fromSessionStorage(`auth.${f}.token`)||JSON.stringify(null===(p=null==e?void 0:e[f])||void 0===p?void 0:p.token);return t=t?JSON.parse(t):{},React.createElement(Fragment,{key:f},React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token Type: "),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${f}.token.token_type`,initialValue:t.token_type||"Bearer",panel:"try-it"})),React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${f}.token.access_token`,validate:requiredValidator,initialValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return React.createElement(OpenIDConnect,{key:f,server:o,authCorsProxyUrl:a,id:f,form:r,formApi:i,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[f]})}}))),React.createElement("small",null,React.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))};
+import React,{Fragment,useEffect,useCallback,useMemo}from"react";import{useAtomValue}from"jotai";import{TryItSecurityApps}from"@redocly/theme";import{Controller,useFormContext}from"react-hook-form";import{escapeFormId,fromSessionStorage,getSecurityDetailsOptions,toSessionStorage}from"../../../utils";import{TryItDropdown}from"../styled";import{FormControl,FormLabel,FormWrapper}from"../../common/form";import{FormDropdown,FormTextField}from"../../common/TextField";import{OpenIDConnect,Error}from"../OpenIDConnect";import{fromCookie,requiredValidator}from"../utils";import{OAuth2Flow}from"../OAuth2Flow";import{l}from"../../../services";import{OAuth2TokenInput}from"../OAuth2TokenInput";import{globalStoreAtom}from"../../../jotai/store";export const AuthPanel=({securityDefaults:e,operation:t,activeServer:o,authCorsProxyUrl:a})=>{var r,n;const{control:i,setValue:u,watch:s}=useFormContext(),{parser:c}=useAtomValue(globalStoreAtom),m=t.security,d=useMemo((()=>m.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean)),[m]),p=s("securityScheme"),f=useMemo((()=>{const e=d.findIndex((e=>e===p));return e<0?0:e}),[d,p]);useEffect((()=>{const e=fromSessionStorage("securityRequirementName"),t=d.findIndex((t=>t===e));u("securityScheme",d[t<0?0:t])}),[d,t,u]);const h=useCallback((e=>{u("securityScheme",e.value),toSessionStorage("securityRequirementName",e.value)}),[u]),y=useMemo((()=>d.map(((e,t)=>({value:e,idx:t})))),[d]);if(0===y.length)return React.createElement(Error,{message:"Cannot find security schema in the definition"});const v=m[f],F=escapeFormId(v.schemes[0].id),C=s(`auth.${F}`);return React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,y.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(Controller,{control:i,name:"securityScheme",render:({field:{value:e}})=>React.createElement(TryItDropdown,{variant:"dark",fullWidth:!0,options:y,value:e,onChange:h})}))||null,React.createElement(TryItSecurityApps,{apiId:null===(n=null===(r=null==c?void 0:c.definition.info)||void 0===r?void 0:r["x-metadata"])||void 0===n?void 0:n.apiId,value:C,onChange:e=>{u(`auth.${F}`,e)}}),v.schemes.map((t=>{var r,n,i,u,s,c;const m=escapeFormId(t.id);if("apiKey"===t.type){const o=getSecurityDetailsOptions(m,""),a={fieldName:`auth.${m}`,fullWidth:!0,defaultValue:fromCookie(t)||fromSessionStorage(`auth.${m}`)||(null==e?void 0:e[m]),rules:{validate:requiredValidator},validateOnBlur:!0,validateOnChange:!0};return React.createElement(FormControl,{key:m},React.createElement(FormLabel,null," ",t.name,": "),o?React.createElement(FormDropdown,Object.assign({},a,{options:o})):React.createElement(FormTextField,Object.assign({},a,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=getSecurityDetailsOptions(m,"username"),o={fieldName:`auth.${m}.username`,fullWidth:!0,defaultValue:fromSessionStorage(`auth.${m}.username`)||(null===(r=null==e?void 0:e[m])||void 0===r?void 0:r.username),validate:requiredValidator,rules:{required:!0}};return React.createElement(Fragment,{key:m},React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicUsername"),": "),t?React.createElement(FormDropdown,Object.assign({},o,{options:t})):React.createElement(FormTextField,Object.assign({},o,{panel:"try-it"}))),React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicPassword"),": "),React.createElement(FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,fieldName:`auth.${m}.password`,defaultValue:fromSessionStorage(`auth.${m}.password`)||(null===(n=null==e?void 0:e[m])||void 0===n?void 0:n.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=getSecurityDetailsOptions(m,""),o={fieldName:`auth.${m}`,fullWidth:!0,defaultValue:fromSessionStorage(`auth.${m}`)||(null==e?void 0:e[m]),rules:{validate:requiredValidator},validateOnBlur:!0,validateOnChange:!0};return React.createElement(Fragment,{key:m},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(OAuth2TokenInput,{key:m,flow:t.flows.clientCredentials,server:o,authCorsProxyUrl:a,id:m,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return React.createElement(OAuth2Flow,{key:m,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(u=null===(i=null==t?void 0:t.flows)||void 0===i?void 0:i.implicit)||void 0===u?void 0:u.scopes)||{}),server:o,id:m,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return React.createElement(OAuth2Flow,{key:m,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:a,scopes:Object.keys((null===(s=t.flows.authorizationCode)||void 0===s?void 0:s.scopes)||{}),server:o,id:m,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[m]});if("oauth2"===t.type){let t=fromSessionStorage(`auth.${m}.token`)||JSON.stringify(null===(c=null==e?void 0:e[m])||void 0===c?void 0:c.token);return t=t?JSON.parse(t):{},React.createElement(Fragment,{key:m},React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token Type: "),React.createElement(FormTextField,{fullWidth:!0,fieldName:`auth.${m}.token.token_type`,defaultValue:t.token_type||"Bearer",panel:"try-it"})),React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(FormTextField,{type:"password",fullWidth:!0,fieldName:`auth.${m}.token.access_token`,rules:{validate:requiredValidator},defaultValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return React.createElement(OpenIDConnect,{key:m,server:o,authCorsProxyUrl:a,id:m,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[m]})}}))),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/rightPanel/AuthPanel/types.d.ts

@@ -1,10 +1,7 @@
-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>;

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

@@ -1,5 +1,4 @@
 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>;
+import type { CodemirrorInputProps } from './types';
+export declare const CodemirrorInputComponent: ({ onChange, onBlur, id, schema, fieldName, validate, defaultValue, mode, }: CodemirrorInputProps) => JSX.Element;
+export declare const CodemirrorInput: React.NamedExoticComponent<CodemirrorInputProps>;

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

@@ -1,2 +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 c;const s=(e,t)=>{/^[a-zA-Z0-9_":]$/.test(t.key)&&c.execCommand("autocomplete")},l=()=>{c.refresh()},d=()=>c.showHint({completeSingle:!0});useMount((()=>{setTimeout((()=>{c.refresh()}),0),document.addEventListener("click",l)})),useUnmount((()=>{document.removeEventListener("click",l)}));const{value:u}=e,{setValue:p,setTouched:f}=t;return React.createElement(React.Fragment,null,React.createElement(CodeMirrorStyles,null),React.createElement(CodeMirror,{editorDidMount:e=>{c=e,c.on("keyup",s)},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}}}))};export const CodemirrorInput=asField(CodemirrorInputComponent);
+import React,{memo,useCallback,useMemo}from"react";import{useFormContext,Controller}from"react-hook-form";import{json}from"@codemirror/lang-json";import{MediaTypes}from"../../../constants";import{StyledCodeMirror}from"./styled";import{linterInit,themeInit}from"./helpers";export const CodemirrorInputComponent=({onChange:e,onBlur:r,id:o,schema:t,fieldName:l,validate:n,defaultValue:a,mode:m})=>{const{setValue:s,control:i,setError:c,clearErrors:u,getFieldState:d}=useFormContext(),p=useCallback((e=>{const{error:r}=d(l);e&&!r?c(l,{message:e}):r&&u(l)}),[u,l,d,c]),C=useCallback((r=>{s(l,r),null==e||e(r)}),[l,e,s]),f=useCallback((e=>{null==r||r(e)}),[r]),h=useMemo((()=>[json(),linterInit({id:o,schema:t,handleErrors:p})]),[p,o,t]);return React.createElement(Controller,{control:i,name:l,rules:{validate:n},defaultValue:a,render:({field:{value:e,ref:r}})=>React.createElement(StyledCodeMirror,{ref:r,className:"codemirror-container",value:e||"",onChange:C,onBlur:f,lang:m||MediaTypes.JSON,theme:themeInit("light"),extensions:h,basicSetup:{bracketMatching:!0,closeBrackets:!0,tabSize:2,foldGutter:!1,lineNumbers:!1,lintKeymap:!0,drawSelection:!1}})})};export const CodemirrorInput=memo(CodemirrorInputComponent);
 //# sourceMappingURL=CodemirrorInput.js.map

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

@@ -1 +1,6 @@
-export {};
+import type { Extension } from '@uiw/react-codemirror';
+import type { CodemirrorInputProps } from './types';
+export declare function themeInit(theme: 'light' | 'dark'): Extension;
+export declare function linterInit({ id, schema, handleErrors, }: Pick<CodemirrorInputProps, 'id' | 'schema'> & {
+    handleErrors: (message?: string) => void;
+}): Extension;

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,r,t,i){return new(t||(t=Promise))((function(o,n){function a(e){try{s(i.next(e))}catch(e){n(e)}}function c(e){try{s(i.throw(e))}catch(e){n(e)}}function s(e){var r;e.done?o(e.value):(r=e.value,r instanceof t?r:new t((function(e){e(r)}))).then(a,c)}s((i=i.apply(e,r||[])).next())}))};import{TextDocument,getLanguageService}from"@redocly/vscode-json-languageservice";import{IS_BROWSER}from"../../../utils";let CodeMirror=null;IS_BROWSER&&(CodeMirror=require("codemirror"),require("codemirror/mode/javascript/javascript"),require("codemirror/addon/edit/matchbrackets"),require("codemirror/addon/lint/lint"),require("codemirror/addon/hint/show-hint"),require("codemirror/addon/edit/closebrackets"),require("codemirror/addon/search/searchcursor"),require("codemirror/lib/codemirror.css"),require("codemirror/theme/material.css"),require("codemirror/addon/lint/lint.css"),require("codemirror/addon/hint/show-hint.css"));const serv=getLanguageService({});CodeMirror&&(CodeMirror.registerHelper("lint","json",(function(e,r){return __awaiter(this,void 0,void 0,(function*(){const{schema:t,setError:i}=r;serv.configure({validate:!0,schemas:[{uri:"stub://"+r.id,fileMatch:["*"],schema:t}]});const o=TextDocument.create(r.id+".json","json",0,e),n=serv.parseJSONDocument(o),a=yield serv.doValidation(o,n);return a.length?i&&i(a[0].message):i&&i(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 i=e.getDoc().getCursor(),o=e.getTokenAt(i),n=TextDocument.create(r.id+".json","json",0,e.getValue()),a=serv.parseJSONDocument(n),c=yield serv.doComplete(n,{line:i.line,character:i.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 i="_$__REDOC_CURSOR_HERE";let o=t.text.replace(/(\$1|\${1:[^}]+})/,i)||"";if(o=o.replace(/(\$\d+|\${[^}]+})/g,"")||"",e.setSelection(t.from,t.to),o.indexOf("\n")>-1){const r=e.getLine(e.getCursor().line).search(/(\S|$)/);o=o.replace(/\n/g,"\n"+(e=>{let r="";for(;e--;)r+=" ";return r})(r))}e.replaceSelection(o);const n=e.getSearchCursor(i,t.from);n.findNext()&&(e.setCursor(n.from()),n.replace(""))}}))):[];return/(property|string)/.test(o.type||"")&&(s=s.filter((e=>e.filter.replace(/(^"|"$)/g,"").startsWith(o.string.replace(/(^"|"$)/g,""))))),{from:CodeMirror.Pos(i.line,o.start),to:CodeMirror.Pos(i.line,i.ch),list:s}})))));
+var __awaiter=this&&this.__awaiter||function(t,e,r,o){return new(r||(r=Promise))((function(i,n){function a(t){try{s(o.next(t))}catch(t){n(t)}}function c(t){try{s(o.throw(t))}catch(t){n(t)}}function s(t){var e;t.done?i(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(a,c)}s((o=o.apply(t,e||[])).next())}))};import{materialLightInit,materialDarkInit}from"@uiw/codemirror-theme-material";import{tags as t}from"@lezer/highlight";import{linter}from"@codemirror/lint";import{getLanguageService,TextDocument}from"@redocly/vscode-json-languageservice";export function themeInit(e){const r={settings:{background:"var(--bg-overlay)",fontFamily:"var(--code-block-font-family)"},styles:[{tag:[t.propertyName],color:"var(--code-block-tokens-property-string-color)"},{tag:[t.processingInstruction,t.string,t.inserted,t.special(t.string)],color:"var(--code-block-tokens-string-color)"},{tag:[t.atom,t.bool,t.special(t.variableName)],color:"var(--text-secondary)"}]};switch(e){case"light":default:return materialLightInit(r);case"dark":return materialDarkInit(r)}}const service=getLanguageService({});export function linterInit({id:t,schema:e,handleErrors:r}){return service.configure({validate:!0,schemas:[{uri:"stub://"+t,fileMatch:["*"],schema:e}]}),linter((e=>__awaiter(this,void 0,void 0,(function*(){var o;const i=e.state.doc.toString(),n=TextDocument.create(t+".json","json",0,i),a=service.parseJSONDocument(n),c=yield service.doValidation(n,a);return r(null===(o=null==c?void 0:c[0])||void 0===o?void 0:o.message),null==c?void 0:c.map((t=>{const e=getPosition(i,t.range.start.line,t.range.start.character);return{from:e,to:e,message:t.message,severity:t.severity}}))}))))}function getPosition(t,e,r){const o=t.split("\n");let i=0;for(let t=0;t<e-1;t++)i+=o[t].length+1;return i+=r,i}
 //# sourceMappingURL=helpers.js.map

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

@@ -1 +1,2 @@
-export declare const CodeMirrorStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+/// <reference types="react" />
+export declare const StyledCodeMirror: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@uiw/react-codemirror").ReactCodeMirrorProps & import("react").RefAttributes<import("@uiw/react-codemirror").ReactCodeMirrorRef>>, any, {}, never>;

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

@@ -1,54 +1,53 @@
-import{createGlobalStyle}from"styled-components";export const CodeMirrorStyles=createGlobalStyle`
-  .cm-s-material.CodeMirror {
-    background-color: var(--bg-overlay) !important;
-    color: var(--code-block-text-color) !important;
-    font-family: var(--code-block-font-family);
+import styled from"styled-components";import CodeMirror from"@uiw/react-codemirror";export const StyledCodeMirror=styled(CodeMirror)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  flex: 1;
+
+  .cm-editor {
+    flex: 1;
+    color: var(--code-block-text-color);
+    border-radius: var(--panel-border-radius);
     font-weight: var(--code-block-font-weight);
     font-size: var(--code-block-font-size);
     line-height: var(--code-block-line-height);
     padding: var(--code-block-padding);
     white-space: var(--code-wrap, pre);
-  }
-
-  .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-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-secondary);
-  }
 
-  div .cm-s-material .CodeMirror-matchingbracket {
-    outline: 1px solid grey;
-    text-decoration: none;
-    color: var(--color-gold-8) !important;
-  }
-
-  div .cm-s-material .CodeMirror-nonmatchingbracket {
-    color: var(--color-red-8) !important;
-  }
-
-  .react-codemirror2 {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    overflow: hidden;
-
-    flex: 1;
-  }
-
-  .CodeMirror {
-    flex: 1;
-    border-radius: var(--panel-border-radius);
+    .cm-matchingBracket {
+      outline: 1px solid grey;
+      text-decoration: none;
+      color: var(--color-gold-8);
+    }
+
+    .cm-nonmatchingBracket {
+      color: var(--color-red-8) !important;
+    }
+
+    .cm-activeLine {
+      background: none;
+    }
+
+    .cm-lintPoint:after {
+      border: none;
+      width: 10px;
+      height: 8px;
+      left: 0;
+      bottom: -2px;
+      background-position: left bottom;
+      background-repeat: repeat-x;
+      background-size: 4px;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;
+    }
+  }
+  .cm-editor.cm-focused {
+    outline: none;
+
+    .cm-matchingBracket,
+    .cm-nonmatchingBracket {
+      background: none;
+    }
   }
 `;
 //# sourceMappingURL=styled.js.map

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

@@ -1,22 +1,11 @@
-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 '../../../types';
-export interface CodemirrorInputBase {
-    forwardedRef?: LegacyRef<CodeMirror>;
+export interface CodemirrorInputProps {
     mode?: string;
-    field: string;
-    initialValue: string;
+    fieldName: string;
+    defaultValue: 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/Console/Console.js

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

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

@@ -1,2 +1,2 @@
-import React,{memo}from"react";import{Form,useField}from"informed";import{useAtomValue}from"jotai";import{OpenApiTryItSecurityPanel}from"@redocly/theme";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{OperationParameters}from"../../OperationParameters";import{AuthPanel}from"../AuthPanel";import{globalOptionsAtom}from"../../../jotai/store";import{RenderHook}from"../../RenderHook";function RequestComponent({operation:e,properties:r,mergeExampleBody:t,securityDefaults:o,form:a,resolvedRawSpec:n,server:i,formApi:s,setFormApi:u,handleChange:m,handleServerChange:d}){const c=a.errors||{},p=c.path||c.cookie||c.header||c.query,{hooks:y,authCorsProxyUrl:h}=useAtomValue(globalOptionsAtom),v=n&&JsonPointer.get(n,e.pointer);let f=a.values&&a.values.auth&&Object.keys(a.values.auth)[0];f&&a.values.auth[f]||(f=void 0),!f||void 0===a.values.auth[f].token&&void 0===a.values.auth[f].client_id&&void 0===a.values.auth[f].client_secret||a.values.auth[f].token&&a.values.auth[f].token.access_token||(f=void 0),f&&null!=a.values.auth[f].username&&(a.values.auth[f].username&&a.values.auth[f].password||(f=void 0));const R=e.parameters||[];return!n&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(Form,{onChange:m,getApi:u,style:{flex:1,display:"flex",flexDirection:"column",margin:0}},React.createElement(ServersDropdown,{operation:e,onChange:d}),React.createElement(Accordion,{initialActiveIdx:e.security.length&&f?1:0},e.security.length&&s&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",error:!f&&!!c.auth,success:!!f,renderChildrenHidden:!0},OpenApiTryItSecurityPanel||(null==y?void 0:y.ReplaceTryItSecurityPanel)?React.createElement(AuthPanelWrapper,{field:"auth",validate:requiredValidator},(r=>React.createElement(RenderHook,{Hook:OpenApiTryItSecurityPanel||(null==y?void 0:y.ReplaceTryItSecurityPanel),props:{server:i,operation:e,onChange:r,OAuth2:OAuth2}}))):React.createElement(AuthPanel,{formApi:s,form:a,operation:e,activeServer:i.url,authCorsProxyUrl:h,securityDefaults:o}))||null,e.requestBody&&s&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",error:!!c.body,renderChildrenHidden:!0},React.createElement(RequestBody,{validate:allowBodyErrors,formApi:s,body:e.requestBody,pointer:e.pointer,id:e.id,resolvedBody:null==v?void 0:v.requestBody,properties:r,mergeExampleBody:t}))||null,R.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:p,renderChildrenHidden:!0},React.createElement(OperationParameters,{operation:e,values:a.values,errors:a.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=memo(RequestComponent);
+import React,{memo}from"react";import{useAtomValue}from"jotai";import{OpenApiTryItSecurityPanel}from"@redocly/theme";import{useFormContext,Controller}from"react-hook-form";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{OperationParameters}from"../../OperationParameters";import{AuthPanel}from"../AuthPanel";import{globalOptionsAtom}from"../../../jotai/store";import{RenderHook}from"../../RenderHook";function RequestComponent({operation:e,properties:r,mergeExampleBody:t,securityDefaults:o,resolvedRawSpec:a,server:n,onServerChange:i}){const{watch:m,formState:u}=useFormContext(),c=u.errors||{},s=Boolean(c.path||c.cookie||c.header||c.query),{hooks:d,authCorsProxyUrl:p}=useAtomValue(globalOptionsAtom),y=a&&JsonPointer.get(a,e.pointer),h=m();let f=h&&h.auth&&Object.keys(h.auth)[0];f&&h.auth[f]||(f=void 0),!f||void 0===h.auth[f].token&&void 0===h.auth[f].client_id&&void 0===h.auth[f].client_secret||h.auth[f].token&&h.auth[f].token.access_token||(f=void 0),f&&null!=h.auth[f].username&&(h.auth[f].username&&h.auth[f].password||(f=void 0));const v=e.parameters||[];return!a&&React.createElement(React.Fragment,null,"Loading...")||React.createElement("form",{style:{flex:1,display:"flex",flexDirection:"column",margin:0}},React.createElement(ServersDropdown,{operation:e,onChange:i}),React.createElement(Accordion,{initialActiveIdx:e.security.length&&f?1:0},e.security.length&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",error:!f&&!!c.auth,success:!!f,renderChildrenHidden:!0},OpenApiTryItSecurityPanel||(null==d?void 0:d.ReplaceTryItSecurityPanel)?React.createElement(AuthPanelWrapper,{fieldName:"auth",validate:requiredValidator},(r=>React.createElement(RenderHook,{Hook:OpenApiTryItSecurityPanel||(null==d?void 0:d.ReplaceTryItSecurityPanel),props:{server:n,operation:e,onChange:r,OAuth2:OAuth2}}))):React.createElement(AuthPanel,{operation:e,activeServer:n.url,authCorsProxyUrl:p,securityDefaults:o}))||null,e.requestBody&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",error:!!c.body,renderChildrenHidden:!0},React.createElement(RequestBody,{validate:allowBodyErrors,body:e.requestBody,pointer:e.pointer,id:e.id,resolvedBody:null==y?void 0:y.requestBody,properties:r,mergeExampleBody:t}))||null,v.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:s,renderChildrenHidden:!0},React.createElement(OperationParameters,{operation:e,values:h}))||null))}function AuthPanelWrapper({fieldName:e,validate:r,children:t}){const{control:o,setValue:a}=useFormContext();return React.createElement(Controller,{control:o,name:e,rules:{validate:r},render:()=>t(a)})}function allowBodyErrors(){}export const Request=memo(RequestComponent);
 //# sourceMappingURL=Request.js.map

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

@@ -1,4 +1,3 @@
-import type { FormApi, FormState } from 'informed';
 import type { OperationModel } from '../../../models';
 import type { SecurityDetails, Server } from '../../../types';
 import type { OpenApiResponseData } from '../types';
@@ -21,11 +20,7 @@ export interface RequestProps {
     properties?: any;
     mergeExampleBody?: boolean;
     securityDefaults: Record<string, string | SecurityDetails> | undefined;
-    form: any;
     resolvedRawSpec: any;
     server: Server;
-    formApi?: FormApi;
-    setFormApi: (formApi: FormApi) => void;
-    handleChange: (formState: FormState) => void;
-    handleServerChange: (server: Server) => void;
+    onServerChange: (server: Server) => void;
 }

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 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;
+export declare const OAuth2Flow: ({ usePkce, id, flow, tokenUrl: _tokenUrl, authCorsProxyUrl, tokenEndpointAuthMethod, server, scopes, authorizationUrl, defaultValues, clientId, }: OAuth2FlowProps) => JSX.Element;

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

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

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

@@ -1,5 +1,4 @@
 import type { SecurityDetails } from '../../../types';
-import type { FormApi, FormState } from 'informed';
 export interface OAuth2FlowProps {
     authorizationUrl: string;
     tokenUrl?: string;
@@ -11,8 +10,6 @@ export interface OAuth2FlowProps {
     scopes: string[];
     server: string;
     id: string;
-    form: FormState;
-    formApi: FormApi;
     flow: 'implicit' | 'authorizationCode';
     tokenEndpointAuthMethod?: string | string[];
     clientId?: string;

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

@@ -9,14 +9,8 @@ export interface OAuth2TokenInputProps {
     };
     authCorsProxyUrl: Maybe<string>;
     server: string;
-    id: string;
-    form: {
-        values: any;
-        errors: any;
-    };
-    formApi: any;
     clientId?: string;
+    id: string;
     defaultValues?: SecurityDetails;
 }
-export declare const OAuth2TokenInput: ({ form, id, formApi, server, flow, authCorsProxyUrl, defaultValues, clientId, }: OAuth2TokenInputProps) => JSX.Element;
-export default OAuth2TokenInput;
+export declare const OAuth2TokenInput: ({ id, server, flow, authCorsProxyUrl, defaultValues, clientId, }: OAuth2TokenInputProps) => JSX.Element;

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

@@ -1,2 +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;
+var __awaiter=this&&this.__awaiter||function(e,t,o,n){return new(o||(o=Promise))((function(r,l){function a(e){try{c(n.next(e))}catch(e){l(e)}}function i(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(a,i)}c((n=n.apply(e,t||[])).next())}))};import React,{useState}from"react";import{Button}from"@redocly/theme";import{useFormContext}from"react-hook-form";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=({id:e,server:t,flow:o,authCorsProxyUrl:n,defaultValues:r,clientId:l})=>{var a,i;const{setValue:c,watch:s,formState:u}=useFormContext(),[m,d]=useState(""),[h,p]=useState(!1),[k,f]=useState(!0),F=(null===(a=s("auth"))||void 0===a?void 0:a[e])||{},S=(null===(i=u.errors)||void 0===i?void 0:i.auth)||{},E=()=>{c(`auth.${e}.token`,""),toSessionStorage(`auth.${e}.token`,"")},v=Object.keys(o.scopes);let g=fromSessionStorage(`auth.${e}.token`)||JSON.stringify(null==r?void 0:r.token);g=g?JSON.parse(g):"";const _=getSecurityDetailsOptions(e,"client_id"),R={fieldName:`auth.${e}.client_id`,fullWidth:!0,defaultValue:fromSessionStorage(`auth.${e}.client_id`)||l||(null==r?void 0:r.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:"),_?React.createElement(FormDropdown,Object.assign({},R,{options:_})):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,fieldName:`auth.${e}.client_secret`,defaultValue:fromSessionStorage(`auth.${e}.client_secret`)||(null==r?void 0:r.client_secret),panel:"try-it"})),React.createElement(FormTextField,{fullWidth:!0,fieldName:`auth.${e}.token`,type:"hidden",defaultValue:g,rules:{validate:validateToken}}),React.createElement(Scope,{id:e,scopes:v})),React.createElement(Button,{color:"primary",onClick:()=>__awaiter(void 0,void 0,void 0,(function*(){if(h)return;const r=n&&o.tokenUrl?n+normalizeUrlProtocol(o.tokenUrl):o.tokenUrl;if(S.client_id||S.client_secret)return void console.log("Provide client_id and client_secret");const l=F.client_id,a=F.client_secret;if(!l||!a)return void console.log("Provide client_id and client_secret");p(!0);const i=o["x-tokenEndpointAuthMethod"];validateTokenEndpointMethod(i)?yield OAuth2.authorizeClientCredentials({tokenUrl:r.startsWith("http")?r:t+r,clientId:l,clientSecret:a,scopes:F.scopes,extraHeaders:getOAuth2TokenEndpointAuthHeader({authMethod:i,clientId:l,clientSecret:a}),successCallback:t=>{c(`auth.${e}.token`,t),p(!1)},errorCallback:e=>{E(),d(e.message),p(!1)}}):console.log(`Unsupported token endpoint auth method: ${i}`)})),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)," "):F.token&&F.token.access_token?React.createElement(TokenField,null,React.createElement(TokenValue,{length:F.token.access_token.length,masked:k},F.token.access_token),React.createElement(TokenShowHide,{onClick:()=>{f((e=>!e))}},k?"Show":"Hide"," "),React.createElement(TokenClear,{onClick:E}," Clear ")):React.createElement(FormError,{style:{marginBottom:"1em"}},"No token"))};
 //# sourceMappingURL=OAuth2TokenInput.js.map

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

@@ -1,13 +1,10 @@
 /// <reference types="react" />
-import type { FormApi, FormState } from 'informed';
 import type { ExtendedOpenAPISecurityScheme } from '../../models';
 import type { SecurityDetails } from '../../types';
 export interface OpenIDConnectProps {
     server: string;
     authCorsProxyUrl: Maybe<string>;
     id: string;
-    form: FormState;
-    formApi: FormApi;
     scheme: ExtendedOpenAPISecurityScheme;
     clientId?: string;
     defaultValues?: SecurityDetails;

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,o){return new(n||(n=Promise))((function(r,a){function l(e){try{i(o.next(e))}catch(e){a(e)}}function c(e){try{i(o.throw(e))}catch(e){a(e)}}function i(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,c)}i((o=o.apply(e,t||[])).next())}))};import React,{useState,useEffect}from"react";import{discoverOpenIDConnect}from"../../services/OpenIDConnect";import{LinearProgress}from"../common/LinearProgress";import{FormError}from"../common/form";import{OAuth2Flow}from"./OAuth2Flow";import{FlowName}from"./styled";export function OpenIDConnect(e){var t,n;const{scheme:o,defaultValues:r}=e,[a,l]=useState({}),[c,i]=useState(),[u,s]=useState(!1);useEffect((()=>{m(o.openIdConnectUrl)}),[o.openIdConnectUrl]);const m=e=>__awaiter(this,void 0,void 0,(function*(){s(!0),i("");try{const t=yield discoverOpenIDConnect(e);l(t)}catch(e){i(e.message)}s(!1)}));return u?React.createElement(Loading,null):c?React.createElement(Error,{message:c}):React.createElement("div",null,React.createElement("div",null,(null===(t=null==a?void 0:a.response_types_supported)||void 0===t?void 0:t.includes("token"))?React.createElement(React.Fragment,null,React.createElement(FlowName,null,"OAuth2 Implicit Flow"),React.createElement(OAuth2Flow,{key:e.id,authorizationUrl:a.authorization_endpoint,authCorsProxyUrl:e.authCorsProxyUrl,scopes:a.scopes_supported,server:e.server,id:e.id,form:e.form,formApi:e.formApi,clientId:e.clientId,flow:"implicit",defaultValues:r})):(null===(n=null==a?void 0:a.response_types_supported)||void 0===n?void 0:n.includes("code"))?React.createElement(React.Fragment,null,React.createElement(FlowName,null,"OAuth2 Authorization Flow"),React.createElement(OAuth2Flow,{key:e.id,authorizationUrl:a.authorization_endpoint,tokenUrl:a.token_endpoint,authCorsProxyUrl:e.authCorsProxyUrl,scopes:a.scopes_supported,server:e.server,id:e.id,form:e.form,formApi:e.formApi,clientId:e.clientId,tokenEndpointAuthMethod:null==a?void 0:a.token_endpoint_auth_methods_supported,flow:"authorizationCode",defaultValues:r})):React.createElement("div",null,"Unsupported flow")))}function Loading(){return React.createElement("div",null,React.createElement("div",null,React.createElement("div",null,"Fetching OpenID Connect metadata..."),React.createElement(LinearProgress,null)))}export function Error({message:e}){return React.createElement("div",null,React.createElement("div",null,React.createElement(FormError,null,e)))}
+var __awaiter=this&&this.__awaiter||function(e,t,n,o){return new(n||(n=Promise))((function(r,a){function l(e){try{i(o.next(e))}catch(e){a(e)}}function c(e){try{i(o.throw(e))}catch(e){a(e)}}function i(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,c)}i((o=o.apply(e,t||[])).next())}))};import React,{useState,useEffect}from"react";import{discoverOpenIDConnect}from"../../services/OpenIDConnect";import{LinearProgress}from"../common/LinearProgress";import{FormError}from"../common/form";import{OAuth2Flow}from"./OAuth2Flow";import{FlowName}from"./styled";export function OpenIDConnect(e){var t,n;const{scheme:o,defaultValues:r}=e,[a,l]=useState({}),[c,i]=useState(),[u,s]=useState(!1);useEffect((()=>{d(o.openIdConnectUrl)}),[o.openIdConnectUrl]);const d=e=>__awaiter(this,void 0,void 0,(function*(){s(!0),i("");try{const t=yield discoverOpenIDConnect(e);l(t)}catch(e){i(e.message)}s(!1)}));return u?React.createElement(Loading,null):c?React.createElement(Error,{message:c}):React.createElement("div",null,React.createElement("div",null,(null===(t=null==a?void 0:a.response_types_supported)||void 0===t?void 0:t.includes("token"))?React.createElement(React.Fragment,null,React.createElement(FlowName,null,"OAuth2 Implicit Flow"),React.createElement(OAuth2Flow,{key:e.id,authorizationUrl:a.authorization_endpoint,authCorsProxyUrl:e.authCorsProxyUrl,scopes:a.scopes_supported,server:e.server,id:e.id,clientId:e.clientId,flow:"implicit",defaultValues:r})):(null===(n=null==a?void 0:a.response_types_supported)||void 0===n?void 0:n.includes("code"))?React.createElement(React.Fragment,null,React.createElement(FlowName,null,"OAuth2 Authorization Flow"),React.createElement(OAuth2Flow,{key:e.id,authorizationUrl:a.authorization_endpoint,tokenUrl:a.token_endpoint,authCorsProxyUrl:e.authCorsProxyUrl,scopes:a.scopes_supported,server:e.server,id:e.id,clientId:e.clientId,tokenEndpointAuthMethod:null==a?void 0:a.token_endpoint_auth_methods_supported,flow:"authorizationCode",defaultValues:r})):React.createElement("div",null,"Unsupported flow")))}function Loading(){return React.createElement("div",null,React.createElement("div",null,React.createElement("div",null,"Fetching OpenID Connect metadata..."),React.createElement(LinearProgress,null)))}export function Error({message:e}){return React.createElement("div",null,React.createElement("div",null,React.createElement(FormError,null,e)))}
 //# sourceMappingURL=OpenIDConnect.js.map

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

@@ -1,7 +1,8 @@
 import React from 'react';
 interface ParameterEnumDropdownProps {
-    initValue: string;
+    defaultValue: string | string[];
     paramEnum: Array<string>;
+    fieldName: string;
 }
-export declare const ParameterEnumDropdown: React.ComponentType<import("informed").FieldProps<string, any> & ParameterEnumDropdownProps>;
+export declare const ParameterEnumDropdown: React.NamedExoticComponent<ParameterEnumDropdownProps>;
 export {};

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

@@ -1,2 +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);
+import React,{memo}from"react";import{Controller,useFormContext}from"react-hook-form";import{TryItDropdown}from"./styled";const ParameterEnumDropdownComponent=({paramEnum:e,fieldName:r,defaultValue:o})=>{const{control:t,setValue:a}=useFormContext(),n=e.map(((e,r)=>({idx:r,value:e}))),m=e=>{a(r,e.value)},l=()=>{a(r,"")};return React.createElement(Controller,{control:t,name:r,defaultValue:Array.isArray(o)?o[0]:o,render:({field:{value:e}})=>React.createElement(TryItDropdown,{clearable:!0,fullWidth:!0,variant:"dark",value:e,options:n,handleClear:l,onChange:m})})};export const ParameterEnumDropdown=memo(ParameterEnumDropdownComponent);
 //# sourceMappingURL=ParameterDropdown.js.map

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

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

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

@@ -1,2 +1,2 @@
-import React,{memo,useCallback,useEffect}from"react";import{useAtomValue}from"jotai";import{DropdownOrLabel}from"../../DropdownOrLabel";import{MediaTypesSwitch}from"../../MediaTypeSwitch";import{Dropdown}from"../../common";import{RequestMimeLabel}from"../RequestMimeLabel";import{encodeSample,getStorageExampleKey}from"../utils";import{fromSessionStorage}from"../../../utils";import{Body}from"./Body";import{getActiveMediaType}from"../../../models";import{activeMimeNameAtom}from"../../../jotai/app";import{operationStore}from"../../../jotai/operation";function RequestBodyComponent({body:{content:e},formApi:o,resolvedBody:t,properties:r,mergeExampleBody:a,id:m,validate:i,pointer:n}){const p=useAtomValue(activeMimeNameAtom),{examples:l,name:d}=e&&getActiveMediaType(e,p)||{},s=useCallback((o=>{if(!e||!e.hasSample)return"";if(!(null==l?void 0:l[o]))return"";const t=d&&fromSessionStorage(getStorageExampleKey(m,d,o,l)),a=t?JSON.parse(t):null==l?void 0:l[o];return encodeSample(a,r)}),[d,l,m,e,r]),{activeExampleName:c}=useAtomValue(operationStore(n));useEffect((()=>{if(r&&!a)return void o.setValue("body",JSON.stringify(r||{},null,2));const e=getStorageExampleKey(m,d,c,l);o.setValue("body",fromSessionStorage(e)||s(c||""))}),[l,c,d,o,s,m,r,a]);return React.createElement(React.Fragment,null,React.createElement(MediaTypesSwitch,{content:e,renderDropdown:e=>React.createElement(DropdownOrLabel,Object.assign({},e,{variant:"dark",fullWidth:!0,Label:RequestMimeLabel,Dropdown:Dropdown}))},(a=>React.createElement(Body,{mediaType:a,mediaContent:e,resolvedBody:t,id:m,properties:r,getActiveSample:s,formApi:o,validate:i}))))}export const RequestBody=memo(RequestBodyComponent);
+import React,{memo,useCallback,useEffect}from"react";import{useAtomValue}from"jotai";import{useFormContext}from"react-hook-form";import{DropdownOrLabel}from"../../DropdownOrLabel";import{MediaTypesSwitch}from"../../MediaTypeSwitch";import{Dropdown}from"../../common";import{RequestMimeLabel}from"../RequestMimeLabel";import{encodeSample,getStorageExampleKey}from"../utils";import{fromSessionStorage}from"../../../utils";import{Body}from"./Body";import{getActiveMediaType}from"../../../models";import{activeMimeNameAtom}from"../../../jotai/app";import{operationStore}from"../../../jotai/operation";function RequestBodyComponent({body:{content:e},resolvedBody:o,properties:t,mergeExampleBody:r,id:a,validate:m,pointer:i}){const{setValue:n}=useFormContext(),p=useAtomValue(activeMimeNameAtom),{examples:l,name:s}=e&&getActiveMediaType(e,p)||{},d=useCallback((o=>{if(!e||!e.hasSample)return"";if(!(null==l?void 0:l[o]))return"";const r=s&&fromSessionStorage(getStorageExampleKey(a,s,o,l)),m=r?JSON.parse(r):null==l?void 0:l[o];return encodeSample(m,t)}),[s,l,a,e,t]),{activeExampleName:c}=useAtomValue(operationStore(i));useEffect((()=>{if(t&&!r)return void n("body",JSON.stringify(t||{},null,2));const e=getStorageExampleKey(a,s,c,l),o=fromSessionStorage(e)||d(c||"");n("body","object"==typeof o?JSON.stringify(o,null,2):o)}),[l,c,s,n,d,a,t,r]);return React.createElement(React.Fragment,null,React.createElement(MediaTypesSwitch,{content:e,renderDropdown:e=>React.createElement(DropdownOrLabel,Object.assign({},e,{variant:"dark",fullWidth:!0,Label:RequestMimeLabel,Dropdown:Dropdown}))},(r=>React.createElement(Body,{mediaType:r,mediaContent:e,resolvedBody:o,id:a,properties:t,getActiveSample:d,validate:m}))))}export const RequestBody=memo(RequestBodyComponent);
 //# sourceMappingURL=RequestBody.js.map

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

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

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

@@ -1,10 +1,8 @@
 import React from 'react';
-import type { FormApi } from 'informed';
 import type { FieldModel, MediaTypeModel, UploadFileType } from '../../models';
 interface RequestBodyFormProps {
     mediaType: MediaTypeModel;
     onChange(key: string, file: UploadFileType): void;
-    formApi?: FormApi;
 }
 export declare const RequestBodyForm: React.NamedExoticComponent<RequestBodyFormProps>;
 export declare function getRequestBodyFormFields(mediaType: MediaTypeModel): FieldModel[];

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

@@ -1,4 +1,4 @@
-import React,{memo,useEffect}from"react";import styled from"styled-components";import{readAtom}from"../../jotai/nexus";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";import{operationStore}from"../../jotai/operation";import{normalizeText}from"../../utils";function RequestBodyFormComponent({mediaType:e,onChange:o,formApi:t}){var l;const n=e.examples||{},{exampleKey:m}=useExampleKey(e.operation,n),a=null===(l=n[m])||void 0===l?void 0:l.rawValue,i=getRequestBodyFormFields(e);useEffect((()=>t&&i.forEach((e=>{var o,l;const n=null==a?void 0:a[e.name],m=null!==(l=null!==(o=e.example)&&void 0!==o?o:null==n?void 0:n.example)&&void 0!==l?l:n,i="object"==typeof m?JSON.stringify(m):m;void 0!==m&&t.setValue("body."+e.name,`${i}`)}))),[m]);const r=e.schema||{};return isRootFileUpload(r,e.name)?React.createElement(FileFormControlWrapper,null,React.createElement(FormControl,null,React.createElement(StyledFileUpload,{fullWidth:!0,id:`body.${e.name}`,name:`body.${e.name}`,accept:mimeTypeToAccept(e.name),schema:r,contentName:e.name,onChange:o}))):r.type===DefinitionTypes.OBJECT||i?React.createElement(FileFormControlWrapper,null,i.map((t=>{const l=t.schema||{contentMediaType:"",type:"",description:""},n=e.name===MediaTypes.MULTIPART&&isMultipartFileUploadProperty(l),m=l.contentMediaType||"",a=n?React.createElement(StyledFileUpload,{fullWidth:!0,id:"body."+t.name,name:"body."+t.name,accept:mimeTypeToAccept(m),multiple:"array"===l.type,schema:l,contentName:t.name,onChange:o}):React.createElement(FormTextField,{fullWidth:!0,id:"body."+t.name,field:"body."+t.name,placeholder:normalizeText(l.description)||t.name,panel:"try-it"});return React.createElement(FormControl,{key:t.name},React.createElement(FormLabel,null,t.name,":"),a)}))):(console.warn(`Invalid schema for request body and mime type: "${e.name}"`,r),null)}export const RequestBodyForm=memo(RequestBodyFormComponent);export function getRequestBodyFormFields(e){var o,t,l,n,m,a;const{activeOneOf:i}=readAtom(operationStore(e.operation.pointer)),r=null!==(t=i[(null===(o=e.schema)||void 0===o?void 0:o.pointer)||""])&&void 0!==t?t:0;return((null===(n=null===(l=e.schema)||void 0===l?void 0:l.oneOf)||void 0===n?void 0:n.length)?(null===(m=e.schema)||void 0===m?void 0:m.oneOf[r].fields)||[]:(null===(a=e.schema)||void 0===a?void 0:a.fields)||[]).filter((e=>!e.schema.readOnly))}const FileFormControlWrapper=styled.div`
+import React,{memo,useEffect}from"react";import styled from"styled-components";import{useFormContext}from"react-hook-form";import{readAtom}from"../../jotai/nexus";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";import{operationStore}from"../../jotai/operation";import{normalizeText}from"../../utils";function RequestBodyFormComponent({mediaType:e,onChange:o}){var t;const{setValue:l}=useFormContext(),m=e.examples||{},{exampleKey:n}=useExampleKey(e.operation,m),r=null===(t=m[n])||void 0===t?void 0:t.rawValue,a=getRequestBodyFormFields(e);useEffect((()=>l&&a.forEach((e=>{var o,t;const m=null==r?void 0:r[e.name],n=null!==(t=null!==(o=e.example)&&void 0!==o?o:null==m?void 0:m.example)&&void 0!==t?t:m,a="object"==typeof n?JSON.stringify(n):n;void 0!==n&&l("body."+e.name,`${a}`)}))),[n]);const i=e.schema||{};return isRootFileUpload(i,e.name)?React.createElement(FileFormControlWrapper,null,React.createElement(FormControl,null,React.createElement(StyledFileUpload,{fullWidth:!0,fieldName:`body.${e.name}`,accept:mimeTypeToAccept(e.name),schema:i,contentName:e.name,onChange:o}))):i.type===DefinitionTypes.OBJECT||a?React.createElement(FileFormControlWrapper,null,a.map((t=>{const l=t.schema||{contentMediaType:"",type:"",description:""},m=e.name===MediaTypes.MULTIPART&&isMultipartFileUploadProperty(l),n=l.contentMediaType||"",r=m?React.createElement(StyledFileUpload,{fullWidth:!0,fieldName:"body."+t.name,accept:mimeTypeToAccept(n),multiple:"array"===l.type,schema:l,contentName:t.name,onChange:o}):React.createElement(FormTextField,{fullWidth:!0,id:"body."+t.name,fieldName:"body."+t.name,placeholder:normalizeText(l.description)||t.name,panel:"try-it"});return React.createElement(FormControl,{key:t.name},React.createElement(FormLabel,null,t.name,":"),r)}))):(console.warn(`Invalid schema for request body and mime type: "${e.name}"`,i),null)}export const RequestBodyForm=memo(RequestBodyFormComponent);export function getRequestBodyFormFields(e){var o,t,l,m,n,r;const{activeOneOf:a}=readAtom(operationStore(e.operation.pointer)),i=null!==(t=a[(null===(o=e.schema)||void 0===o?void 0:o.pointer)||""])&&void 0!==t?t:0;return((null===(m=null===(l=e.schema)||void 0===l?void 0:l.oneOf)||void 0===m?void 0:m.length)?(null===(n=e.schema)||void 0===n?void 0:n.oneOf[i].fields)||[]:(null===(r=e.schema)||void 0===r?void 0:r.fields)||[]).filter((e=>!e.schema.readOnly))}const FileFormControlWrapper=styled.div`
   > div {
     margin-top: 10px;
   }