@synerise/ds-code-area 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.3.1...@synerise/ds-code-area@0.3.2) (2024-11-28)
+
+**Note:** Version bump only for package @synerise/ds-code-area
+
+
+
+
+
 ## [0.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.3.0...@synerise/ds-code-area@0.3.1) (2024-11-21)
 
 

package/dist/CodeArea.js

@@ -1,40 +1,31 @@
 var _excluded = ["getPopupContainer", "onFullscreenChange"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { getPopupContainer as defaultGetPopupContainer } from '@synerise/ds-utils';
 import { CodeAreaEditor } from './components';
-
 var CodeArea = function CodeArea(_ref) {
   var _ref$getPopupContaine = _ref.getPopupContainer,
-      getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
-      onFullscreenChange = _ref.onFullscreenChange,
-      codeAreaProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
+    onFullscreenChange = _ref.onFullscreenChange,
+    codeAreaProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var wrapperRef = useRef(null);
-
   var _useState = useState(false),
-      isFullscreen = _useState[0],
-      setIsFullscreen = _useState[1];
-
+    isFullscreen = _useState[0],
+    setIsFullscreen = _useState[1];
   var toggleFullscreen = function toggleFullscreen() {
     setIsFullscreen(!isFullscreen);
     onFullscreenChange && onFullscreenChange(isFullscreen);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
     toggleFullscreen: toggleFullscreen,
     isFullscreen: false
-  })), wrapperRef.current && isFullscreen && createPortal( /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
+  })), wrapperRef.current && isFullscreen && createPortal(/*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
     toggleFullscreen: toggleFullscreen,
     isFullscreen: isFullscreen
   })), getPopupContainer(wrapperRef.current)));
 };
-
 export default CodeArea;

package/dist/CodeArea.styles.js

@@ -35,7 +35,6 @@ export var CodeAreaWrapper = styled.div.withConfig({
   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;"]);
 }, EditorWrapper, function (props) {
   return props.readOnly && css(["background:", ";.monaco-editor .cursors-layer > .cursor{display:none !important;}"], props.theme.palette['grey-050']);

package/dist/components/BottomBar.js

@@ -4,10 +4,10 @@ import Icon, { FullScreenM } from '@synerise/ds-icon';
 import * as S from '../CodeArea.styles';
 export var BottomBar = function BottomBar(_ref) {
   var texts = _ref.texts,
-      syntaxSelect = _ref.syntaxSelect,
-      customFooterContent = _ref.customFooterContent,
-      allowFullscreen = _ref.allowFullscreen,
-      toggleFullscreen = _ref.toggleFullscreen;
+    syntaxSelect = _ref.syntaxSelect,
+    customFooterContent = _ref.customFooterContent,
+    allowFullscreen = _ref.allowFullscreen,
+    toggleFullscreen = _ref.toggleFullscreen;
   var fullscreenButton = allowFullscreen && /*#__PURE__*/React.createElement(Button, {
     type: "ghost",
     mode: "icon-label",

package/dist/components/CodeAreaEditor.js

@@ -1,19 +1,11 @@
 var _excluded = ["label", "description", "counter", "errorText", "syntaxOptions", "currentSyntax", "allowFullscreen", "fullscreenLabel", "renderFooterContent", "renderAdditionalDescription", "tooltip", "tooltipProps", "style", "className", "texts", "onChange", "onSyntaxChange", "value", "readOnly", "isFullscreen", "toggleFullscreen", "zIndex"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import { InlineSelect } from '@synerise/ds-inline-edit';
@@ -25,57 +17,50 @@ import { getDefaultTexts, getCharCount, calculateRequiredSpace } from '../utils'
 import { MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE, DS_MONACO_THEME, DS_MONACO_THEME_NAME } from '../constants';
 export var CodeAreaEditor = function CodeAreaEditor(_ref) {
   var label = _ref.label,
-      description = _ref.description,
-      counter = _ref.counter,
-      errorText = _ref.errorText,
-      syntaxOptions = _ref.syntaxOptions,
-      currentSyntax = _ref.currentSyntax,
-      allowFullscreen = _ref.allowFullscreen,
-      fullscreenLabel = _ref.fullscreenLabel,
-      renderFooterContent = _ref.renderFooterContent,
-      renderAdditionalDescription = _ref.renderAdditionalDescription,
-      tooltip = _ref.tooltip,
-      tooltipProps = _ref.tooltipProps,
-      style = _ref.style,
-      className = _ref.className,
-      texts = _ref.texts,
-      onChange = _ref.onChange,
-      onSyntaxChange = _ref.onSyntaxChange,
-      value = _ref.value,
-      readOnly = _ref.readOnly,
-      isFullscreen = _ref.isFullscreen,
-      toggleFullscreen = _ref.toggleFullscreen,
-      zIndex = _ref.zIndex,
-      monacoProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    description = _ref.description,
+    counter = _ref.counter,
+    errorText = _ref.errorText,
+    syntaxOptions = _ref.syntaxOptions,
+    currentSyntax = _ref.currentSyntax,
+    allowFullscreen = _ref.allowFullscreen,
+    fullscreenLabel = _ref.fullscreenLabel,
+    renderFooterContent = _ref.renderFooterContent,
+    renderAdditionalDescription = _ref.renderAdditionalDescription,
+    tooltip = _ref.tooltip,
+    tooltipProps = _ref.tooltipProps,
+    style = _ref.style,
+    className = _ref.className,
+    texts = _ref.texts,
+    onChange = _ref.onChange,
+    onSyntaxChange = _ref.onSyntaxChange,
+    value = _ref.value,
+    readOnly = _ref.readOnly,
+    isFullscreen = _ref.isFullscreen,
+    toggleFullscreen = _ref.toggleFullscreen,
+    zIndex = _ref.zIndex,
+    monacoProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(true),
-      isValid = _useState[0],
-      setIsValid = _useState[1];
-
+    isValid = _useState[0],
+    setIsValid = _useState[1];
   var editorRef = useRef(null);
   var monacoRef = useRef(null);
   var wrapperRef = useRef(null);
   var contentBelowRef = useRef(null);
-
   var _useResizeObserver = useResizeObserver(wrapperRef),
-      height = _useResizeObserver.height,
-      width = _useResizeObserver.width;
-
+    height = _useResizeObserver.height,
+    width = _useResizeObserver.width;
   var _useResizeObserver2 = useResizeObserver(contentBelowRef),
-      contentBelowHeight = _useResizeObserver2.height;
-
+    contentBelowHeight = _useResizeObserver2.height;
   var counterLimit = counter == null ? void 0 : counter.limit;
   var count = getCharCount(value, counterLimit);
   var allTexts = getDefaultTexts(texts);
   var editorWillMount = monacoProps.editorWillMount,
-      editorDidMount = monacoProps.editorDidMount,
-      options = monacoProps.options;
-
+    editorDidMount = monacoProps.editorDidMount,
+    options = monacoProps.options;
   var combinedOptions = _objectSpread({}, MONACO_DEFAULT_OPTIONS, {}, options, {
     readOnly: readOnly,
     domReadOnly: readOnly
   });
-
   var handleEditorWillMount = function handleEditorWillMount(monacoInstance) {
     monacoRef.current = monacoInstance;
     monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
@@ -86,25 +71,20 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
     });
     editorWillMount && editorWillMount(monacoInstance);
   };
-
   var handleEditorDidMount = function handleEditorDidMount(editor, monacoInstance) {
     editorRef.current = editor;
     editorDidMount && editorDidMount(editor, monacoInstance);
   };
-
   var handleChange = function handleChange(newValue, event) {
     if (counterLimit && newValue.length > counterLimit) {
       editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
       return;
     }
-
     if (editorRef.current) {
       editorRef.current.pushUndoStop();
     }
-
     onChange && onChange(newValue, event);
   };
-
   var labelWithTooltip = label && /*#__PURE__*/React.createElement(Label, {
     label: label,
     tooltip: tooltip,
@@ -113,46 +93,41 @@ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
       title: tooltip
     })
   });
-
   var renderCounter = function renderCounter(placement) {
     return counterLimit && (!placement || (counter == null ? void 0 : counter.placement) === placement) && /*#__PURE__*/React.createElement(S.Counter, null, count, " / ", counter.limit);
   };
-
   useEffect(function () {
     setIsValid(!errorText);
   }, [errorText]);
   useEffect(function () {
     if (editorRef.current) {
       var _editorRef$current, _monacoRef$current;
-
-      var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel(); // eslint-disable-next-line no-unused-expressions
-
+      var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel();
+      // eslint-disable-next-line no-unused-expressions
       currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
     }
   }, [currentSyntax]);
-
   var _useMemo = useMemo(function () {
-    var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
-      var itemLabel = item.label,
+      var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
+        var itemLabel = item.label,
           language = item.language;
+        return {
+          key: language,
+          text: itemLabel || language
+        };
+      });
+      var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
+        return item.language === currentSyntax;
+      });
       return {
-        key: language,
-        text: itemLabel || language
+        syntaxDataSource: source,
+        currentSyntaxItem: currentItem || {
+          language: currentSyntax
+        }
       };
