@redocly/reference-docs 3.0.0-alpha.3 → 3.0.0-alpha.6

package/lib/components/Search/styled.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SearchInput=exports.SearchResultsItems=exports.SearchResultsBox=exports.TextContainer=exports.SearchPopUpHeader=exports.SearchPopUpWrap=exports.SearchPopUpBG=exports.SearchFieldWrap=exports.SearchIcon=exports.ButtonClear=exports.ButtonClose=exports.CrossIcon=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),redoc_lib_1=require("../../redoc-lib"),CrossIcon=function(){return React.createElement("svg",{version:"1.1",viewBox:"0 0 12 12",width:"12",height:"12",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"clear-icon"},React.createElement("path",{d:"M11 1L6 6L11 11",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("path",{d:"M1 1L6 6L1 11",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))};exports.CrossIcon=CrossIcon,exports.ButtonClose=styled_components_1.default.i.attrs((function(){return{className:"button-close"}}))(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  cursor: pointer;\n  position: absolute;\n  right: 15px;\n  color: var(--color-content);\n"],["\n  cursor: pointer;\n  position: absolute;\n  right: 15px;\n  color: var(--color-content);\n"]))),exports.ButtonClear=styled_components_1.default.i.attrs((function(){return{className:"button-clear"}}))(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  cursor: pointer;\n  position: absolute;\n"],["\n  cursor: pointer;\n  position: absolute;\n"])));var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,templateObject_6,templateObject_7,templateObject_8,templateObject_9,templateObject_10,SearchIcon=function(){return React.createElement("svg",{version:"1.1",viewBox:"0 0 15 16",width:"15",height:"16",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"search-icon"},React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.5 14C11.0899 14 14 11.0899 14 7.5C14 3.91015 11.0899 1 7.5 1C3.91015 1 1 3.91015 1 7.5C1 11.0899 3.91015 14 7.5 14Z",stroke:"currentColor",strokeWidth:"2"}),React.createElement("path",{d:"M7.5 5C6.11929 5 5 6.11929 5 7.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),React.createElement("path",{d:"M1 15L3 13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))};exports.SearchIcon=SearchIcon,exports.SearchFieldWrap=styled_components_1.default.button.attrs((function(){return{className:"button-field-search"}}))(templateObject_3||(templateObject_3=(0,tslib_1.__makeTemplateObject)(["\n  cursor: text;\n  margin: 10px 20px 13px;\n  padding: 0 18px 0 3px;\n  border: 0;\n  position: relative;\n  border-bottom: 1px solid var(--global-border-color);\n  background-color: transparent;\n  height: 37px;\n  color: var(--sidebar-item-color);\n  text-align: left;\n  font-family: var(--font-family-base);\n  font-size: 12px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 0 auto;\n\n  span {\n    display: block;\n    position: absolute;\n    right: 0;\n    width: 18px;\n    height: 37px;\n    background-color: var(--sidebar-background-color);\n    z-index: 2;\n  }\n\n  .search-icon {\n    margin-left: 6px;\n    position: relative;\n    top: 2px;\n    z-index: 1;\n  }\n\n  .button-clear {\n    padding: 3px;\n    right: 0;\n    margin-top: 4px;\n    z-index: 3;\n  }\n"],["\n  cursor: text;\n  margin: 10px 20px 13px;\n  padding: 0 18px 0 3px;\n  border: 0;\n  position: relative;\n  border-bottom: 1px solid var(--global-border-color);\n  background-color: transparent;\n  height: 37px;\n  color: var(--sidebar-item-color);\n  text-align: left;\n  font-family: var(--font-family-base);\n  font-size: 12px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 0 auto;\n\n  span {\n    display: block;\n    position: absolute;\n    right: 0;\n    width: 18px;\n    height: 37px;\n    background-color: var(--sidebar-background-color);\n    z-index: 2;\n  }\n\n  .search-icon {\n    margin-left: 6px;\n    position: relative;\n    top: 2px;\n    z-index: 1;\n  }\n\n  .button-clear {\n    padding: 3px;\n    right: 0;\n    margin-top: 4px;\n    z-index: 3;\n  }\n"]))),exports.SearchPopUpBG=styled_components_1.default.div.attrs((function(){return{className:"search-popup"}}))(templateObject_4||(templateObject_4=(0,tslib_1.__makeTemplateObject)(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 100;\n  background: rgba(0, 0, 0, 0.45);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"],["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 100;\n  background: rgba(0, 0, 0, 0.45);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),exports.SearchPopUpWrap=styled_components_1.default.div(templateObject_5||(templateObject_5=(0,tslib_1.__makeTemplateObject)(["\n  width: 100%;\n  max-width: 500px;\n  height: 445px;\n"],["\n  width: 100%;\n  max-width: 500px;\n  height: 445px;\n"]))),exports.SearchPopUpHeader=styled_components_1.default.div(templateObject_6||(templateObject_6=(0,tslib_1.__makeTemplateObject)(["\n  background-color: var(--search-popup-header-background-color);\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  height: 45px;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 15px;\n  }\n\n  .button-clear {\n    right: 45px;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 0.8em;\n    background-color: var(--search-clear-button-background-color);\n    padding: 4px 16px;\n    border-radius: var(--global-border-radius);\n    &:hover {\n      background-color: var(--search-clear-button-hover-background-color);\n    }\n  }\n"],["\n  background-color: var(--search-popup-header-background-color);\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  height: 45px;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 15px;\n  }\n\n  .button-clear {\n    right: 45px;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 0.8em;\n    background-color: var(--search-clear-button-background-color);\n    padding: 4px 16px;\n    border-radius: var(--global-border-radius);\n    &:hover {\n      background-color: var(--search-clear-button-hover-background-color);\n    }\n  }\n"]))),exports.TextContainer=styled_components_1.default.div(templateObject_7||(templateObject_7=(0,tslib_1.__makeTemplateObject)(["\n  padding: 30px 20px;\n"],["\n  padding: 30px 20px;\n"]))),exports.SearchResultsBox=styled_components_1.default.div(templateObject_8||(templateObject_8=(0,tslib_1.__makeTemplateObject)(["\n  padding: 10px;\n  background-color: var(--sidebar-background-color);\n  min-height: 100px;\n  max-height: 400px;\n  border-bottom-left-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n\n  "," {\n    margin-right: 30px;\n    border-radius: var(--global-border-radius);\n\n    svg {\n      display: none;\n    }\n  }\n"],["\n  padding: 10px;\n  background-color: var(--sidebar-background-color);\n  min-height: 100px;\n  max-height: 400px;\n  border-bottom-left-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n\n  "," {\n    margin-right: 30px;\n    border-radius: var(--global-border-radius);\n\n    svg {\n      display: none;\n    }\n  }\n"])),redoc_lib_1.MenuItemLabel),exports.SearchResultsItems=styled_components_1.default.div(templateObject_9||(templateObject_9=(0,tslib_1.__makeTemplateObject)(["\n  max-height: 372px;\n"],["\n  max-height: 372px;\n"]))),exports.SearchInput=styled_components_1.default.input.attrs((function(){return{className:"search-input"}}))(templateObject_10||(templateObject_10=(0,tslib_1.__makeTemplateObject)(["\n  padding: 0 35px;\n  outline: none;\n  border: 0;\n  background-color: transparent;\n  width: 100%;\n  margin-top: 2px;\n"],["\n  padding: 0 35px;\n  outline: none;\n  border: 0;\n  background-color: transparent;\n  width: 100%;\n  margin-top: 2px;\n"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SearchInput=exports.SearchResultsItems=exports.SearchResultsBox=exports.TextContainer=exports.SearchPopUpHeader=exports.SearchPopUpWrap=exports.SearchPopUpBG=exports.SearchFieldWrap=exports.SearchIcon=exports.ButtonClear=exports.ButtonClose=exports.CrossIcon=void 0;var tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),CrossIcon=function(){return React.createElement("svg",{version:"1.1",viewBox:"0 0 12 12",width:"12",height:"12",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"clear-icon"},React.createElement("path",{d:"M11 1L6 6L11 11",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("path",{d:"M1 1L6 6L1 11",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))};exports.CrossIcon=CrossIcon,exports.ButtonClose=styled_components_1.default.i.attrs((function(){return{className:"button-close"}}))(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  cursor: pointer;\n  position: absolute;\n  right: 15px;\n  color: var(--text-color);\n"],["\n  cursor: pointer;\n  position: absolute;\n  right: 15px;\n  color: var(--text-color);\n"]))),exports.ButtonClear=styled_components_1.default.i.attrs((function(){return{className:"button-clear"}}))(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  cursor: pointer;\n  position: absolute;\n"],["\n  cursor: pointer;\n  position: absolute;\n"])));var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,templateObject_6,templateObject_7,templateObject_8,templateObject_9,templateObject_10,SearchIcon=function(){return React.createElement("svg",{version:"1.1",viewBox:"0 0 15 16",width:"15",height:"16",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"search-icon"},React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.5 14C11.0899 14 14 11.0899 14 7.5C14 3.91015 11.0899 1 7.5 1C3.91015 1 1 3.91015 1 7.5C1 11.0899 3.91015 14 7.5 14Z",stroke:"currentColor",strokeWidth:"2"}),React.createElement("path",{d:"M7.5 5C6.11929 5 5 6.11929 5 7.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),React.createElement("path",{d:"M1 15L3 13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))};exports.SearchIcon=SearchIcon,exports.SearchFieldWrap=styled_components_1.default.button(templateObject_3||(templateObject_3=(0,tslib_1.__makeTemplateObject)(["\n  cursor: text;\n  margin: 10px 20px 13px;\n  padding: 0 18px 0 3px;\n  border: 0;\n  position: relative;\n  border-bottom: 1px solid var(--sidebar-search-button-border);\n  border-radius: var(--sidebar-search-button-border-radius);\n  background-color: var(--sidebar-search-button-background-color);\n  height: 37px;\n  color: var(--sidebar-search-button-text-color);\n  text-align: left;\n  font-family: var(--sidebar-search-button-font-family);\n  font-size: var(--sidebar-search-button-font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 0 auto;\n  line-height: var(--sidebar-search-button-line-height);\n\n  &:hover {\n    background-color: var(--sidebar-search-button-hover-background-color);\n    border-bottom: 1px solid var(--sidebar-search-button-hover-border);\n  }\n\n  &.active {\n    background-color: var(--sidebar-search-button-active-background-color);\n    border-bottom: 1px solid var(--sidebar-search-button-active-border);\n  }\n\n  span {\n    display: block;\n    position: absolute;\n    right: 0;\n    width: 18px;\n    height: 37px;\n    background-color: var(--sidebar-background-color);\n    z-index: 2;\n  }\n\n  .search-icon {\n    margin-left: 6px;\n    position: relative;\n    top: 2px;\n    z-index: 1;\n  }\n\n  .button-clear {\n    padding: 3px;\n    right: 0;\n    margin-top: 4px;\n    z-index: 3;\n  }\n"],["\n  cursor: text;\n  margin: 10px 20px 13px;\n  padding: 0 18px 0 3px;\n  border: 0;\n  position: relative;\n  border-bottom: 1px solid var(--sidebar-search-button-border);\n  border-radius: var(--sidebar-search-button-border-radius);\n  background-color: var(--sidebar-search-button-background-color);\n  height: 37px;\n  color: var(--sidebar-search-button-text-color);\n  text-align: left;\n  font-family: var(--sidebar-search-button-font-family);\n  font-size: var(--sidebar-search-button-font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 0 auto;\n  line-height: var(--sidebar-search-button-line-height);\n\n  &:hover {\n    background-color: var(--sidebar-search-button-hover-background-color);\n    border-bottom: 1px solid var(--sidebar-search-button-hover-border);\n  }\n\n  &.active {\n    background-color: var(--sidebar-search-button-active-background-color);\n    border-bottom: 1px solid var(--sidebar-search-button-active-border);\n  }\n\n  span {\n    display: block;\n    position: absolute;\n    right: 0;\n    width: 18px;\n    height: 37px;\n    background-color: var(--sidebar-background-color);\n    z-index: 2;\n  }\n\n  .search-icon {\n    margin-left: 6px;\n    position: relative;\n    top: 2px;\n    z-index: 1;\n  }\n\n  .button-clear {\n    padding: 3px;\n    right: 0;\n    margin-top: 4px;\n    z-index: 3;\n  }\n"]))),exports.SearchPopUpBG=styled_components_1.default.div.attrs((function(){return{className:"search-popup"}}))(templateObject_4||(templateObject_4=(0,tslib_1.__makeTemplateObject)(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 100;\n  background: rgba(0, 0, 0, 0.45);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"],["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 100;\n  background: rgba(0, 0, 0, 0.45);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),exports.SearchPopUpWrap=styled_components_1.default.div(templateObject_5||(templateObject_5=(0,tslib_1.__makeTemplateObject)(["\n  width: 100%;\n  max-width: 500px;\n  height: 445px;\n"],["\n  width: 100%;\n  max-width: 500px;\n  height: 445px;\n"]))),exports.SearchPopUpHeader=styled_components_1.default.div(templateObject_6||(templateObject_6=(0,tslib_1.__makeTemplateObject)(["\n  background-color: var(--search-modal-header-background-color);\n  border-top-left-radius: var(--search-modal-header-border-radius);\n  border-top-right-radius: var(--search-modal-header-border-radius);\n  height: 45px;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 15px;\n  }\n\n  .button-clear {\n    right: 45px;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 0.8em;\n    background-color: var(--search-modal-clear-button-background-color);\n    padding: 4px 16px;\n    border-radius: var(--border-radius);\n    &:hover {\n      background-color: var(--search-modal-clear-button-hover-background-color);\n    }\n  }\n"],["\n  background-color: var(--search-modal-header-background-color);\n  border-top-left-radius: var(--search-modal-header-border-radius);\n  border-top-right-radius: var(--search-modal-header-border-radius);\n  height: 45px;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 15px;\n  }\n\n  .button-clear {\n    right: 45px;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 0.8em;\n    background-color: var(--search-modal-clear-button-background-color);\n    padding: 4px 16px;\n    border-radius: var(--border-radius);\n    &:hover {\n      background-color: var(--search-modal-clear-button-hover-background-color);\n    }\n  }\n"]))),exports.TextContainer=styled_components_1.default.div(templateObject_7||(templateObject_7=(0,tslib_1.__makeTemplateObject)(["\n  padding: 30px 20px;\n"],["\n  padding: 30px 20px;\n"]))),exports.SearchResultsBox=styled_components_1.default.div(templateObject_8||(templateObject_8=(0,tslib_1.__makeTemplateObject)(["\n  padding: 10px;\n  background-color: var(--search-modal-background);\n  color: var(--search-modal-text-color);\n  border: var(--search-modal-border);\n  box-shadow: var(--search-modal-box-shadow);\n  min-height: 100px;\n  max-height: 400px;\n  border-bottom-left-radius: var(--panel-border-radius);\n  border-bottom-right-radius: var(--panel-border-radius);\n\n  li a {\n    margin-right: 30px;\n    border-radius: var(--border-radius);\n\n    svg {\n      display: none;\n    }\n  }\n"],["\n  padding: 10px;\n  background-color: var(--search-modal-background);\n  color: var(--search-modal-text-color);\n  border: var(--search-modal-border);\n  box-shadow: var(--search-modal-box-shadow);\n  min-height: 100px;\n  max-height: 400px;\n  border-bottom-left-radius: var(--panel-border-radius);\n  border-bottom-right-radius: var(--panel-border-radius);\n\n  li a {\n    margin-right: 30px;\n    border-radius: var(--border-radius);\n\n    svg {\n      display: none;\n    }\n  }\n"]))),exports.SearchResultsItems=styled_components_1.default.div(templateObject_9||(templateObject_9=(0,tslib_1.__makeTemplateObject)(["\n  max-height: 372px;\n"],["\n  max-height: 372px;\n"]))),exports.SearchInput=styled_components_1.default.input.attrs((function(){return{className:"search-input"}}))(templateObject_10||(templateObject_10=(0,tslib_1.__makeTemplateObject)(["\n  padding: 0 35px;\n  outline: none;\n  border: 0;\n  background-color: transparent;\n  width: 100%;\n  margin-top: 2px;\n"],["\n  padding: 0 35px;\n  outline: none;\n  border: 0;\n  background-color: transparent;\n  width: 100%;\n  margin-top: 2px;\n"])));
 //# sourceMappingURL=styled.js.map

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/Tabs/CollapsingTabs/CollapsingTabList.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsingTabList=void 0;var templateObject_1,tslib_1=require("tslib"),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),TabList_1=require("../TabList");exports.CollapsingTabList=(0,styled_components_1.default)(TabList_1.TabList)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  border-bottom: 4px solid var(--global-border-color-secondary);\n  margin: 0 0 10px;\n"],["\n  border-bottom: 4px solid var(--global-border-color-secondary);\n  margin: 0 0 10px;\n"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CollapsingTabList=void 0;var templateObject_1,tslib_1=require("tslib"),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),TabList_1=require("../TabList");exports.CollapsingTabList=(0,styled_components_1.default)(TabList_1.TabList)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  margin: 0 0 10px;\n"],["\n  margin: 0 0 10px;\n"])));
 //# sourceMappingURL=CollapsingTabList.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"),Dropdown_1=require("../../common/Dropdown"),CollapsingTabList_1=require("./CollapsingTabList"),CollapsingTab_1=require("./CollapsingTab"),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/Tabs/Tab.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=void 0;var templateObject_1,tslib_1=require("tslib"),react_tabs_1=require("react-tabs"),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components"));exports.Tab=(0,styled_components_1.default)(react_tabs_1.Tab)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  flex: 1;\n  cursor: pointer;\n  padding: 5px 10px;\n  font-size: 14px;\n  line-height: 26px;\n  font-weight: 400;\n  text-align: center;\n  color: var(--color-content-inverse);\n  background-color: var(--samples-panel-background-color);\n\n  &.react-tabs__tab--selected {\n    background-color: var(--samples-panel-controls-background-color);\n    border-bottom: 4px solid var(--samples-panel-controls-active-border-color);\n    margin-bottom: -4px;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--global-border-radius);\n  }\n\n  &:last-child {\n    border-top-right-radius: var(--global-border-radius);\n  }\n"],["\n  flex: 1;\n  cursor: pointer;\n  padding: 5px 10px;\n  font-size: 14px;\n  line-height: 26px;\n  font-weight: 400;\n  text-align: center;\n  color: var(--color-content-inverse);\n  background-color: var(--samples-panel-background-color);\n\n  &.react-tabs__tab--selected {\n    background-color: var(--samples-panel-controls-background-color);\n    border-bottom: 4px solid var(--samples-panel-controls-active-border-color);\n    margin-bottom: -4px;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--global-border-radius);\n  }\n\n  &:last-child {\n    border-top-right-radius: var(--global-border-radius);\n  }\n"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=void 0;var templateObject_1,tslib_1=require("tslib"),react_tabs_1=require("react-tabs"),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components"));exports.Tab=(0,styled_components_1.default)(react_tabs_1.Tab)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  flex: 1;\n  cursor: pointer;\n  padding: 5px 10px;\n  font-size: var(--panel-samples-tabs-font-size);\n  line-height: 26px;\n  font-weight: var(--panel-samples-tabs-font-weight);\n  text-align: center;\n  color: var(--panel-samples-tabs-text-color);\n  background-color: var(--panel-samples-tabs-background-color);\n  border-bottom: 4px solid var(--panel-samples-tabs-border-color);\n  margin-bottom: -4px;\n\n  &.react-tabs__tab--selected {\n    background-color: var(--panel-samples-tabs-active-background-color);\n    border-color: var(--panel-samples-tabs-active-border-color);\n  }\n\n  &:hover {\n    border-color: var(--panel-samples-tabs-hover-border-color);\n    background-color: var(--panel-samples-tabs-hover-background-color);\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--border-radius);\n  }\n\n  &:last-child {\n    border-top-right-radius: var(--border-radius);\n  }\n"],["\n  flex: 1;\n  cursor: pointer;\n  padding: 5px 10px;\n  font-size: var(--panel-samples-tabs-font-size);\n  line-height: 26px;\n  font-weight: var(--panel-samples-tabs-font-weight);\n  text-align: center;\n  color: var(--panel-samples-tabs-text-color);\n  background-color: var(--panel-samples-tabs-background-color);\n  border-bottom: 4px solid var(--panel-samples-tabs-border-color);\n  margin-bottom: -4px;\n\n  &.react-tabs__tab--selected {\n    background-color: var(--panel-samples-tabs-active-background-color);\n    border-color: var(--panel-samples-tabs-active-border-color);\n  }\n\n  &:hover {\n    border-color: var(--panel-samples-tabs-hover-border-color);\n    background-color: var(--panel-samples-tabs-hover-background-color);\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--border-radius);\n  }\n\n  &:last-child {\n    border-top-right-radius: var(--border-radius);\n  }\n"])));
 //# sourceMappingURL=Tab.js.map

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/CheckboxList.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckboxList=exports.CheckboxListComponent=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),informed_1=require("informed"),theme_1=require("@redocly/theme"),form_1=require("./form"),Checkbox_1=require("./Checkbox"),DEFAULT_MAX_ITEMS=11,CheckboxListComponent=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:{collapsed:!0}}),t}return(0,tslib_1.__extends)(t,e),Object.defineProperty(t.prototype,"onCheckBoxClick",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.target.value,l=e.target.checked;this.props.fieldApi.setTouched(!0);var r,o=this.props.fieldApi.getValue()||[];if(l)r=(0,tslib_1.__spreadArray)((0,tslib_1.__spreadArray)([],o,!0),[t],!1);else{var a=o.indexOf(t);r=(0,tslib_1.__spreadArray)((0,tslib_1.__spreadArray)([],o.slice(0,a),!0),o.slice(a+1),!0)}this.props.fieldApi.setValue(r)}}),Object.defineProperty(t.prototype,"isFieldChecked",{enumerable:!1,configurable:!0,writable:!0,value:function(e){return this.props.fieldApi.getValue().includes(e)}}),Object.defineProperty(t.prototype,"toggle",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.setState({collapsed:!this.state.collapsed})}}),Object.defineProperty(t.prototype,"selectAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue(this.props.items)}}),Object.defineProperty(t.prototype,"clearAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue([])}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props,l=t.items,r=t.fieldApi,o=t.validateOnChange,a=t.maxDisplayedItems,n=t.showControls,i=t.trimItemsLength,c=this.state.collapsed,s=r.getError(),p=a||DEFAULT_MAX_ITEMS,u=i&&this.state.collapsed?l.slice(0,p):l;return react_1.default.createElement("div",null,n?react_1.default.createElement(ControlButtonsWrapper,null,react_1.default.createElement(theme_1.SamplesControlButton,{onClick:function(){e.selectAll()}},"Select all"),react_1.default.createElement(theme_1.SamplesControlButton,{onClick:function(){e.clearAll()}},"Clear")):null,react_1.default.createElement("div",null,u.map((function(t){return react_1.default.createElement(Checkbox_1.Checkbox,{fullWidth:!0,id:t,value:t,checked:e.isFieldChecked(t),label:t,key:t,onChange:function(t){e.onCheckBoxClick(t),o&&r.validate()}})})),l.length>p&&i?react_1.default.createElement(ToggleButton,{onClick:function(){e.toggle()}},c?"Show all":"Collapse"):null),s?react_1.default.createElement(form_1.FormError,null,s):"")}}),t}(react_1.default.Component);exports.CheckboxListComponent=CheckboxListComponent,exports.CheckboxList=(0,informed_1.asField)(CheckboxListComponent);var templateObject_1,templateObject_2,ControlButtonsWrapper=(0,styled_components_1.default)(theme_1.SampleControls)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  opacity: 1;\n  text-align: left;\n"],["\n  opacity: 1;\n  text-align: left;\n"]))),ToggleButton=(0,styled_components_1.default)(theme_1.SamplesControlButton)(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  float: right;\n"],["\n  float: right;\n"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckboxList=exports.CheckboxListComponent=void 0;var tslib_1=require("tslib"),react_1=(0,tslib_1.__importDefault)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),informed_1=require("informed"),SamplesPanelControls_1=require("@redocly/theme/SamplesPanelControls"),form_1=require("./form"),Checkbox_1=require("./Checkbox"),DEFAULT_MAX_ITEMS=11,CheckboxListComponent=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:{collapsed:!0}}),t}return(0,tslib_1.__extends)(t,e),Object.defineProperty(t.prototype,"onCheckBoxClick",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.target.value,l=e.target.checked;this.props.fieldApi.setTouched(!0);var r,o=this.props.fieldApi.getValue()||[];if(l)r=(0,tslib_1.__spreadArray)((0,tslib_1.__spreadArray)([],o,!0),[t],!1);else{var a=o.indexOf(t);r=(0,tslib_1.__spreadArray)((0,tslib_1.__spreadArray)([],o.slice(0,a),!0),o.slice(a+1),!0)}this.props.fieldApi.setValue(r)}}),Object.defineProperty(t.prototype,"isFieldChecked",{enumerable:!1,configurable:!0,writable:!0,value:function(e){return this.props.fieldApi.getValue().includes(e)}}),Object.defineProperty(t.prototype,"toggle",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.setState({collapsed:!this.state.collapsed})}}),Object.defineProperty(t.prototype,"selectAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue(this.props.items)}}),Object.defineProperty(t.prototype,"clearAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue([])}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props,l=t.items,r=t.fieldApi,o=t.validateOnChange,a=t.maxDisplayedItems,n=t.showControls,i=t.trimItemsLength,s=this.state.collapsed,c=r.getError(),p=a||DEFAULT_MAX_ITEMS,u=i&&this.state.collapsed?l.slice(0,p):l;return react_1.default.createElement("div",null,n?react_1.default.createElement(ControlButtonsWrapper,null,react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton,{onClick:function(){e.selectAll()}},"Select all"),react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton,{onClick:function(){e.clearAll()}},"Clear")):null,react_1.default.createElement("div",null,u.map((function(t){return react_1.default.createElement(Checkbox_1.Checkbox,{fullWidth:!0,id:t,value:t,checked:e.isFieldChecked(t),label:t,key:t,onChange:function(t){e.onCheckBoxClick(t),o&&r.validate()}})})),l.length>p&&i?react_1.default.createElement(ToggleButton,{onClick:function(){e.toggle()}},s?"Show all":"Collapse"):null),c?react_1.default.createElement(form_1.FormError,null,c):"")}}),t}(react_1.default.Component);exports.CheckboxListComponent=CheckboxListComponent,exports.CheckboxList=(0,informed_1.asField)(CheckboxListComponent);var templateObject_1,templateObject_2,ControlButtonsWrapper=(0,styled_components_1.default)(SamplesPanelControls_1.SampleControls)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  opacity: 1;\n  text-align: left;\n"],["\n  opacity: 1;\n  text-align: left;\n"]))),ToggleButton=(0,styled_components_1.default)(SamplesPanelControls_1.SamplesControlButton)(templateObject_2||(templateObject_2=(0,tslib_1.__makeTemplateObject)(["\n  float: right;\n"],["\n  float: right;\n"])));
 //# sourceMappingURL=CheckboxList.js.map

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

