@redocly/reference-docs 3.0.0-alpha.1 → 3.0.0-alpha.4

package/lib/components/StoreProvider.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { RedocProRawOptions } from '../services/ProStore';
-import { ProStore } from '../services/ProStore';
 import type { CodeSampleConfig } from '../services/code-samples/types';
 import type { SpecVersions } from '../services/VersionedSpecStore';
+import { ProStore } from '../services/ProStore';
 export declare const Provider: React.Provider<ProStore | undefined>, Consumer: React.Consumer<ProStore | undefined>;
 interface StoreProviderProps {
     definitionUrl?: string;

package/lib/components/StoreProvider.js

@@ -1,2 +1,2 @@
-"use strict";var _a;Object.defineProperty(exports,"__esModule",{value:!0}),exports.loadSpecs=exports.ProStoreProvider=exports.Consumer=exports.Provider=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),redoc_lib_1=require("../redoc-lib"),ProStore_1=require("../services/ProStore"),fast_deep_equal_1=(0,tslib_1.__importDefault)(require("fast-deep-equal")),services_1=require("../services");exports.Provider=(_a=React.createContext(void 0)).Provider,exports.Consumer=_a.Consumer;var ProStoreProvider=function(e){var t=e.definitions,r=e.options,n=e.definitionUrl,i=e.definition,o=e.activeItemId,s=e.activeSampleLanguage,a=e.activeDeepLink,c=e.children,u=React.useState()[1],l=React.useState(!0),d=l[0],f=l[1],p=React.useState(null),v=p[0],_=p[1];React.useEffect((function(){!function(){(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var e,o,s;return(0,tslib_1.__generator)(this,(function(a){switch(a.label){case 0:f(!0),a.label=1;case 1:return a.trys.push([1,6,,7]),e=_,t?[4,loadMany(t)]:[3,3];case 2:return o=a.sent(),[3,5];case 3:return[4,loadSingle(i,n,r)];case 4:o=a.sent(),a.label=5;case 5:return e.apply(void 0,[o]),[3,7];case 6:return s=a.sent(),u((function(){throw s})),[3,7];case 7:return[2]}}))}))}()}),[t,i,n,r]);var h=React.useMemo((function(){var e,t,i;if(v){var o=new ProStore_1.ProStore(v,n,r);return(null===(e=o.options.hooks)||void 0===e?void 0:e.onInit)&&(null===(i=null===(t=o.options.hooks)||void 0===t?void 0:t.onInit)||void 0===i||i.call(t,{store:o})),o}}),useDeepCompareMemoize([v,r]));return React.useEffect((function(){if(h)return f(!1),function(){return h.dispose()}}),[h]),React.useEffect((function(){var e;if(h&&o){var t=(null==o?void 0:o.split(h.options.deepLinkPrefix)[0])||(null===(e=h.menu.flatItems[h.menu.activeItemIdx])||void 0===e?void 0:e.id),r=h.menu.flatItems.find((function(e){return e.id===t})),n=a?t+h.options.deepLinkPrefix+a:void 0;n&&h.menu.history instanceof services_1.FakeHistoryService&&h.menu.history.replaceForField(n),h.menu.activateAndScroll(r,!0,!1,n)}}),[o,a,h]),React.useEffect((function(){h&&s&&h.setActiveSampleLanguage(s)}),[s,h]),c({loading:d,store:h})};function fixSpec(e){for(var t=e.components&&e.components.securitySchemes||{},r=0,n=Object.keys(t);r<n.length;r++){var i=t[n[r]];i["x-type"]&&(i.type=i["x-type"]),i["x-scheme"]&&(i.scheme=i["x-scheme"])}}function loadMany(e){return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){return(0,tslib_1.__generator)(this,(function(t){switch(t.label){case 0:return[4,loadSpecs(e||{})];case 1:return t.sent(),[2,e]}}))}))}function loadSingle(e,t,r){return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var n,i,o,s,a;return(0,tslib_1.__generator)(this,(function(c){switch(c.label){case 0:if(!(null==r?void 0:r.skipBundleAndConvert))return[3,1];if(!e)throw new Error('spec must be specified when using "skipBundleAndConvert"');return n=e,[3,3];case 1:return[4,(0,redoc_lib_1.loadAndBundleDefinition)(e||t)];case 2:n=c.sent(),c.label=3;case 3:if(!(i=null==r?void 0:r.unstable_externalDescription))return[3,8];c.label=4;case 4:return c.trys.push([4,7,,8]),[4,fetch(i)];case 5:return o=c.sent(),s=n.info,[4,o.text()];case 6:return s.description=c.sent(),[3,8];case 7:return a=c.sent(),console.warn("Failed to load external description from "+i+": "+a.message),[3,8];case 8:try{fixSpec(n)}catch(e){}return[2,n]}}))}))}function loadAndBundleSpecOrMd(e,t){return e.endsWith(".md")?(0,redoc_lib_1.loadAndBundleDefinition)({openapi:"3.0.0",info:{title:t||"",version:"1.0",description:{$ref:e}},paths:{}}):(0,redoc_lib_1.loadAndBundleDefinition)(e)}function loadSpecs(e){var t=e.versions;return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var e,r,n,i;return(0,tslib_1.__generator)(this,(function(o){switch(o.label){case 0:if(!Array.isArray(t))return[3,4];e=0,r=t,o.label=1;case 1:return e<r.length?(n=r[e]).url?(i=n,[4,loadAndBundleSpecOrMd(n.url)]):[3,3]:[3,4];case 2:i.spec=o.sent(),o.label=3;case 3:return e++,[3,1];case 4:return[2]}}))}))}function useDeepCompareMemoize(e){var t=React.useRef(),r=React.useRef(0);return(0,fast_deep_equal_1.default)(e,t.current)||(t.current=e,r.current+=1),[r.current]}exports.ProStoreProvider=ProStoreProvider,exports.loadSpecs=loadSpecs;
+"use strict";var _a;Object.defineProperty(exports,"__esModule",{value:!0}),exports.loadSpecs=exports.ProStoreProvider=exports.Consumer=exports.Provider=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),fast_deep_equal_1=(0,tslib_1.__importDefault)(require("fast-deep-equal")),redoc_lib_1=require("../redoc-lib"),ProStore_1=require("../services/ProStore"),services_1=require("../services");exports.Provider=(_a=React.createContext(void 0)).Provider,exports.Consumer=_a.Consumer;var ProStoreProvider=function(e){var t=e.definitions,r=e.options,n=e.definitionUrl,i=e.definition,o=e.activeItemId,s=e.activeSampleLanguage,a=e.activeDeepLink,c=e.children,u=React.useState()[1],l=React.useState(!0),d=l[0],f=l[1],p=React.useState(null),v=p[0],_=p[1];React.useEffect((function(){!function(){(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var e,o,s;return(0,tslib_1.__generator)(this,(function(a){switch(a.label){case 0:f(!0),a.label=1;case 1:return a.trys.push([1,6,,7]),e=_,t?[4,loadMany(t)]:[3,3];case 2:return o=a.sent(),[3,5];case 3:return[4,loadSingle(i,n,r)];case 4:o=a.sent(),a.label=5;case 5:return e.apply(void 0,[o]),[3,7];case 6:return s=a.sent(),u((function(){throw s})),[3,7];case 7:return[2]}}))}))}()}),[t,i,n,r]);var h=React.useMemo((function(){var e,t,i;if(v){var o=new ProStore_1.ProStore(v,n,r);return(null===(e=o.options.hooks)||void 0===e?void 0:e.onInit)&&(null===(i=null===(t=o.options.hooks)||void 0===t?void 0:t.onInit)||void 0===i||i.call(t,{store:o})),o}}),useDeepCompareMemoize([v,r]));return React.useEffect((function(){if(h)return f(!1),function(){return h.dispose()}}),[h]),React.useEffect((function(){var e;if(h&&o){var t=(null==o?void 0:o.split(h.options.deepLinkPrefix)[0])||(null===(e=h.menu.flatItems[h.menu.activeItemIdx])||void 0===e?void 0:e.id),r=h.menu.flatItems.find((function(e){return e.id===t})),n=a?t+h.options.deepLinkPrefix+a:void 0;n&&h.menu.history instanceof services_1.FakeHistoryService&&h.menu.history.replaceForField(n),h.menu.activateAndScroll(r,!0,!1,n)}}),[o,a,h]),React.useEffect((function(){h&&s&&h.setActiveSampleLanguage(s)}),[s,h]),c({loading:d,store:h})};function fixSpec(e){for(var t=e.components&&e.components.securitySchemes||{},r=0,n=Object.keys(t);r<n.length;r++){var i=t[n[r]];i["x-type"]&&(i.type=i["x-type"]),i["x-scheme"]&&(i.scheme=i["x-scheme"])}}function loadMany(e){return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){return(0,tslib_1.__generator)(this,(function(t){switch(t.label){case 0:return[4,loadSpecs(e||{})];case 1:return t.sent(),[2,e]}}))}))}function loadSingle(e,t,r){return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var n,i,o,s,a;return(0,tslib_1.__generator)(this,(function(c){switch(c.label){case 0:if(!(null==r?void 0:r.skipBundleAndConvert))return[3,1];if(!e)throw new Error('spec must be specified when using "skipBundleAndConvert"');return n=e,[3,3];case 1:return[4,(0,redoc_lib_1.loadAndBundleDefinition)(e||t)];case 2:n=c.sent(),c.label=3;case 3:if(!(i=null==r?void 0:r.unstable_externalDescription))return[3,8];c.label=4;case 4:return c.trys.push([4,7,,8]),[4,fetch(i)];case 5:return o=c.sent(),s=n.info,[4,o.text()];case 6:return s.description=c.sent(),[3,8];case 7:return a=c.sent(),console.warn("Failed to load external description from "+i+": "+a.message),[3,8];case 8:try{fixSpec(n)}catch(e){}return[2,n]}}))}))}function loadAndBundleSpecOrMd(e,t){return e.endsWith(".md")?(0,redoc_lib_1.loadAndBundleDefinition)({openapi:"3.0.0",info:{title:t||"",version:"1.0",description:{$ref:e}},paths:{}}):(0,redoc_lib_1.loadAndBundleDefinition)(e)}function loadSpecs(e){var t=e.versions;return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var e,r,n,i;return(0,tslib_1.__generator)(this,(function(o){switch(o.label){case 0:if(!Array.isArray(t))return[3,4];e=0,r=t,o.label=1;case 1:return e<r.length?(n=r[e]).url?(i=n,[4,loadAndBundleSpecOrMd(n.url)]):[3,3]:[3,4];case 2:i.spec=o.sent(),o.label=3;case 3:return e++,[3,1];case 4:return[2]}}))}))}function useDeepCompareMemoize(e){var t=React.useRef(),r=React.useRef(0);return(0,fast_deep_equal_1.default)(e,t.current)||(t.current=e,r.current+=1),[r.current]}exports.ProStoreProvider=ProStoreProvider,exports.loadSpecs=loadSpecs;
 //# sourceMappingURL=StoreProvider.js.map