-    });
-    var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
-      return item.language === currentSyntax;
-    });
-    return {
-      syntaxDataSource: source,
-      currentSyntaxItem: currentItem || {
-        language: currentSyntax
-      }
-    };
-  }, [currentSyntax, syntaxOptions]),
-      syntaxDataSource = _useMemo.syntaxDataSource,
-      currentSyntaxItem = _useMemo.currentSyntaxItem;
-
+    }, [currentSyntax, syntaxOptions]),
+    syntaxDataSource = _useMemo.syntaxDataSource,
+    currentSyntaxItem = _useMemo.currentSyntaxItem;
   var syntaxSelect = useMemo(function () {
     return syntaxDataSource && syntaxDataSource.length > 1 && !readOnly ? /*#__PURE__*/React.createElement(InlineSelect, {
       size: "small",

package/dist/components/ContentAbove.js

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

package/dist/components/ContentBelow.js

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 import * as S from '../CodeArea.styles';
 export var ContentBelow = forwardRef(function (_ref, ref) {
   var description = _ref.description,
-      additionalDescription = _ref.additionalDescription,
-      errorText = _ref.errorText,
-      counter = _ref.counter;
+    additionalDescription = _ref.additionalDescription,
+    errorText = _ref.errorText,
+    counter = _ref.counter;
   return /*#__PURE__*/React.createElement(S.ContentBelow, {
     "data-testid": "code-area-below",
     ref: ref

package/dist/components/FullscreenHeader.js

@@ -4,8 +4,8 @@ import Icon, { CloseM, CodeTerminalM } from '@synerise/ds-icon';
 import * as S from '../CodeArea.styles';
 export var FullscreenHeader = function FullscreenHeader(_ref) {
   var label = _ref.label,
-      texts = _ref.texts,
-      onClick = _ref.onClick;
+    texts = _ref.texts,
+    onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(S.FullscreenHeader, null, /*#__PURE__*/React.createElement(S.LeftSide, null, /*#__PURE__*/React.createElement(S.FullscreenHeaderTitle, {
     level: 3
   }, /*#__PURE__*/React.createElement(Icon, {

package/dist/utils/getDefaultTexts.js

@@ -1,13 +1,8 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 export var getDefaultTexts = function getDefaultTexts(texts) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-code-area",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "CodeArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,13 +34,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.19",
+    "@synerise/ds-button": "^0.21.20",
     "@synerise/ds-core": "^0.42.1",
-    "@synerise/ds-icon": "^0.67.0",
-    "@synerise/ds-inline-edit": "^0.9.1",
-    "@synerise/ds-input": "^0.24.14",
-    "@synerise/ds-tooltip": "^0.14.49",
-    "@synerise/ds-typography": "^0.16.6",
+    "@synerise/ds-icon": "^0.67.1",
+    "@synerise/ds-inline-edit": "^0.9.2",
+    "@synerise/ds-input": "^0.24.15",
+    "@synerise/ds-tooltip": "^0.14.50",
+    "@synerise/ds-typography": "^0.16.7",
     "@synerise/ds-utils": "^0.31.2",
     "monaco-editor": "0.47.0",
     "react-monaco-editor": "^0.55.0"
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "5.0.1"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc"
 }