@elliemae/ds-codeeditor 3.0.0-next.1 → 3.0.0-next.5

package/dist/esm/components/DSCodeEditorForm.js

@@ -0,0 +1,137 @@
+import * as React from "react";
+import React2, { Component } from "react";
+import DSButton from "@elliemae/ds-button";
+import { DSCheckbox, DSTextBox, DSInputGroup } from "@elliemae/ds-form";
+import { convertPropToCssClassName, aggregatedClasses } from "@elliemae/ds-classnames";
+import { ChevronSmallLeft, ChevronSmallRight } from "@elliemae/ds-icons";
+const blockName = "code-editor";
+const { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);
+const CheckOptionsGroup = aggregatedClasses("div")(`${blockName}-options-group`);
+class DSCodeEditorForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      find: false,
+      replace: false,
+      isCaseSensitive: false,
+      isWholeWord: false,
+      filteredText: "",
+      replaceText: ""
+    };
+  }
+  searchWord(isReplace, all) {
+    const {
+      reactAceComponent: {
+        current: { editor }
+      }
+    } = this.props;
+    const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
+    const options = {
+      backwards: false,
+      wrap: true,
+      caseSensitive: isCaseSensitive,
+      wholeWord: isWholeWord,
+      regExp: true
+    };
+    editor.find(filteredText, options);
+    const selectedContent = editor.getSelectedText();
+    if (isReplace && replaceText && selectedContent) {
+      if (all) {
+        editor.findAll(filteredText, options);
+        editor.replaceAll(replaceText);
+      } else {
+        const range = editor.selection.getRange();
+        editor.session.replace(range, replaceText);
+      }
+    }
+  }
+  render() {
+    const { fileName } = this.props;
+    const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
+    return /* @__PURE__ */ React2.createElement("div", {
+      className: `${cssClassName}`
+    }, fileName ? /* @__PURE__ */ React2.createElement("div", {
+      className: classNameBlock("file-name")
+    }, "File Name: ", /* @__PURE__ */ React2.createElement("span", null, " ", fileName, " ")) : null, /* @__PURE__ */ React2.createElement("div", {
+      className: classNameBlock("find-replace-btn")
+    }, !find && !replace ? /* @__PURE__ */ React2.createElement(DSButton, {
+      buttonType: "secondary",
+      labelText: "Find",
+      onClick: () => this.setState({ find: true }),
+      size: "m"
+    }) : null, !replace ? /* @__PURE__ */ React2.createElement(DSButton, {
+      buttonType: "secondary",
+      labelText: "Find & Replace",
+      onClick: () => this.setState({ replace: true }),
+      size: "m"
+    }) : null), find || replace ? /* @__PURE__ */ React2.createElement(DSInputGroup, {
+      className: classNameBlock("find")
+    }, /* @__PURE__ */ React2.createElement(DSTextBox, {
+      className: "find-word",
+      fluidWidth: false,
+      id: "find-textbox",
+      onChange: (e) => this.setState({ filteredText: e.currentTarget.value }),
+      placeholder: "Find",
+      rightComponent: /* @__PURE__ */ React2.createElement("div", {
+        className: classNameBlock("next-back-btn")
+      }, /* @__PURE__ */ React2.createElement(DSButton, {
+        icon: /* @__PURE__ */ React2.createElement(ChevronSmallLeft, null),
+        size: "m"
+      }), /* @__PURE__ */ React2.createElement(DSButton, {
+        icon: /* @__PURE__ */ React2.createElement(ChevronSmallRight, null),
+        onClick: () => this.searchWord(),
+        size: "m"
+      })),
+      value: filteredText
+    }), /* @__PURE__ */ React2.createElement(CheckOptionsGroup, null, /* @__PURE__ */ React2.createElement(DSCheckbox, {
+      checked: isCaseSensitive,
+      id: "case-sensitive-check",
+      labelText: "Case Sensitive",
+      name: "case-sensitive-check",
+      onChange: () => this.setState({ isCaseSensitive: !isCaseSensitive })
+    }), /* @__PURE__ */ React2.createElement(DSCheckbox, {
+      checked: isWholeWord,
+      id: "whole-word-check",
+      labelText: "Whole Word",
+      name: "whole-word-check",
+      onChange: () => this.setState({ isWholeWord: !isWholeWord })
+    }), /* @__PURE__ */ React2.createElement(DSCheckbox, {
+      checked: replace,
+      id: "replace-check",
+      labelText: "Replace",
+      name: "replace-check",
+      onChange: () => this.setState({ replace: !replace })
+    })), /* @__PURE__ */ React2.createElement(DSButton, {
+      buttonType: "secondary",
+      labelText: "Done",
+      onClick: () => this.setState({ replace: false, find: false }),
+      size: "m"
+    })) : null, replace ? /* @__PURE__ */ React2.createElement("div", {
+      className: classNameBlock("replace")
+    }, /* @__PURE__ */ React2.createElement(DSTextBox, {
+      className: "find-word",
+      fluidWidth: false,
+      id: "replace-textbox",
+      onChange: (e) => this.setState({ replaceText: e.currentTarget.value }),
+      placeholder: "Replace",
+      value: replaceText
+    }), /* @__PURE__ */ React2.createElement("div", {
+      className: classNameBlock("replace-btns")
+    }, /* @__PURE__ */ React2.createElement(DSButton, {
+      buttonType: "secondary",
+      labelText: "Replace",
+      onClick: () => this.searchWord(true, false),
+      size: "m"
+    }), /* @__PURE__ */ React2.createElement(DSButton, {
+      buttonType: "secondary",
+      labelText: "Replace All",
+      onClick: () => this.searchWord(true, true),
+      size: "m"
+    }))) : null);
+  }
+}
+var DSCodeEditorForm_default = DSCodeEditorForm;
+export {
+  DSCodeEditorForm_default as default
+};
+//# sourceMappingURL=DSCodeEditorForm.js.map

