@synerise/ds-code-area 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.0.6...@synerise/ds-code-area@1.0.7) (2025-04-08)
+
+
+### Bug Fixes
+
+* **code-area:** allow component wrapper to have variable height ([7a15e3b](https://github.com/Synerise/synerise-design/commit/7a15e3b8622af0eb625e866fda8a7a3f041a2e40))
+
+
+
+
+
 ## [1.0.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.0.5...@synerise/ds-code-area@1.0.6) (2025-04-04)
 
 **Note:** Version bump only for package @synerise/ds-code-area

package/dist/CodeArea.js

@@ -20,14 +20,14 @@ var CodeArea = function CodeArea(_ref) {
     });
     onFullscreenChange && onFullscreenChange(isFullscreen);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
     toggleFullscreen: toggleFullscreen,
     isFullscreen: false
-  })), wrapperRef.current && isFullscreen && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, wrapperRef.current && isFullscreen && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
     toggleFullscreen: toggleFullscreen,
     isFullscreen: isFullscreen
-  })), getPopupContainer(wrapperRef.current)));
+  })), getPopupContainer(wrapperRef.current))));
 };
 export default CodeArea;

package/dist/CodeArea.styles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const AriaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EditorInnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CodeAreaContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
@@ -10,10 +11,13 @@ export declare const CodeAreaWrapper: import("styled-components").StyledComponen
     readOnly: boolean;
     isFullscreen: boolean;
     requiredSpace: number;
+    customHeight?: string | number | undefined;
     zIndex?: string | number | undefined;
 }, never>;
 export declare const AdditionalDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {
+    isEmpty?: boolean | undefined;
+}, never>;
 export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SyntaxTitle: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
     size?: import("@synerise/ds-typography").TextSize | undefined;

package/dist/CodeArea.styles.js

@@ -4,90 +4,96 @@ var FlexRow = styled.div.withConfig({
   displayName: "CodeAreastyles__FlexRow",
   componentId: "sc-svoej2-0"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
+export var AriaContainer = styled.div.withConfig({
+  displayName: "CodeAreastyles__AriaContainer",
+  componentId: "sc-svoej2-1"
+})(["flex:0 0 0;"]);
 export var EditorInnerWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__EditorInnerWrapper",
-  componentId: "sc-svoej2-1"
-})(["height:295px;"]);
-export var CodeAreaContent = styled.div.withConfig({
-  displayName: "CodeAreastyles__CodeAreaContent",
   componentId: "sc-svoej2-2"
 })([""]);
+export var CodeAreaContent = styled.div.withConfig({
+  displayName: "CodeAreastyles__CodeAreaContent",
+  componentId: "sc-svoej2-3"
+})(["flex:1 1 100%;display:flex;min-height:0;flex-direction:column;"]);
 export var EditorWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__EditorWrapper",
-  componentId: "sc-svoej2-3"
-})(["border:solid 1px ", ";border-radius:3px;padding-top:12px;", ";canvas{opacity:0;}"], function (props) {
+  componentId: "sc-svoej2-4"
+})(["border:solid 1px ", ";border-radius:3px;display:flex;flex-direction:column;flex:1 1 100%;min-height:0;padding-top:12px;", ";canvas{opacity:0;}"], function (props) {
   return props.hasError ? props.theme.palette['red-600'] : props.theme.palette['grey-200'];
 }, function (props) {
   return props.hasError && css(["background:", ";box-shadow:inset 0 0 0 1px ", ";"], props.theme.palette['red-050'], props.theme.palette['red-600']);
 });
 export var FullscreenHeaderTitle = styled(Title).withConfig({
   displayName: "CodeAreastyles__FullscreenHeaderTitle",
-  componentId: "sc-svoej2-4"
+  componentId: "sc-svoej2-5"
 })(["display:flex;gap:16px;align-items:center;margin-bottom:0;"]);
 export var FullscreenHeader = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__FullscreenHeader",
-  componentId: "sc-svoej2-5"
+  componentId: "sc-svoej2-6"
 })(["padding:16px 24px;"]);
 export var CodeAreaWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__CodeAreaWrapper",
