@redocly/theme 0.33.1 → 0.33.3

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -15,6 +15,7 @@ export interface CodeBlockProps {
     codeBlockRef?: (instance: HTMLPreElement | null) => void;
     codeBlockMaxHeight?: string;
     hideCodeColors?: boolean;
+    wrapContents?: boolean;
 }
 export interface Sample {
     lang: string;
@@ -37,4 +38,4 @@ export interface ExternalSource {
     properties?: any;
     operation?: any;
 }
-export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, }: CodeBlockProps): JSX.Element;
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, }: CodeBlockProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlock.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
 const Feedback_1 = require("../../components/Feedback");
 const CodeBlock_1 = require("../../components/CodeBlock");
-function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, }) {
+function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, }) {
     var _a;
     const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
     const highlightedCode = highlightedHtml || (0, utils_1.highlight)(sourceCode, lang);
@@ -59,7 +59,7 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
                     __html: withLineNumbers
                         ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
                         : highlightedCode,
-                }, "data-cy": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, withControls: true }),
+                }, "data-cy": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, withControls: true, wrapContents: wrapContents }),
             reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
 }
 exports.CodeBlock = CodeBlock;

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -2,4 +2,5 @@ export declare const CodeBlockContainer: import("styled-components").StyledCompo
     withControls?: boolean | undefined;
     maxHeight?: string | undefined;
     hideCodeColors?: boolean | undefined;
+    wrapContents?: boolean | undefined;
 }, never>;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -40,7 +40,7 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
-    white-space: var(--code-wrap, pre);
+    white-space: ${({ wrapContents }) => (wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
     max-height: ${({ maxHeight }) => maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
 

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -47,7 +47,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
 exports.CodeBlockControls = CodeBlockControls;
 const ContainerWraper = styled_components_1.default.div `
   display: flex;
-  justify-content: space-between;
+  justify-content: right;
   min-height: 30px;
   padding: var(--code-block-controls-padding);
   background-color: var(--code-block-controls-background-color);
@@ -61,6 +61,7 @@ const Title = styled_components_1.default.span `
   display: flex;
   align-items: center;
   color: var(--code-block-controls-text-color);
+  width: 100%;
 `;
 const ControlsWrapper = styled_components_1.default.div `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/CodeBlock/CodeBlock.tsx

@@ -22,6 +22,7 @@ export interface CodeBlockProps {
   codeBlockRef?: (instance: HTMLPreElement | null) => void;
   codeBlockMaxHeight?: string;
   hideCodeColors?: boolean;
+  wrapContents?: boolean;
 }
 
 export interface Sample {
@@ -61,6 +62,7 @@ export function CodeBlock({
   codeBlockMaxHeight,
   tabs,
   hideCodeColors,
+  wrapContents = false,
 }: CodeBlockProps): JSX.Element {
   const [sourceCode, setSourceCode] = useState<string>(source ?? '');
 
@@ -109,6 +111,7 @@ export function CodeBlock({
           hideCodeColors={hideCodeColors}
           maxHeight={codeBlockMaxHeight}
           withControls={true}
+          wrapContents={wrapContents}
         />
         {reportDialog.visible && (
           <ReportDialog

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -5,7 +5,12 @@ import { generateCodeBlockTokens } from '@theme/utils';
 export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'CodeBlock/CodeBlockContainer',
   className,
-}))<{ withControls?: boolean; maxHeight?: string; hideCodeColors?: boolean }>`
+}))<{
+  withControls?: boolean;
+  maxHeight?: string;
+  hideCodeColors?: boolean;
+  wrapContents?: boolean;
+}>`
   && {
     overflow-x: auto;
     font-family: var(--code-block-font-family);
@@ -16,7 +21,7 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
-    white-space: var(--code-wrap, pre);
+    white-space: ${({ wrapContents }) => (wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
     max-height: ${({ maxHeight }) =>
       maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -193,7 +193,7 @@ export function CodeBlockControls({
 
 const ContainerWraper = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: right;
   min-height: 30px;
   padding: var(--code-block-controls-padding);
   background-color: var(--code-block-controls-background-color);
@@ -208,6 +208,7 @@ const Title = styled.span`
   display: flex;
   align-items: center;
   color: var(--code-block-controls-text-color);
+  width: 100%;
 `;
 
 const ControlsWrapper = styled.div`