@@ -1,24 +1,28 @@
 /// <reference types="react" />
 import type { DropdownProps } from './types';
 export declare const Dropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
-    dense?: boolean | undefined;
     fullWidth?: boolean | undefined;
     variant?: "dark" | "light" | undefined;
 }, never>;
 export declare const SimpleDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
-    dense?: boolean | undefined;
     fullWidth?: boolean | undefined;
     variant?: "dark" | "light" | undefined;
 }, never>;
 export declare const CollapsingDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
-    dense?: boolean | undefined;
     fullWidth?: boolean | undefined;
     variant?: "dark" | "light" | undefined;
 } & {
     active?: boolean | undefined;
 }, never>;
 export declare const VersionDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
-    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const SchemaDiscriminatorDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const SchemaMimeTypeDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
     fullWidth?: boolean | undefined;
     variant?: "dark" | "light" | undefined;
 }, never>;

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    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"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SchemaMimeTypeDropdown=exports.SchemaDiscriminatorDropdown=exports.VersionDropdown=exports.CollapsingDropdown=exports.SimpleDropdown=exports.Dropdown=void 0;var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,templateObject_6,templateObject_7,tslib_1=require("tslib"),styled_components_1=(0,tslib_1.__importStar)(require("styled-components")),Dropdown_1=require("./Dropdown"),samplesDropdownStyle=(0,styled_components_1.css)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  background-color: var(--panel-samples-dropdown-background-color);\n  border: var(--panel-samples-dropdown-border);\n  color: var(--panel-samples-dropdown-color);\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"],["\n  background-color: var(--panel-samples-dropdown-background-color);\n  border: var(--panel-samples-dropdown-border);\n  color: var(--panel-samples-dropdown-color);\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(--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: 36px;\n    outline: none;\n    display: inline-block;\n    color: var(--dropdown-text-color);\n    border-radius: var(--border-radius);\n    border: var(--dropdown-border);\n    padding: var(--dropdown-padding);\n    vertical-align: bottom;\n    width: ",";\n    text-transform: none;\n    line-height: inherit;\n    font-size: var(--dropdown-font-size);\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(--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(--text-color);\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    padding: var(--dropdown-padding);\n    ",";\n  }\n"],["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: var(--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: 36px;\n    outline: none;\n    display: inline-block;\n    color: var(--dropdown-text-color);\n    border-radius: var(--border-radius);\n    border: var(--dropdown-border);\n    padding: var(--dropdown-padding);\n    vertical-align: bottom;\n    width: ",";\n    text-transform: none;\n    line-height: inherit;\n    font-size: var(--dropdown-font-size);\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(--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(--text-color);\n    line-height: inherit;\n    font-size: 14px;\n    font-family: inherit;\n    padding: var(--dropdown-padding);\n    ",";\n  }\n"])),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return"dark"===n.variant?samplesDropdownStyle:""}),(function(n){return"dark"===n.variant?samplesDropdownStyle:""})),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(--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(--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(--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(--border-color-secondary);\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"])),samplesDropdownStyle,(function(n){return n.active?"var(--panel-samples-tabs-active-background-color)":"none"}),(function(n){return n.active?"var(--panel-samples-tabs-active-border-color)":"transparent"}),(function(n){return n.active?"var( --panel-samples-tabs-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(--text-color);\n  }\n"],["\n  width: 90%;\n  label {\n    width: 100%;\n    font-weight: 600;\n    color: var(--text-color);\n  }\n"]))),exports.SchemaDiscriminatorDropdown=(0,styled_components_1.default)(exports.Dropdown)(templateObject_6||(templateObject_6=(0,tslib_1.__makeTemplateObject)(["\n  .dropdown-select {\n    padding: var(--schemas-discriminator-dropdown-padding);\n  }\n\n  label {\n    height: 26px;\n    padding: var(--schemas-discriminator-dropdown-padding);\n    border: var(--schemas-discriminator-dropdown-border);\n    font-size: var(--schemas-discriminator-font-size);\n    color: var(--schemas-discriminator-dropdown-text-color);\n  }\n"],["\n  .dropdown-select {\n    padding: var(--schemas-discriminator-dropdown-padding);\n  }\n\n  label {\n    height: 26px;\n    padding: var(--schemas-discriminator-dropdown-padding);\n    border: var(--schemas-discriminator-dropdown-border);\n    font-size: var(--schemas-discriminator-font-size);\n    color: var(--schemas-discriminator-dropdown-text-color);\n  }\n"]))),exports.SchemaMimeTypeDropdown=(0,styled_components_1.default)(exports.SimpleDropdown)(templateObject_7||(templateObject_7=(0,tslib_1.__makeTemplateObject)(["\n  label {\n    padding: var(--schemas-mime-type-dropdown-padding);\n    border: var(--schemas-mime-type-dropdown-border);\n    font-size: var(--schemas-mime-type-dropdown-font-size);\n    color: var(--schemas-mime-type-dropdown-text-color);\n  }\n"],["\n  label {\n    padding: var(--schemas-mime-type-dropdown-padding);\n    border: var(--schemas-mime-type-dropdown-border);\n    font-size: var(--schemas-mime-type-dropdown-font-size);\n    color: var(--schemas-mime-type-dropdown-text-color);\n  }\n"])));
 //# sourceMappingURL=styled.js.map

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}))})),exports.FileUpload.displayName="FileUpload";
+"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/LinearProgress.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LinearProgress=void 0;var templateObject_1,tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),LoadingLine=styled_components_1.default.div(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: var(--linear-progress-background-color);\n  border-radius: var(--global-border-radius);\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: var(--linear-progress-color);\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: var(--linear-progress-color);\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"],["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: var(--linear-progress-background-color);\n  border-radius: var(--global-border-radius);\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: var(--linear-progress-color);\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: var(--linear-progress-color);\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"]))),LinearProgress=function(){return React.createElement(LoadingLine,null,React.createElement("div",{className:"indeterminate"}))};exports.LinearProgress=LinearProgress;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LinearProgress=void 0;var templateObject_1,tslib_1=require("tslib"),React=(0,tslib_1.__importStar)(require("react")),styled_components_1=(0,tslib_1.__importDefault)(require("styled-components")),LoadingLine=styled_components_1.default.div(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: var(--linear-progress-background-color);\n  border-radius: var(--border-radius);\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: var(--linear-progress-color);\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: var(--linear-progress-color);\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"],["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: var(--linear-progress-background-color);\n  border-radius: var(--border-radius);\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: var(--linear-progress-color);\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: var(--linear-progress-color);\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"]))),LinearProgress=function(){return React.createElement(LoadingLine,null,React.createElement("div",{className:"indeterminate"}))};exports.LinearProgress=LinearProgress;
 //# sourceMappingURL=LinearProgress.js.map

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { FieldProps } from 'informed';
 import type { FlattenInterpolation, ThemeProps } from 'styled-components';
 import type { DropdownOption, DropdownProps } from './Dropdown';
-export declare const getInvertedInputStyles: (panel: 'samples' | 'try-it') => FlattenInterpolation<ThemeProps<unknown>>;
+export declare const getInvertedInputStyles: (panelType: 'samples' | 'try-it') => FlattenInterpolation<ThemeProps<unknown>>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {
     fullWidth?: boolean | undefined;
     inputType?: string | undefined;

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"),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);
+"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: var(--input-border);\n  outline: none;\n  padding: var(--input-padding);\n  border-radius: var(--input-border-radius);\n  background-color: var(--panel-","-input-background-color);\n  color: var(--input-text-color);\n  font-family: var(--input-font-family);\n  font-size: var(--input-font-size);\n  line-height: var(--input-line-height);\n\n  &::placeholder {\n    opacity: 0.6;\n    color: var(--input-placeholder-text-color);\n  }\n\n  &:hover {\n    color: var(--input-hover-text-color);\n    border: var(--input-hover-border);\n  }\n\n  &:focus {\n    color: var(--input-focus-text-color);\n    border: var(--input-focus-border);\n  }\n\n  &:-webkit-autofill {\n    background-color: var(--panel-","-input-background-color);\n  }\n"],["\n  border: var(--input-border);\n  outline: none;\n  padding: var(--input-padding);\n  border-radius: var(--input-border-radius);\n  background-color: var(--panel-","-input-background-color);\n  color: var(--input-text-color);\n  font-family: var(--input-font-family);\n  font-size: var(--input-font-size);\n  line-height: var(--input-line-height);\n\n  &::placeholder {\n    opacity: 0.6;\n    color: var(--input-placeholder-text-color);\n  }\n\n  &:hover {\n    color: var(--input-hover-text-color);\n    border: var(--input-hover-border);\n  }\n\n  &:focus {\n    color: var(--input-focus-text-color);\n    border: var(--input-focus-border);\n  }\n\n  &:-webkit-autofill {\n    background-color: var(--panel-","-input-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(--panel-samples-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(--panel-samples-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),d=p[0],c=p[1],s=react_1.default.useCallback((function(){c(!d)}),[d]);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:d?"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},d?"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 d=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:d}),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")),Button_1=require("@redocly/theme/Button"),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(Panel_1.CodeHeader,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,SendButton=(0,styled_components_1.default)(Button_1.Button)(templateObject_1||(templateObject_1=(0,tslib_1.__makeTemplateObject)(["\n  width: var(--panel-try-it-action-button-width);\n"],["\n  width: var(--panel-try-it-action-button-width);\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 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_react_17_1=require("react-codemirror2-react-17");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,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_react_17_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||types_1.MediaTypes.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(--text-color-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: var(--code-block-tokens-property-string-color);\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string {\n    color: var(--code-block-tokens-string-color);\n  }\n\n  .cm-s-material .CodeMirror-code .cm-atom {\n    color: var(--text-color-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(--panel-border-radius);\n  }\n"],["\n  .cm-s-material.CodeMirror {\n    background-color: var(--samples-panel-controls-background-color)!important;\n    color: var(--text-color-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: var(--code-block-tokens-property-string-color);\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string {\n    color: var(--code-block-tokens-string-color);\n  }\n\n  .cm-s-material .CodeMirror-code .cm-atom {\n    color: var(--text-color-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(--panel-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()}}),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,o=r.setValue,t=r.setTouched,n=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,t){o(t),a&&a(t)},onBlur:function(e){t(!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:n}}}))}}),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,6 +1,6 @@
 import * as React from 'react';
 import type { FormApi, FormState } from 'informed';
-import type { SecurityDetails } from '../../utils';
+import type { SecurityDetails } from '../../types';
 import type { ProStore } from '../../services';
 import type { OperationModel, Server } from '../../redoc-lib';
 import type { OpenApiResponseData } from './ResponsePanel';
@@ -26,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;

package/lib/components/console/Console.js

@@ -1,2 +1,2 @@
-"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"),utils_2=require("./utils"),AuthPanel_1=require("./AuthPanel"),RequestBody_1=require("./RequestBody"),ResponsePanel_1=require("./ResponsePanel"),ActionPanel_1=require("./ActionPanel"),ServerDropdown_1=require("./ServerDropdown"),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,w,A,T,E,I,O,k,x,B,F,j,H,D,V,U=this;return(0,tslib_1.__generator)(this,(function(N){switch(N.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,this.formApi.submitForm(),n)return this.setState({shaking:!0}),setTimeout((function(){return U.setState({shaking:!1})}),1e3),null===(B=null===(x=null==t?void 0:t.options.events)||void 0===x?void 0:x.tryItSent)||void 0===B||B.call(x,{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(),!(_=(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 U.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)({},c.components),{securitySchemes:(0,tslib_1.__assign)((0,tslib_1.__assign)({},c.components.securitySchemes),(E={},E[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}),E))})}),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)&&_.length&&(b.servers=_.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),((O={})[r.path]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},b.paths[r.path]),((k={})[p]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},b.paths[r.path][p]),{servers:void 0}),k.servers=void 0,k)),O))),(P=(null===(j=null===(F=null==i?void 0:i.content)||void 0===F?void 0:F.active)||void 0===j?void 0:j.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(d.url):d.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===(H=o.header)||void 0===H?void 0:H.Accept)||null,requestInterceptor:(0,utils_2.makeRequestInterceptor)(t.options,r,null==m?void 0:m.Authorization)},N.label=1;case 1:return N.trys.push([1,5,8,9]),[4,swagger_client_1.default.execute(q)];case 2:return S=N.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)}),w=S,[4,C.text()]):[3,4];case 3:w.data=N.sent(),N.label=4;case 4:return null==s||s({request:q,response:S}),this.setState({response:S,error:void 0}),[3,9];case 5:return(A=N.sent())&&A.response&&A.response.data instanceof Blob?(T=A.response,[4,A.response.data.text()]):[3,7];case 6:T.data=N.sent(),null==s||s({request:q,response:A.response}),N.label=7;case 7:return this.setState({response:void 0,error:A}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-h}),null===(V=null===(D=null==t?void 0:t.options.events)||void 0===D?void 0:D.tryItSent)||void 0===V||V.call(D,{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,s;return(0,tslib_1.__generator)(this,(function(a){switch(a.label){case 0:return e=this.props,t=e.store,r=e.operation,[4,t.dereferenceSpecForTryIt(r)];case 1:return s=a.sent(),this.setState({resolvedRawSpec:s}),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,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},this.renderRequest()),React.createElement(styled_1.ConsoleBody,{hidden:1!==n},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,_=l&&redoc_lib_1.JsonPointer.get(l,r.pointer),d=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];d&&i.values.auth[d]||(d=void 0),!d||void 0===i.values.auth[d].token&&void 0===i.values.auth[d].client_id&&void 0===i.values.auth[d].client_secret||i.values.auth[d].token&&i.values.auth[d].token.access_token||(d=void 0),d&&null!=i.values.auth[d].username&&(i.values.auth[d].username&&i.values.auth[d].password||(d=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(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&&d?1:0},r.security.length&&React.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItAuth"),"data-cy":"security-trigger",renderChildrenHidden:!0,error:!d&&!!c.auth,success:!!d},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&&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,console:this,body:r.requestBody,id:r.id,resolvedBody:_.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)),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,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,utils_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;
+"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/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,d,p,_,h,v,b,m,y,g,f,P,R,q,S,C,w,A,T,k,I,E,O,x,B,j,F,H,D,V,U,N,L=this;return(0,tslib_1.__generator)(this,(function(W){switch(W.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===(B=this.formApi)||void 0===B||B.submitForm(),n)return this.setState({shaking:!0}),setTimeout((function(){return L.setState({shaking:!1})}),1e3),null===(F=null===(j=null==t?void 0:t.options.events)||void 0===j?void 0:j.tryItSent)||void 0===F||F.call(j,{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,l=i.servers,u=i.requestBody,c=u&&u.content&&u.content.active&&u.content.active.name||"",d=o.body,/json/.test(c))try{d=JSON.parse(d)}catch(e){console.error(e)}if(this.setState({loading:!0}),p=this.state.resolvedRawSpec,_=(r.httpVerb||"").toLowerCase(),!l)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");h=l.find((function(e){return L.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url)})),v=Date.now(),b=!!window.document.documentMode,y=o.auth,o.auth?(g=Object.keys(o.auth)[0],f=(0,utils_1.unescapeFormId)(g),m=(0,tslib_1.__assign)((0,tslib_1.__assign)({},p),{components:(0,tslib_1.__assign)((0,tslib_1.__assign)({},null==p?void 0:p.components),{securitySchemes:(0,tslib_1.__assign)((0,tslib_1.__assign)({},null==p?void 0:p.components.securitySchemes),(I={},I[f]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},null==p?void 0:p.components.securitySchemes[f]),{type:"openIdConnect"===(null==p?void 0:p.components.securitySchemes[f].type)?"oauth2":null==p?void 0:p.components.securitySchemes[f].type}),I))})}),y=(0,tslib_1.__assign)((0,tslib_1.__assign)({},y),((E={})[f]=y[g],E))):m=(0,tslib_1.__assign)({},p),m.servers=l,(P=t.options.corsProxyUrl)&&l.length&&(m.servers=l.map((function(e){return(0,tslib_1.__assign)((0,tslib_1.__assign)({},e),{url:P+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]),((x={})[_]=(0,tslib_1.__assign)((0,tslib_1.__assign)({},m.paths[r.path][_]),{servers:void 0}),x.servers=void 0,x)),O))),(R=(null===(D=null===(H=null==u?void 0:u.content)||void 0===H?void 0:H.active)||void 0===D?void 0:D.name)||null)&&d&&(0,helper_1.isFileUploadMime)(R)&&(q=Object.values(d),d=q.length>1?q:q[0]),S={userFetch:b&&require("cross-fetch").fetch,server:P?P+normalizeUrlProtocol(h.url):h.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)({},o.path),o.query),o.header),o.cookie),securities:{authorized:y},requestBody:d,requestContentType:R,responseContentType:(null===(V=o.header)||void 0===V?void 0:V.Accept)||null,requestInterceptor:(0,utils_2.makeRequestInterceptor)(t.options,r,null==y?void 0:y.Authorization)},W.label=1;case 1:return W.trys.push([1,5,8,9]),[4,swagger_client_1.default.execute(S)];case 2:return C=W.sent(),(w=null==C?void 0:C.data)instanceof Blob?((0,helper_1.isFileUploadMime)(w.type)&&(C.fileInfo={rawData:w,fileName:(0,utils_2.getFileNameFromHeaders)(C.headers)}),A=C,[4,w.text()]):[3,4];case 3:A.data=W.sent(),W.label=4;case 4:return null==s||s({request:S,response:C}),this.setState({response:C,error:void 0}),[3,9];case 5:return(T=W.sent())&&T.response&&T.response.data instanceof Blob?(k=T.response,[4,T.response.data.text()]):[3,7];case 6:k.data=W.sent(),null==s||s({request:S,response:T.response}),W.label=7;case 7:return this.setState({response:void 0,error:T}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-v}),null===(N=null===(U=null==t?void 0:t.options.events)||void 0===U?void 0:U.tryItSent)||void 0===N||N.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(){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,d=!(!l&&!c);return React.createElement(ConsoleWrapHook,{shaking:o,className:r,rootElement:s},React.createElement(Panel_1.StyledCodeHeader,null,React.createElement(ConsoleTabs_1.ConsoleTabs,{active:n,hasResponse:d,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:d,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||{},d=c.path||c.cookie||c.header||c.query,p=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",error:!_&&!!c.auth,success:!!_,renderChildrenHidden:!0},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&&React.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItBody"),"data-cy":"body-trigger",error:!!c.body,renderChildrenHidden:!0},React.createElement(RequestBody_1.RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:r.requestBody,id:r.id,resolvedBody:null==p?void 0:p.requestBody,properties:a}))||null,h.length&&React.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItParameters"),"data-cy":"parameters-trigger",error:d,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"),redoc_lib_1=require("../../redoc-lib"),styled_1=require("./styled");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