-  componentId: "sc-svoej2-6"
+  componentId: "sc-svoej2-7"
 })(["", " ", "{", ";}"], function (props) {
   if (props.isFullscreen) {
     return css(["position:fixed;width:100vw;height:100vh;z-index:", ";left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.zIndex !== undefined ? props.zIndex : props.theme.variables['zindex-modal'], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
   }
-  return css(["margin-bottom:12px;"]);
+  return css(["", " display:flex;flex-direction:column;margin-bottom:12px;"], props.customHeight ? css(["", "{flex:1 1 100%;min-height:0;}height:", ";"], EditorInnerWrapper, typeof props.customHeight === 'number' ? props.customHeight + "px" : props.customHeight) : css(["", "{height:295px;}"], EditorInnerWrapper));
 }, EditorWrapper, function (props) {
   return props.readOnly && css(["background:", ";.monaco-editor .cursors-layer > .cursor{display:none !important;}"], props.theme.palette['grey-050']);
 });
 export var AdditionalDescription = styled.div.withConfig({
   displayName: "CodeAreastyles__AdditionalDescription",
-  componentId: "sc-svoej2-7"
+  componentId: "sc-svoej2-8"
 })(["margin-bottom:8px;"]);
 export var ContentBelow = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__ContentBelow",
-  componentId: "sc-svoej2-8"
-})(["margin-top:8px;align-items:flex-start;"]);
+  componentId: "sc-svoej2-9"
+})(["", " align-items:flex-start;"], function (props) {
+  return !props.isEmpty && "margin-top: 8px;";
+});
 export var ContentAbove = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__ContentAbove",
-  componentId: "sc-svoej2-9"
-})(["margin-bottom:8px;"]);
+  componentId: "sc-svoej2-10"
+})(["margin-bottom:8px;flex:0 0 auto;"]);
 export var SyntaxTitle = styled(Text).withConfig({
   displayName: "CodeAreastyles__SyntaxTitle",
-  componentId: "sc-svoej2-10"
+  componentId: "sc-svoej2-11"
 })([""]);
 export var BottomBar = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__BottomBar",
-  componentId: "sc-svoej2-11"
-})(["border-top:solid 1px ", ";padding:8px;"], function (props) {
+  componentId: "sc-svoej2-12"
+})(["border-top:solid 1px ", ";padding:8px;flex:0 0 auto;"], function (props) {
   return props.theme.palette['grey-200'];
 });
 export var LeftSide = styled.div.withConfig({
   displayName: "CodeAreastyles__LeftSide",
-  componentId: "sc-svoej2-12"
+  componentId: "sc-svoej2-13"
 })([""]);
 export var RightSide = styled.div.withConfig({
   displayName: "CodeAreastyles__RightSide",
-  componentId: "sc-svoej2-13"
+  componentId: "sc-svoej2-14"
 })(["margin-left:auto;display:flex;gap:8px;"]);
 export var SyntaxSelect = styled(LeftSide).withConfig({
   displayName: "CodeAreastyles__SyntaxSelect",
-  componentId: "sc-svoej2-14"
+  componentId: "sc-svoej2-15"
 })(["padding-left:8px;"]);
 export var BottomBarElement = styled.div.withConfig({
   displayName: "CodeAreastyles__BottomBarElement",
-  componentId: "sc-svoej2-15"
+  componentId: "sc-svoej2-16"
 })([""]);
 export var Description = styled.div.withConfig({
   displayName: "CodeAreastyles__Description",
-  componentId: "sc-svoej2-16"
+  componentId: "sc-svoej2-17"
 })([""]);
 export var Counter = styled.div.withConfig({
   displayName: "CodeAreastyles__Counter",
-  componentId: "sc-svoej2-17"
+  componentId: "sc-svoej2-18"
 })(["font-weight:500;"]);
 export var ErrorText = styled.div.withConfig({
   displayName: "CodeAreastyles__ErrorText",
-  componentId: "sc-svoej2-18"
+  componentId: "sc-svoej2-19"
 })(["color:", ";margin-bottom:4px;"], function (props) {
   return props.theme.palette['red-600'];
 });

package/dist/CodeArea.types.d.ts

@@ -13,7 +13,7 @@ export type CodeAreaTexts = {
     closeFullscreen: ReactNode;
     fullscreenTitle: ReactNode;
 };
