@elice/material-exercise 1.231212.0 → 1.231228.0

package/es/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { getOrgMaterialExerciseExerciseImageExerciseFileGet } from '@elice/api-client';
 import { Flex } from '@elice/blocks';
@@ -14,7 +13,6 @@ import FileViewerNonViewable from '../../shared/file-viewer/FileViewerNonViewabl
 import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
 import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
-import '../../shared/monaco-editor/constants/monaco/preferences.js';
 import 'react-use';
 import 'socket.io-client';
 import { exerciseState, exerciseRoomState, exerciseLectureState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseWebsocketQuery, exerciseFileEditorCursorState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorApisState } from '../context/recoil.js';
@@ -37,45 +35,37 @@ import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
 /**
  * Exercise file (code) editor for editable files
  */
-var ExerciseFileEditor = function ExerciseFileEditor() {
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId,
-    exerciseRoomId = _React$useContext.exerciseRoomId,
-    readOnlyEditor = _React$useContext.readOnlyEditor,
-    readOnlyActiveFile = _React$useContext.readOnlyActiveFile,
-    locale = _React$useContext.locale;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
-  var lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  var preference = useRecoilValue(exerciseEditorPreferenceState);
-  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
-  var readOnly = readOnlyEditor || readOnlyActiveFile;
-  var setUsercodeWebSocketState = useSetRecoilState(exerciseWebsocketQuery('usercodeEdit'));
-  var setFileEditorCursorState = useSetRecoilState(exerciseFileEditorCursorState);
-  var setFileEditorCursorSelectionValueState = useSetRecoilState(exerciseFileEditorCursorSelectionValueState);
+const ExerciseFileEditor = () => {
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    readOnlyEditor,
+    readOnlyActiveFile,
+    locale
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const readOnly = readOnlyEditor || readOnlyActiveFile;
+  const setUsercodeWebSocketState = useSetRecoilState(exerciseWebsocketQuery('usercodeEdit'));
+  const setFileEditorCursorState = useSetRecoilState(exerciseFileEditorCursorState);
+  const setFileEditorCursorSelectionValueState = useSetRecoilState(exerciseFileEditorCursorSelectionValueState);
   // editor
-  var editorApis = React.useRef(null);
-  var editorDocHistories = React.useRef({});
-  var serverInitiatedVersions = React.useRef([]);
+  const editorApis = React.useRef(null);
+  const editorDocHistories = React.useRef({});
+  const serverInitiatedVersions = React.useRef([]);
   // ready state
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isEditorReady = _React$useState2[0],
-    setEditorReady = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isWebSocketReady = _React$useState4[0],
-    setWebSocketReady = _React$useState4[1];
-  var isReady = isEditorReady && isWebSocketReady;
-  var _React$useState5 = React.useState(checkExerciseFileResettable(activeFilename, {
-      exercise: exercise,
-      exerciseRoom: exerciseRoom
-    })),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isFileResettable = _React$useState6[0],
-    setFileResettable = _React$useState6[1];
-  var setExerciseMonacoEditorApisState = useSetRecoilState(exerciseMonacoEditorApisState);
-  React.useEffect(function () {
+  const [isEditorReady, setEditorReady] = React.useState(false);
+  const [isWebSocketReady, setWebSocketReady] = React.useState(false);
+  const isReady = isEditorReady && isWebSocketReady;
+  const [isFileResettable, setFileResettable] = React.useState(checkExerciseFileResettable(activeFilename, {
+    exercise,
+    exerciseRoom
+  }));
+  const setExerciseMonacoEditorApisState = useSetRecoilState(exerciseMonacoEditorApisState);
+  React.useEffect(() => {
     if (editorApis.current) {
       setExerciseMonacoEditorApisState(editorApis.current);
     }
@@ -84,78 +74,48 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
   /**
    * Set value of current file.
    */
-  var setValue = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(content) {
-      var _a, readyExerciseImage;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (isFileResettable) {
-              _context.next = 3;
-              break;
-            }
-            console.warn('Cannot reset file since not resettable.');
-            return _context.abrupt("return");
-          case 3:
-            if (activeFilename) {
-              _context.next = 6;
-              break;
-            }
-            console.warn('Cannot reset file since no file selected.');
-            return _context.abrupt("return");
-          case 6:
-            if (!content) {
-              _context.next = 10;
-              break;
-            }
-            (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
-            _context.next = 15;
-            break;
-          case 10:
-            if (!(content === null)) {
-              _context.next = 15;
-              break;
-            }
-            readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
-            if (!(!editorApis.current || !readyExerciseImage)) {
-              _context.next = 14;
-              break;
-            }
-            return _context.abrupt("return");
-          case 14:
-            return _context.abrupt("return", getOrgMaterialExerciseExerciseImageExerciseFileGet({
-              exerciseImageId: readyExerciseImage.id,
-              filename: activeFilename
-            }).then(function (res) {
-              return res.exerciseFile.content;
-            }).then(function (content) {
-              var _a;
-              if (typeof content === 'string') {
-                (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
-              } else {
-                setFileResettable(false);
-              }
-            }));
-          case 15:
-          case "end":
-            return _context.stop();
+  const setValue = async content => {
+    var _a;
+    if (!isFileResettable) {
+      console.warn('Cannot reset file since not resettable.');
+      return;
+    }
+    if (!activeFilename) {
+      console.warn('Cannot reset file since no file selected.');
+      return;
+    }
+    if (content) {
+      (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+    }
+    // reset as initial value on `null` received.
+    else if (content === null) {
+      const readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+      if (!editorApis.current || !readyExerciseImage) {
+        return;
+      }
+      return getOrgMaterialExerciseExerciseImageExerciseFileGet({
+        exerciseImageId: readyExerciseImage.id,
+        filename: activeFilename
+      }).then(res => res.exerciseFile.content).then(content => {
+        var _a;
+        if (typeof content === 'string') {
+          (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+        } else {
+          setFileResettable(false);
         }
-      }, _callee);
-    }));
-    return function setValue(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+      });
+    }
+  };
   /**
    * Update editor document history.
    */
-  var pushEditorDocHistories = function pushEditorDocHistories() {
-    var _editorApis = editorApis.current;
+  const pushEditorDocHistories = () => {
+    const _editorApis = editorApis.current;
     if (!_editorApis) {
       return;
     }
     if (typeof _editorApis.getMonacoModel === 'function') {
-      var model = _editorApis.getMonacoModel();
+      const model = _editorApis.getMonacoModel();
       if (model) {
         editorDocHistories.current[model.getVersionId()] = model.getValue();
       }
@@ -165,102 +125,82 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
    * Handle usercode edit websocket received `WRITE_NOTI` message,
    * move cursor or insert / delete content.
    */
-  var handleWebsocketUsercodeWriteNoti = function handleWebsocketUsercodeWriteNoti(ots) {
+  const handleWebsocketUsercodeWriteNoti = ots => {
     var _a, _b, _c;
-    var cursor = 0;
-    var _iterator = _createForOfIteratorHelper(ots),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var ot = _step.value;
-        var model = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getMonacoModel();
-        if (!model) {
-          continue;
-        }
-        // remove previous versions.
-        if (serverInitiatedVersions.current.length > 100) {
-          serverInitiatedVersions.current.splice(0, 50);
-        }
-        switch (_typeof(ot)) {
-          // cursor changed...
-          case 'number':
-            cursor += ot;
-            break;
-          // insertion
-          case 'string':
-            serverInitiatedVersions.current.push(model.getVersionId());
-            (_b = editorApis.current) === null || _b === void 0 ? void 0 : _b.insertValue(cursor, ot);
-            cursor += ot.length;
-            break;
-          // deletion
-          default:
-            serverInitiatedVersions.current.push(model.getVersionId());
-            (_c = editorApis.current) === null || _c === void 0 ? void 0 : _c.removeValue(cursor, cursor + (typeof ot.d === 'number' ? ot.d : ot.d.length));
-            break;
-        }
+    let cursor = 0;
+    for (const ot of ots) {
+      const model = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getMonacoModel();
+      if (!model) {
+        continue;
+      }
+      // remove previous versions.
+      if (serverInitiatedVersions.current.length > 100) {
+        serverInitiatedVersions.current.splice(0, 50);
+      }
+      switch (typeof ot) {
+        // cursor changed...
+        case 'number':
+          cursor += ot;
+          break;
+        // insertion
+        case 'string':
+          serverInitiatedVersions.current.push(model.getVersionId());
+          (_b = editorApis.current) === null || _b === void 0 ? void 0 : _b.insertValue(cursor, ot);
+          cursor += ot.length;
+          break;
+        // deletion
+        default:
+          serverInitiatedVersions.current.push(model.getVersionId());
+          (_c = editorApis.current) === null || _c === void 0 ? void 0 : _c.removeValue(cursor, cursor + (typeof ot.d === 'number' ? ot.d : ot.d.length));
+          break;
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
     }
   };
   /**
    * Usercode edit web socket.
    */
-  var wsUsercode = useUsercodeEditWebSocket({
-    exerciseRoomId: exerciseRoomId,
+  const wsUsercode = useUsercodeEditWebSocket({
+    exerciseRoomId,
     filename: activeFilename,
-    onInit: function onInit() {
-      return setWebSocketReady(true);
-    },
+    onInit: () => setWebSocketReady(true),
     onWriteNoti: handleWebsocketUsercodeWriteNoti
   });
   /**
    *
    */
-  var handleChange = function handleChange(e) {
-    var index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
+  const handleChange = e => {
+    const index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
     if (index !== -1) {
       serverInitiatedVersions.current.splice(index, 1);
       return;
     }
     // get previous model doc
-    var prevDoc = editorDocHistories.current[e.versionId - 1];
+    const prevDoc = editorDocHistories.current[e.versionId - 1];
     // send OTs to server
-    var _iterator2 = _createForOfIteratorHelper(e.changes),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var change = _step2.value;
-        // insertion
-        if (change.rangeLength === 0 && !readOnly) {
-          wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+    for (const change of e.changes) {
+      // insertion
+      if (change.rangeLength === 0 && !readOnly) {
+        wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+      }
+      // deletion
+      else {
+        if (prevDoc && !readOnly) {
+          wsUsercode.sendOTs([change.rangeOffset || null, {
+            d: prevDoc.slice(change.rangeOffset, change.rangeOffset + change.rangeLength)
+          }].filter(Boolean));
         }
-        // deletion
-        else {
-          if (prevDoc && !readOnly) {
-            wsUsercode.sendOTs([change.rangeOffset || null, {
-              d: prevDoc.slice(change.rangeOffset, change.rangeOffset + change.rangeLength)
-            }].filter(Boolean));
-          }
-          // replace
-          if (change.text.length > 0 && !readOnly) {
-            wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
-          }
+        // replace
+        if (change.text.length > 0 && !readOnly) {
+          wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
         }
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
     }
     delete editorDocHistories.current[e.versionId - 1];
   };
   /**
    * Handle editor cursor change.
    */
-  var handleEditorCursor = function handleEditorCursor(range) {
+  const handleEditorCursor = range => {
     var _a, _b;
     if (!readOnly) {
       wsUsercode.sendCursor(range);
@@ -271,34 +211,34 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
   /**
    * Handle editor save shortcut emitted.
    */
-  var handleSave = function handleSave() {
+  const handleSave = () => {
     exerciseFileEditorSaveAction$.next();
   };
   //
   // Handle editor content change.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a, _b;
-    var _editorApis = editorApis.current;
+    const _editorApis = editorApis.current;
     if (!_editorApis || !isReady) {
       return;
     }
     _editorApis.setValue(wsUsercode.doc);
     pushEditorDocHistories();
-    var subscription = undefined;
+    let subscription = undefined;
     if (FlutterApp.checkWebview()) {
-      subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(function (e) {
+      subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(e => {
         pushEditorDocHistories();
         handleChange(e);
         FlutterApp.onDidChangeContent();
       });
     } else {
-      subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(function (e) {
+      subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(e => {
         pushEditorDocHistories();
         handleChange(e);
       });
     }
-    return function () {
+    return () => {
       if (subscription) {
         subscription.dispose();
       }
@@ -309,21 +249,17 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
   //
   // Handle websocket status change.
   //
-  React.useEffect(function () {
-    return setUsercodeWebSocketState(wsUsercode.readyState);
-  },
+  React.useEffect(() => setUsercodeWebSocketState(wsUsercode.readyState),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [wsUsercode.readyState]);
   //
   // handle content change request to code editor.
   //
-  React.useEffect(function () {
-    var contentChangeSub = exerciseFileEditorContentChange$.subscribe(function (v) {
-      setValue(v).catch(function () {
-        return void 0;
-      });
+  React.useEffect(() => {
+    const contentChangeSub = exerciseFileEditorContentChange$.subscribe(v => {
+      setValue(v).catch(() => void 0);
     });
-    return function () {
+    return () => {
       contentChangeSub.unsubscribe();
     };
   },
@@ -347,8 +283,8 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
   if (!isWebSocketReady) {
     return React.createElement(ExerciseFileShimmer, null);
   }
-  var uniqueFilePath = "code/".concat(exerciseRoomId);
-  var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
+  const uniqueFilePath = `code/${exerciseRoomId}`;
+  const editorFilename = `${uniqueFilePath}/${activeFilename}`;
   return React.createElement(Flex, {
     column: true,
     width: "100%",
@@ -359,13 +295,11 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     filename: editorFilename,
     markers: wsUsercode.markers,
     preference: Object.assign(Object.assign({}, preference), {
-      readOnly: readOnly
+      readOnly
     }),
     noLanguageIntellisense: (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test,
     locale: locale,
-    onLoad: function onLoad() {
-      return setEditorReady(true);
-    },
+    onLoad: () => setEditorReady(true),
     onCursor: handleEditorCursor,
     onSave: handleSave,
     ref: editorApis

package/es/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.js

@@ -9,15 +9,16 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var StyledEditorReadOnlyBanner = styled.div.withConfig({
+const StyledEditorReadOnlyBanner = styled.div.withConfig({
   componentId: "sc-kh9iw2-0"
 })(["flex:0 0 auto;display:flex;align-items:center;margin:0.75rem;padding:0 1rem;height:2rem;border:1px solid ", ";border-radius:2px;"], base.color.navy5);
 /**
  * Banner for readonly exercise file.
  */
-var ExerciseFileReadOnlyBanner = function ExerciseFileReadOnlyBanner() {
-  var _React$useContext = React.useContext(ExerciseContext),
-    readOnlyActiveFile = _React$useContext.readOnlyActiveFile;
+const ExerciseFileReadOnlyBanner = () => {
+  const {
+    readOnlyActiveFile
+  } = React.useContext(ExerciseContext);
   if (!readOnlyActiveFile) {
     return null;
   }

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
@@ -13,49 +12,39 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var AsyncFileTabs = React.lazy(function () {
-  return import('../../shared/file-tabs/FileTabs.js');
-});
-var StyledFileTabsWrapper = styled.div.withConfig({
+const AsyncFileTabs = React.lazy(() => import('../../shared/file-tabs/FileTabs.js'));
+const StyledFileTabsWrapper = styled.div.withConfig({
   componentId: "sc-11fdoyl-0"
 })(["flex:0 0 3rem;"]);
-var ExerciseFileTabs = function ExerciseFileTabs() {
-  var _React$useContext = React.useContext(ExerciseContext),
-    exerciseRoomId = _React$useContext.exerciseRoomId,
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var _useRecoilState = useRecoilState(exerciseActiveFilenameState),
-    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-    activeFilename = _useRecoilState2[0],
-    setActiveFilename = _useRecoilState2[1];
-  var _useRecoilState3 = useRecoilState(exerciseFileTabsOpenedState({
-      materialExerciseId: materialExerciseId,
-      exerciseRoomId: exerciseRoomId
-    })),
-    _useRecoilState4 = _slicedToArray(_useRecoilState3, 2),
-    openedTabs = _useRecoilState4[0],
-    setOpenedTabs = _useRecoilState4[1];
-  var handleCloseTab = function handleCloseTab(path) {
-    var updatedTabs = openedTabs.filter(function (tab) {
-      return tab !== path;
-    });
+const ExerciseFileTabs = () => {
+  const {
+    exerciseRoomId,
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const [activeFilename, setActiveFilename] = useRecoilState(exerciseActiveFilenameState);
+  const [openedTabs, setOpenedTabs] = useRecoilState(exerciseFileTabsOpenedState({
+    materialExerciseId,
+    exerciseRoomId
+  }));
+  const handleCloseTab = path => {
+    const updatedTabs = openedTabs.filter(tab => tab !== path);
     setOpenedTabs(updatedTabs);
     if (activeFilename === path) {
       setActiveFilename(updatedTabs.length > 0 ? updatedTabs[0] : '');
     }
   };
-  var handleTabOrderChange = function handleTabOrderChange(currentIndex, movedIndex) {
-    var newOpenedTabs = _toConsumableArray(openedTabs);
-    var movingTab = newOpenedTabs.splice(currentIndex, 1);
-    newOpenedTabs.splice.apply(newOpenedTabs, [movedIndex, 0].concat(_toConsumableArray(movingTab)));
+  const handleTabOrderChange = (currentIndex, movedIndex) => {
+    const newOpenedTabs = [...openedTabs];
+    const movingTab = newOpenedTabs.splice(currentIndex, 1);
+    newOpenedTabs.splice(movedIndex, 0, ...movingTab);
     setOpenedTabs(newOpenedTabs);
   };
-  var handleActivePathChange = function handleActivePathChange(path) {
-    var isDirectory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const handleActivePathChange = (path, isDirectory = false) => {
     if (isDirectory) {
       return;
     }
     if (!openedTabs.includes(path)) {
-      setOpenedTabs([].concat(_toConsumableArray(openedTabs), [path]));
+      setOpenedTabs([...openedTabs, path]);
     }
     setActiveFilename(path);
   };

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useHover } from 'react-use';
@@ -18,35 +17,29 @@ import { withForwardRefExerciseIntlProvider } from '../context/ExerciseIntlProvi
 import phrasesEn from './locales/fileTreeButton.en.json.js';
 import phrasesKo from './locales/fileTreeButton.ko.json.js';
 
-var ICON_BUTTON_SIZE = '2.25rem';
-var StyledFileTreeButton = styled(IconButton).withConfig({
+const ICON_BUTTON_SIZE = '2.25rem';
+const StyledFileTreeButton = styled(IconButton).withConfig({
   componentId: "sc-ohtsjn-0"
-})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, base.color.navy7, function (props) {
-  return props.active ? base.color.navy8 : base.color.navy8;
-}, base.color.navy9);
-var ExerciseFileTabsFileTreeButton = forwardRef(function (_, ref) {
-  var intl = useIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var _useRecoilState = useRecoilState(exerciseFileTreeOpenedState),
-    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-    exerciseFileTreeOpened = _useRecoilState2[0],
-    setExerciseFileTreeOpened = _useRecoilState2[1];
+})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, base.color.navy7, props => props.active ? base.color.navy8 : base.color.navy8, base.color.navy9);
+const ExerciseFileTabsFileTreeButton = forwardRef((_, ref) => {
+  const intl = useIntl();
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const [exerciseFileTreeOpened, setExerciseFileTreeOpened] = useRecoilState(exerciseFileTreeOpenedState);
   /**
    * Handle click.
    */
-  var handleClick = function handleClick() {
-    setExerciseFileTreeOpened(function (prev) {
-      return !prev;
-    });
+  const handleClick = () => {
+    setExerciseFileTreeOpened(prev => !prev);
   };
   //
   // apply default file tree opened state.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a;
-    var exerciseUiConfig = eliceApiUiConfigNormalizeHelper('materialExercise', (_a = exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig) !== null && _a !== void 0 ? _a : {});
+    const exerciseUiConfig = eliceApiUiConfigNormalizeHelper('materialExercise', (_a = exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig) !== null && _a !== void 0 ? _a : {});
     setExerciseFileTreeOpened(exerciseUiConfig.editorFileTreeDefaultStatus === enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Open);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,29 +47,27 @@ var ExerciseFileTabsFileTreeButton = forwardRef(function (_, ref) {
   //
   //
   //
-  var _useHover = useHover(function (isHovering) {
-      return React.createElement("div", null, React.createElement(Tooltip, {
-        title: exerciseFileTreeOpened ? intl.formatMessage({
-          id: 'exerciseFileTab.fileTreeButton.tooltip.close'
-        }) : intl.formatMessage({
-          id: 'exerciseFileTab.fileTreeButton.tooltip.open'
-        }),
-        placement: "bottom-start"
-      }, React.createElement(StyledFileTreeButton, {
-        icon: isHovering ? eilArrowRightwardsDouble : eilFolder,
-        iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
-        role: "gray3",
-        size: "tiny",
-        transparent: true,
-        border: false,
-        hasBorderRadius: false,
-        active: exerciseFileTreeOpened,
-        onClick: handleClick,
-        ref: ref
-      })));
-    }),
-    _useHover2 = _slicedToArray(_useHover, 1),
-    el = _useHover2[0];
+  const [el] = useHover(isHovering => {
+    return React.createElement("div", null, React.createElement(Tooltip, {
+      title: exerciseFileTreeOpened ? intl.formatMessage({
+        id: 'exerciseFileTab.fileTreeButton.tooltip.close'
+      }) : intl.formatMessage({
+        id: 'exerciseFileTab.fileTreeButton.tooltip.open'
+      }),
+      placement: "bottom-start"
+    }, React.createElement(StyledFileTreeButton, {
+      icon: isHovering ? eilArrowRightwardsDouble : eilFolder,
+      iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
+      role: "gray3",
+      size: "tiny",
+      transparent: true,
+      border: false,
+      hasBorderRadius: false,
+      active: exerciseFileTreeOpened,
+      onClick: handleClick,
+      ref: ref
+    })));
+  });
   return (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.editorFileTreeDefaultStatus) === enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Hide ? null : el;
 });
 //