package/lib/components/Tabs/CollapsingTabs/CollapsingTabs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsingTabs=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importStar)(require("react")),CollapsingTabsBase_1=require("./CollapsingTabsBase"),mobx_react_1=require("mobx-react");function getActiveIndexFromOperation(e,t,a){var r;return t?"number"==typeof a&&a>0?hasActiveExampleName(null===(r=e[a])||void 0===r?void 0:r.content,t)?a:getActiveIndexFromOperation(e,t):e.findIndex((function(e){return hasActiveExampleName(e.content,t)})):-1}function hasActiveExampleName(e,t){return!!(null==e?void 0:e.mediaTypes.find((function(e){return Object.keys(e.examples||[]).includes(t||"")})))}exports.CollapsingTabs=(0,mobx_react_1.observer)((function(e){var t=e.children,a=(0,tslib_1.__rest)(e,["children"]),r=(0,react_1.useState)(0),n=r[0],i=r[1],s=a.operation,o=a.operation.activeExampleName;(0,react_1.useEffect)((function(){var e=getActiveIndexFromOperation(s.responses,o,n);e>-1&&i(e)}),[o]);var l=react_1.default.useCallback((function(e){n!==e&&i(e)}),[n]);return react_1.default.createElement(CollapsingTabsBase_1.CollapsingTabsBase,(0,tslib_1.__assign)({},a,{activeIndex:n,onChange:l}),t)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsingTabs=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importStar)(require("react")),mobx_react_1=require("mobx-react"),CollapsingTabsBase_1=require("./CollapsingTabsBase");function getActiveIndexFromOperation(e,t,a){var r;return t?"number"==typeof a&&a>0?hasActiveExampleName(null===(r=e[a])||void 0===r?void 0:r.content,t)?a:getActiveIndexFromOperation(e,t):e.findIndex((function(e){return hasActiveExampleName(e.content,t)})):-1}function hasActiveExampleName(e,t){return!!(null==e?void 0:e.mediaTypes.find((function(e){return Object.keys(e.examples||[]).includes(t||"")})))}exports.CollapsingTabs=(0,mobx_react_1.observer)((function(e){var t=e.children,a=(0,tslib_1.__rest)(e,["children"]),r=(0,react_1.useState)(0),n=r[0],i=r[1],s=a.operation,o=a.operation.activeExampleName;(0,react_1.useEffect)((function(){var e=getActiveIndexFromOperation(s.responses,o,n);e>-1&&i(e)}),[o]);var l=react_1.default.useCallback((function(e){n!==e&&i(e)}),[n]);return react_1.default.createElement(CollapsingTabsBase_1.CollapsingTabsBase,(0,tslib_1.__assign)({},a,{activeIndex:n,onChange:l}),t)}));
 //# sourceMappingURL=CollapsingTabs.js.map

package/lib/components/Tabs/CollapsingTabs/CollapsingTabsBase.d.ts

@@ -14,5 +14,5 @@ interface CollapsingTabsComponentProps extends TabsProps {
     activeIndex: number;
     onChange: (idx: number) => void;
 }
-export declare const CollapsingTabsBase: ({ tabs, children, hidden, activeIndex, onChange, }: CollapsingTabsComponentProps) => JSX.Element;
+export declare const CollapsingTabsBase: React.NamedExoticComponent<CollapsingTabsComponentProps>;
 export {};

package/lib/components/Tabs/CollapsingTabs/CollapsingTabsBase.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsingTabsBase=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importStar)(require("react")),react_tabs_1=require("react-tabs"),redoc_lib_1=require("../../../redoc-lib"),CollapsingTabList_1=require("./CollapsingTabList"),CollapsingTab_1=require("./CollapsingTab"),Dropdown_1=require("../../common/Dropdown"),CollapsingTabsBase=function(e){var t=e.tabs,a=e.children,l=e.hidden,r=e.activeIndex,n=e.onChange,i=(0,react_1.useContext)(redoc_lib_1.OptionsContext).samplesTabsMaxCount,o=(0,react_1.useMemo)((function(){return t.slice(i).map((function(e,t){return{idx:t,value:e.title}}))}),[t,i]),s=o.length+" more",c=(0,react_1.useState)(s),u=c[0],_=c[1],d=react_1.default.useCallback((function(){var e=r>=i;u!==s&&u===t[r].title||!e?u===s||e||_(s):_(t[r].title)}),[r,i,u,s,t]);(0,react_1.useEffect)((function(){setTimeout(d,0)}),[r,i,d]);return react_1.default.createElement(react_tabs_1.Tabs,{selectedIndex:r,onSelect:n},react_1.default.createElement(CollapsingTabList_1.CollapsingTabList,{hidden:l},t.map((function(e,t){return react_1.default.createElement(CollapsingTab_1.CollapsingTab,{key:e.key,disabled:t>=i},e.title)})),o.length?react_1.default.createElement(Dropdown_1.CollapsingDropdown,{options:o,onChange:function(e){n(i+e.idx)},placeholder:s,value:u,active:r>=i}):null),a)};exports.CollapsingTabsBase=CollapsingTabsBase;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsingTabsBase=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importStar)(require("react")),react_tabs_1=require("react-tabs"),redoc_lib_1=require("../../../redoc-lib"),Dropdown_1=require("../../common/Dropdown"),CollapsingTabList_1=require("./CollapsingTabList"),CollapsingTab_1=require("./CollapsingTab");function CollapsingTabsBaseComponent(e){var t=e.tabs,a=e.children,l=e.hidden,n=e.activeIndex,r=e.onChange,o=(0,react_1.useContext)(redoc_lib_1.OptionsContext).samplesTabsMaxCount,i=(0,react_1.useMemo)((function(){return t.slice(o).map((function(e,t){return{idx:t,value:e.title}}))}),[t,o]),s=i.length+" more",c=(0,react_1.useState)(s),u=c[0],_=c[1],p=react_1.default.useCallback((function(){var e=n>=o;u!==s&&u===t[n].title||!e?u===s||e||_(s):_(t[n].title)}),[n,o,u,s,t]);(0,react_1.useEffect)((function(){setTimeout(p,0)}),[n,o,p]);return react_1.default.createElement(react_tabs_1.Tabs,{selectedIndex:n,onSelect:r},react_1.default.createElement(CollapsingTabList_1.CollapsingTabList,{hidden:l},t.map((function(e,t){return react_1.default.createElement(CollapsingTab_1.CollapsingTab,{key:e.key,disabled:t>=o},e.title)})),i.length?react_1.default.createElement(Dropdown_1.CollapsingDropdown,{options:i,onChange:function(e){r(o+e.idx)},placeholder:s,value:u,active:n>=o}):null),a)}exports.CollapsingTabsBase=(0,react_1.memo)(CollapsingTabsBaseComponent);
 //# sourceMappingURL=CollapsingTabsBase.js.map

package/lib/components/VersionSwitcher.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { DropdownOption } from './common/Dropdown';
 import type { VersionedSpecStore } from '../services/VersionedSpecStore';
+import type { DropdownOption } from './common/Dropdown';
 export interface VersionSwitcherProps {
     onChange: (o: DropdownOption) => void;
     spec: VersionedSpecStore;

package/lib/components/common/CheckboxList.d.ts

@@ -1,6 +1,6 @@
-import type { ChangeEvent } from 'react';
 import React from 'react';
 import type { FieldContext } from 'informed';
+import type { ChangeEvent } from 'react';
 declare type FieldValue = string[];
 interface CheckboxListComponentState {
     collapsed: boolean;

package/lib/components/common/ClearButton/ClearButton.d.ts

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

package/lib/components/common/ClearButton/ClearButton.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ClearButton=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),ClearButtonComponent=function(e){var t=e.className,r=e.style,a=e.handleClear;return react_1.default.createElement("button",{className:t,style:r,onClick:a},"✕")};exports.ClearButton=react_1.default.memo(ClearButtonComponent);
+//# sourceMappingURL=ClearButton.js.map

package/lib/components/common/ClearButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

package/lib/components/common/ClearButton/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=require("tslib");(0,tslib_1.__exportStar)(require("./styled"),exports),(0,tslib_1.__exportStar)(require("./types"),exports);
+//# sourceMappingURL=index.js.map

package/lib/components/common/ClearButton/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ClearButton: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").ClearButtonProps>, any, {}, never>;

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ClearButton=void 0;var templateObject_1,tslib_1=require("tslib"),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),ClearButton_1=require("./ClearButton");exports.ClearButton=(0,styled_components_1.default)(ClearButton_1.ClearButton)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  z-index: 1;\n  position: absolute;\n  right: 24px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #89949f;\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    color: #fff;\n  }\n"],["\n  z-index: 1;\n  position: absolute;\n  right: 24px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #89949f;\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    color: #fff;\n  }\n"])));
+//# sourceMappingURL=styled.js.map

package/lib/components/common/ClearButton/types.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export interface ClearButtonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    handleClear?: () => void;
+}