-export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = Omit<EditorProps, 'language'> & {
+export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = Omit<EditorProps, 'language' | 'height'> & {
     label?: ReactNode;
     description?: ReactNode;
     texts?: Partial<CodeAreaTexts>;
@@ -34,6 +34,10 @@ export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSynt
     tooltipProps?: TooltipExtendedProps & TooltipProps;
     style?: CSSProperties;
     zIndex?: string | number;
+    /**
+     * Height of the editor wrapper
+     */
+    height?: string | number;
     className?: string;
     renderFooterContent?: (props: {
         isFullscreen?: boolean;

package/dist/components/AriaContainer.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import * as S from '../CodeArea.styles';
 export var AriaContainer = function AriaContainer(_ref) {
   var element = _ref.element;
   var ariaContainerRef = useRef(null);
@@ -8,7 +9,7 @@ export var AriaContainer = function AriaContainer(_ref) {
       container.appendChild(element);
     }
   }, [element]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(S.AriaContainer, {
     className: "monaco-aria-custom-container",
     "data-testid": "monaco-aria-container",
     ref: ariaContainerRef

package/dist/components/CodeAreaEditor.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CodeAreaEditorProps } from '../CodeArea.types';
-export declare const CodeAreaEditor: ({ renderAdditionalDescription, description, errorText, style, zIndex, className, counter, fullscreenLabel, tooltip, label, tooltipProps, ...props }: CodeAreaEditorProps) => React.JSX.Element;
+export declare const CodeAreaEditor: ({ renderAdditionalDescription, description, errorText, style, zIndex, className, counter, fullscreenLabel, tooltip, label, tooltipProps, height, ...props }: CodeAreaEditorProps) => React.JSX.Element;
 export default CodeAreaEditor;

package/dist/components/CodeAreaEditor.js

@@ -1,4 +1,4 @@
-var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps"];
+var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps", "height"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -22,6 +22,7 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
     tooltip = _ref.tooltip,
     label = _ref.label,
     tooltipProps = _ref.tooltipProps,
+    height = _ref.height,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var allowFullscreen = props.allowFullscreen,
     texts = props.texts,
@@ -76,7 +77,8 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
     className: className,
     style: style,
     isFullscreen: isFullscreen,
-    zIndex: zIndex
+    zIndex: zIndex,
+    customHeight: height
   }, isFullscreen && /*#__PURE__*/React.createElement(FullscreenHeader, {
     label: fullscreenLabel || labelWithTooltip,
     texts: allTexts,

package/dist/components/ContentAbove.js

@@ -3,9 +3,9 @@ import * as S from '../CodeArea.styles';
 export var ContentAbove = function ContentAbove(_ref) {
   var label = _ref.label,
     counter = _ref.counter;
-  return /*#__PURE__*/React.createElement(S.ContentAbove, null, label && /*#__PURE__*/React.createElement(S.LeftSide, {
+  return label || counter ? /*#__PURE__*/React.createElement(S.ContentAbove, null, label && /*#__PURE__*/React.createElement(S.LeftSide, {
     "data-testid": "code-area-label"
   }, label), counter && /*#__PURE__*/React.createElement(S.RightSide, {
     "data-testid": "code-area-counter-top"
-  }, counter));
+  }, counter)) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };

package/dist/components/ContentBelow.js

@@ -5,9 +5,11 @@ export var ContentBelow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     additionalDescription = _ref.additionalDescription,
     errorText = _ref.errorText,
     counter = _ref.counter;
+  var isEmpty = !(description || additionalDescription || errorText || counter);
   return /*#__PURE__*/React.createElement(S.ContentBelow, {
     "data-testid": "code-area-below",
-    ref: ref
+    ref: ref,
+    isEmpty: isEmpty
   }, (description || additionalDescription || errorText) && /*#__PURE__*/React.createElement(S.LeftSide, null, additionalDescription, errorText && /*#__PURE__*/React.createElement(S.ErrorText, {
     "data-testid": "code-area-error"
   }, errorText), description && /*#__PURE__*/React.createElement(S.Description, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-code-area",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "CodeArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "monaco-editor": "0.34.1"
   },
-  "gitHead": "55537c6449492265a1d50c1e055ef7cc03c7935e"
+  "gitHead": "7586f8946fc312eae130021f8ae4ad4b9455e8d4"
 }