@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.1

package/es/components/shared/file-viewer/FileViewerNonViewable.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import { Button, Vspace, Text, Icon } from '@elice/blocks';
 import { eilDownload } from '@elice/icons';
 import { IntlComponentBuilder } from '@elice/intl';
@@ -10,36 +10,33 @@ import nonViewableMessageKo from './locales/nonViewable.ko.json.js';
 import nonViewableMessageTh from './locales/nonViewable.th.json.js';
 import nonViewableMessageJa from './locales/nonViewable.ja.json.js';
 
-var StyledContainer = styled.div.withConfig({
+const StyledContainer = styled.div.withConfig({
   componentId: "sc-l8149y-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
-var StyledContainerContent = styled.div.withConfig({
+const StyledContainerContent = styled.div.withConfig({
   componentId: "sc-l8149y-1"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center;"]);
-var StyledButton = styled(Button).withConfig({
+const StyledButton = styled(Button).withConfig({
   componentId: "sc-l8149y-2"
 })(["display:block;margin:0 auto;"]);
-var StyledButtonsWrap = styled.div.withConfig({
+const StyledButtonsWrap = styled.div.withConfig({
   componentId: "sc-l8149y-3"
 })(["text-align:center;> *{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}"]);
-var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
-  var filename = _ref.filename,
-    fileurl = _ref.fileurl,
-    onTextViewerClick = _ref.onTextViewerClick,
-    __intl = _ref.__intl;
+const FileViewerNonViewable = ({
+  filename,
+  fileurl,
+  onTextViewerClick,
+  __intl
+}) => {
   /**
    * Handle download button click.
    */
-  var handleDownloadClick = function handleDownloadClick() {
+  const handleDownloadClick = () => {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(function (res) {
-      return res.blob();
-    }).then(function (blob) {
-      return FileSaver.saveAs(blob, filename);
-    }).catch(function () {
-      var win = window.open(fileurl, '_blank');
+    fetch(fileurl).then(res => res.blob()).then(blob => FileSaver.saveAs(blob, filename)).catch(() => {
+      const win = window.open(fileurl, '_blank');
       if (win) {
         win.focus();
       }
@@ -48,69 +45,59 @@ var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
   /**
    * Download button.
    */
-  var renderFileViewerDownloadButton = function renderFileViewerDownloadButton() {
+  const renderFileViewerDownloadButton = () => {
     if (!fileurl) {
       return null;
     }
-    return jsx(StyledButton, {
+    return React.createElement(StyledButton, {
       size: "small",
-      icon: jsx(Icon, {
+      icon: React.createElement(Icon, {
         icon: eilDownload
       }),
-      onClick: handleDownloadClick,
-      children: __intl.formatMessage({
-        id: 'fileViewer.nonViewable.downloadButton'
-      })
-    });
+      onClick: handleDownloadClick
+    }, __intl.formatMessage({
+      id: 'fileViewer.nonViewable.downloadButton'
+    }));
   };
   /**
    * Link for enable text editor.
    */
-  var renderFileViewerTextEditorLink = function renderFileViewerTextEditorLink() {
+  const renderFileViewerTextEditorLink = () => {
     if (!fileurl || typeof onTextViewerClick !== 'function') {
       return null;
     }
-    return jsx(Text, {
+    return React.createElement(Text, {
       role: "gray5",
       size: "tiny",
       hoverable: true,
-      onClick: onTextViewerClick,
-      children: __intl.formatMessage({
-        id: 'fileViewer.nonViewable.openViaTextEditor'
-      })
-    });
+      onClick: onTextViewerClick
+    }, __intl.formatMessage({
+      id: 'fileViewer.nonViewable.openViaTextEditor'
+    }));
   };
   //
   //
   //
-  return jsx(StyledContainer, {
-    children: jsxs(StyledContainerContent, {
-      children: [jsx(FileIcon, {
-        filename: filename,
-        width: "3rem",
-        height: "3rem"
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Text, {
-        role: "white",
-        children: filename
-      }), jsx(Vspace, {
-        height: 0.75
-      }), jsx(Text, {
-        role: "gray3",
-        size: "tiny",
-        lineHeight: 1.5,
-        wordBreak: "keep-all",
-        children: __intl.formatMessage({
-          id: 'fileViewer.nonViewable.content'
-        })
-      }), jsx(Vspace, {
-        height: 2
-      }), jsxs(StyledButtonsWrap, {
-        children: [renderFileViewerDownloadButton(), renderFileViewerTextEditorLink()]
-      })]
-    })
-  });
+  return React.createElement(StyledContainer, null, React.createElement(StyledContainerContent, null, React.createElement(FileIcon, {
+    filename: filename,
+    width: "3rem",
+    height: "3rem"
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Text, {
+    role: "white"
+  }, filename), React.createElement(Vspace, {
+    height: 0.75
+  }), React.createElement(Text, {
+    role: "gray3",
+    size: "tiny",
+    lineHeight: 1.5,
+    wordBreak: "keep-all"
+  }, __intl.formatMessage({
+    id: 'fileViewer.nonViewable.content'
+  })), React.createElement(Vspace, {
+    height: 2
+  }), React.createElement(StyledButtonsWrap, null, renderFileViewerDownloadButton(), renderFileViewerTextEditorLink())));
 };
 //
 //

package/es/components/shared/file-viewer/FileViewerText.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { exerciseEditorPreferenceState } from '../../material-exercise/context/recoil.js';
@@ -16,32 +14,26 @@ import MonacoEditorLazy from '../monaco-editor/MonacoEditorLazy.js';
 import '../monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
 
-var FileViewerText = function FileViewerText(_ref) {
-  var filename = _ref.filename,
-    fileurl = _ref.fileurl,
-    locale = _ref.locale;
-  var preference = useRecoilValue(exerciseEditorPreferenceState);
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    content = _React$useState2[0],
-    setContent = _React$useState2[1];
-  React.useEffect(function () {
+const FileViewerText = ({
+  filename,
+  fileurl,
+  locale
+}) => {
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const [content, setContent] = React.useState(null);
+  React.useEffect(() => {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(function (res) {
-      return res.text();
-    }).then(setContent).catch(function (err) {
-      return console.error(err);
-    });
+    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
   }, [fileurl]);
   //
   //
   //
   if (content === null) {
-    return jsx(ExerciseFileShimmer, {});
+    return React.createElement(ExerciseFileShimmer, null);
   }
-  return jsx(MonacoEditorLazy, {
+  return React.createElement(MonacoEditorLazy, {
     filename: filename,
     defaultValue: content,
     preference: Object.assign(Object.assign({}, preference), {

package/es/components/shared/material-modal/MaterialModal.js

@@ -1,41 +1,32 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import { useKeyPressEvent } from 'react-use';
 import { BorderlessDialog } from '@elice/blocks';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { StyledModalWrapper, StyledModalHeader, StyledModalBody, StyledModalFooter, StyledCloseButton } from './MaterialModal.styled.js';
 
-var MaterialModal = function MaterialModal(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    footer = _ref.footer,
-    onHide = _ref.onHide;
-  useKeyPressEvent('Escape', function () {
+const MaterialModal = ({
+  children,
+  title,
+  footer,
+  onHide
+}) => {
+  useKeyPressEvent('Escape', () => {
     if (typeof onHide === 'function') {
       onHide();
     }
   });
-  var renderCloseButton = function renderCloseButton() {
+  const renderCloseButton = () => {
     if (!onHide) {
       return null;
     }
-    return jsx(StyledCloseButton, {
+    return React.createElement(StyledCloseButton, {
       transparent: true,
       border: false,
       icon: eilMathsignMultiplyBasic,
       onClick: onHide
     });
   };
-  return jsx(BorderlessDialog, {
-    children: jsxs(StyledModalWrapper, {
-      children: [jsxs(StyledModalHeader, {
-        children: [title, renderCloseButton()]
-      }), jsx(StyledModalBody, {
-        children: children
-      }), footer && jsx(StyledModalFooter, {
-        children: footer
-      })]
-    })
-  });
+  return React.createElement(BorderlessDialog, null, React.createElement(StyledModalWrapper, null, React.createElement(StyledModalHeader, null, title, renderCloseButton()), React.createElement(StyledModalBody, null, children), footer && React.createElement(StyledModalFooter, null, footer)));
 };
 
 export { MaterialModal as default };

package/es/components/shared/material-modal/MaterialModal.styled.js

@@ -2,19 +2,19 @@ import { Text, Flex, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledModalWrapper = styled.div.withConfig({
+const StyledModalWrapper = styled.div.withConfig({
   componentId: "sc-1ej7kso-0"
 })(["position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", ";border-radius:0.375rem;"], base.color.gray8);
-var StyledModalHeader = styled(Text).withConfig({
+const StyledModalHeader = styled(Text).withConfig({
   componentId: "sc-1ej7kso-1"
 })(["flex:0 1 auto;width:100%;height:3.25rem;min-height:3.25rem;line-height:3.25rem;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom:1px solid ", ";text-align:center;color:", ";"], base.color.navy9, base.color.white);
-var StyledModalBody = styled.div.withConfig({
+const StyledModalBody = styled.div.withConfig({
   componentId: "sc-1ej7kso-2"
 })(["position:relative;flex:1 1 auto;width:100%;height:80%;"]);
-var StyledModalFooter = styled(Flex).withConfig({
+const StyledModalFooter = styled(Flex).withConfig({
   componentId: "sc-1ej7kso-3"
 })(["flex:0 1 auto;width:100%;height:3.75rem;min-height:3.75rem;border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem;border-top:1px solid ", ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;"], base.color.navy9);
-var StyledCloseButton = styled(IconButton).withConfig({
+const StyledCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1ej7kso-4"
 })(["position:absolute;top:0;right:0;color:", " !important;"], base.color.gray4);
 

package/es/components/shared/monaco-editor/MonacoEditor.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { base } from '@elice/design-tokens';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
@@ -26,68 +24,59 @@ initMonacoGrammars().catch(console.warn);
 //
 //
 //
-var StyledMonacoEditorWrapper = styled.div.withConfig({
+const StyledMonacoEditorWrapper = styled.div.withConfig({
   componentId: "sc-1j3uyex-0"
 })(["width:100%;height:100%;"]);
-var StyledMonacoEditor = styled.div.withConfig({
+const StyledMonacoEditor = styled.div.withConfig({
   componentId: "sc-1j3uyex-1"
 })(["width:100%;height:100%;background-color:", ";", ""], base.color.navy9, cssRemoteMarker);
 /**
  *
  */
-var MonacoEditor = forwardRef(function (_ref, ref) {
-  var _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-    _ref$filename = _ref.filename,
-    filename = _ref$filename === void 0 ? '/noname.txt' : _ref$filename,
-    _ref$preference = _ref.preference,
-    preference = _ref$preference === void 0 ? DEFAULT_MONACO_EDITOR_PREFERENCE : _ref$preference,
-    _ref$markers = _ref.markers,
-    markers = _ref$markers === void 0 ? [] : _ref$markers,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _ref$height,
-    _ref$noLanguageIntell = _ref.noLanguageIntellisense,
-    noLanguageIntellisense = _ref$noLanguageIntell === void 0 ? false : _ref$noLanguageIntell,
-    onLoad = _ref.onLoad,
-    onChange = _ref.onChange,
-    onSave = _ref.onSave,
-    onCursor = _ref.onCursor,
-    onScroll = _ref.onScroll,
-    onThemeChange = _ref.onThemeChange;
+const MonacoEditor = forwardRef(({
+  defaultValue = '',
+  filename = '/noname.txt',
+  preference = DEFAULT_MONACO_EDITOR_PREFERENCE,
+  markers = [],
+  width = '100%',
+  height = '100%',
+  noLanguageIntellisense = false,
+  onLoad,
+  onChange,
+  onSave,
+  onCursor,
+  onScroll,
+  onThemeChange
+}, ref) => {
   /** Ref of element which wraps editor. */
-  var editorElRef = React.useRef(null);
+  const editorElRef = React.useRef(null);
   /** Ref of editor exposed APIs. */
-  var editorApis = React.useRef({});
+  const editorApis = React.useRef({});
   /** Ref of monaco editor. */
-  var editor = React.useRef(null);
+  const editor = React.useRef(null);
   /** Editor options. */
-  var editorOptions = useEditorOptions({
-    width: width,
-    height: height,
-    preference: preference,
-    noLanguageIntellisense: noLanguageIntellisense
+  const editorOptions = useEditorOptions({
+    width,
+    height,
+    preference,
+    noLanguageIntellisense
   });
   /** Ref for preventing change event. */
-  var suppress = React.useRef(false);
+  const suppress = React.useRef(false);
   /** Is editor ready? */
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isReady = _React$useState2[0],
-    setReady = _React$useState2[1];
+  const [isReady, setReady] = React.useState(false);
   /**
    * Get model of editor.
    */
-  var getMonacoModel = function getMonacoModel() {
-    var uri = monaco.Uri.file(filename || '/noname.txt');
+  const getMonacoModel = () => {
+    const uri = monaco.Uri.file(filename || '/noname.txt');
     return monaco.editor.getModel(uri);
   };
   /**
    * Has editor undo/redo history?
    * @public
    */
-  var hasHistory = function hasHistory() {
+  const hasHistory = () => {
     var _a;
     return (((_a = getMonacoModel()) === null || _a === void 0 ? void 0 : _a.getAlternativeVersionId()) || 0) > 1;
   };
@@ -95,14 +84,14 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Clear editor undo/redo history.
    * @public
    */
-  var clearHistory = function clearHistory() {
+  const clearHistory = () => {
     getMonacoModel();
   };
   /**
    * Get current value of editor.
    * @public
    */
-  var getValue = function getValue() {
+  const getValue = () => {
     var _a;
     return ((_a = getMonacoModel()) === null || _a === void 0 ? void 0 : _a.getValue()) || '';
   };
@@ -110,16 +99,16 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Get value in range of editor.
    * @public
    */
-  var getValueInRange = function getValueInRange(from, to) {
-    var model = getMonacoModel();
+  const getValueInRange = (from, to) => {
+    const model = getMonacoModel();
     if (!model) {
       return '';
     }
     if (from === to) {
       return '';
     }
-    var startPosition = model.getPositionAt(from);
-    var endPosition = model.getPositionAt(to);
+    const startPosition = model.getPositionAt(from);
+    const endPosition = model.getPositionAt(to);
     return model.getValueInRange({
       startLineNumber: startPosition.lineNumber,
       startColumn: startPosition.column,
@@ -131,14 +120,14 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Set (overwrite) value to editor.
    * @public
    */
-  var setValue = function setValue(newValue) {
+  const setValue = newValue => {
     if (!editor.current) {
       return;
     }
     // Replace value EOL as LF.
     newValue = newValue.replace(/\r\n/g, '\n');
-    var uri = monaco.Uri.file(filename || '/noname.txt');
-    var model = monaco.editor.getModel(uri);
+    const uri = monaco.Uri.file(filename || '/noname.txt');
+    const model = monaco.editor.getModel(uri);
     if (model && !model.isDisposed()) {
       // Override EOL as LF to prevent error at Windows env.
       model.setEOL(monaco.editor.EndOfLineSequence.LF);
@@ -150,9 +139,7 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
           range: model.getFullModelRange(),
           text: newValue,
           forceMoveMarkers: true
-        }], function () {
-          return null;
-        });
+        }], () => null);
         editor.current.pushUndoStop();
         suppress.current = false;
         editor.current.setModel(model);
@@ -162,8 +149,8 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
     // If model has not created yet for this file,
     // create new model.
     else {
-      var lang = getLanguageFromFilename(filename);
-      var newModel = monaco.editor.createModel(newValue, lang, uri);
+      const lang = getLanguageFromFilename(filename);
+      const newModel = monaco.editor.createModel(newValue, lang, uri);
       newModel.setEOL(monaco.editor.EndOfLineSequence.LF);
       editor.current.setModel(newModel);
     }
@@ -172,24 +159,22 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Insert value at specific position.
    * @public
    */
-  var insertValue = function insertValue(offset, newValue) {
+  const insertValue = (offset, newValue) => {
     if (!editor.current) {
       return;
     }
     // Replace value EOL as LF.
     newValue = newValue.replace(/\r\n/g, '\n');
-    var model = getMonacoModel();
+    const model = getMonacoModel();
     if (model) {
-      var position = model.getPositionAt(offset);
+      const position = model.getPositionAt(offset);
       suppress.current = true;
       editor.current.pushUndoStop();
       model.pushEditOperations([], [{
         range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
         text: newValue,
         forceMoveMarkers: true
-      }], function () {
-        return null;
-      });
+      }], () => null);
       editor.current.pushUndoStop();
       suppress.current = false;
     }
@@ -198,23 +183,21 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Remove value at specific range.
    * @public
    */
-  var removeValue = function removeValue(from, to) {
+  const removeValue = (from, to) => {
     if (!editor.current) {
       return;
     }
-    var model = getMonacoModel();
+    const model = getMonacoModel();
     if (model) {
-      var startPosition = model.getPositionAt(from);
-      var endPosition = model.getPositionAt(to);
+      const startPosition = model.getPositionAt(from);
+      const endPosition = model.getPositionAt(to);
       suppress.current = true;
       editor.current.pushUndoStop();
       model.pushEditOperations([], [{
         range: new monaco.Range(startPosition.lineNumber, startPosition.column, endPosition.lineNumber, endPosition.column),
         text: '',
         forceMoveMarkers: true
-      }], function () {
-        return null;
-      });
+      }], () => null);
       editor.current.pushUndoStop();
       suppress.current = false;
     }
@@ -223,9 +206,9 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Get offset of current cursor position.
    * @public
    */
-  var getPositionOffset = function getPositionOffset() {
+  const getPositionOffset = () => {
     var _a;
-    var model = getMonacoModel();
+    const model = getMonacoModel();
     if (!editor.current || !model) {
       return 0;
     }
@@ -235,12 +218,12 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Set selection of editor with specific range.
    * @public
    */
-  var setSelection = function setSelection(from, to) {
+  const setSelection = (from, to) => {
     var _a;
-    var model = getMonacoModel();
+    const model = getMonacoModel();
     if (model) {
-      var markerStartPosition = model.getPositionAt(from);
-      var markerEndPosition = model.getPositionAt(to);
+      const markerStartPosition = model.getPositionAt(from);
+      const markerEndPosition = model.getPositionAt(to);
       (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setSelection(new monaco.Range(markerStartPosition.lineNumber, markerStartPosition.column, markerEndPosition.lineNumber, markerEndPosition.column));
     }
   };
@@ -248,7 +231,7 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
    * Scroll editor to specific `scrollTop`.
    * @public
    */
-  var scrollTo = function scrollTo(scrollTop) {
+  const scrollTo = scrollTop => {
     var _a;
     (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setScrollTop(scrollTop);
   };
@@ -260,11 +243,11 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
   useMonacoEventChange(editor, onChange, suppress, [isReady]);
   useMonacoEventCursor(editor, onCursor, [isReady]);
   useMonacoEventScroll(editor, onScroll, [isReady]);
-  var remoteMarker = useMonacoMarkers(editor, markers);
+  const remoteMarker = useMonacoMarkers(editor, markers);
   //
   // Init and dispose editor.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     try {
       if (!editorElRef.current) {
         return;
@@ -275,11 +258,11 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
         language: getLanguageFromFilename(filename)
       }));
       // add keyboard shortcut.
-      editor.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+      editor.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
         var _a, _b, _c;
         void ((_b = (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAction('editor.action.formatDocument')) === null || _b === void 0 ? void 0 : _b.run());
         if (typeof onSave === 'function') {
-          var content = ((_c = getMonacoModel()) === null || _c === void 0 ? void 0 : _c.getValue()) || '';
+          const content = ((_c = getMonacoModel()) === null || _c === void 0 ? void 0 : _c.getValue()) || '';
           onSave(content);
         }
       });
@@ -292,7 +275,7 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
     } catch (_) {
       setReady(false);
     }
-    return function () {
+    return () => {
       var _a;
       setReady(false);
       // dispose remote marker
@@ -308,9 +291,7 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
   //
   // Set value whenevet filename or value changed.
   //
-  React.useEffect(function () {
-    return setValue(defaultValue);
-  },
+  React.useEffect(() => setValue(defaultValue),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [filename, defaultValue]);
   //
@@ -328,21 +309,17 @@ var MonacoEditor = forwardRef(function (_ref, ref) {
   editorApis.current.getPositionOffset = getPositionOffset;
   editorApis.current.setSelection = setSelection;
   editorApis.current.scrollTo = scrollTo;
-  React.useImperativeHandle(ref, function () {
-    return editorApis.current;
-  }, [editorApis]);
+  React.useImperativeHandle(ref, () => editorApis.current, [editorApis]);
   //
   //
   //
-  return jsx(StyledMonacoEditorWrapper, {
-    children: jsx(StyledMonacoEditor, {
-      style: {
-        width: width,
-        height: height
-      },
-      ref: editorElRef
-    })
-  });
+  return React.createElement(StyledMonacoEditorWrapper, null, React.createElement(StyledMonacoEditor, {
+    style: {
+      width,
+      height
+    },
+    ref: editorElRef
+  }));
 });
 
 export { MonacoEditor as default };