package/dist/esm/components/DSCodeEditorForm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSCodeEditorForm.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport { DSCheckbox, DSTextBox, DSInputGroup } from '@elliemae/ds-form';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronSmallLeft, ChevronSmallRight } from '@elliemae/ds-icons';\n\nconst blockName = 'code-editor';\n\nconst { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);\n\nconst CheckOptionsGroup = aggregatedClasses('div')(`${blockName}-options-group`);\n\nclass DSCodeEditorForm extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      find: false,\n      replace: false,\n      isCaseSensitive: false,\n      isWholeWord: false,\n      filteredText: '',\n      replaceText: '',\n    };\n  }\n\n  searchWord(isReplace, all) {\n    const {\n      reactAceComponent: {\n        current: { editor },\n      },\n    } = this.props;\n    const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n    const options = {\n      backwards: false,\n      wrap: true,\n      caseSensitive: isCaseSensitive,\n      wholeWord: isWholeWord,\n      regExp: true,\n    };\n    editor.find(filteredText, options);\n    const selectedContent = editor.getSelectedText();\n    if (isReplace && replaceText && selectedContent) {\n      if (all) {\n        editor.findAll(filteredText, options);\n        editor.replaceAll(replaceText);\n      } else {\n        const range = editor.selection.getRange();\n        editor.session.replace(range, replaceText);\n      }\n    }\n  }\n\n  render() {\n    const { fileName } = this.props;\n\n    const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n    return (\n      <div className={`${cssClassName}`}>\n        {fileName ? (\n          <div className={classNameBlock('file-name')}>\n            File Name: <span> {fileName} </span>\n          </div>\n        ) : null}\n        <div className={classNameBlock('find-replace-btn')}>\n          {!find && !replace ? (\n            <DSButton buttonType=\"secondary\" labelText=\"Find\" onClick={() => this.setState({ find: true })} size=\"m\" />\n          ) : null}\n          {!replace ? (\n            <DSButton\n              buttonType=\"secondary\"\n              labelText=\"Find & Replace\"\n              onClick={() => this.setState({ replace: true })}\n              size=\"m\"\n            />\n          ) : null}\n        </div>\n        {find || replace ? (\n          <DSInputGroup className={classNameBlock('find')}>\n            <DSTextBox\n              className=\"find-word\"\n              fluidWidth={false}\n              id=\"find-textbox\"\n              onChange={(e) => this.setState({ filteredText: e.currentTarget.value })}\n              placeholder=\"Find\"\n              rightComponent={\n                <div className={classNameBlock('next-back-btn')}>\n                  <DSButton icon={<ChevronSmallLeft />} size=\"m\" />\n                  <DSButton icon={<ChevronSmallRight />} onClick={() => this.searchWord()} size=\"m\" />\n                </div>\n              }\n              value={filteredText}\n            />\n            <CheckOptionsGroup>\n              <DSCheckbox\n                checked={isCaseSensitive}\n                id=\"case-sensitive-check\"\n                labelText=\"Case Sensitive\"\n                name=\"case-sensitive-check\"\n                onChange={() => this.setState({ isCaseSensitive: !isCaseSensitive })}\n              />\n              <DSCheckbox\n                checked={isWholeWord}\n                id=\"whole-word-check\"\n                labelText=\"Whole Word\"\n                name=\"whole-word-check\"\n                onChange={() => this.setState({ isWholeWord: !isWholeWord })}\n              />\n              <DSCheckbox\n                checked={replace}\n                id=\"replace-check\"\n                labelText=\"Replace\"\n                name=\"replace-check\"\n                onChange={() => this.setState({ replace: !replace })}\n              />\n            </CheckOptionsGroup>\n            <DSButton\n              buttonType=\"secondary\"\n              labelText=\"Done\"\n              onClick={() => this.setState({ replace: false, find: false })}\n              size=\"m\"\n            />\n          </DSInputGroup>\n        ) : null}\n        {replace ? (\n          <div className={classNameBlock('replace')}>\n            <DSTextBox\n              className=\"find-word\"\n              fluidWidth={false}\n              id=\"replace-textbox\"\n              onChange={(e) => this.setState({ replaceText: e.currentTarget.value })}\n              placeholder=\"Replace\"\n              value={replaceText}\n            />\n            <div className={classNameBlock('replace-btns')}>\n              <DSButton\n                buttonType=\"secondary\"\n                labelText=\"Replace\"\n                onClick={() => this.searchWord(true, false)}\n                size=\"m\"\n              />\n              <DSButton\n                buttonType=\"secondary\"\n                labelText=\"Replace All\"\n                onClick={() => this.searchWord(true, true)}\n                size=\"m\"\n              />\n            </div>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n\nexport default DSCodeEditorForm;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/DSCodeEditorImpl.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import React2, { Component } from "react";
+import AceEditor from "react-ace";
+import DSModal from "@elliemae/ds-modal";
+import DSCodeEditorForm from "./DSCodeEditorForm";
+import "brace/mode/javascript.js";
+import "brace/theme/tomorrow.js";
+class DSCodeEditorImpl extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      errors: []
+    };
+    this.reactAceComponent = React2.createRef();
+  }
+  render() {
+    const {
+      onSave,
+      onClose,
+      onReject,
+      isOpen,
+      fileName,
+      confirmLabel,
+      maxLines,
+      minLines,
+      modalTitle,
+      modalType,
+      rejectLabel,
+      size,
+      style,
+      containerProps
+    } = this.props;
+    const { value, errors } = this.state;
+    return /* @__PURE__ */ React2.createElement(DSModal, {
+      centered: false,
+      confirmLabel,
+      containerProps,
+      isOpen,
+      modalTitle,
+      modalType,
+      onClose: () => onClose(value, fileName, errors),
+      onConfirm: () => onSave(value, fileName, errors),
+      onReject: () => onReject(value, fileName, errors),
+      rejectLabel,
+      size,
+      style
+    }, /* @__PURE__ */ React2.createElement(DSCodeEditorForm, {
+      fileName,
+      reactAceComponent: this.reactAceComponent
+    }), /* @__PURE__ */ React2.createElement(AceEditor, {
+      ref: this.reactAceComponent,
+      editorProps: { $blockScrolling: true },
+      maxLines,
+      minLines,
+      mode: "javascript",
+      name: "ace-code-edior",
+      onChange: (val) => this.setState({ value: val }),
+      onValidate: (annotations) => this.setState({ errors: annotations }),
+      theme: "tomorrow",
+      value
+    }));
+  }
+}
+var DSCodeEditorImpl_default = DSCodeEditorImpl;
+export {
+  DSCodeEditorImpl_default as default
+};
+//# sourceMappingURL=DSCodeEditorImpl.js.map

package/dist/esm/components/DSCodeEditorImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSCodeEditorImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component } from 'react';\nimport AceEditor from 'react-ace';\nimport DSModal from '@elliemae/ds-modal';\nimport DSCodeEditorForm from './DSCodeEditorForm';\nimport 'brace/mode/javascript.js';\nimport 'brace/theme/tomorrow.js';\n\nclass DSCodeEditorImpl extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: props.value,\n      errors: [],\n    };\n    this.reactAceComponent = React.createRef();\n  }\n\n  render() {\n    const {\n      onSave,\n      onClose,\n      onReject,\n      isOpen,\n      fileName,\n      confirmLabel,\n      maxLines,\n      minLines,\n      modalTitle,\n      modalType,\n      rejectLabel,\n      size,\n      style,\n      containerProps,\n    } = this.props;\n\n    const { value, errors } = this.state;\n    return (\n      <DSModal\n        centered={false}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        isOpen={isOpen}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={() => onClose(value, fileName, errors)}\n        onConfirm={() => onSave(value, fileName, errors)}\n        onReject={() => onReject(value, fileName, errors)}\n        rejectLabel={rejectLabel}\n        size={size}\n        style={style}\n      >\n        <DSCodeEditorForm\n          fileName={fileName}\n          reactAceComponent={this.reactAceComponent}\n        />\n        <AceEditor\n          ref={this.reactAceComponent}\n          editorProps={{ $blockScrolling: true }}\n          maxLines={maxLines}\n          minLines={minLines}\n          mode=\"javascript\"\n          name=\"ace-code-edior\"\n          onChange={val => this.setState({ value: val })}\n          onValidate={annotations => this.setState({ errors: annotations })}\n          theme=\"tomorrow\"\n          value={value}\n        />\n      </DSModal>\n    );\n  }\n}\n\nexport default DSCodeEditorImpl;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,+BAA+B,UAAU;AAAA,EACvC,YAAY,OAAO;AACjB,UAAM;AACN,SAAK,QAAQ;AAAA,MACX,OAAO,MAAM;AAAA,MACb,QAAQ;AAAA;AAEV,SAAK,oBAAoB,OAAM;AAAA;AAAA,EAGjC,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,EAAE,OAAO,WAAW,KAAK;AAC/B,WACE,qCAAC,SAAD;AAAA,MACE,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM,QAAQ,OAAO,UAAU;AAAA,MACxC,WAAW,MAAM,OAAO,OAAO,UAAU;AAAA,MACzC,UAAU,MAAM,SAAS,OAAO,UAAU;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,OAEA,qCAAC,kBAAD;AAAA,MACE;AAAA,MACA,mBAAmB,KAAK;AAAA,QAE1B,qCAAC,WAAD;AAAA,MACE,KAAK,KAAK;AAAA,MACV,aAAa,EAAE,iBAAiB;AAAA,MAChC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU,SAAO,KAAK,SAAS,EAAE,OAAO;AAAA,MACxC,YAAY,iBAAe,KAAK,SAAS,EAAE,QAAQ;AAAA,MACnD,OAAM;AAAA,MACN;AAAA;AAAA;AAAA;AAOV,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { default as default2, CodeEditorWithSchema } from "./DSCodeEditor";
+export {
+  CodeEditorWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, CodeEditorWithSchema } from './DSCodeEditor';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/package.json

@@ -1,27 +1,30 @@
 {
   "name": "@elliemae/ds-codeeditor",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Code Editor",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./DSCodeEditor": {
-      "import": "./esm/DSCodeEditor.js",
-      "require": "./cjs/DSCodeEditor.js"
+      "import": "./dist/esm/DSCodeEditor.js",
+      "require": "./dist/cjs/DSCodeEditor.js"
     },
     "./components/DSCodeEditorImpl": {
-      "import": "./esm/components/DSCodeEditorImpl.js",
-      "require": "./cjs/components/DSCodeEditorImpl.js"
+      "import": "./dist/esm/components/DSCodeEditorImpl.js",
+      "require": "./dist/cjs/components/DSCodeEditorImpl.js"
     },
     "./components/DSCodeEditorForm": {
-      "import": "./esm/components/DSCodeEditorForm.js",
-      "require": "./cjs/components/DSCodeEditorForm.js"
+      "import": "./dist/esm/components/DSCodeEditorForm.js",
+      "require": "./dist/cjs/components/DSCodeEditorForm.js"
     }
   },
   "sideEffects": [
@@ -33,22 +36,22 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.0.0-next.1",
-    "@elliemae/ds-classnames": "3.0.0-next.1",
-    "@elliemae/ds-form": "3.0.0-next.1",
-    "@elliemae/ds-icons": "3.0.0-next.1",
-    "@elliemae/ds-modal": "3.0.0-next.1",
+    "@elliemae/ds-button": "3.0.0-next.5",
+    "@elliemae/ds-classnames": "3.0.0-next.5",
+    "@elliemae/ds-form": "3.0.0-next.5",
+    "@elliemae/ds-icons": "3.0.0-next.5",
+    "@elliemae/ds-modal": "3.0.0-next.5",
     "brace": "~0.11.1",
     "react-ace": "~6.6.0",
     "react-desc": "~4.1.3"
@@ -60,7 +63,13 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/DSCodeEditor.js

@@ -1,127 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-var reactDesc = require('react-desc');
-var DSModal = require('@elliemae/ds-modal');
-var AceEditor = require('react-ace');
-var DSCodeEditorForm = require('./components/DSCodeEditorForm.js');
-require('brace/mode/javascript.js');
-require('brace/theme/tomorrow.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
-var AceEditor__default = /*#__PURE__*/_interopDefaultLegacy(AceEditor);
-
-const DSCodeEditor = _ref => {
-  let {
-    containerProps = {},
-    value: defaultValue = '',
-    onSave = () => null,
-    onClose = () => null,
-    onReject = () => null,
-    onChange = () => null,
-    isOpen = false,
-    fileName = '',
-    confirmLabel = 'Save',
-    maxLines = 20,
-    minLines = 20,
-    modalTitle = 'Javascript Editor',
-    modalType = 'confirm',
-    rejectLabel = 'Close',
-    size = 'large',
-    style = {},
-    useModal = true,
-    showHeader = true,
-    showSyntaxChecks = true
-  } = _ref;
-  const [{
-    value,
-    errors
-  }, setState] = React.useState({
-    value: defaultValue,
-    errors: []
-  });
-  const reactAceComponent = React.useRef();
-
-  const editor = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [showHeader && /*#__PURE__*/_jsx__default["default"](DSCodeEditorForm, {
-      fileName: fileName,
-      reactAceComponent: reactAceComponent
-    }), /*#__PURE__*/jsxRuntime.jsx(AceEditor__default["default"], {
-      ref: reactAceComponent,
-      editorProps: {
-        $blockScrolling: true
-      },
-      maxLines: maxLines,
-      minLines: minLines,
-      mode: "javascript",
-      name: "ace-code-edior",
-      onChange: val => {
-        setState({
-          errors,
-          value: val
-        });
-        onChange(val, errors);
-      },
-      onValidate: annotations => setState({
-        value,
-        errors: annotations
-      }),
-      theme: "tomorrow",
-      setOptions: {
-        useWorker: showSyntaxChecks
-      },
-      value: value
-    })]
-  });
-
-  if (!useModal) return editor;
-  return /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
-    centered: false,
-    confirmLabel: confirmLabel,
-    containerProps: containerProps,
-    isOpen: isOpen,
-    modalTitle: modalTitle,
-    modalType: modalType,
-    onClose: () => onClose(value, fileName, errors),
-    onConfirm: () => onSave(value, fileName, errors),
-    onReject: () => onReject(value, fileName, errors),
-    rejectLabel: rejectLabel,
-    size: size,
-    style: style
-  }, void 0, editor);
-};
-
-const codeEditorProps = {
-  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
-  value: reactDesc.PropTypes.string.description('editors content').isRequired,
-  onSave: reactDesc.PropTypes.func.description('function called when the user press save'),
-  onClose: reactDesc.PropTypes.func.description('function called when the user closes the modal'),
-  onReject: reactDesc.PropTypes.func.description('function called when is rejected'),
-  onChange: reactDesc.PropTypes.func.description('function executed when code editor value changes').isRequired,
-  isOpen: reactDesc.PropTypes.bool.description('Whether the modal is opened or not').defaultValue(false),
-  fileName: reactDesc.PropTypes.string.description('File name to open in the editor'),
-  maxLines: reactDesc.PropTypes.number.description('Max lines in the editor content').defaultValue(20),
-  minLines: reactDesc.PropTypes.number.description('Min lines in the editor content').defaultValue(20),
-  modalTitle: reactDesc.PropTypes.string.description('Modal title').defaultValue('Javascript Editor'),
-  confirmLabel: reactDesc.PropTypes.string.description('Customize modal confirm label').defaultValue('Save'),
-  rejectLabel: reactDesc.PropTypes.string.description('Customize modal rejection label').defaultValue('Close'),
-  modalType: reactDesc.PropTypes.oneOf(DSModal.modalTypes).description('Modal type').defaultValue('confirm'),
-  size: reactDesc.PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']).description('modal size').defaultValue('large'),
-  style: reactDesc.PropTypes.object.description('css inline style'),
-  useModal: reactDesc.PropTypes.bool.description('whether to use code editor inside modal or not').defaultValue(true),
-  showHeader: reactDesc.PropTypes.bool.description('show editors header').defaultValue(true),
-  showSyntaxChecks: reactDesc.PropTypes.bool.description('show syntax warnings and checks').defaultValue(true)
-};
-const CodeEditorWithSchema = reactDesc.describe(DSCodeEditor);
-CodeEditorWithSchema.propTypes = codeEditorProps;
-
-exports.CodeEditorWithSchema = CodeEditorWithSchema;
-exports["default"] = DSCodeEditor;