package/lib/components/common/ClearButton/types.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});
+//# sourceMappingURL=types.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dropdown=void 0;var templateObject_1,tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),ArrowSvg=function(e){var t=e.className,n=e.style;return react_1.default.createElement("svg",{className:t,style:n,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},react_1.default.createElement("polyline",{points:"6 9 12 15 18 9"}))},ArrowIcon=(0,styled_components_1.default)(ArrowSvg)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"],["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"])),(function(e){return"dark"===e.variant&&"white"})),DropdownComponent=function(e){var t=e.options,n=e.onChange,r=e.placeholder,a=e.value,o=void 0===a?"":a,l=e.className,s=e.variant,i=void 0===s?"light":s;return react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:i}),react_1.default.createElement("select",{onChange:function(e){var a=e.target.selectedIndex;n(t[r?a-1:a])},value:o,className:"dropdown-select"},r&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:r},r),t.map((function(e,t){var n=e.idx,r=e.value,a=e.title;return react_1.default.createElement("option",{key:n||r+t,value:r,className:"dropdown-option"},a||r)}))),react_1.default.createElement("label",null,o))};exports.Dropdown=react_1.default.memo(DropdownComponent);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dropdown=void 0;var templateObject_1,tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),ClearButton_1=require("../ClearButton"),ArrowSvg=function(e){var t=e.className,n=e.style;return react_1.default.createElement("svg",{className:t,style:n,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},react_1.default.createElement("polyline",{points:"6 9 12 15 18 9"}))},ArrowIcon=(0,styled_components_1.default)(ArrowSvg)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"],["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"])),(function(e){return"dark"===e.variant&&"white"})),DropdownComponent=function(e){var t=e.options,n=e.onChange,r=e.handleClear,a=e.clearable,o=e.placeholder,l=e.value,i=void 0===l?"":l,s=e.className,c=e.variant,d=void 0===c?"light":c;return react_1.default.createElement("div",{className:s+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:d}),a&&(null==i?void 0:i.length)>0&&react_1.default.createElement(ClearButton_1.ClearButton,{handleClear:r}),react_1.default.createElement("select",{onChange:function(e){var r=e.target.selectedIndex;n(t[o||!i?r-1:r])},value:i,className:"dropdown-select"},o&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:o},o),!i&&!o&&react_1.default.createElement("option",{disabled:!0}),t.map((function(e,t){var n=e.idx,r=e.value,a=e.title;return react_1.default.createElement("option",{key:n||r+t,value:r,className:"dropdown-option"},a||r)}))),react_1.default.createElement("label",null,i))};exports.Dropdown=react_1.default.memo(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.VersionDropdown=exports.CollapsingDropdown=exports.SimpleDropdown=exports.Dropdown=void 0;var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,tslib_1=require("tslib"),styled_components_1=(0,tslib_1.__importStar)(require("styled-components")),Dropdown_1=require("./Dropdown"),darkDropdownStyle=(0,styled_components_1.css)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  background-color: var(--samples-panel-controls-background-color);\n  border-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"],["\n  background-color: var(--samples-panel-controls-background-color);\n  border-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"])));exports.Dropdown=(0,styled_components_1.default)(Dropdown_1.Dropdown)(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: var(--global-border-radius);\n  vertical-align: bottom;\n  position: relative;\n  width: ",";\n  cursor: pointer;\n  text-transform: none;\n\n  label {\n    box-sizing: border-box;\n    min-width: 90px;\n    outline: none;\n    display: inline-block;\n    color: var(--color-content);\n    border-radius: var(--global-border-radius);\n    padding: ",";\n    vertical-align: bottom;\n    width: ",";\n    text-transform: none;\n\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    &,\n    &:hover,\n    &:focus-within {\n      border: 1px solid var(--global-border-color);\n      box-shadow: none;\n    }\n\n    ",";\n  }\n\n  .dropdown-select {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    border: none;\n    appearance: none;\n    cursor: pointer;\n\n    color: var(--color-content);\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    padding: ",";\n    ",";\n  }\n"],["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: var(--global-border-radius);\n  vertical-align: bottom;\n  position: relative;\n  width: ",";\n  cursor: pointer;\n  text-transform: none;\n\n  label {\n    box-sizing: border-box;\n    min-width: 90px;\n    outline: none;\n    display: inline-block;\n    color: var(--color-content);\n    border-radius: var(--global-border-radius);\n    padding: ",";\n    vertical-align: bottom;\n    width: ",";\n    text-transform: none;\n\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    &,\n    &:hover,\n    &:focus-within {\n      border: 1px solid var(--global-border-color);\n      box-shadow: none;\n    }\n\n    ",";\n  }\n\n  .dropdown-select {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    border: none;\n    appearance: none;\n    cursor: pointer;\n\n    color: var(--color-content);\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    padding: ",";\n    ",";\n  }\n"])),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return n.dense?"2px 24px 2px 8px":"8px 26px 8px 10px"}),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return"dark"===n.variant?darkDropdownStyle:""}),(function(n){return n.dense?"2px 24px 2px 8px":"8px 26px 8px 10px"}),(function(n){return"dark"===n.variant?darkDropdownStyle:""})),exports.SimpleDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_3||(templateObject_3=(0,tslib_1.__makeTemplateObject)(["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    padding: 0 26px 0 4px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 400;\n    appearance: none;\n\n    &:hover,\n    &:focus-within {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"],["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    padding: 0 26px 0 4px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 400;\n    appearance: none;\n\n    &:hover,\n    &:focus-within {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"]))),exports.CollapsingDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_4||(templateObject_4=(0,tslib_1.__makeTemplateObject)(["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    ",";\n\n    height: 40px;\n    border-radius: 0 var(--global-border-radius) 0 0;\n    margin: 0 0 -4px;\n    transition: none;\n    min-width: auto;\n    background: ",";\n    & {\n      border-bottom: 4px solid\n        ",";\n\n      &[open],\n      &:focus-within,\n      &:hover {\n        background: var(--global-border-color-secondary);\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"],["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    ",";\n\n    height: 40px;\n    border-radius: 0 var(--global-border-radius) 0 0;\n    margin: 0 0 -4px;\n    transition: none;\n    min-width: auto;\n    background: ",";\n    & {\n      border-bottom: 4px solid\n        ",";\n\n      &[open],\n      &:focus-within,\n      &:hover {\n        background: var(--global-border-color-secondary);\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"])),darkDropdownStyle,(function(n){return n.active?"var(--global-border-color-secondary)":"none"}),(function(n){return n.active?"var(--samples-panel-controls-active-border-color)":"transparent"}),(function(n){return n.active?"var(--samples-panel-controls-active-border-color)":"transparent"})),exports.VersionDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_5||(templateObject_5=(0,tslib_1.__makeTemplateObject)(["\n  width: 90%;\n  label {\n    width: 100%;\n    font-weight: 600;\n    color: var(--color-content);\n  }\n"],["\n  width: 90%;\n  label {\n    width: 100%;\n    font-weight: 600;\n    color: var(--color-content);\n  }\n"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.VersionDropdown=exports.CollapsingDropdown=exports.SimpleDropdown=exports.Dropdown=void 0;var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,tslib_1=require("tslib"),styled_components_1=(0,tslib_1.__importStar)(require("styled-components")),Dropdown_1=require("./Dropdown"),darkDropdownStyle=(0,styled_components_1.css)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  background-color: var(--samples-panel-controls-background-color);\n  border-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"],["\n  background-color: var(--samples-panel-controls-background-color);\n  border-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"])));exports.Dropdown=(0,styled_components_1.default)(Dropdown_1.Dropdown)(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: var(--global-border-radius);\n  vertical-align: bottom;\n  position: relative;\n  width: ",";\n  cursor: pointer;\n  text-transform: none;\n\n  label {\n    box-sizing: border-box;\n    min-width: 90px;\n    height: ",";\n    outline: none;\n    display: inline-block;\n    color: var(--color-content);\n    border-radius: var(--global-border-radius);\n    padding: ",";\n    vertical-align: bottom;\n    width: ",";\n    text-transform: none;\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    &,\n    &:hover,\n    &:focus-within {\n      border: 1px solid var(--global-border-color);\n      box-shadow: none;\n    }\n\n    ",";\n  }\n\n  .dropdown-select {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    border: none;\n    appearance: none;\n    cursor: pointer;\n\n    color: var(--color-content);\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    padding: ",";\n    ",";\n  }\n"],["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: var(--global-border-radius);\n  vertical-align: bottom;\n  position: relative;\n  width: ",";\n  cursor: pointer;\n  text-transform: none;\n\n  label {\n    box-sizing: border-box;\n    min-width: 90px;\n    height: ",";\n    outline: none;\n    display: inline-block;\n    color: var(--color-content);\n    border-radius: var(--global-border-radius);\n    padding: ",";\n    vertical-align: bottom;\n    width: ",";\n    text-transform: none;\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    &,\n    &:hover,\n    &:focus-within {\n      border: 1px solid var(--global-border-color);\n      box-shadow: none;\n    }\n\n    ",";\n  }\n\n  .dropdown-select {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    border: none;\n    appearance: none;\n    cursor: pointer;\n\n    color: var(--color-content);\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    padding: ",";\n    ",";\n  }\n"])),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return n.dense?"26px":"36px"}),(function(n){return n.dense?"2px 24px 2px 8px":"8px 26px 8px 10px"}),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return"dark"===n.variant?darkDropdownStyle:""}),(function(n){return n.dense?"2px 24px 2px 8px":"8px 26px 8px 10px"}),(function(n){return"dark"===n.variant?darkDropdownStyle:""})),exports.SimpleDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_3||(templateObject_3=(0,tslib_1.__makeTemplateObject)(["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    padding: 0 26px 0 4px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 400;\n    appearance: none;\n    height: auto;\n\n    &:hover,\n    &:focus-within {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"],["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    padding: 0 26px 0 4px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 400;\n    appearance: none;\n    height: auto;\n\n    &:hover,\n    &:focus-within {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"]))),exports.CollapsingDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_4||(templateObject_4=(0,tslib_1.__makeTemplateObject)(["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    ",";\n\n    height: 40px;\n    border-radius: 0 var(--global-border-radius) 0 0;\n    margin: 0 0 -4px;\n    transition: none;\n    min-width: auto;\n    background: ",";\n    & {\n      border-bottom: 4px solid\n        ",";\n\n      &[open],\n      &:focus-within,\n      &:hover {\n        background: var(--global-border-color-secondary);\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"],["\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  label {\n    ",";\n\n    height: 40px;\n    border-radius: 0 var(--global-border-radius) 0 0;\n    margin: 0 0 -4px;\n    transition: none;\n    min-width: auto;\n    background: ",";\n    & {\n      border-bottom: 4px solid\n        ",";\n\n      &[open],\n      &:focus-within,\n      &:hover {\n        background: var(--global-border-color-secondary);\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"])),darkDropdownStyle,(function(n){return n.active?"var(--global-border-color-secondary)":"none"}),(function(n){return n.active?"var(--samples-panel-controls-active-border-color)":"transparent"}),(function(n){return n.active?"var(--samples-panel-controls-active-border-color)":"transparent"})),exports.VersionDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_5||(templateObject_5=(0,tslib_1.__makeTemplateObject)(["\n  width: 90%;\n  label {\n    width: 100%;\n    font-weight: 600;\n    color: var(--color-content);\n  }\n"],["\n  width: 90%;\n  label {\n    width: 100%;\n    font-weight: 600;\n    color: var(--color-content);\n  }\n"])));
 //# sourceMappingURL=styled.js.map

package/lib/components/common/Dropdown/types.d.ts

