@redocly/openapi-docs 3.0.0-alpha.46 → 3.0.0-alpha.48

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

@@ -1,7 +1,8 @@
-import{asField}from"informed";import{SampleControls,SamplesControlButton}from"@redocly/theme";import React,{useState}from"react";import styled from"styled-components";import{FormError}from"./form";import{Checkbox}from"./Checkbox";const DEFAULT_MAX_ITEMS=11;export const CheckboxListComponent=({items:e,fieldApi:t,validateOnChange:l,maxDisplayedItems:o,showControls:n,trimItemsLength:r})=>{const[a,c]=useState(!0),s=e=>t.getValue().includes(e),m=t.getError(),i=o||11,u=r&&a?e.slice(0,i):e;return React.createElement("div",null,n?React.createElement(ControlButtonsWrapper,null,React.createElement(SamplesControlButton,{onClick:()=>{t.setValue(e)}},"Select all"),React.createElement(SamplesControlButton,{onClick:()=>{t.setValue([])}},"Clear")):null,React.createElement("div",null,u.map((e=>React.createElement(Checkbox,{fullWidth:!0,id:e,value:e,checked:s(e),label:e,key:e,onChange:e=>{(e=>{const l=e.target.value,o=e.target.checked;t.setTouched(!0);const n=t.getValue()||[];let r;if(o)r=[...n,l];else{const e=n.indexOf(l);r=[...n.slice(0,e),...n.slice(e+1)]}t.setValue(r)})(e),l&&t.validate()}}))),e.length>i&&r?React.createElement(ToggleButton,{onClick:()=>{c((e=>!e))}},a?"Show all":"Collapse"):null),m?React.createElement(FormError,null,m):"")};export const CheckboxList=asField(CheckboxListComponent);const ControlButtonsWrapper=styled(SampleControls)`
-  opacity: 1;
-  text-align: left;
-`,ToggleButton=styled(SamplesControlButton)`
+import{asField}from"informed";import{CodeBlockControls,CodeBlockControlButton}from"@redocly/theme";import React,{useState}from"react";import styled from"styled-components";import{FormError}from"./form";import{Checkbox}from"./Checkbox";const DEFAULT_MAX_ITEMS=11;export const CheckboxListComponent=({items:e,fieldApi:t,validateOnChange:o,maxDisplayedItems:l,showControls:r,trimItemsLength:c})=>{const[a,n]=useState(!0),s=e=>t.getValue().includes(e),i=t.getError(),d=l||11,m=c&&a?e.slice(0,d):e;return React.createElement("div",null,r?React.createElement(CodeBlockControls,{controls:{select:{onClick:()=>{t.setValue(e)},label:"Select all",tooltipText:"Select all checkboxes"},deselect:{onClick:()=>{t.setValue([])},label:"Deselect all",tooltipText:"Deselect all checkboxes"}}}):null,React.createElement(ListWrapper,null,m.map((e=>React.createElement(Checkbox,{fullWidth:!0,id:e,value:e,checked:s(e),label:e,key:e,onChange:e=>{(e=>{const o=e.target.value,l=e.target.checked;t.setTouched(!0);const r=t.getValue()||[];let c;if(l)c=[...r,o];else{const e=r.indexOf(o);c=[...r.slice(0,e),...r.slice(e+1)]}t.setValue(c)})(e),o&&t.validate()}}))),e.length>d&&c?React.createElement(ToggleButton,{onClick:()=>{n((e=>!e))}},a?"Show all":"Collapse"):null),i?React.createElement(FormError,null,i):"")};export const CheckboxList=asField(CheckboxListComponent);const ListWrapper=styled.div`
+  padding: 10px;
+  background-color: var(--panel-samples-input-background-color);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+`,ToggleButton=styled(CodeBlockControlButton)`
   float: right;
 `;
 //# sourceMappingURL=CheckboxList.js.map

package/lib-esm/components/common/Fields/fields.js

@@ -5,8 +5,6 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     outline: 0;
     cursor: pointer;
     padding: 0 10px 0 0;
-    font-family: var(--field-name-font-family);
-    font-size: var(--field-name-font-size);
     color: var(--text-color);
     &:focus {
       font-weight: var(--font-weight-bold);
@@ -21,9 +19,15 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   }
 
   ${()=>{const e=getCssVariable("--schema-field-name-word-break");if(["break-all","break-word"].includes(e)){const r=`\n      && button {\n        max-width: calc(100% - 21px); /* left padding + toggle button width: 16px/2 + 13px */\n        text-align: left;\n        span {\n          white-space: normal;\n          word-break: ${e};\n          vertical-align: top;\n          display: inline-flex;\n        }\n      }\n    `;return css`
