@redocly/reference-docs 3.0.0-alpha.2 → 3.0.0-alpha.5

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabList.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import styled from"styled-components";import{TabList}from"../TabList";export var CollapsingTabList=styled(TabList)(templateObject_1||(templateObject_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"])));var templateObject_1;
+import{__makeTemplateObject}from"tslib";import styled from"styled-components";import{TabList}from"../TabList";export var CollapsingTabList=styled(TabList)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  margin: 0 0 10px;\n"],["\n  margin: 0 0 10px;\n"])));var templateObject_1;
 //# sourceMappingURL=CollapsingTabList.js.map

package/lib-esm/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-esm/components/Tabs/CollapsingTabs/CollapsingTabsBase.js

@@ -1,2 +1,2 @@
-import React,{useContext,useEffect,useMemo,useState}from"react";import{Tabs}from"react-tabs";import{OptionsContext}from"../../../redoc-lib";import{CollapsingDropdown}from"../../common/Dropdown";import{CollapsingTabList}from"./CollapsingTabList";import{CollapsingTab}from"./CollapsingTab";export var CollapsingTabsBase=function(e){var t=e.tabs,n=e.children,o=e.hidden,a=e.activeIndex,i=e.onChange,l=useContext(OptionsContext).samplesTabsMaxCount,r=useMemo((function(){return t.slice(l).map((function(e,t){return{idx:t,value:e.title}}))}),[t,l]),s=r.length+" more",c=useState(s),p=c[0],m=c[1],u=React.useCallback((function(){var e=a>=l;p!==s&&p===t[a].title||!e?p===s||e||m(s):m(t[a].title)}),[a,l,p,s,t]);useEffect((function(){setTimeout(u,0)}),[a,l,u]);return React.createElement(Tabs,{selectedIndex:a,onSelect:i},React.createElement(CollapsingTabList,{hidden:o},t.map((function(e,t){return React.createElement(CollapsingTab,{key:e.key,disabled:t>=l},e.title)})),r.length?React.createElement(CollapsingDropdown,{options:r,onChange:function(e){i(l+e.idx)},placeholder:s,value:p,active:a>=l}):null),n)};
+import React,{memo,useContext,useEffect,useMemo,useState}from"react";import{Tabs}from"react-tabs";import{OptionsContext}from"../../../redoc-lib";import{CollapsingDropdown}from"../../common/Dropdown";import{CollapsingTabList}from"./CollapsingTabList";import{CollapsingTab}from"./CollapsingTab";function CollapsingTabsBaseComponent(e){var t=e.tabs,o=e.children,n=e.hidden,a=e.activeIndex,l=e.onChange,i=useContext(OptionsContext).samplesTabsMaxCount,s=useMemo((function(){return t.slice(i).map((function(e,t){return{idx:t,value:e.title}}))}),[t,i]),r=s.length+" more",c=useState(r),m=c[0],p=c[1],u=React.useCallback((function(){var e=a>=i;m!==r&&m===t[a].title||!e?m===r||e||p(r):p(t[a].title)}),[a,i,m,r,t]);useEffect((function(){setTimeout(u,0)}),[a,i,u]);return React.createElement(Tabs,{selectedIndex:a,onSelect:l},React.createElement(CollapsingTabList,{hidden:n},t.map((function(e,t){return React.createElement(CollapsingTab,{key:e.key,disabled:t>=i},e.title)})),s.length?React.createElement(CollapsingDropdown,{options:s,onChange:function(e){l(i+e.idx)},placeholder:r,value:m,active:a>=i}):null),o)}export var CollapsingTabsBase=memo(CollapsingTabsBaseComponent);
 //# sourceMappingURL=CollapsingTabsBase.js.map

package/lib-esm/components/Tabs/Tab.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import{Tab as ReactTab}from"react-tabs";import styled from"styled-components";export var Tab=styled(ReactTab)(templateObject_1||(templateObject_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"])));var templateObject_1;
+import{__makeTemplateObject}from"tslib";import{Tab as ReactTab}from"react-tabs";import styled from"styled-components";export var Tab=styled(ReactTab)(templateObject_1||(templateObject_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"])));var templateObject_1;
 //# sourceMappingURL=Tab.js.map

package/lib-esm/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-esm/components/common/CheckboxList.js

@@ -1,2 +1,2 @@
-import{__extends,__makeTemplateObject,__spreadArray}from"tslib";import React from"react";import styled from"styled-components";import{asField}from"informed";import{SampleControls,SamplesControlButton}from"@redocly/theme";import{FormError}from"./form";import{Checkbox}from"./Checkbox";var 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 __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=__spreadArray(__spreadArray([],o,!0),[t],!1);else{var a=o.indexOf(t);r=__spreadArray(__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,p=r.getError(),s=a||DEFAULT_MAX_ITEMS,m=i&&this.state.collapsed?l.slice(0,s):l;return React.createElement("div",null,n?React.createElement(ControlButtonsWrapper,null,React.createElement(SamplesControlButton,{onClick:function(){e.selectAll()}},"Select all"),React.createElement(SamplesControlButton,{onClick:function(){e.clearAll()}},"Clear")):null,React.createElement("div",null,m.map((function(t){return React.createElement(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>s&&i?React.createElement(ToggleButton,{onClick:function(){e.toggle()}},c?"Show all":"Collapse"):null),p?React.createElement(FormError,null,p):"")}}),t}(React.Component);export{CheckboxListComponent};export var CheckboxList=asField(CheckboxListComponent);var templateObject_1,templateObject_2,ControlButtonsWrapper=styled(SampleControls)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  opacity: 1;\n  text-align: left;\n"],["\n  opacity: 1;\n  text-align: left;\n"]))),ToggleButton=styled(SamplesControlButton)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  float: right;\n"],["\n  float: right;\n"])));
+import{__extends,__makeTemplateObject,__spreadArray}from"tslib";import React from"react";import styled from"styled-components";import{asField}from"informed";import{SampleControls,SamplesControlButton}from"@redocly/theme/SamplesPanelControls";import{FormError}from"./form";import{Checkbox}from"./Checkbox";var 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 __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=__spreadArray(__spreadArray([],o,!0),[t],!1);else{var a=o.indexOf(t);r=__spreadArray(__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,p=r.getError(),s=a||DEFAULT_MAX_ITEMS,m=i&&this.state.collapsed?l.slice(0,s):l;return React.createElement("div",null,n?React.createElement(ControlButtonsWrapper,null,React.createElement(SamplesControlButton,{onClick:function(){e.selectAll()}},"Select all"),React.createElement(SamplesControlButton,{onClick:function(){e.clearAll()}},"Clear")):null,React.createElement("div",null,m.map((function(t){return React.createElement(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>s&&i?React.createElement(ToggleButton,{onClick:function(){e.toggle()}},c?"Show all":"Collapse"):null),p?React.createElement(FormError,null,p):"")}}),t}(React.Component);export{CheckboxListComponent};export var CheckboxList=asField(CheckboxListComponent);var templateObject_1,templateObject_2,ControlButtonsWrapper=styled(SampleControls)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  opacity: 1;\n  text-align: left;\n"],["\n  opacity: 1;\n  text-align: left;\n"]))),ToggleButton=styled(SamplesControlButton)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  float: right;\n"],["\n  float: right;\n"])));
 //# sourceMappingURL=CheckboxList.js.map

package/lib-esm/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-esm/components/common/Dropdown/styled.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,darkDropdownStyle=css(templateObject_1||(templateObject_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"])));export var Dropdown=styled(DropdownComponent)(templateObject_2||(templateObject_2=__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:""}));export var SimpleDropdown=styled(Dropdown)(templateObject_3||(templateObject_3=__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"])));export var CollapsingDropdown=styled(Dropdown)(templateObject_4||(templateObject_4=__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"}));export var VersionDropdown=styled(Dropdown)(templateObject_5||(templateObject_5=__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"])));
+import{__makeTemplateObject}from"tslib";import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,templateObject_6,templateObject_7,samplesDropdownStyle=css(templateObject_1||(templateObject_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"])));export var Dropdown=styled(DropdownComponent)(templateObject_2||(templateObject_2=__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:""}));export var SimpleDropdown=styled(Dropdown)(templateObject_3||(templateObject_3=__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"])));export var CollapsingDropdown=styled(Dropdown)(templateObject_4||(templateObject_4=__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"}));export var VersionDropdown=styled(Dropdown)(templateObject_5||(templateObject_5=__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"])));export var SchemaDiscriminatorDropdown=styled(Dropdown)(templateObject_6||(templateObject_6=__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"])));export var SchemaMimeTypeDropdown=styled(SimpleDropdown)(templateObject_7||(templateObject_7=__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-esm/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-esm/components/common/FileUpload/FileUpload.js

@@ -1,2 +1,2 @@
-import{__assign,__awaiter,__generator,__rest}from"tslib";import*as React from"react";import{useField}from"informed";import{getFileToUpload}from"./helper";export var FileUpload=React.forwardRef((function(e,a){var t=__rest(e,[]),r=t.schema,i=t.contentName,n=t.onChange,o=t.name;return(0,useField(__assign({field:o},t)).render)(React.createElement("input",{"data-cy":"file-upload-input",type:"file",id:t.id,className:t.className,name:t.name,onChange:function(e){return __awaiter(void 0,void 0,void 0,(function(){var a;return __generator(this,(function(t){switch(t.label){case 0:return[4,getFileToUpload(e.target.files,r)];case 1:return a=t.sent(),n(i,a),[2]}}))}))},multiple:t.multiple,accept:t.accept,ref:a}))}));FileUpload.displayName="FileUpload";
+import{__assign,__awaiter,__generator,__rest}from"tslib";import*as React from"react";import{useField}from"informed";import{getFileToUpload}from"./helper";export var FileUpload=React.forwardRef((function(e,a){var t=__rest(e,[]),r=t.schema,i=t.contentName,n=t.onChange,o=t.name,l=__rest(t,["schema","contentName","onChange","name"]);return(0,useField(__assign({field:o},l)).render)(React.createElement("input",{"data-cy":"file-upload-input",type:"file",id:t.id,className:t.className,name:t.name,onChange:function(e){return __awaiter(void 0,void 0,void 0,(function(){var a;return __generator(this,(function(t){switch(t.label){case 0:return[4,getFileToUpload(e.target.files,r)];case 1:return a=t.sent(),n(i,a),[2]}}))}))},multiple:t.multiple,accept:t.accept,ref:a}))}));FileUpload.displayName="FileUpload";
 //# sourceMappingURL=FileUpload.js.map

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import styled from"styled-components";var templateObject_1,LoadingLine=styled.div(templateObject_1||(templateObject_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"])));export var LinearProgress=function(){return React.createElement(LoadingLine,null,React.createElement("div",{className:"indeterminate"}))};
+import{__makeTemplateObject}from"tslib";import*as React from"react";import styled from"styled-components";var templateObject_1,LoadingLine=styled.div(templateObject_1||(templateObject_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"])));export var LinearProgress=function(){return React.createElement(LoadingLine,null,React.createElement("div",{className:"indeterminate"}))};
 //# sourceMappingURL=LinearProgress.js.map

package/lib-esm/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-esm/components/common/TextField.js

@@ -1,2 +1,2 @@
-import{__assign,__makeTemplateObject,__rest}from"tslib";import React from"react";import{asField,useField}from"informed";import styled,{css}from"styled-components";import{useMount}from"../../hooks";import{FormError}from"./form";import{Dropdown}from"./Dropdown";export var getInvertedInputStyles=function(e){return css(templateObject_1||(templateObject_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)};var TextFieldWrapper=styled.div(templateObject_2||(templateObject_2=__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.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  position: relative;\n"],["\n  position: relative;\n"])));export var StyledInput=styled.input(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"])),(function(e){var t=e.panel;return 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.span(templateObject_5||(templateObject_5=__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,a=e.inputActionButton,l=e.panel,i=void 0===l?"samples":l,c=__rest(e,["fullWidth","errorMessage","type","inputActionButton","panel"]),p=React.useState("password"===o),u=p[0],d=p[1],s=React.useCallback((function(){d(!u)}),[u]);return React.createElement(TextFieldWrapper,{fullWidth:n,type:o},React.createElement(InputWrap,null,React.createElement(StyledInput,__assign({fullWidth:n,inputActionButton:a,type:u?"password":"text",inputType:o,ref:t,panel:i},c)),a?React.createElement(InputActionButton,{onClick:a.onClick},a.label):"password"===o?React.createElement(InputActionButton,{onClick:s},u?"show":"hide"):null),r?React.createElement(FormError,null,r):null)}export var TextField=React.forwardRef(TextFieldComponent);export function FormTextField(e){var t=useField(__assign({fieldType:"text"},e)),n=t.userProps,r=t.render,o=t.fieldState,a=t.informed;return r(React.createElement(TextField,__assign({},n,a,{errorMessage:o.error})))}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,a=n.map((function(e,t){return{value:e.title||e.value,idx:t,origValue:e.value}})),l=a.find((function(e){return e.origValue===t})),i=React.useState(null==l?void 0:l.value),c=i[0],p=i[1];useMount((function(){t&&r.setValue(t)}));var u=React.useCallback((function(e){r.setValue(a[e.idx].origValue),p(a[e.idx].value)}),[a,r]);return React.createElement(TextFieldWrapper,{fullWidth:!0},React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:c,options:a,onChange:u}),o.error?React.createElement(FormError,null,o.error):null)};export var FormDropdown=asField(FormDropdownInt);
+import{__assign,__makeTemplateObject,__rest}from"tslib";import React from"react";import{asField,useField}from"informed";import styled,{css}from"styled-components";import{useMount}from"../../hooks";import{FormError}from"./form";import{Dropdown}from"./Dropdown";export var getInvertedInputStyles=function(e){return css(templateObject_1||(templateObject_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)};var TextFieldWrapper=styled.div(templateObject_2||(templateObject_2=__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.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  position: relative;\n"],["\n  position: relative;\n"])));export var StyledInput=styled.input(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"])),(function(e){var t=e.panel;return 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.span(templateObject_5||(templateObject_5=__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,a=e.inputActionButton,l=e.panel,i=void 0===l?"samples":l,p=__rest(e,["fullWidth","errorMessage","type","inputActionButton","panel"]),u=React.useState("password"===o),c=u[0],d=u[1],s=React.useCallback((function(){d(!c)}),[c]);return React.createElement(TextFieldWrapper,{fullWidth:n,type:o},React.createElement(InputWrap,null,React.createElement(StyledInput,__assign({fullWidth:n,inputActionButton:a,type:c?"password":"text",inputType:o,ref:t,panel:i},p)),a?React.createElement(InputActionButton,{onClick:a.onClick},a.label):"password"===o?React.createElement(InputActionButton,{onClick:s},c?"show":"hide"):null),r?React.createElement(FormError,null,r):null)}export var TextField=React.forwardRef(TextFieldComponent);export function FormTextField(e){var t=useField(__assign({fieldType:"text"},e)),n=t.userProps,r=t.render,o=t.fieldState,a=t.informed;return r(React.createElement(TextField,__assign({},n,a,{errorMessage:o.error})))}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,a=n.map((function(e,t){return{value:e.title||e.value,idx:t,origValue:e.value}})),l=a.find((function(e){return e.origValue===t})),i=React.useState(null==l?void 0:l.value),p=i[0],u=i[1];useMount((function(){t&&r.setValue(t)}));var c=React.useCallback((function(e){r.setValue(a[e.idx].origValue),u(a[e.idx].value)}),[a,r]);return React.createElement(TextFieldWrapper,{fullWidth:!0},React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:p,options:a,onChange:c}),o.error?React.createElement(FormError,null,o.error):null)};export var FormDropdown=asField(FormDropdownInt);
 //# sourceMappingURL=TextField.js.map

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

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

package/lib-esm/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-esm/components/console/AuthPanel/AuthPanel.js

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

package/lib-esm/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-esm/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-esm/components/console/CodemirrorInput.js

@@ -1,2 +1,2 @@
-import{__extends,__makeTemplateObject}from"tslib";import*as React from"react";import{createGlobalStyle}from"styled-components";import{asField}from"informed";import{Controlled as CodeMirror}from"react-codemirror2-react-17";import"./codemirror-helpers";import{MediaTypes}from"../../types";var templateObject_1,CodeMirrorStyles=createGlobalStyle(templateObject_1||(templateObject_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 __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,l=a.onChange,c=a.onBlur,d=a.forwardedRef;return React.createElement(React.Fragment,null,React.createElement(CodeMirrorStyles,null),React.createElement(CodeMirror,{editorDidMount:this.initEditor,value:r||"",ref:d||void 0,onBeforeChange:function(e,r,o){n(o),l&&l(o)},onBlur:function(e){t(),c&&c(e)},options:{mode:this.props.mode||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);export{CodemirrorInput};export default asField(CodemirrorInput);
+import{__extends,__makeTemplateObject}from"tslib";import React from"react";import{asField}from"informed";import{Controlled as CodeMirror}from"react-codemirror2-react-17";import{createGlobalStyle}from"styled-components";import"./codemirror-helpers";import{MediaTypes}from"../../types";var templateObject_1,CodeMirrorStyles=createGlobalStyle(templateObject_1||(templateObject_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 __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,n=r.setTouched,t=r.setError,i=this.props,a=i.onChange,l=i.onBlur,c=i.forwardedRef;return React.createElement(React.Fragment,null,React.createElement(CodeMirrorStyles,null),React.createElement(CodeMirror,{editorDidMount:this.initEditor,value:e||"",ref:c,onBeforeChange:function(e,r,n){o(n),a&&a(n)},onBlur:function(e){n(!1),l&&l(e)},options:{mode:this.props.mode||MediaTypes.JSON,theme:"material",matchBrackets:!0,autoCloseBrackets:!0,tabSize:2,foldGutter:!0,extraKeys:{"Cmd-Space":this.showHintHandler,"Ctrl-Space":this.showHintHandler},hintOptions:{id:this.props.id,completeSingle:!1,schema:this.props.schema},lint:{id:this.props.id,schema:this.props.schema,setError:t}}}))}}),r}(React.PureComponent);export{CodemirrorInput};export default asField(CodemirrorInput);
 //# sourceMappingURL=CodemirrorInput.js.map

package/lib-esm/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-esm/components/console/Console.js

@@ -1,2 +1,2 @@
-import{__assign,__awaiter,__decorate,__extends,__generator,__rest}from"tslib";import*as React from"react";import{Form,useField}from"informed";import{observer}from"mobx-react";import Swagger from"swagger-client";import{get,useDimensions,unescapeFormId}from"../../utils";import{AnalyticsEventType}from"../../services";import{JsonPointer,StoreContext}from"../../redoc-lib";import{RenderHook}from"../../redoc-lib/src/components/RenderHook";import{l}from"../../redoc-lib/src/services/Labels";import{CodeHeader,Accordion}from"../Panel";import{OAuth2}from"../../services/OAuth2";import{isFileUploadMime}from"../common/FileUpload/helper";import{OperationParameters}from"../OperationParameters";import{getFileNameFromHeaders,getParameters,makeRequestInterceptor,unescapeQueryParams,updateStorage,requiredValidator}from"./utils";import{AuthPanel}from"./AuthPanel";import{RequestBody}from"./RequestBody";import{ResponsePanel}from"./ResponsePanel";import{ActionPanel}from"./ActionPanel";import{ServerChooser}from"./ServerDropdown";import{TryItPanel}from"./TryItPanel";import{ConsoleTabs}from"./ConsoleTabs";import{CloseButton,ConsoleBody,ConsoleWrap}from"./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 o=t.values,a=__rest(t,["values"]);r.formApi=e,setTimeout((function(){var e=__assign(__assign({},a),{values:__assign(__assign({},o),{query:unescapeQueryParams(o.query||{})})});r.setState({form:e})}),0)}}),Object.defineProperty(r,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.values,o=__rest(e,["values"]),a=__assign(__assign({},o),{values:__assign(__assign({},t),{query:unescapeQueryParams(t.query||{})})});r.setState({form:a}),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 __awaiter(r,void 0,void 0,(function(){var e,t,r,o,a,n,s,i,l,u,c,p,d,m,h,v,f,g,y,_,b,P,R,C,S,w,A,E,I,T,k,O,q,F,x,B,H,j,V,D,U=this;return __generator(this,(function(N){switch(N.label){case 0:if(e=this.props,t=e.store,r=e.operation,o=e.onResponse,a=this.state.form,n=a.values,s=a.invalid,this.formApi.submitForm(),s)return this.setState({shaking:!0}),setTimeout((function(){return U.setState({shaking:!1})}),1e3),null===(x=null===(F=null==t?void 0:t.options.events)||void 0===F?void 0:F.tryItSent)||void 0===x||x.call(F,{eventType: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=n.body,/json/.test(l))try{u=JSON.parse(u)}catch(e){console.error(e)}if(this.setState({loading:!0}),c=this.state.resolvedRawSpec,p=(r.httpVerb||"").toLowerCase(),!(d=get(c,["paths",r.path,p,"servers"])||get(c,["paths",r.path,"servers"])||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");m=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,g=n.auth,n.auth?(y=Object.keys(n.auth)[0],_=unescapeFormId(y),f=__assign(__assign({},c),{components:__assign(__assign({},c.components),{securitySchemes:__assign(__assign({},c.components.securitySchemes),(T={},T[_]=__assign(__assign({},c.components.securitySchemes[_]),{type:"openIdConnect"===c.components.securitySchemes[_].type?"oauth2":c.components.securitySchemes[_].type}),T))})}),g=__assign(__assign({},g),((k={})[_]=g[y],k))):f=__assign({},c),(b=t.options.corsProxyUrl)&&d.length&&(f.servers=d.map((function(e){return __assign(__assign({},e),{url:b+normalizeUrlProtocol(e.url)})})),f.paths=__assign(__assign({},f.paths),((O={})[r.path]=__assign(__assign({},f.paths[r.path]),((q={})[p]=__assign(__assign({},f.paths[r.path][p]),{servers:void 0}),q.servers=void 0,q)),O))),(P=(null===(H=null===(B=null==i?void 0:i.content)||void 0===B?void 0:B.active)||void 0===H?void 0:H.name)||null)&&u&&isFileUploadMime(P)&&(R=Object.values(u),u=R.length>1?R:R[0]),C={userFetch:v&&require("cross-fetch").fetch,server:b?b+normalizeUrlProtocol(m.url):m.url,serverVariables:this.state.server.variables,spec:f,pathName:r.path,method:r.httpVerb,parameters:__assign(__assign(__assign(__assign({},n.path),n.query),n.header),n.cookie),securities:{authorized:g},requestBody:u,requestContentType:P,responseContentType:(null===(j=n.header)||void 0===j?void 0:j.Accept)||null,requestInterceptor:makeRequestInterceptor(t.options,r,null==g?void 0:g.Authorization)},N.label=1;case 1:return N.trys.push([1,5,8,9]),[4,Swagger.execute(C)];case 2:return S=N.sent(),(w=null==S?void 0:S.data)instanceof Blob?(isFileUploadMime(w.type)&&(S.fileInfo={rawData:w,fileName:getFileNameFromHeaders(S.headers)}),A=S,[4,w.text()]):[3,4];case 3:A.data=N.sent(),N.label=4;case 4:return null==o||o({request:C,response:S}),this.setState({response:S,error:void 0}),[3,9];case 5:return(E=N.sent())&&E.response&&E.response.data instanceof Blob?(I=E.response,[4,E.response.data.text()]):[3,7];case 6:I.data=N.sent(),null==o||o({request:C,response:E.response}),N.label=7;case 7:return this.setState({response:void 0,error:E}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-h}),null===(D=null===(V=null==t?void 0:t.options.events)||void 0===V?void 0:V.tryItSent)||void 0===D||D.call(V,{eventType: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:getParameters(t.operation.parameters,"path"),cookie:getParameters(t.operation.parameters,"cookie"),header:getParameters(t.operation.parameters,"header"),query:getParameters(t.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}},r}return __extends(t,e),Object.defineProperty(t.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){return __awaiter(this,void 0,void 0,(function(){var e,t,r,o;return __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 o=a.sent(),this.setState({resolvedRawSpec:o}),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,o=e.rootElement,a=this.state,n=a.shaking,s=a.activeTab,i=a.form,l=a.response,u=a.loading,c=a.error,p=!(!l&&!c);return React.createElement(ConsoleWrapHook,{shaking:n,className:r,rootElement:o},React.createElement(CodeHeader,null,React.createElement(ConsoleTabs,{active:s,hasResponse:p,onChange:this.handleTabChange}),this.props.onClose&&React.createElement(CloseButton,{onClick:this.props.onClose}," ✕ ")),React.createElement(ConsoleBody,{hidden:0!==s},this.renderRequest()),React.createElement(ConsoleBody,{hidden:1!==s},this.renderResponse()),React.createElement(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,o=t.store,a=t.properties,n=t.securityDefaults,s=this.state,i=s.form,u=s.resolvedRawSpec,c=s.server,p=i.errors||{},d=p.path||p.cookie||p.header||p.query,m=u&&JsonPointer.get(u,r.pointer),h=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];h&&i.values.auth[h]||(h=void 0),!h||void 0===i.values.auth[h].token&&void 0===i.values.auth[h].client_id&&void 0===i.values.auth[h].client_secret||i.values.auth[h].token&&i.values.auth[h].token.access_token||(h=void 0),h&&null!=i.values.auth[h].username&&(i.values.auth[h].username&&i.values.auth[h].password||(h=void 0));var v=r.parameters||[],f=null===(e=null==o?void 0:o.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!u&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(React.Fragment,null,React.createElement(Form,{onChange:this.handleChange,getApi:this.setFormApi,style:__assign(__assign({},flexColumn),{margin:0})},React.createElement(Accordion,{initialActiveIdx:r.security.length&&h?1:0},r.security.length&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",renderChildrenHidden:!0,error:!h&&!!p.auth,success:!!h},f?React.createElement(AuthPanelHook,{field:"auth",validate:requiredValidator},(function(e){return React.createElement(RenderHook,{Hook:f,props:{server:c,operation:r,onChange:e,OAuth2:OAuth2}})})):React.createElement(AuthPanel,{formApi:this.formApi,form:i,operation:r,activeServer:c.url,authCorsProxyUrl:o.options.authCorsProxyUrl,securityDefaults:n}))||null,r.requestBody&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",renderChildrenHidden:!0,error:!!p.body},React.createElement(RequestBody,{validate:allowBodyErrors,console:this,body:r.requestBody,id:r.id,resolvedBody:m.requestBody,properties:a}))||null,v.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:d,renderChildrenHidden:!0},React.createElement(OperationParameters,{operation:r,values:i.values,errors:i.errors||{}}))||null)),React.createElement(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,o=e.time;return React.createElement(ResponsePanel,{response:t,error:r,time:o})}}),t=__decorate([observer],t)}(React.Component);export{Console};function allowBodyErrors(){}function ConsoleWrapHook(e){var t=e.shaking,r=e.className,o=e.children,a=e.rootElement,n=useDimensions(a)[0],s=React.useContext(StoreContext);return React.createElement(ConsoleWrap,{scrollYOffset:null==s?void 0:s.options.scrollYOffset,shaking:t,className:r,"data-cy":"console",fullWidth:null==n?void 0:n.width},o)}function AuthPanelHook(e){var t=useField(__assign({},e)),r=t.fieldApi,o=t.render,a=t.userProps,n=r.setValue,s=a.children;return o(React.createElement(React.Fragment,null,s(n)))}
+import{__assign,__awaiter,__decorate,__extends,__generator,__rest}from"tslib";import*as React from"react";import{Form,useField}from"informed";import{observer}from"mobx-react";import Swagger from"swagger-client";import{get,unescapeFormId}from"../../utils";import{AnalyticsEventType}from"../../services";import{JsonPointer,StoreContext}from"../../redoc-lib";import{RenderHook}from"../../redoc-lib/src/components/RenderHook";import{l}from"../../redoc-lib/src/services/Labels";import{Accordion,StyledCodeHeader}from"../Panel";import{OAuth2}from"../../services/OAuth2";import{isFileUploadMime}from"../common/FileUpload/helper";import{OperationParameters}from"../OperationParameters";import{useDimensions}from"../../hooks";import{getFileNameFromHeaders,getParameters,makeRequestInterceptor,unescapeQueryParams,updateStorage,requiredValidator}from"./utils";import{AuthPanel}from"./AuthPanel";import{RequestBody}from"./RequestBody/RequestBody";import{ResponsePanel}from"./ResponsePanel";import{ActionPanel}from"./ActionPanel";import{ServersDropdown}from"./ServersDropdown";import{TryItPanel}from"./TryItPanel";import{ConsoleTabs}from"./ConsoleTabs";import{CloseButton,ConsoleBody,ConsoleWrap}from"./styled";function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}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 o=t.values,a=__rest(t,["values"]);r.formApi=e,setTimeout((function(){var e=__assign(__assign({},a),{values:__assign(__assign({},o),{query:unescapeQueryParams(o.query||{})})});r.setState({form:e})}),0)}}),Object.defineProperty(r,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.values,o=__rest(e,["values"]),a=__assign(__assign({},o),{values:__assign(__assign({},t),{query:unescapeQueryParams(t.query||{})})});r.setState({form:a}),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 __awaiter(r,void 0,void 0,(function(){var e,t,r,o,a,n,s,i,l,u,c,p,d,m,h,v,f,y,g,_,b,P,R,S,C,w,A,E,I,k,T,q,O,x,F,B,j,H,D,V,U,N=this;return __generator(this,(function(W){switch(W.label){case 0:if(e=this.props,t=e.store,r=e.operation,o=e.onResponse,a=this.state.form,n=a.values,s=a.invalid,null===(x=this.formApi)||void 0===x||x.submitForm(),s)return this.setState({shaking:!0}),setTimeout((function(){return N.setState({shaking:!1})}),1e3),null===(B=null===(F=null==t?void 0:t.options.events)||void 0===F?void 0:F.tryItSent)||void 0===B||B.call(F,{eventType: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=n.body,/json/.test(l))try{u=JSON.parse(u)}catch(e){console.error(e)}if(this.setState({loading:!0}),c=this.state.resolvedRawSpec,p=(r.httpVerb||"").toLowerCase(),!(d=get(c,["paths",r.path,p,"servers"])||get(c,["paths",r.path,"servers"])||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");m=d.find((function(e){return N.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url)})),h=Date.now(),v=!!window.document.documentMode,y=n.auth,n.auth?(g=Object.keys(n.auth)[0],_=unescapeFormId(g),f=__assign(__assign({},c),{components:__assign(__assign({},null==c?void 0:c.components),{securitySchemes:__assign(__assign({},null==c?void 0:c.components.securitySchemes),(k={},k[_]=__assign(__assign({},null==c?void 0:c.components.securitySchemes[_]),{type:"openIdConnect"===(null==c?void 0:c.components.securitySchemes[_].type)?"oauth2":null==c?void 0:c.components.securitySchemes[_].type}),k))})}),y=__assign(__assign({},y),((T={})[_]=y[g],T))):f=__assign({},c),(b=t.options.corsProxyUrl)&&d.length&&(f.servers=d.map((function(e){return __assign(__assign({},e),{url:b+normalizeUrlProtocol(e.url)})})),f.paths=__assign(__assign({},f.paths),((q={})[r.path]=__assign(__assign({},f.paths[r.path]),((O={})[p]=__assign(__assign({},f.paths[r.path][p]),{servers:void 0}),O.servers=void 0,O)),q))),(P=(null===(H=null===(j=null==i?void 0:i.content)||void 0===j?void 0:j.active)||void 0===H?void 0:H.name)||null)&&u&&isFileUploadMime(P)&&(R=Object.values(u),u=R.length>1?R:R[0]),S={userFetch:v&&require("cross-fetch").fetch,server:b?b+normalizeUrlProtocol(m.url):m.url,serverVariables:this.state.server.variables,spec:f,pathName:r.path,method:r.httpVerb,parameters:__assign(__assign(__assign(__assign({},n.path),n.query),n.header),n.cookie),securities:{authorized:y},requestBody:u,requestContentType:P,responseContentType:(null===(D=n.header)||void 0===D?void 0:D.Accept)||null,requestInterceptor: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.execute(S)];case 2:return C=W.sent(),(w=null==C?void 0:C.data)instanceof Blob?(isFileUploadMime(w.type)&&(C.fileInfo={rawData:w,fileName:getFileNameFromHeaders(C.headers)}),A=C,[4,w.text()]):[3,4];case 3:A.data=W.sent(),W.label=4;case 4:return null==o||o({request:S,response:C}),this.setState({response:C,error:void 0}),[3,9];case 5:return(E=W.sent())&&E.response&&E.response.data instanceof Blob?(I=E.response,[4,E.response.data.text()]):[3,7];case 6:I.data=W.sent(),null==o||o({request:S,response:E.response}),W.label=7;case 7:return this.setState({response:void 0,error:E}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-h}),null===(U=null===(V=null==t?void 0:t.options.events)||void 0===V?void 0:V.tryItSent)||void 0===U||U.call(V,{eventType: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:getParameters(t.operation.parameters,"path"),cookie:getParameters(t.operation.parameters,"cookie"),header:getParameters(t.operation.parameters,"header"),query:getParameters(t.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}},r}return __extends(t,e),Object.defineProperty(t.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e;return __awaiter(this,void 0,void 0,(function(){var t,r,o,a;return __generator(this,(function(n){switch(n.label){case 0:return t=this.props,r=t.store,o=t.operation,[4,r.dereferenceSpecForTryIt(o)];case 1:return a=n.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,o=e.rootElement,a=this.state,n=a.shaking,s=a.activeTab,i=a.form,l=a.response,u=a.loading,c=a.error,p=!(!l&&!c);return React.createElement(ConsoleWrapHook,{shaking:n,className:r,rootElement:o},React.createElement(StyledCodeHeader,null,React.createElement(ConsoleTabs,{active:s,hasResponse:p,onChange:this.handleTabChange}),this.props.onClose&&React.createElement(CloseButton,{onClick:this.props.onClose}," ✕ ")),React.createElement(ConsoleBody,{hidden:0!==s,"data-cy":"console-request-body"},this.renderRequest()),React.createElement(ConsoleBody,{hidden:1!==s,"data-cy":"console-response-body"},this.renderResponse()),React.createElement(ActionPanel,{hasResponse: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,o=t.store,a=t.properties,n=t.securityDefaults,s=this.state,i=s.form,u=s.resolvedRawSpec,c=s.server,p=i.errors||{},d=p.path||p.cookie||p.header||p.query,m=u&&JsonPointer.get(u,r.pointer),h=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];h&&i.values.auth[h]||(h=void 0),!h||void 0===i.values.auth[h].token&&void 0===i.values.auth[h].client_id&&void 0===i.values.auth[h].client_secret||i.values.auth[h].token&&i.values.auth[h].token.access_token||(h=void 0),h&&null!=i.values.auth[h].username&&(i.values.auth[h].username&&i.values.auth[h].password||(h=void 0));var v=r.parameters||[],f=null===(e=null==o?void 0:o.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!u&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(Form,{onChange:this.handleChange,getApi:this.setFormApi,style:__assign(__assign({},flexColumn),{margin:0})},React.createElement(ServersDropdown,{operation:r,onChange:this.handleServerChange}),React.createElement(Accordion,{initialActiveIdx:r.security.length&&h?1:0},r.security.length&&this.formApi&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",error:!h&&!!p.auth,success:!!h},f?React.createElement(AuthPanelHook,{field:"auth",validate:requiredValidator},(function(e){return React.createElement(RenderHook,{Hook:f,props:{server:c,operation:r,onChange:e,OAuth2:OAuth2}})})):React.createElement(AuthPanel,{formApi:this.formApi,form:i,operation:r,activeServer:c.url,authCorsProxyUrl:o.options.authCorsProxyUrl,securityDefaults:n}))||null,r.requestBody&&this.formApi&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",error:!!p.body},React.createElement(RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:r.requestBody,id:r.id,resolvedBody:null==m?void 0:m.requestBody,properties:a}))||null,v.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:d},React.createElement(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,o=e.time;return React.createElement(ResponsePanel,{response:t,error:r,time:o})}}),t=__decorate([observer],t)}(React.Component);export{Console};function allowBodyErrors(){}function ConsoleWrapHook(e){var t=e.shaking,r=e.className,o=e.children,a=e.rootElement,n=useDimensions(a)[0],s=React.useContext(StoreContext);return React.createElement(ConsoleWrap,{scrollYOffset:null==s?void 0:s.options.scrollYOffset,shaking:t,className:r,"data-cy":"console",fullWidth:null==n?void 0:n.width},o)}function AuthPanelHook(e){var t=useField(__assign({},e)),r=t.fieldApi,o=t.render,a=t.userProps,n=r.setValue,s=a.children;return o(React.createElement(React.Fragment,null,s(n)))}
 //# sourceMappingURL=Console.js.map

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

@@ -1,2 +1,2 @@
-import{__assign,__awaiter,__generator}from"tslib";import React from"react";import{useDimensions}from"../../utils";import{CodeHeader}from"../Panel";import{StoreContext}from"../../redoc-lib";import{ConsoleWrap}from"./styled";export function Console(e){var t=this,o=React.useState({}),r=o[0],n=o[1],s=React.useContext(StoreContext),a=useDimensions(e.rootElement)[0];return React.useEffect((function(){__awaiter(t,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:return[4,import("./Console")];case 1:return e=t.sent(),n({Console:e.Console}),[2]}}))}))}),[]),r.Console?React.createElement(r.Console,__assign({},e)):React.createElement(ConsoleWrap,{scrollYOffset:null==s?void 0:s.options.scrollYOffset,className:e.className,fullWidth:null==a?void 0:a.width},React.createElement(CodeHeader,null,"Loading..."))}
+import{__assign,__awaiter,__generator}from"tslib";import React from"react";import{useDimensions}from"../../hooks";import{CodeHeader}from"../Panel";import{StoreContext}from"../../redoc-lib";import{ConsoleWrap}from"./styled";export function Console(e){var o=this,t=React.useState({}),r=t[0],n=t[1],s=React.useContext(StoreContext),a=useDimensions(e.rootElement)[0];return React.useEffect((function(){__awaiter(o,void 0,void 0,(function(){var e;return __generator(this,(function(o){switch(o.label){case 0:return[4,import("./Console")];case 1:return e=o.sent(),n({Console:e.Console}),[2]}}))}))}),[]),r.Console?React.createElement(r.Console,__assign({},e)):React.createElement(ConsoleWrap,{scrollYOffset:null==s?void 0:s.options.scrollYOffset,className:e.className,fullWidth:null==a?void 0:a.width},React.createElement(CodeHeader,null,"Loading..."))}
 //# sourceMappingURL=ConsoleLazy.js.map

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import styled,{css}from"styled-components";export var TabsWrap=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"],["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"])));export var Tab=styled.button(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  outline: none;\n  border: none;\n  background-color: var(--try-it-panel-tab-background-color);\n  text-align: center;\n  cursor: pointer;\n  color: var(--color-content-inverse);\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: var(--global-border-radius);\n  font-size: 12px;\n  padding: 0 10px;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n\n  &:first-child {\n    border-radius: var(--global-border-radius) 0 0 var(--global-border-radius);\n  }\n\n  &:last-child {\n    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;\n  }\n\n  ","\n\n  ","\n"],["\n  outline: none;\n  border: none;\n  background-color: var(--try-it-panel-tab-background-color);\n  text-align: center;\n  cursor: pointer;\n  color: var(--color-content-inverse);\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: var(--global-border-radius);\n  font-size: 12px;\n  padding: 0 10px;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n\n  &:first-child {\n    border-radius: var(--global-border-radius) 0 0 var(--global-border-radius);\n  }\n\n  &:last-child {\n    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;\n  }\n\n  ","\n\n  ","\n"])),(function(r){return r.active&&css(templateObject_2||(templateObject_2=__makeTemplateObject(["\n        border-bottom: 4px solid var(--try-it-panel-active-tab-border-color);\n        background-color: var(--try-it-panel-active-tab-background-color);\n      "],["\n        border-bottom: 4px solid var(--try-it-panel-active-tab-border-color);\n        background-color: var(--try-it-panel-active-tab-background-color);\n      "])))||""}),(function(r){return r.disabled&&css(templateObject_3||(templateObject_3=__makeTemplateObject(["\n        cursor: default;\n        color: var(--try-it-panel-disabled-tab-color);\n      "],["\n        cursor: default;\n        color: var(--try-it-panel-disabled-tab-color);\n      "])))||""}));var templateObject_1,templateObject_2,templateObject_3,templateObject_4;
+import{__makeTemplateObject}from"tslib";import styled,{css}from"styled-components";export var TabsWrap=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"],["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"])));export var Tab=styled.button(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  outline: none;\n  border: none;\n  background-color: var(--panel-try-it-tabs-background-color);\n  text-align: center;\n  cursor: pointer;\n  color: var(--panel-try-it-tabs-text-color);\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: var(--border-radius);\n  font-size: var(--panel-try-it-tabs-font-size);\n  font-family: var(--panel-try-it-tabs-font-family);\n  font-weight: var(--panel-try-it-tabs-font-weight);\n  padding: 0 10px;\n  border-bottom: 4px solid var(--panel-try-it-tabs-border-color);\n\n  &:first-child {\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n\n  &:last-child {\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n\n  &:hover:not(:disabled) {\n    border-color: var(--panel-try-it-tabs-hover-border-color);\n    background-color: var(--panel-try-it-tabs-hover-background-color);\n  }\n\n  ","\n\n  ","\n"],["\n  outline: none;\n  border: none;\n  background-color: var(--panel-try-it-tabs-background-color);\n  text-align: center;\n  cursor: pointer;\n  color: var(--panel-try-it-tabs-text-color);\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: var(--border-radius);\n  font-size: var(--panel-try-it-tabs-font-size);\n  font-family: var(--panel-try-it-tabs-font-family);\n  font-weight: var(--panel-try-it-tabs-font-weight);\n  padding: 0 10px;\n  border-bottom: 4px solid var(--panel-try-it-tabs-border-color);\n\n  &:first-child {\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n\n  &:last-child {\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n\n  &:hover:not(:disabled) {\n    border-color: var(--panel-try-it-tabs-hover-border-color);\n    background-color: var(--panel-try-it-tabs-hover-background-color);\n  }\n\n  ","\n\n  ","\n"])),(function(r){return r.active&&css(templateObject_2||(templateObject_2=__makeTemplateObject(["\n        border-color: var(--panel-try-it-tabs-active-border-color);\n        background-color: var(--panel-try-it-tabs-active-background-color);\n      "],["\n        border-color: var(--panel-try-it-tabs-active-border-color);\n        background-color: var(--panel-try-it-tabs-active-background-color);\n      "])))||""}),(function(r){return r.disabled&&css(templateObject_3||(templateObject_3=__makeTemplateObject(["\n        cursor: default;\n        border-color: var(--panel-try-it-tabs-disables-border-color)\n        background-color: var(--panel-try-it-tabs-disabled-background-color);\n        color: var(--panel-try-it-tabs-disabled-text-color);\n      "],["\n        cursor: default;\n        border-color: var(--panel-try-it-tabs-disables-border-color)\n        background-color: var(--panel-try-it-tabs-disabled-background-color);\n        color: var(--panel-try-it-tabs-disabled-text-color);\n      "])))||""}));var templateObject_1,templateObject_2,templateObject_3,templateObject_4;
 //# sourceMappingURL=styled.js.map

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

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

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

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

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { SecurityDetails } from '../../utils';
+import type { SecurityDetails } from '../../types';
 export interface OAuth2TokenInputProps {
     flow: {
         refreshUrl?: string;
+        'x-tokenEndpointAuthMethod'?: 'none' | 'client_secret_basic' | string;
         scopes: Record<string, string>;
         tokenUrl: string;
     };