@@ -9,6 +9,8 @@ export interface DropdownOption {
 export interface DropdownProps {
     options: DropdownOption[];
     onChange: (option: DropdownOption) => void;
+    handleClear?: () => void;
+    clearable?: boolean;
     ariaLabel?: string;
     className?: string;
     placeholder?: string;

package/lib/components/common/FileUpload/FileUpload.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import type { SchemaModel } from '../../../redoc-lib/src/services/models/Schema';
+import type { UploadFileType } from '../../../models';
 export interface FileUploadProps {
     schema: SchemaModel | GenericObject;
     contentName: string;
-    onChange(string: any, UploadFileType: any): void;
+    onChange(key: string, file: UploadFileType): void;
     name: string;
 }
-export declare const FileUpload: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & FileUploadProps & React.RefAttributes<HTMLInputElement>>;
+export declare const FileUpload: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & FileUploadProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/common/FileUpload/FileUpload.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FileUpload=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),informed_1=require("informed"),helper_1=require("./helper");exports.FileUpload=React.forwardRef((function(e,t){var r=(0,tslib_1.__rest)(e,[]),i=r.schema,a=r.contentName,l=r.onChange,n=r.name;return(0,(0,informed_1.useField)((0,tslib_1.__assign)({field:n},r)).render)(React.createElement("input",{"data-cy":"file-upload-input",type:"file",id:r.id,className:r.className,name:r.name,onChange:function(e){return(0,tslib_1.__awaiter)(void 0,void 0,void 0,(function(){var t;return(0,tslib_1.__generator)(this,(function(r){switch(r.label){case 0:return[4,(0,helper_1.getFileToUpload)(e.target.files,i)];case 1:return t=r.sent(),l(a,t),[2]}}))}))},multiple:r.multiple,accept:r.accept,ref:t}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FileUpload=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),informed_1=require("informed"),helper_1=require("./helper");exports.FileUpload=React.forwardRef((function(e,t){var r=(0,tslib_1.__rest)(e,[]),i=r.schema,a=r.contentName,l=r.onChange,n=r.name,s=(0,tslib_1.__rest)(r,["schema","contentName","onChange","name"]);return(0,(0,informed_1.useField)((0,tslib_1.__assign)({field:n},s)).render)(React.createElement("input",{"data-cy":"file-upload-input",type:"file",id:r.id,className:r.className,name:r.name,onChange:function(e){return(0,tslib_1.__awaiter)(void 0,void 0,void 0,(function(){var t;return(0,tslib_1.__generator)(this,(function(r){switch(r.label){case 0:return[4,(0,helper_1.getFileToUpload)(e.target.files,i)];case 1:return t=r.sent(),l(a,t),[2]}}))}))},multiple:r.multiple,accept:r.accept,ref:t}))})),exports.FileUpload.displayName="FileUpload";
 //# sourceMappingURL=FileUpload.js.map

package/lib/components/common/TextField.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FormDropdown=exports.FormTextField=exports.TextField=exports.StyledInput=exports.getInvertedInputStyles=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),informed_1=require("informed"),informed_2=require("informed"),styled_components_1=(0,tslib_1.__importStar)(require("styled-components")),form_1=require("./form"),Dropdown_1=require("./Dropdown"),hooks_1=require("../../hooks"),getInvertedInputStyles=function(e){return(0,styled_components_1.css)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--","-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-family: var(--code-font-family);\n  font-size: var(--font-size-base);\n\n  &::placeholder {\n    opacity: 0.6;\n    color: var(--color-content-inverse);\n  }\n\n  &:-webkit-autofill {\n    background-color: var(--","-panel-background-color);\n  }\n"],["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--","-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-family: var(--code-font-family);\n  font-size: var(--font-size-base);\n\n  &::placeholder {\n    opacity: 0.6;\n    color: var(--color-content-inverse);\n  }\n\n  &:-webkit-autofill {\n    background-color: var(--","-panel-background-color);\n  }\n"])),e,e)};exports.getInvertedInputStyles=getInvertedInputStyles;var TextFieldWrapper=styled_components_1.default.div(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  display: ",";\n  ","\n"],["\n  display: ",";\n  ","\n"])),(function(e){return"hidden"===e.type?"none":"inline-block"}),(function(e){return e.fullWidth?"width: 100%;":""})),InputWrap=styled_components_1.default.div(templateObject_3||(templateObject_3=(0,tslib_1.__makeTemplateObject)(["\n  position: relative;\n"],["\n  position: relative;\n"])));exports.StyledInput=styled_components_1.default.input(templateObject_4||(templateObject_4=(0,tslib_1.__makeTemplateObject)(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"])),(function(e){var t=e.panel;return(0,exports.getInvertedInputStyles)(t)}),(function(e){var t=e.inputType,n=e.inputActionButton;return"password"===t||n?"padding-right: 40px;":""}),(function(e){return e.fullWidth?"width: 100%;":""}));var InputActionButton=styled_components_1.default.span(templateObject_5||(templateObject_5=(0,tslib_1.__makeTemplateObject)(["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  color: var(--samples-panel-text-color);\n"],["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  color: var(--samples-panel-text-color);\n"])));function TextFieldComponent(e,t){var n=e.fullWidth,r=e.errorMessage,o=e.type,l=e.inputActionButton,a=e.panel,i=void 0===a?"samples":a,u=(0,tslib_1.__rest)(e,["fullWidth","errorMessage","type","inputActionButton","panel"]),p=react_1.default.useState("password"===o),c=p[0],d=p[1],s=react_1.default.useCallback((function(){d(!c)}),[c]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:n,type:o},react_1.default.createElement(InputWrap,null,react_1.default.createElement(exports.StyledInput,(0,tslib_1.__assign)({fullWidth:n,inputActionButton:l,type:c?"password":"text",inputType:o,ref:t,panel:i},u)),l?react_1.default.createElement(InputActionButton,{onClick:l.onClick},l.label):"password"===o?react_1.default.createElement(InputActionButton,{onClick:s},c?"show":"hide"):null),r?react_1.default.createElement(form_1.FormError,null,r):null)}function FormTextField(e){var t=(0,informed_2.useField)((0,tslib_1.__assign)({fieldType:"text"},e)),n=t.userProps,r=t.render,o=t.fieldState,l=t.informed;return r(react_1.default.createElement(exports.TextField,(0,tslib_1.__assign)({},n,l,{errorMessage:o.error})))}exports.TextField=react_1.default.forwardRef(TextFieldComponent),exports.FormTextField=FormTextField;var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,FormDropdownInt=function(e){var t=e.initValue,n=e.options,r=e.fieldApi,o=e.fieldState,l=n.map((function(e,t){return{value:e.title||e.value,idx:t,origValue:e.value}})),a=l.find((function(e){return e.origValue===t})),i=react_1.default.useState(null==a?void 0:a.value),u=i[0],p=i[1];(0,hooks_1.useMount)((function(){t&&r.setValue(t)}));var c=react_1.default.useCallback((function(e){r.setValue(l[e.idx].origValue),p(l[e.idx].value)}),[l,r]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:!0},react_1.default.createElement(Dropdown_1.Dropdown,{fullWidth:!0,variant:"dark",value:u,options:l,onChange:c}),o.error?react_1.default.createElement(form_1.FormError,null,o.error):null)};exports.FormDropdown=(0,informed_1.asField)(FormDropdownInt);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FormDropdown=exports.FormTextField=exports.TextField=exports.StyledInput=exports.getInvertedInputStyles=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),informed_1=require("informed"),styled_components_1=(0,tslib_1.__importStar)(require("styled-components")),hooks_1=require("../../hooks"),form_1=require("./form"),Dropdown_1=require("./Dropdown"),getInvertedInputStyles=function(e){return(0,styled_components_1.css)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--","-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-family: var(--code-font-family);\n  font-size: var(--font-size-base);\n\n  &::placeholder {\n    opacity: 0.6;\n    color: var(--color-content-inverse);\n  }\n\n  &:-webkit-autofill {\n    background-color: var(--","-panel-background-color);\n  }\n"],["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--","-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-family: var(--code-font-family);\n  font-size: var(--font-size-base);\n\n  &::placeholder {\n    opacity: 0.6;\n    color: var(--color-content-inverse);\n  }\n\n  &:-webkit-autofill {\n    background-color: var(--","-panel-background-color);\n  }\n"])),e,e)};exports.getInvertedInputStyles=getInvertedInputStyles;var TextFieldWrapper=styled_components_1.default.div(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  display: ",";\n  ","\n"],["\n  display: ",";\n  ","\n"])),(function(e){return"hidden"===e.type?"none":"inline-block"}),(function(e){return e.fullWidth?"width: 100%;":""})),InputWrap=styled_components_1.default.div(templateObject_3||(templateObject_3=(0,tslib_1.__makeTemplateObject)(["\n  position: relative;\n"],["\n  position: relative;\n"])));exports.StyledInput=styled_components_1.default.input(templateObject_4||(templateObject_4=(0,tslib_1.__makeTemplateObject)(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"])),(function(e){var t=e.panel;return(0,exports.getInvertedInputStyles)(t)}),(function(e){var t=e.inputType,n=e.inputActionButton;return"password"===t||n?"padding-right: 40px;":""}),(function(e){return e.fullWidth?"width: 100%;":""}));var InputActionButton=styled_components_1.default.span(templateObject_5||(templateObject_5=(0,tslib_1.__makeTemplateObject)(["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  color: var(--samples-panel-text-color);\n"],["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  color: var(--samples-panel-text-color);\n"])));function TextFieldComponent(e,t){var n=e.fullWidth,r=e.errorMessage,o=e.type,l=e.inputActionButton,a=e.panel,i=void 0===a?"samples":a,u=(0,tslib_1.__rest)(e,["fullWidth","errorMessage","type","inputActionButton","panel"]),p=react_1.default.useState("password"===o),c=p[0],d=p[1],s=react_1.default.useCallback((function(){d(!c)}),[c]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:n,type:o},react_1.default.createElement(InputWrap,null,react_1.default.createElement(exports.StyledInput,(0,tslib_1.__assign)({fullWidth:n,inputActionButton:l,type:c?"password":"text",inputType:o,ref:t,panel:i},u)),l?react_1.default.createElement(InputActionButton,{onClick:l.onClick},l.label):"password"===o?react_1.default.createElement(InputActionButton,{onClick:s},c?"show":"hide"):null),r?react_1.default.createElement(form_1.FormError,null,r):null)}function FormTextField(e){var t=(0,informed_1.useField)((0,tslib_1.__assign)({fieldType:"text"},e)),n=t.userProps,r=t.render,o=t.fieldState,l=t.informed;return r(react_1.default.createElement(exports.TextField,(0,tslib_1.__assign)({},n,l,{errorMessage:o.error})))}exports.TextField=react_1.default.forwardRef(TextFieldComponent),exports.FormTextField=FormTextField;var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,FormDropdownInt=function(e){var t=e.initValue,n=e.options,r=e.fieldApi,o=e.fieldState,l=n.map((function(e,t){return{value:e.title||e.value,idx:t,origValue:e.value}})),a=l.find((function(e){return e.origValue===t})),i=react_1.default.useState(null==a?void 0:a.value),u=i[0],p=i[1];(0,hooks_1.useMount)((function(){t&&r.setValue(t)}));var c=react_1.default.useCallback((function(e){r.setValue(l[e.idx].origValue),p(l[e.idx].value)}),[l,r]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:!0},react_1.default.createElement(Dropdown_1.Dropdown,{fullWidth:!0,variant:"dark",value:u,options:l,onChange:c}),o.error?react_1.default.createElement(form_1.FormError,null,o.error):null)};exports.FormDropdown=(0,informed_1.asField)(FormDropdownInt);
 //# sourceMappingURL=TextField.js.map

package/lib/components/console/ActionPanel.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ActionPanel=exports.ActionPanelComponent=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),theme_1=require("@redocly/theme"),redoc_lib_1=require("../../redoc-lib"),Panel_1=require("../Panel"),Path_1=require("../Endpoint/Path"),shared_1=require("../shared"),utils_1=require("./utils");function formatPath(e,t,n){var r=t.path||{},a=t.query||{},o=Object.keys(a),i=(0,utils_1.expandVariables)(e,r);return o.length&&(i+="?"+o.map((function(e){if(!a[e])return"";var t=function(e){return n.find((function(t){return t.name===e&&"query"===t.in}))}(e);return t?(0,redoc_lib_1.serializeParameterValue)(t,a[e]):e+"="+encodeURIComponent(a[e])})).filter(Boolean).join("&")),i}var ActionPanelComponent=function(e){var t=e.loading,n=e.operation,r=e.hasResponse,a=e.execute,o=e.params,i=void 0===o?{}:o;return React.createElement(TryItHeader,null,React.createElement(Path_1.PathWrapper,null,React.createElement(shared_1.HttpVerb,{type:n.httpVerb},n.httpVerb),React.createElement(Path_1.Path,{wrap:"true"},formatPath(n.path,i,n.parameters))),React.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:t,onClick:function(){return!t&&a()}},t?"Sending...":r?"Resend":"Send"))};exports.ActionPanelComponent=ActionPanelComponent;var templateObject_1,templateObject_2,SendButton=(0,styled_components_1.default)(theme_1.Button)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  width: var(--try-it-panel-action-button-width);\n"],["\n  width: var(--try-it-panel-action-button-width);\n"]))),TryItHeader=(0,styled_components_1.default)(Panel_1.CodeHeader)(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"],["\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));exports.ActionPanel=React.memo(exports.ActionPanelComponent);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ActionPanel=exports.ActionPanelComponent=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),theme_1=require("@redocly/theme"),redoc_lib_1=require("../../redoc-lib"),Panel_1=require("../Panel"),Endpoint_1=require("../Endpoint"),shared_1=require("../shared"),utils_1=require("./utils");function formatPath(e,t,n){var r=t.path||{},a=t.query||{},o=Object.keys(a),i=(0,utils_1.expandVariables)(e,r);return o.length&&(i+="?"+o.map((function(e){if(!a[e])return"";var t=function(e){return n.find((function(t){return t.name===e&&"query"===t.in}))}(e);return t?(0,redoc_lib_1.serializeParameterValue)(t,a[e]):e+"="+encodeURIComponent(a[e])})).filter(Boolean).join("&")),i}var ActionPanelComponent=function(e){var t=e.loading,n=e.operation,r=e.hasResponse,a=e.execute,o=e.params,i=void 0===o?{}:o;return React.createElement(TryItHeader,null,React.createElement(Endpoint_1.PathWrapper,null,React.createElement(shared_1.HttpVerb,{type:n.httpVerb},n.httpVerb),React.createElement(Endpoint_1.Path,{wrap:"true"},formatPath(n.path,i,n.parameters))),React.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:t,onClick:function(){return!t&&a()}},t?"Sending...":r?"Resend":"Send"))};exports.ActionPanelComponent=ActionPanelComponent;var templateObject_1,templateObject_2,SendButton=(0,styled_components_1.default)(theme_1.Button)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  width: var(--try-it-panel-action-button-width);\n"],["\n  width: var(--try-it-panel-action-button-width);\n"]))),TryItHeader=(0,styled_components_1.default)(Panel_1.CodeHeader)(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"],["\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));exports.ActionPanel=React.memo(exports.ActionPanelComponent);
 //# sourceMappingURL=ActionPanel.js.map

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { DropdownOption } from '../../common/Dropdown';
 import type { AuthPanelProps, AuthPanelState } from './types';