-        ${typography("schema-property-name")}
-        ${r}
-      `}return typography("schema-property-name")}};
+        button {
+          ${typography("schema-property-name")};
+          ${r};
+        }
+      `}return css`
+      button {
+        ${typography("schema-property-name")};
+      }
+    `}};
 `;export const FieldLabel=styled.span`
   vertical-align: middle;
   line-height: 20px;

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

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

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

@@ -1,4 +1,4 @@
-import React,{useState}from"react";import styled from"styled-components";import{useRecoilValue}from"recoil";import{ResponseHeader,PanelPreCodeBlock}from"./styled";import{globalOptionsSelector}from"../../recoil/store";export function ResponseHeadersList({headers:e}){const t=useRecoilValue(globalOptionsSelector),[a,o]=useState(!0),{maxResponseHeadersToShowInTryIt:l}=t,r=Object.keys(e),n=!!l&&r.length>l,s=n&&a?[...r].splice(0,l):[...r];return React.createElement(React.Fragment,null,React.createElement(ResponseHeader,null," Headers: "),React.createElement(PanelPreCodeBlock,null,s.map((t=>React.createElement("div",{key:t},React.createElement(HeaderName,null,t,":"),React.createElement("code",null,e[t])))),n&&React.createElement(StyledShowMoreLabel,{onClick:()=>{o(!a)}},a?"Show more...":"Hide headers")))}const HeaderName=styled.strong`
+import React,{useState}from"react";import styled from"styled-components";import{useRecoilValue}from"recoil";import{CodeBlockContainer}from"@redocly/theme";import{ResponseHeader}from"./styled";import{globalOptionsSelector}from"../../recoil/store";export function ResponseHeadersList({headers:e}){const t=useRecoilValue(globalOptionsSelector),[o,r]=useState(!0),{maxResponseHeadersToShowInTryIt:a}=t,l=Object.keys(e),n=!!a&&l.length>a,s=n&&o?[...l].splice(0,a):[...l];return React.createElement(React.Fragment,null,React.createElement(ResponseHeader,null," Headers: "),React.createElement(CodeBlockContainer,{withControls:!0},s.map((t=>React.createElement("div",{key:t},React.createElement(HeaderName,null,t,":"),React.createElement("code",null,e[t])))),n&&React.createElement(StyledShowMoreLabel,{onClick:()=>{r(!o)}},o?"Show more...":"Hide headers")))}const HeaderName=styled.strong`
   text-transform: capitalize;
   display: inline-block;
   padding-right: 5px;

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

@@ -13,6 +13,5 @@ export declare const TryItDropdown: import("styled-components").StyledComponent<
     fullWidth?: boolean | undefined;
     variant?: "dark" | "light" | undefined;
 }, never>;
-export declare const PanelPreCodeBlock: import("styled-components").StyledComponent<"pre", any, {}, never>;
 export declare const ResponseHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FlowName: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-import styled,{css,keyframes}from"styled-components";import{PreformattedCodeBlock}from"@redocly/theme";import{Dropdown}from"../common/Dropdown";const shake=keyframes`
+import styled,{css,keyframes}from"styled-components";import{Dropdown}from"../common/Dropdown";const shake=keyframes`
   10%, 90% {
     transform: translate3d(-1px, 0, 0);
   }
@@ -83,9 +83,6 @@ import styled,{css,keyframes}from"styled-components";import{PreformattedCodeBloc
     border: var(--panel-try-it-dropdown-border);
     color: var(--panel-try-it-dropdown-color);
   }
-`;export const PanelPreCodeBlock=styled(PreformattedCodeBlock)`
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
 `;export const ResponseHeader=styled.div`
   margin-bottom: 10px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.0.0-alpha.46",
+  "version": "3.0.0-alpha.48",
   "description": "Redocly OpenAPI Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -119,7 +119,7 @@
     "webpack-dev-server": "^4.9.3",
     "workerize-loader": "github:redocly/workerize-loader#webpack-5-dist",
     "js-yaml": "4.1.0",
-    "@redocly/theme": "0.16.0"
+    "@redocly/theme": "0.17.1"
   },
   "scripts": {
     "start": "webpack serve --mode=development --hot",