@synerise/ds-code-area 1.2.31 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.2.32...@synerise/ds-code-area@1.3.0) (2026-02-23)
+
+### Features
+
+- **code-area:** new prop noBorder ([9fea1bd](https://github.com/Synerise/synerise-design/commit/9fea1bd84b20599662411f89c5250c0ba37b51a4))
+
+## [1.2.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.2.31...@synerise/ds-code-area@1.2.32) (2026-02-19)
+
+**Note:** Version bump only for package @synerise/ds-code-area
+
 ## [1.2.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.2.30...@synerise/ds-code-area@1.2.31) (2026-02-12)
 
 **Note:** Version bump only for package @synerise/ds-code-area

package/README.md

@@ -65,6 +65,7 @@ const syntaxOptions = [
 | texts                       | customise displayed texts                                      | `CodeAreaTexts`                                         | -       |
 | getPopupContainer           | customise where fullscreen layer is rendered into              | getPopupContainer (@synerise/ds-utils)                  | -       |
 | placeholder                 | placeholder content                                            | `ReactNode`                                             | -       |
+| noBorder                    | remove border from wrapper                                     | `boolean`                                               | -       |
 
 ### CodeAreaTexts
 

package/dist/CodeArea.styles.d.ts

@@ -6,6 +6,7 @@ export declare const EditorInnerWrapper: import("styled-components").StyledCompo
 export declare const CodeAreaContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
     hasError: boolean;
+    noBorder?: boolean;
 }, never>;
 export declare const FullscreenHeaderTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;
 export declare const FullscreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -28,7 +29,10 @@ export declare const SyntaxTitle: import("styled-components").StyledComponent<({
     className?: string;
     style?: import("react").CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const BottomBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BottomBar: import("styled-components").StyledComponent<"div", any, {
+    noBorder?: boolean;
+    hasError?: boolean;
+}, never>;
 export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SyntaxSelect: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/CodeArea.styles.js

@@ -25,10 +25,10 @@ export var CodeAreaContent = styled.div.withConfig({
 export var EditorWrapper = styled.div.withConfig({
   displayName: "CodeAreastyles__EditorWrapper",
   componentId: "sc-svoej2-5"
-})(["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'];
+})(["border:", ";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.noBorder ? 'none' : "solid 1px " + (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']);
+  return props.hasError && css(["background:", ";box-shadow:", ";"], props.theme.palette['red-050'], props.noBorder ? 'none' : "inset 0 0 0 1px " + props.theme.palette['red-600']);
 });
 export var FullscreenHeaderTitle = styled(Title).withConfig({
   displayName: "CodeAreastyles__FullscreenHeaderTitle",
@@ -70,8 +70,17 @@ export var SyntaxTitle = styled(Text).withConfig({
 export var BottomBar = styled(FlexRow).withConfig({
   displayName: "CodeAreastyles__BottomBar",
   componentId: "sc-svoej2-13"
-})(["border-top:solid 1px ", ";padding:8px;flex:0 0 auto;"], function (props) {
-  return props.theme.palette['grey-200'];
+})(["padding:8px;flex:0 0 auto;background:", ";border-top:solid 1px ", ";", ""], function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette['white'];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette['grey-200'];
+}, function (_ref3) {
+  var hasError = _ref3.hasError,
+    noBorder = _ref3.noBorder,
+    theme = _ref3.theme;
+  return hasError && css(["background:", ";", ""], theme.palette['red-050'], noBorder ? css(["border:none;border-top:solid 1px ", ";"], theme.palette['grey-200']) : css(["border:solid 1px ", ";border-top-color:", ";"], theme.palette['red-600'], theme.palette['grey-200']));
 });
 export var LeftSide = styled.div.withConfig({
   displayName: "CodeAreastyles__LeftSide",

package/dist/CodeArea.types.d.ts

@@ -34,6 +34,7 @@ export type CodeAreaCommonProps<SyntaxName extends CodeAreaSyntax = CodeAreaSynt
     tooltipProps?: TooltipProps;
     style?: CSSProperties;
     zIndex?: string | number;
+    noBorder?: boolean;
     /**
      * Height of the editor wrapper
      */

package/dist/components/BottomBar.d.ts

@@ -6,6 +6,8 @@ type BottomBarProps = {
     syntaxSelect?: ReactNode;
     customFooterContent?: ReactNode;
     toggleFullscreen?: () => void;
+    noBorder?: boolean;
+    hasError?: boolean;
 };
-export declare const BottomBar: ({ texts, syntaxSelect, customFooterContent, allowFullscreen, toggleFullscreen, }: BottomBarProps) => React.JSX.Element;
+export declare const BottomBar: ({ texts, syntaxSelect, customFooterContent, allowFullscreen, toggleFullscreen, noBorder, hasError, }: BottomBarProps) => React.JSX.Element;
 export {};

package/dist/components/BottomBar.js

@@ -7,7 +7,9 @@ export var BottomBar = function BottomBar(_ref) {
     syntaxSelect = _ref.syntaxSelect,
     customFooterContent = _ref.customFooterContent,
     allowFullscreen = _ref.allowFullscreen,
-    toggleFullscreen = _ref.toggleFullscreen;
+    toggleFullscreen = _ref.toggleFullscreen,
+    noBorder = _ref.noBorder,
+    hasError = _ref.hasError;
   var fullscreenButton = allowFullscreen && /*#__PURE__*/React.createElement(Button, {
     type: "ghost",
     mode: "icon-label",
@@ -17,6 +19,8 @@ export var BottomBar = function BottomBar(_ref) {
     onClick: toggleFullscreen
   }, texts.fullscreen);
   return /*#__PURE__*/React.createElement(S.BottomBar, {
+    noBorder: noBorder,
+    hasError: hasError,
     "data-testid": "code-area-bottombar"
   }, syntaxSelect && /*#__PURE__*/React.createElement(S.SyntaxSelect, {
     "data-testid": "code-area-syntaxoptions"

package/dist/components/CodeAreaEditor.d.ts

@@ -21,6 +21,7 @@ export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import
     tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
     style?: React.CSSProperties;
     zIndex?: string | number;
+    noBorder?: boolean;
     height?: string | number;
     className?: string;
     renderFooterContent?: (props: {

package/dist/components/CodeAreaEditor.js

@@ -1,4 +1,4 @@
-var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps", "height"];
+var _excluded = ["renderAdditionalDescription", "description", "errorText", "style", "zIndex", "className", "counter", "fullscreenLabel", "tooltip", "label", "tooltipProps", "height", "noBorder"];
 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, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -25,6 +25,7 @@ export var CodeAreaEditor = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     label = _ref.label,
     tooltipProps = _ref.tooltipProps,
     height = _ref.height,
+    noBorder = _ref.noBorder,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var allowFullscreen = props.allowFullscreen,
     texts = props.texts,
@@ -97,7 +98,8 @@ export var CodeAreaEditor = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     counterLimit: counterLimit,
     isBottomBarShowing: isBottomBarShowing,
     isSyntaxSelectVisible: isSyntaxSelectVisible,
-    isValid: isValid
+    isValid: isValid,
+    noBorder: noBorder
   })), /*#__PURE__*/React.createElement(ContentBelow, {
     ref: contentBelowRef,
     errorText: errorText,

package/dist/components/CodeAreaEditorRaw.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type CodeAreaEditorRawProps } from '../CodeArea.types';
-export declare const CodeAreaEditorRaw: ({ onMount, beforeMount, options, errorText, texts, allowFullscreen, toggleFullscreen, renderFooterContent, isBottomBarShowing, isFullscreen, count, counterLimit, onChange, isValid, onDidChangeMarkers, isSyntaxSelectVisible, syntaxOptions, currentSyntax, readOnly, onSyntaxChange, loaderConfig, placeholder, value, defaultValue, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
+export declare const CodeAreaEditorRaw: ({ onMount, beforeMount, options, errorText, texts, allowFullscreen, toggleFullscreen, renderFooterContent, isBottomBarShowing, isFullscreen, count, counterLimit, onChange, isValid, onDidChangeMarkers, isSyntaxSelectVisible, syntaxOptions, currentSyntax, readOnly, onSyntaxChange, loaderConfig, placeholder, value, defaultValue, noBorder, ...props }: CodeAreaEditorRawProps) => React.JSX.Element;
 export default CodeAreaEditorRaw;

package/dist/components/CodeAreaEditorRaw.js

@@ -1,4 +1,4 @@
-var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isBottomBarShowing", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig", "placeholder", "value", "defaultValue"];
+var _excluded = ["onMount", "beforeMount", "options", "errorText", "texts", "allowFullscreen", "toggleFullscreen", "renderFooterContent", "isBottomBarShowing", "isFullscreen", "count", "counterLimit", "onChange", "isValid", "onDidChangeMarkers", "isSyntaxSelectVisible", "syntaxOptions", "currentSyntax", "readOnly", "onSyntaxChange", "loaderConfig", "placeholder", "value", "defaultValue", "noBorder"];
 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';
@@ -36,6 +36,7 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
+    noBorder = _ref.noBorder,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var monacoRef = useRef(null);
   var loaderConfigSet = useRef(false);
@@ -147,6 +148,7 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     return isTouched && !value || !value && !defaultValue;
   }, [defaultValue, isTouched, value]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
+    noBorder: noBorder,
     hasError: Boolean(errorText)
   }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
     ref: wrapperRef
@@ -169,7 +171,9 @@ export var CodeAreaEditorRaw = function CodeAreaEditorRaw(_ref) {
     syntaxSelect: syntaxSelect,
     allowFullscreen: allowFullscreen && !isFullscreen,
     toggleFullscreen: toggleFullscreen,
-    customFooterContent: customFooterContent
+    customFooterContent: customFooterContent,
+    noBorder: noBorder,
+    hasError: Boolean(errorText)
   })), /*#__PURE__*/React.createElement(AriaContainer, {
     element: monacoAriaContainerElement
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-code-area",
-  "version": "1.2.31",
+  "version": "1.3.0",
   "description": "CodeArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,14 +36,14 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@monaco-editor/react": "4.4.6",
-    "@synerise/ds-button": "^1.5.13",
+    "@synerise/ds-button": "^1.5.15",
     "@synerise/ds-core": "^1.10.2",
-    "@synerise/ds-form-field": "^1.3.5",
-    "@synerise/ds-icon": "^1.14.0",
-    "@synerise/ds-inline-edit": "^1.1.19",
+    "@synerise/ds-form-field": "^1.3.7",
+    "@synerise/ds-icon": "^1.14.1",
+    "@synerise/ds-inline-edit": "^1.1.21",
     "@synerise/ds-loader": "^1.0.12",
-    "@synerise/ds-tooltip": "^1.4.5",
-    "@synerise/ds-typography": "^1.1.8",
+    "@synerise/ds-tooltip": "^1.4.7",
+    "@synerise/ds-typography": "^1.1.10",
     "@synerise/ds-utils": "^1.6.0"
   },
   "peerDependencies": {
@@ -56,5 +56,5 @@
   "devDependencies": {
     "monaco-editor": "0.34.1"
   },
-  "gitHead": "eb495cfbc2ede0bff95548c6c4e80c38dd965391"
+  "gitHead": "2997f77d657c1aed2fc39901d3e0b8f88b05cc53"
 }