+import type { DropdownOption } from '../../common/Dropdown';
 export declare class AuthPanel extends React.Component<AuthPanelProps, AuthPanelState> {
     static getDerivedStateFromProps(props: AuthPanelProps): AuthPanelState;
     state: {

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AuthPanel=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),utils_1=require("../../../utils"),OAuth2TokenInput_1=(0,tslib_1.__importDefault)(require("../OAuth2TokenInput")),OAuth2Flow_1=require("../OAuth2Flow"),OpenIDConnect_1=require("../OpenIDConnect"),TextField_1=require("../../common/TextField"),form_1=require("../../common/form"),Labels_1=require("../../../redoc-lib/src/services/Labels"),styled_1=require("../styled"),utils_2=require("../utils"),AuthPanel=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(t,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeScheme:0}}),Object.defineProperty(t,"handleSchemeChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){t.setState({activeScheme:e.idx}),(0,utils_1.toSessionStorage)("securityRequirementName",e.value)}}),t}return(0,tslib_1.__extends)(t,e),Object.defineProperty(t,"getDerivedStateFromProps",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.operation.security.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})),r=(0,utils_1.fromSessionStorage)("securityRequirementName"),l=t.findIndex((function(e){return e===r}));return{activeScheme:l<0?0:l}}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props.securityDefaults,r=this.state.activeScheme,l=this.props.operation.security,a=l.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})).map((function(e,t){return{value:e,idx:t}}));return 0===a.length?null:React.createElement(React.Fragment,null,React.createElement(form_1.FormWrapper,null,a.length>1&&React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Security scheme: "),React.createElement(styled_1.TryItDropdown,{variant:"dark",fullWidth:!0,options:a,value:a[r].value,onChange:this.handleSchemeChange}))||null,l[r].schemes.map((function(r){var l,a,o,i,n,u,s,c=(0,utils_1.escapeFormId)(r.id);if("apiKey"===r.type){var d=(0,utils_1.getSecurityDetailsOptions)(c,""),m={field:"auth."+c,fullWidth:!0,initialValue:(0,utils_2.fromCookie)(r)||(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),initValue:(0,utils_2.fromCookie)(r)||(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(form_1.FormControl,{key:c},React.createElement(form_1.FormLabel,null," ",r.name,": "),d?React.createElement(TextField_1.FormDropdown,(0,tslib_1.__assign)({},m,{options:d})):React.createElement(TextField_1.FormTextField,(0,tslib_1.__assign)({},m,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===r.type){if("basic"===r.scheme){var p=(0,utils_1.getSecurityDetailsOptions)(c,"username");m={field:"auth."+c+".username",fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)("auth."+c+".username")||(null===(l=null==t?void 0:t[c])||void 0===l?void 0:l.username),initValue:(0,utils_1.fromSessionStorage)("auth."+c+".username")||(null===(a=null==t?void 0:t[c])||void 0===a?void 0:a.username),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(React.Fragment,{key:c},React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," ",(0,Labels_1.l)("tryItAuthBasicUsername"),": "),p?React.createElement(TextField_1.FormDropdown,(0,tslib_1.__assign)({},m,{options:p})):React.createElement(TextField_1.FormTextField,(0,tslib_1.__assign)({},m,{panel:"try-it"}))),React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," ",(0,Labels_1.l)("tryItAuthBasicPassword"),": "),React.createElement(TextField_1.FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:"auth."+c+".password",initialValue:(0,utils_1.fromSessionStorage)("auth."+c+".password")||(null===(o=null==t?void 0:t[c])||void 0===o?void 0:o.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===r.scheme){var f=(0,utils_1.getSecurityDetailsOptions)(c,"");m={field:"auth."+c,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),initValue:(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(React.Fragment,{key:c},React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Bearer Token: "),f?React.createElement(TextField_1.FormDropdown,(0,tslib_1.__assign)({},m,{options:f})):React.createElement(TextField_1.FormTextField,(0,tslib_1.__assign)({},m,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===r.type&&r.flows&&r.flows.clientCredentials)return React.createElement(OAuth2TokenInput_1.default,{key:c,flow:r.flows.clientCredentials,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:c,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.clientCredentials["x-defaultClientId"]||r["x-defaultClientId"],defaultValues:null==t?void 0:t[c]});if("oauth2"===r.type&&r.flows&&r.flows.implicit)return React.createElement(OAuth2Flow_1.OAuth2Flow,{key:c,authorizationUrl:r.flows.implicit.authorizationUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(n=null===(i=null==r?void 0:r.flows)||void 0===i?void 0:i.implicit)||void 0===n?void 0:n.scopes)||{}),server:e.props.activeServer,id:c,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.implicit["x-defaultClientId"]||r["x-defaultClientId"],flow:"implicit",defaultValues:null==t?void 0:t[c]});if("oauth2"===r.type&&r.flows&&r.flows.authorizationCode)return React.createElement(OAuth2Flow_1.OAuth2Flow,{key:c,authorizationUrl:r.flows.authorizationCode.authorizationUrl,tokenUrl:r.flows.authorizationCode.tokenUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(u=r.flows.authorizationCode)||void 0===u?void 0:u.scopes)||{}),server:e.props.activeServer,id:c,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.authorizationCode["x-defaultClientId"]||r["x-defaultClientId"],flow:"authorizationCode",usePkce:r.flows.authorizationCode["x-usePkce"],defaultValues:null==t?void 0:t[c]});if("oauth2"===r.type){var h=(0,utils_1.fromSessionStorage)("auth."+c+".token")||JSON.stringify(null===(s=null==t?void 0:t[c])||void 0===s?void 0:s.token);return h=h?JSON.parse(h):{},React.createElement(React.Fragment,{key:c},React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Access Token Type: "),React.createElement(TextField_1.FormTextField,{fullWidth:!0,field:"auth."+c+".token.token_type",initialValue:h.token_type||"Bearer",panel:"try-it"})),React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Access Token: "),React.createElement(TextField_1.FormTextField,{type:"password",fullWidth:!0,field:"auth."+c+".token.access_token",validate:utils_2.requiredValidator,initialValue:h.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===r.type)return React.createElement(OpenIDConnect_1.OpenIDConnect,{key:c,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:c,form:e.props.form,formApi:e.props.formApi,scheme:r,clientId:r["x-defaultClientId"],defaultValues:null==t?void 0:t[c]})}}))),React.createElement("small",null,React.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))}}),t}(React.Component);exports.AuthPanel=AuthPanel;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AuthPanel=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),utils_1=require("../../../utils"),styled_1=require("../styled"),form_1=require("../../common/form"),TextField_1=require("../../common/TextField"),OpenIDConnect_1=require("../OpenIDConnect"),utils_2=require("../utils"),OAuth2Flow_1=require("../OAuth2Flow"),Labels_1=require("../../../redoc-lib/src/services/Labels"),OAuth2TokenInput_1=(0,tslib_1.__importDefault)(require("../OAuth2TokenInput")),AuthPanel=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(t,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeScheme:0}}),Object.defineProperty(t,"handleSchemeChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){t.setState({activeScheme:e.idx}),(0,utils_1.toSessionStorage)("securityRequirementName",e.value)}}),t}return(0,tslib_1.__extends)(t,e),Object.defineProperty(t,"getDerivedStateFromProps",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.operation.security.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})),r=(0,utils_1.fromSessionStorage)("securityRequirementName"),l=t.findIndex((function(e){return e===r}));return{activeScheme:l<0?0:l}}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props.securityDefaults,r=this.state.activeScheme,l=this.props.operation.security,a=l.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})).filter(Boolean).map((function(e,t){return{value:e,idx:t}}));return 0===a.length?React.createElement(OpenIDConnect_1.Error,{message:"Cannot find security schema in the definition"}):React.createElement(React.Fragment,null,React.createElement(form_1.FormWrapper,null,a.length>1&&React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Security scheme: "),React.createElement(styled_1.TryItDropdown,{variant:"dark",fullWidth:!0,options:a,value:a[r].value,onChange:this.handleSchemeChange}))||null,l[r].schemes.map((function(r){var l,a,o,i,n,u,s,c=(0,utils_1.escapeFormId)(r.id);if("apiKey"===r.type){var d=(0,utils_1.getSecurityDetailsOptions)(c,""),m={field:"auth."+c,fullWidth:!0,initialValue:(0,utils_2.fromCookie)(r)||(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),initValue:(0,utils_2.fromCookie)(r)||(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(form_1.FormControl,{key:c},React.createElement(form_1.FormLabel,null," ",r.name,": "),d?React.createElement(TextField_1.FormDropdown,(0,tslib_1.__assign)({},m,{options:d})):React.createElement(TextField_1.FormTextField,(0,tslib_1.__assign)({},m,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===r.type){if("basic"===r.scheme){var p=(0,utils_1.getSecurityDetailsOptions)(c,"username");m={field:"auth."+c+".username",fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)("auth."+c+".username")||(null===(l=null==t?void 0:t[c])||void 0===l?void 0:l.username),initValue:(0,utils_1.fromSessionStorage)("auth."+c+".username")||(null===(a=null==t?void 0:t[c])||void 0===a?void 0:a.username),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(React.Fragment,{key:c},React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," ",(0,Labels_1.l)("tryItAuthBasicUsername"),": "),p?React.createElement(TextField_1.FormDropdown,(0,tslib_1.__assign)({},m,{options:p})):React.createElement(TextField_1.FormTextField,(0,tslib_1.__assign)({},m,{panel:"try-it"}))),React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," ",(0,Labels_1.l)("tryItAuthBasicPassword"),": "),React.createElement(TextField_1.FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:"auth."+c+".password",initialValue:(0,utils_1.fromSessionStorage)("auth."+c+".password")||(null===(o=null==t?void 0:t[c])||void 0===o?void 0:o.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===r.scheme){var f=(0,utils_1.getSecurityDetailsOptions)(c,"");m={field:"auth."+c,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),initValue:(0,utils_1.fromSessionStorage)("auth."+c)||(null==t?void 0:t[c]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(React.Fragment,{key:c},React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Bearer Token: "),f?React.createElement(TextField_1.FormDropdown,(0,tslib_1.__assign)({},m,{options:f})):React.createElement(TextField_1.FormTextField,(0,tslib_1.__assign)({},m,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===r.type&&r.flows&&r.flows.clientCredentials)return React.createElement(OAuth2TokenInput_1.default,{key:c,flow:r.flows.clientCredentials,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:c,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.clientCredentials["x-defaultClientId"]||r["x-defaultClientId"],defaultValues:null==t?void 0:t[c]});if("oauth2"===r.type&&r.flows&&r.flows.implicit)return React.createElement(OAuth2Flow_1.OAuth2Flow,{key:c,authorizationUrl:r.flows.implicit.authorizationUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(n=null===(i=null==r?void 0:r.flows)||void 0===i?void 0:i.implicit)||void 0===n?void 0:n.scopes)||{}),server:e.props.activeServer,id:c,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.implicit["x-defaultClientId"]||r["x-defaultClientId"],flow:"implicit",defaultValues:null==t?void 0:t[c]});if("oauth2"===r.type&&r.flows&&r.flows.authorizationCode)return React.createElement(OAuth2Flow_1.OAuth2Flow,{key:c,authorizationUrl:r.flows.authorizationCode.authorizationUrl,tokenUrl:r.flows.authorizationCode.tokenUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(u=r.flows.authorizationCode)||void 0===u?void 0:u.scopes)||{}),server:e.props.activeServer,id:c,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.authorizationCode["x-defaultClientId"]||r["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:r.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:r.flows.authorizationCode["x-usePkce"],defaultValues:null==t?void 0:t[c]});if("oauth2"===r.type){var h=(0,utils_1.fromSessionStorage)("auth."+c+".token")||JSON.stringify(null===(s=null==t?void 0:t[c])||void 0===s?void 0:s.token);return h=h?JSON.parse(h):{},React.createElement(React.Fragment,{key:c},React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Access Token Type: "),React.createElement(TextField_1.FormTextField,{fullWidth:!0,field:"auth."+c+".token.token_type",initialValue:h.token_type||"Bearer",panel:"try-it"})),React.createElement(form_1.FormControl,null,React.createElement(form_1.FormLabel,null," Access Token: "),React.createElement(TextField_1.FormTextField,{type:"password",fullWidth:!0,field:"auth."+c+".token.access_token",validate:utils_2.requiredValidator,initialValue:h.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===r.type)return React.createElement(OpenIDConnect_1.OpenIDConnect,{key:c,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:c,form:e.props.form,formApi:e.props.formApi,scheme:r,clientId:r["x-defaultClientId"],defaultValues:null==t?void 0:t[c]})}}))),React.createElement("small",null,React.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))}}),t}(React.Component);exports.AuthPanel=AuthPanel;
 //# sourceMappingURL=AuthPanel.js.map

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

@@ -1,6 +1,6 @@
 import type { FormApi, FormState } from 'informed';
 import type { OperationModel } from '../../../redoc-lib';
-import type { SecurityDetails } from '../../../utils';
+import type { SecurityDetails } from '../../../types';
 export interface AuthPanelProps {
     operation: OperationModel;
     form: FormState;

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

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

package/lib/components/console/CodemirrorInput.js

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

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { FormApi, FormState } from 'informed';
-import type { SecurityDetails } from '../../utils';
-import type { OpenApiResponseData } from './ResponsePanel';
+import type { SecurityDetails } from '../../types';
 import type { ProStore } from '../../services';
 import type { OperationModel, Server } from '../../redoc-lib';
-import type { PanelComponentProps } from '../Panel';
+import type { OpenApiResponseData } from './ResponsePanel';
 export declare type RequestAndResponseType = {
     request: Record<string, unknown>;
     response: OpenApiResponseData;
@@ -27,13 +26,13 @@ export interface ConsoleState {
     error?: Error & {
         response?: OpenApiResponseData;
     };
-    resolvedRawSpec?: any;
+    resolvedRawSpec?: GenericObject;
     response?: OpenApiResponseData;
     time?: number;
     server: Server;
 }
 export declare class Console extends React.Component<ConsoleProps, ConsoleState> {
-    formApi: FormApi;
+    formApi: FormApi | undefined;
     constructor(props: ConsoleProps);
     setFormApi: (formApi: FormApi, { values, ...rest }?: FormState<import("informed").FormValues>) => void;
     handleChange: ({ values, ...rest }: ConsoleState['form']) => void;
@@ -46,8 +45,3 @@ export declare class Console extends React.Component<ConsoleProps, ConsoleState>
     renderRequest(): JSX.Element;
     renderResponse(): JSX.Element;
 }
-export declare function TryItPanel({ header, error, success, ...rest }: React.PropsWithChildren<{
-    header: string;
-    error?: boolean;
-    success?: boolean;
-} & PanelComponentProps>): JSX.Element;

package/lib/components/console/Console.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TryItPanel=exports.Console=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),informed_1=require("informed"),mobx_react_1=require("mobx-react"),utils_1=require("../../utils"),styled_1=require("./styled"),ServerDropdown_1=require("./ServerDropdown"),OperationParameters_1=require("./OperationParameters"),ActionPanel_1=require("./ActionPanel"),ResponsePanel_1=require("./ResponsePanel"),RequestBody_1=require("./RequestBody"),ConsoleTabs_1=require("./ConsoleTabs"),AuthPanel_1=require("./AuthPanel"),services_1=require("../../services"),swagger_client_1=(0,tslib_1.__importDefault)(require("swagger-client")),redoc_lib_1=require("../../redoc-lib"),helper_1=require("../../redoc-lib/src/components/helper"),Labels_1=require("../../redoc-lib/src/services/Labels"),Panel_1=require("../Panel"),OAuth2_1=require("../../services/OAuth2"),PanelBody_1=require("../Panel/PanelBody"),utils_2=require("./utils"),helper_2=require("../common/FileUpload/helper");function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}var flexColumn={flex:1,display:"flex",flexDirection:"column"},Console=function(e){function t(t){var r=e.call(this,t)||this;return Object.defineProperty(r,"formApi",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(r,"setFormApi",{enumerable:!0,configurable:!0,writable:!0,value:function(e,t){void 0===t&&(t=e.getState());var n=t.values,s=(0,tslib_1.__rest)(t,["values"]);r.formApi=e,setTimeout((function(){var e=(0,tslib_1.__assign)((0,tslib_1.__assign)({},s),{values:(0,tslib_1.__assign)((0,tslib_1.__assign)({},n),{query:(0,utils_2.unescapeQueryParams)(n.query||{})})});r.setState({form:e})}),0)}}),Object.defineProperty(r,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.values,n=(0,tslib_1.__rest)(e,["values"]),s=(0,tslib_1.__assign)((0,tslib_1.__assign)({},n),{values:(0,tslib_1.__assign)((0,tslib_1.__assign)({},t),{query:(0,utils_2.unescapeQueryParams)(t.query||{})})});r.setState({form:s}),(0,utils_2.updateStorage)(s)}}),Object.defineProperty(r,"handleTabChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.setState({activeTab:e})}}),Object.defineProperty(r,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.setState({server:e}),r.props.operation.setActiveServer(e)}}),Object.defineProperty(r,"handleExecute",{enumerable:!0,configurable:!0,writable:!0,value:function(){return(0,tslib_1.__awaiter)(r,void 0,void 0,(function(){var e,t,r,n,s,a,o,i,l,u,c,p,d,_,h,b,m,v,y,g,f,P,R,q,S,C,w,E,I,x,T,A,O,k,B,j,F,H,D,U,V,L=this;return(0,tslib_1.__generator)(this,(function(N){switch(N.label){case 0:if(e=this.props,t=e.store,r=e.operation,n=e.onResponse,s=this.state.form,a=s.values,o=s.invalid,this.formApi.submitForm(),o)return this.setState({shaking:!0}),setTimeout((function(){return L.setState({shaking:!1})}),1e3),null===(j=null===(B=null==t?void 0:t.options.events)||void 0===B?void 0:B.tryItSent)||void 0===j||j.call(B,{eventType:services_1.AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:r.operationId,operationPath:r.path,operationHttpVerb:r.httpVerb,operationSummary:r.description}),[2];if(i=this.props.operation.requestBody,l=i&&i.content&&i.content.active&&i.content.active.name||"",u=a.body,/json/.test(l))try{u=JSON.parse(u)}catch(e){console.error(e)}if(this.setState({loading:!0}),c=this.state.resolvedRawSpec,p=(r.httpVerb||"").toLowerCase(),!(d=(0,utils_1.get)(c,["paths",r.path,p,"servers"])||(0,utils_1.get)(c,["paths",r.path,"servers"])||(0,utils_1.get)(c,["servers"])))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");_=d.find((function(e){return L.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url)})),h=Date.now(),b=!!window.document.documentMode,v=a.auth,a.auth?(y=Object.keys(a.auth)[0],g=(0,utils_1.unescapeFormId)(y),m=(0,tslib_1.__assign)((0,tslib_1.__assign)({},c),{components:(0,tslib_1.__assign)((0,tslib_1.__assign)({},c.components),{securitySchemes:(0,tslib_1.__assign)((0,tslib_1.__assign)({},c.components.securitySchemes),(T={},T[g]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},c.components.securitySchemes[g]),{type:"openIdConnect"===c.components.securitySchemes[g].type?"oauth2":c.components.securitySchemes[g].type}),T))})}),v=(0,tslib_1.__assign)((0,tslib_1.__assign)({},v),((A={})[g]=v[y],A))):m=(0,tslib_1.__assign)({},c),(f=t.options.corsProxyUrl)&&d.length&&(m.servers=d.map((function(e){return(0,tslib_1.__assign)((0,tslib_1.__assign)({},e),{url:f+normalizeUrlProtocol(e.url)})})),m.paths=(0,tslib_1.__assign)((0,tslib_1.__assign)({},m.paths),((O={})[r.path]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},m.paths[r.path]),((k={})[p]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},m.paths[r.path][p]),{servers:void 0}),k.servers=void 0,k)),O))),(P=(null===(H=null===(F=null==i?void 0:i.content)||void 0===F?void 0:F.active)||void 0===H?void 0:H.name)||null)&&u&&(0,helper_2.isFileUploadMime)(P)&&(R=Object.values(u),u=R.length>1?R:R[0]),q=function(e,t){return function(r){return L.props.store.options.sendXUserAgentInTryIt&&(r.headers["X-User-Agent"]="Redocly Try it API console"),e?e(r,t):r}},S={userFetch:b&&require("cross-fetch").fetch,server:f?f+normalizeUrlProtocol(_.url):_.url,serverVariables:this.state.server.variables,spec:m,pathName:r.path,method:r.httpVerb,parameters:(0,tslib_1.__assign)((0,tslib_1.__assign)((0,tslib_1.__assign)((0,tslib_1.__assign)({},a.path),a.query),a.header),a.cookie),securities:{authorized:v},requestBody:u,requestContentType:P,responseContentType:(null===(D=a.header)||void 0===D?void 0:D.Accept)||null,requestInterceptor:q(t.options.requestInterceptor,r)},N.label=1;case 1:return N.trys.push([1,5,8,9]),[4,swagger_client_1.default.execute(S)];case 2:return C=N.sent(),(w=null==C?void 0:C.data)instanceof Blob?((0,helper_2.isFileUploadMime)(w.type)&&(C.fileInfo={rawData:w,fileName:(0,utils_2.getFileNameFromHeaders)(C.headers)}),E=C,[4,w.text()]):[3,4];case 3:E.data=N.sent(),N.label=4;case 4:return null==n||n({request:S,response:C}),this.setState({response:C,error:void 0}),[3,9];case 5:return(I=N.sent())&&I.response&&I.response.data instanceof Blob?(x=I.response,[4,I.response.data.text()]):[3,7];case 6:x.data=N.sent(),null==n||n({request:S,response:I.response}),N.label=7;case 7:return this.setState({response:void 0,error:I}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-h}),null===(V=null===(U=null==t?void 0:t.options.events)||void 0===U?void 0:U.tryItSent)||void 0===V||V.call(U,{eventType:services_1.AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:r.operationId,operationPath:r.path,operationHttpVerb:r.httpVerb,operationSummary:r.description}),[7];case 9:return[2]}}))}))}}),r.state={form:{values:{path:(0,utils_2.getParameters)(t.operation.parameters,"path"),cookie:(0,utils_2.getParameters)(t.operation.parameters,"cookie"),header:(0,utils_2.getParameters)(t.operation.parameters,"header"),query:(0,utils_2.getParameters)(t.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}},r}return(0,tslib_1.__extends)(t,e),Object.defineProperty(t.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var e,t,r,n;return(0,tslib_1.__generator)(this,(function(s){switch(s.label){case 0:return e=this.props,t=e.store,r=e.operation,[4,t.dereferenceSpecForTryIt(r)];case 1:return n=s.sent(),this.setState({resolvedRawSpec:n}),this.formApi.setValues({}),[2]}}))}))}}),Object.defineProperty(t.prototype,"componentDidUpdate",{enumerable:!1,configurable:!0,writable:!0,value:function(e){e.operation!==this.props.operation&&this.setState({response:void 0,error:void 0,activeTab:0})}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,t=e.operation,r=e.className,n=e.rootElement,s=this.state,a=s.shaking,o=s.activeTab,i=s.form,l=s.response,u=s.loading,c=s.error,p=!(!l&&!c);return React.createElement(ConsoleWrapHook,{shaking:a,className:r,rootElement:n},React.createElement(Panel_1.CodeHeader,null,React.createElement(ConsoleTabs_1.ConsoleTabs,{active:o,hasResponse:p,onChange:this.handleTabChange}),this.props.onClose&&React.createElement(styled_1.CloseButton,{onClick:this.props.onClose}," ✕ ")),React.createElement(styled_1.ConsoleBody,{hidden:0!==o},this.renderRequest()),React.createElement(styled_1.ConsoleBody,{hidden:1!==o},this.renderResponse()),React.createElement(ActionPanel_1.ActionPanel,{hasResponse:p,params:i.values,operation:t,loading:u,execute:this.handleExecute}))}}),Object.defineProperty(t.prototype,"renderRequest",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e,t=this.props,r=t.operation,n=t.store,s=t.properties,a=t.securityDefaults,o=this.state,i=o.form,l=o.resolvedRawSpec,u=o.server,c=i.errors||{},p=c.path||c.cookie||c.header||c.query,d=l&&redoc_lib_1.JsonPointer.get(l,r.pointer),_=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];_&&i.values.auth[_]||(_=void 0),!_||void 0===i.values.auth[_].token&&void 0===i.values.auth[_].client_id&&void 0===i.values.auth[_].client_secret||i.values.auth[_].token&&i.values.auth[_].token.access_token||(_=void 0),_&&null!=i.values.auth[_].username&&(i.values.auth[_].username&&i.values.auth[_].password||(_=void 0));var h=r.parameters||[],b=null===(e=null==n?void 0:n.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!l&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(React.Fragment,null,React.createElement(informed_1.Form,{onChange:this.handleChange,getApi:this.setFormApi,style:(0,tslib_1.__assign)((0,tslib_1.__assign)({},flexColumn),{margin:0})},React.createElement(Panel_1.Accordion,{initialActiveIdx:r.security.length&&_?1:0},r.security.length&&React.createElement(TryItPanel,{header:(0,Labels_1.l)("tryItAuth"),"data-cy":"security-trigger",renderChildrenHidden:!0,error:!_&&!!c.auth,success:!!_},b?React.createElement(AuthPanelHook,{field:"auth",validate:utils_2.requiredValidator},(function(e){return React.createElement(helper_1.RenderHook,{Hook:b,props:{server:u,operation:r,onChange:e,OAuth2:OAuth2_1.OAuth2}})})):React.createElement(AuthPanel_1.AuthPanel,{formApi:this.formApi,form:i,operation:r,activeServer:u.url,authCorsProxyUrl:n.options.authCorsProxyUrl,securityDefaults:a}))||null,r.requestBody&&React.createElement(TryItPanel,{header:(0,Labels_1.l)("tryItBody"),"data-cy":"body-trigger",renderChildrenHidden:!0,error:!!c.body},React.createElement(RequestBody_1.RequestBody,{validate:allowBodyErrors,console:this,body:r.requestBody,id:r.id,resolvedBody:d.requestBody,properties:s}))||null,h.length&&React.createElement(TryItPanel,{header:(0,Labels_1.l)("tryItParameters"),"data-cy":"parameters-trigger",error:p,renderChildrenHidden:!0},React.createElement(OperationParameters_1.OperationParameters,{operation:r,values:i.values,errors:i.errors||{}}))||null)),React.createElement(ServerDropdown_1.ServerChooser,{operation:r,onChange:this.handleServerChange}))}}),Object.defineProperty(t.prototype,"renderResponse",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.state,t=e.response,r=e.error,n=e.time;return React.createElement(ResponsePanel_1.ResponsePanel,{response:t,error:r,time:n})}}),t=(0,tslib_1.__decorate)([mobx_react_1.observer],t)}(React.Component);function allowBodyErrors(){}function ConsoleWrapHook(e){var t=e.shaking,r=e.className,n=e.children,s=e.rootElement,a=(0,utils_1.useDimensions)(s)[0],o=React.useContext(redoc_lib_1.StoreContext);return React.createElement(styled_1.ConsoleWrap,{scrollYOffset:null==o?void 0:o.options.scrollYOffset,shaking:t,className:r,"data-cy":"console",fullWidth:null==a?void 0:a.width},n)}function AuthPanelHook(e){var t=(0,informed_1.useField)((0,tslib_1.__assign)({},e)),r=t.fieldApi,n=t.render,s=t.userProps,a=r.setValue,o=s.children;return n(React.createElement(React.Fragment,null,o(a)))}function TryItPanel(e){var t=e.header,r=e.error,n=e.success,s=(0,tslib_1.__rest)(e,["header","error","success"]);return React.createElement(StyledTryItPanel,(0,tslib_1.__assign)({},s,{header:function(e){var a=e.toggle,o=e.expanded;return React.createElement(Panel_1.Header,{onClick:a,isExpanded:o,"data-cy":s["data-cy"]},React.createElement(Panel_1.Trigger,null,React.createElement(Panel_1.Title,null,t),React.createElement(redoc_lib_1.ShelfIcon,{direction:o?"down":"right"})),r&&React.createElement(redoc_lib_1.CrossIcon,{size:"14px",color:"--color-error-500"})||null,n&&React.createElement(redoc_lib_1.LockIcon,{size:"14px",color:"--color-success-500"})||null)}}))}exports.Console=Console,exports.TryItPanel=TryItPanel;var templateObject_1,StyledTryItPanel=(0,styled_components_1.default)(Panel_1.Panel)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  "," {\n    color: white;\n    border: 1px solid ",";\n    padding: 10px;\n  }\n\n  "," path {\n    fill: white;\n  }\n\n  "," {\n    padding: 15px 10px;\n    background-color: #3e4c59;\n    border: 1px solid ",";\n    border-top: 0;\n  }\n"],["\n  "," {\n    color: white;\n    border: 1px solid ",";\n    padding: 10px;\n  }\n\n  "," path {\n    fill: white;\n  }\n\n  "," {\n    padding: 15px 10px;\n    background-color: #3e4c59;\n    border: 1px solid ",";\n    border-top: 0;\n  }\n"])),Panel_1.Header,(function(e){return e.error?"#ff908b":"#89949f"}),redoc_lib_1.ShelfIcon,PanelBody_1.PanelBody,(function(e){return e.error?"#ff908b":"#89949f"}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Console=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),informed_1=require("informed"),mobx_react_1=require("mobx-react"),swagger_client_1=(0,tslib_1.__importDefault)(require("swagger-client")),utils_1=require("../../utils"),services_1=require("../../services"),redoc_lib_1=require("../../redoc-lib"),RenderHook_1=require("../../redoc-lib/src/components/RenderHook"),Labels_1=require("../../redoc-lib/src/services/Labels"),Panel_1=require("../Panel"),OAuth2_1=require("../../services/OAuth2"),helper_1=require("../common/FileUpload/helper"),OperationParameters_1=require("../OperationParameters"),hooks_1=require("../../hooks"),utils_2=require("./utils"),AuthPanel_1=require("./AuthPanel"),RequestBody_1=require("./RequestBody"),ResponsePanel_1=require("./ResponsePanel"),ActionPanel_1=require("./ActionPanel"),ServersDropdown_1=require("./ServersDropdown"),TryItPanel_1=require("./TryItPanel"),ConsoleTabs_1=require("./ConsoleTabs"),styled_1=require("./styled");function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}var flexColumn={flex:1,display:"flex",flexDirection:"column"},Console=function(e){function t(t){var r=e.call(this,t)||this;return Object.defineProperty(r,"formApi",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(r,"setFormApi",{enumerable:!0,configurable:!0,writable:!0,value:function(e,t){void 0===t&&(t=e.getState());var s=t.values,a=(0,tslib_1.__rest)(t,["values"]);r.formApi=e,setTimeout((function(){var e=(0,tslib_1.__assign)((0,tslib_1.__assign)({},a),{values:(0,tslib_1.__assign)((0,tslib_1.__assign)({},s),{query:(0,utils_2.unescapeQueryParams)(s.query||{})})});r.setState({form:e})}),0)}}),Object.defineProperty(r,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.values,s=(0,tslib_1.__rest)(e,["values"]),a=(0,tslib_1.__assign)((0,tslib_1.__assign)({},s),{values:(0,tslib_1.__assign)((0,tslib_1.__assign)({},t),{query:(0,utils_2.unescapeQueryParams)(t.query||{})})});r.setState({form:a}),(0,utils_2.updateStorage)(a),r.props.operation.setRequestValues(t)}}),Object.defineProperty(r,"handleTabChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.setState({activeTab:e})}}),Object.defineProperty(r,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.setState({server:e}),r.props.operation.setActiveServer(e)}}),Object.defineProperty(r,"handleExecute",{enumerable:!0,configurable:!0,writable:!0,value:function(){return(0,tslib_1.__awaiter)(r,void 0,void 0,(function(){var e,t,r,s,a,o,n,i,l,u,c,p,d,_,h,v,b,m,y,g,f,P,R,q,S,C,A,w,T,k,I,E,O,x,B,j,F,H,D,V,U,N=this;return(0,tslib_1.__generator)(this,(function(L){switch(L.label){case 0:if(e=this.props,t=e.store,r=e.operation,s=e.onResponse,a=this.state.form,o=a.values,n=a.invalid,null===(x=this.formApi)||void 0===x||x.submitForm(),n)return this.setState({shaking:!0}),setTimeout((function(){return N.setState({shaking:!1})}),1e3),null===(j=null===(B=null==t?void 0:t.options.events)||void 0===B?void 0:B.tryItSent)||void 0===j||j.call(B,{eventType:services_1.AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:r.operationId,operationPath:r.path,operationHttpVerb:r.httpVerb,operationSummary:r.description}),[2];if(i=this.props.operation.requestBody,l=i&&i.content&&i.content.active&&i.content.active.name||"",u=o.body,/json/.test(l))try{u=JSON.parse(u)}catch(e){console.error(e)}if(this.setState({loading:!0}),c=this.state.resolvedRawSpec,p=(r.httpVerb||"").toLowerCase(),!(d=(0,utils_1.get)(c,["paths",r.path,p,"servers"])||(0,utils_1.get)(c,["paths",r.path,"servers"])||(0,utils_1.get)(c,["servers"])))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");_=d.find((function(e){return N.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url)})),h=Date.now(),v=!!window.document.documentMode,m=o.auth,o.auth?(y=Object.keys(o.auth)[0],g=(0,utils_1.unescapeFormId)(y),b=(0,tslib_1.__assign)((0,tslib_1.__assign)({},c),{components:(0,tslib_1.__assign)((0,tslib_1.__assign)({},null==c?void 0:c.components),{securitySchemes:(0,tslib_1.__assign)((0,tslib_1.__assign)({},null==c?void 0:c.components.securitySchemes),(k={},k[g]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},null==c?void 0:c.components.securitySchemes[g]),{type:"openIdConnect"===(null==c?void 0:c.components.securitySchemes[g].type)?"oauth2":null==c?void 0:c.components.securitySchemes[g].type}),k))})}),m=(0,tslib_1.__assign)((0,tslib_1.__assign)({},m),((I={})[g]=m[y],I))):b=(0,tslib_1.__assign)({},c),(f=t.options.corsProxyUrl)&&d.length&&(b.servers=d.map((function(e){return(0,tslib_1.__assign)((0,tslib_1.__assign)({},e),{url:f+normalizeUrlProtocol(e.url)})})),b.paths=(0,tslib_1.__assign)((0,tslib_1.__assign)({},b.paths),((E={})[r.path]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},b.paths[r.path]),((O={})[p]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},b.paths[r.path][p]),{servers:void 0}),O.servers=void 0,O)),E))),(P=(null===(H=null===(F=null==i?void 0:i.content)||void 0===F?void 0:F.active)||void 0===H?void 0:H.name)||null)&&u&&(0,helper_1.isFileUploadMime)(P)&&(R=Object.values(u),u=R.length>1?R:R[0]),q={userFetch:v&&require("cross-fetch").fetch,server:f?f+normalizeUrlProtocol(_.url):_.url,serverVariables:this.state.server.variables,spec:b,pathName:r.path,method:r.httpVerb,parameters:(0,tslib_1.__assign)((0,tslib_1.__assign)((0,tslib_1.__assign)((0,tslib_1.__assign)({},o.path),o.query),o.header),o.cookie),securities:{authorized:m},requestBody:u,requestContentType:P,responseContentType:(null===(D=o.header)||void 0===D?void 0:D.Accept)||null,requestInterceptor:(0,utils_2.makeRequestInterceptor)(t.options,r,null==m?void 0:m.Authorization)},L.label=1;case 1:return L.trys.push([1,5,8,9]),[4,swagger_client_1.default.execute(q)];case 2:return S=L.sent(),(C=null==S?void 0:S.data)instanceof Blob?((0,helper_1.isFileUploadMime)(C.type)&&(S.fileInfo={rawData:C,fileName:(0,utils_2.getFileNameFromHeaders)(S.headers)}),A=S,[4,C.text()]):[3,4];case 3:A.data=L.sent(),L.label=4;case 4:return null==s||s({request:q,response:S}),this.setState({response:S,error:void 0}),[3,9];case 5:return(w=L.sent())&&w.response&&w.response.data instanceof Blob?(T=w.response,[4,w.response.data.text()]):[3,7];case 6:T.data=L.sent(),null==s||s({request:q,response:w.response}),L.label=7;case 7:return this.setState({response:void 0,error:w}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-h}),null===(U=null===(V=null==t?void 0:t.options.events)||void 0===V?void 0:V.tryItSent)||void 0===U||U.call(V,{eventType:services_1.AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:r.operationId,operationPath:r.path,operationHttpVerb:r.httpVerb,operationSummary:r.description}),[7];case 9:return[2]}}))}))}}),r.state={form:{values:{path:(0,utils_2.getParameters)(t.operation.parameters,"path"),cookie:(0,utils_2.getParameters)(t.operation.parameters,"cookie"),header:(0,utils_2.getParameters)(t.operation.parameters,"header"),query:(0,utils_2.getParameters)(t.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}},r}return(0,tslib_1.__extends)(t,e),Object.defineProperty(t.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e;return(0,tslib_1.__awaiter)(this,void 0,void 0,(function(){var t,r,s,a;return(0,tslib_1.__generator)(this,(function(o){switch(o.label){case 0:return t=this.props,r=t.store,s=t.operation,[4,r.dereferenceSpecForTryIt(s)];case 1:return a=o.sent(),this.setState({resolvedRawSpec:a}),null===(e=this.formApi)||void 0===e||e.setValues({}),[2]}}))}))}}),Object.defineProperty(t.prototype,"componentDidUpdate",{enumerable:!1,configurable:!0,writable:!0,value:function(e){e.operation!==this.props.operation&&this.setState({response:void 0,error:void 0,activeTab:0})}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,t=e.operation,r=e.className,s=e.rootElement,a=this.state,o=a.shaking,n=a.activeTab,i=a.form,l=a.response,u=a.loading,c=a.error,p=!(!l&&!c);return React.createElement(ConsoleWrapHook,{shaking:o,className:r,rootElement:s},React.createElement(Panel_1.CodeHeader,null,React.createElement(ConsoleTabs_1.ConsoleTabs,{active:n,hasResponse:p,onChange:this.handleTabChange}),this.props.onClose&&React.createElement(styled_1.CloseButton,{onClick:this.props.onClose}," ✕ ")),React.createElement(styled_1.ConsoleBody,{hidden:0!==n,"data-cy":"console-request-body"},this.renderRequest()),React.createElement(styled_1.ConsoleBody,{hidden:1!==n,"data-cy":"console-response-body"},this.renderResponse()),React.createElement(ActionPanel_1.ActionPanel,{hasResponse:p,params:i.values,operation:t,loading:u,execute:this.handleExecute}))}}),Object.defineProperty(t.prototype,"renderRequest",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e,t=this.props,r=t.operation,s=t.store,a=t.properties,o=t.securityDefaults,n=this.state,i=n.form,l=n.resolvedRawSpec,u=n.server,c=i.errors||{},p=c.path||c.cookie||c.header||c.query,d=l&&redoc_lib_1.JsonPointer.get(l,r.pointer),_=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];_&&i.values.auth[_]||(_=void 0),!_||void 0===i.values.auth[_].token&&void 0===i.values.auth[_].client_id&&void 0===i.values.auth[_].client_secret||i.values.auth[_].token&&i.values.auth[_].token.access_token||(_=void 0),_&&null!=i.values.auth[_].username&&(i.values.auth[_].username&&i.values.auth[_].password||(_=void 0));var h=r.parameters||[],v=null===(e=null==s?void 0:s.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!l&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(informed_1.Form,{onChange:this.handleChange,getApi:this.setFormApi,style:(0,tslib_1.__assign)((0,tslib_1.__assign)({},flexColumn),{margin:0})},React.createElement(ServersDropdown_1.ServersDropdown,{operation:r,onChange:this.handleServerChange}),React.createElement(Panel_1.Accordion,{initialActiveIdx:r.security.length&&_?1:0},r.security.length&&this.formApi&&React.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItAuth"),"data-cy":"security-trigger",renderChildrenHidden:!0,error:!_&&!!c.auth,success:!!_},v?React.createElement(AuthPanelHook,{field:"auth",validate:utils_2.requiredValidator},(function(e){return React.createElement(RenderHook_1.RenderHook,{Hook:v,props:{server:u,operation:r,onChange:e,OAuth2:OAuth2_1.OAuth2}})})):React.createElement(AuthPanel_1.AuthPanel,{formApi:this.formApi,form:i,operation:r,activeServer:u.url,authCorsProxyUrl:s.options.authCorsProxyUrl,securityDefaults:o}))||null,r.requestBody&&this.formApi&&React.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItBody"),"data-cy":"body-trigger",renderChildrenHidden:!0,error:!!c.body},React.createElement(RequestBody_1.RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:r.requestBody,id:r.id,resolvedBody:null==d?void 0:d.requestBody,properties:a}))||null,h.length&&React.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItParameters"),"data-cy":"parameters-trigger",error:p,renderChildrenHidden:!0},React.createElement(OperationParameters_1.OperationParameters,{operation:r,values:i.values,errors:i.errors||{}}))||null))}}),Object.defineProperty(t.prototype,"renderResponse",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.state,t=e.response,r=e.error,s=e.time;return React.createElement(ResponsePanel_1.ResponsePanel,{response:t,error:r,time:s})}}),t=(0,tslib_1.__decorate)([mobx_react_1.observer],t)}(React.Component);function allowBodyErrors(){}function ConsoleWrapHook(e){var t=e.shaking,r=e.className,s=e.children,a=e.rootElement,o=(0,hooks_1.useDimensions)(a)[0],n=React.useContext(redoc_lib_1.StoreContext);return React.createElement(styled_1.ConsoleWrap,{scrollYOffset:null==n?void 0:n.options.scrollYOffset,shaking:t,className:r,"data-cy":"console",fullWidth:null==o?void 0:o.width},s)}function AuthPanelHook(e){var t=(0,informed_1.useField)((0,tslib_1.__assign)({},e)),r=t.fieldApi,s=t.render,a=t.userProps,o=r.setValue,n=a.children;return s(React.createElement(React.Fragment,null,n(o)))}exports.Console=Console;
 //# sourceMappingURL=Console.js.map

package/lib/components/console/ConsoleLazy.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Console=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),utils_1=require("../../utils"),Panel_1=require("../Panel"),styled_1=require("./styled"),redoc_lib_1=require("../../redoc-lib");function Console(e){var t=this,r=react_1.default.useState({}),l=r[0],o=r[1],s=react_1.default.useContext(redoc_lib_1.StoreContext),i=(0,utils_1.useDimensions)(e.rootElement)[0];return react_1.default.useEffect((function(){(0,tslib_1.__awaiter)(t,void 0,void 0,(function(){var e;return(0,tslib_1.__generator)(this,(function(t){switch(t.label){case 0:return[4,Promise.resolve().then((function(){return(0,tslib_1.__importStar)(require("./Console"))}))];case 1:return e=t.sent(),o({Console:e.Console}),[2]}}))}))}),[]),l.Console?react_1.default.createElement(l.Console,(0,tslib_1.__assign)({},e)):react_1.default.createElement(styled_1.ConsoleWrap,{scrollYOffset:null==s?void 0:s.options.scrollYOffset,className:e.className,fullWidth:null==i?void 0:i.width},react_1.default.createElement(Panel_1.CodeHeader,null,"Loading..."))}exports.Console=Console;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Console=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),hooks_1=require("../../hooks"),Panel_1=require("../Panel"),redoc_lib_1=require("../../redoc-lib"),styled_1=require("./styled");function Console(e){var t=this,o=react_1.default.useState({}),r=o[0],l=o[1],s=react_1.default.useContext(redoc_lib_1.StoreContext),n=(0,hooks_1.useDimensions)(e.rootElement)[0];return react_1.default.useEffect((function(){(0,tslib_1.__awaiter)(t,void 0,void 0,(function(){var e;return(0,tslib_1.__generator)(this,(function(t){switch(t.label){case 0:return[4,Promise.resolve().then((function(){return(0,tslib_1.__importStar)(require("./Console"))}))];case 1:return e=t.sent(),l({Console:e.Console}),[2]}}))}))}),[]),r.Console?react_1.default.createElement(r.Console,(0,tslib_1.__assign)({},e)):react_1.default.createElement(styled_1.ConsoleWrap,{scrollYOffset:null==s?void 0:s.options.scrollYOffset,className:e.className,fullWidth:null==n?void 0:n.width},react_1.default.createElement(Panel_1.CodeHeader,null,"Loading..."))}exports.Console=Console;
 //# sourceMappingURL=ConsoleLazy.js.map

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { FormApi, FormState } from 'informed';
 import type { InputActionButtonProps } from '../common/TextField';
-import type { SecurityDetails } from '../../utils';
+import type { SecurityDetails } from '../../types';
 import type { RedocProNormalizedOptions } from '../../services';
 export interface OAuth2FlowProps {
     authorizationUrl: string;
@@ -17,6 +17,7 @@ export interface OAuth2FlowProps {
     form: FormState;
     formApi: FormApi;
     flow: 'implicit' | 'authorizationCode';
+    tokenEndpointAuthMethod?: string | string[];
     clientId?: string;
     defaultValues?: SecurityDetails;
 }