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

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
@@ -20,68 +18,52 @@ var ExerciseCodeHistory = require('../exercise-code-history/ExerciseCodeHistory.
 var ExerciseRoom = require('../exercise-room/ExerciseRoom.js');
 var ExerciseSubmitHistory = require('../exercise-submit-history/ExerciseSubmitHistory.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var ExerciseMenuDropdown = function ExerciseMenuDropdown() {
-  var intl$1 = intl.useRawEliceIntl();
-  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var user = recoil.useRecoilValue(recoil$1.exerciseUserState);
-  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  var lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
-  var setRightpaneActiveState = recoil.useSetRecoilState(recoil$1.exerciseRightpaneActiveState);
-  var _React$useState = React__default.default.useState(false),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    isSubmitHistoryModalOpen = _React$useState2[0],
-    setIsSubmitHistoryModalOpen = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isCodeHistoryModalOpen = _React$useState4[0],
-    setIsCodeHistoryModalOpen = _React$useState4[1];
-  var _React$useState5 = React__default.default.useState(false),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    isExerciseRoomModalOpen = _React$useState6[0],
-    setIsExerciseRoomModalOpen = _React$useState6[1];
-  var isLectureTestInProgress = typeof (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) !== 'undefined' && lecture.testAdmissionStatus === types.enums.TestAdmissionStatus.InProgress;
+const ExerciseMenuDropdown = () => {
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    materialExerciseId
+  } = React.useContext(context.ExerciseContext);
+  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const setRightpaneActiveState = recoil.useSetRecoilState(recoil$1.exerciseRightpaneActiveState);
+  const [isSubmitHistoryModalOpen, setIsSubmitHistoryModalOpen] = React.useState(false);
+  const [isCodeHistoryModalOpen, setIsCodeHistoryModalOpen] = React.useState(false);
+  const [isExerciseRoomModalOpen, setIsExerciseRoomModalOpen] = React.useState(false);
+  const isLectureTestInProgress = typeof (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) !== 'undefined' && lecture.testAdmissionStatus === types.enums.TestAdmissionStatus.InProgress;
   //
   // Runner Rooms Open Subscription
   //
-  React__default.default.useEffect(function () {
-    var runnerRoomsOpenSubscription = subjects.exerciseRunnerRoomsOpen$.subscribe(function () {
+  React.useEffect(() => {
+    const runnerRoomsOpenSubscription = subjects.exerciseRunnerRoomsOpen$.subscribe(() => {
       setIsExerciseRoomModalOpen(true);
     });
-    return function () {
+    return () => {
       runnerRoomsOpenSubscription.unsubscribe();
     };
   }, []);
   /**
    *
    */
-  var renderSumbitHistoryModal = function renderSumbitHistoryModal() {
+  const renderSumbitHistoryModal = () => {
     if (!isSubmitHistoryModalOpen) {
       return null;
     }
-    return jsxRuntime.jsx(ExerciseSubmitHistory.default, {
-      onHide: function onHide() {
-        return setIsSubmitHistoryModalOpen(false);
-      }
+    return React.createElement(ExerciseSubmitHistory.default, {
+      onHide: () => setIsSubmitHistoryModalOpen(false)
     });
   };
   /**
    *
    */
-  var renderCodeHistoryModal = function renderCodeHistoryModal() {
+  const renderCodeHistoryModal = () => {
     if (!isCodeHistoryModalOpen) {
       return null;
     }
-    return jsxRuntime.jsx(ExerciseCodeHistory.default, {
-      onHide: function onHide() {
-        return setIsCodeHistoryModalOpen(false);
-      },
-      onLoadVersionButtonClick: function onLoadVersionButtonClick(content) {
+    return React.createElement(ExerciseCodeHistory.default, {
+      onHide: () => setIsCodeHistoryModalOpen(false),
+      onLoadVersionButtonClick: content => {
         subjects.exerciseFileEditorContentChange$.next(content);
         setIsCodeHistoryModalOpen(false);
       }
@@ -90,72 +72,57 @@ var ExerciseMenuDropdown = function ExerciseMenuDropdown() {
   /**
    *
    */
-  var renderExerciseRoomModal = function renderExerciseRoomModal() {
+  const renderExerciseRoomModal = () => {
     if (!isExerciseRoomModalOpen) {
       return null;
     }
-    return jsxRuntime.jsx(ExerciseRoom.default, {
-      onHide: function onHide() {
-        return setIsExerciseRoomModalOpen(false);
-      }
+    return React.createElement(ExerciseRoom.default, {
+      onHide: () => setIsExerciseRoomModalOpen(false)
     });
   };
   //
   //
   //
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(blocks.ButtonMenu, {
-      menuItemProps: [{
-        label: intl$1.formatMessage({
-          id: 'exerciseMenu.dropdown.item.environment'
-        }),
-        onClick: function onClick() {
-          return setRightpaneActiveState('environment');
-        }
-      }, {
-        label: intl$1.formatMessage({
-          id: 'exerciseMenu.dropdown.item.preference'
-        }),
-        onClick: function onClick() {
-          return setRightpaneActiveState('preference');
-        }
-      }, {
-        label: intl$1.formatMessage({
-          id: 'exerciseMenu.dropdown.item.codeHistory'
-        }),
-        disabled: !user,
-        onClick: function onClick() {
-          return setIsCodeHistoryModalOpen(true);
-        }
-      }, {
-        label: intl$1.formatMessage({
-          id: 'exerciseMenu.dropdown.item.submitHistory'
-        }),
-        disabled: !user || !activeFilename,
-        onClick: function onClick() {
-          return setIsSubmitHistoryModalOpen(true);
-        }
-      }, {
-        label: intl$1.formatMessage({
-          id: 'exerciseMenu.dropdown.item.room'
-        }),
-        disabled: isLectureTestInProgress,
-        onClick: function onClick() {
-          return setIsExerciseRoomModalOpen(true);
-        }
-      }],
-      size: "xsmall",
-      placement: "bottom-end",
-      dark: true,
-      shadow: true,
-      children: jsxRuntime.jsx(ExerciseMenuButton.default, {
-        icon: icons.eilMoreVertical,
-        title: intl$1.formatMessage({
-          id: 'exerciseMenu.dropdown.button.tooltip'
-        })
-      })
-    }), renderSumbitHistoryModal(), renderCodeHistoryModal(), renderExerciseRoomModal()]
-  });
+  return React.createElement(React.Fragment, null, React.createElement(blocks.ButtonMenu, {
+    menuItemProps: [{
+      label: intl$1.formatMessage({
+        id: 'exerciseMenu.dropdown.item.environment'
+      }),
+      onClick: () => setRightpaneActiveState('environment')
+    }, {
+      label: intl$1.formatMessage({
+        id: 'exerciseMenu.dropdown.item.preference'
+      }),
+      onClick: () => setRightpaneActiveState('preference')
+    }, {
+      label: intl$1.formatMessage({
+        id: 'exerciseMenu.dropdown.item.codeHistory'
+      }),
+      disabled: !user,
+      onClick: () => setIsCodeHistoryModalOpen(true)
+    }, {
+      label: intl$1.formatMessage({
+        id: 'exerciseMenu.dropdown.item.submitHistory'
+      }),
+      disabled: !user || !activeFilename,
+      onClick: () => setIsSubmitHistoryModalOpen(true)
+    }, {
+      label: intl$1.formatMessage({
+        id: 'exerciseMenu.dropdown.item.room'
+      }),
+      disabled: isLectureTestInProgress,
+      onClick: () => setIsExerciseRoomModalOpen(true)
+    }],
+    size: "xsmall",
+    placement: "bottom-end",
+    dark: true,
+    shadow: true
+  }, React.createElement(ExerciseMenuButton.default, {
+    icon: icons.eilMoreVertical,
+    title: intl$1.formatMessage({
+      id: 'exerciseMenu.dropdown.button.tooltip'
+    })
+  })), renderSumbitHistoryModal(), renderCodeHistoryModal(), renderExerciseRoomModal());
 };
 
 exports.default = ExerciseMenuDropdown;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuReset.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
@@ -28,26 +26,23 @@ require('lodash/debounce');
 require('random-words');
 require('unicount');
 
-var ExerciseMenuReset = function ExerciseMenuReset() {
-  var intl$1 = intl.useRawEliceIntl();
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isDialogOpen = _useState2[0],
-    setDialogOpen = _useState2[1];
-  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
-  var isFileResettable = useExerciseFile.useExerciseFileResettable(activeFilename);
+const ExerciseMenuReset = () => {
+  const intl$1 = intl.useRawEliceIntl();
+  const [isDialogOpen, setDialogOpen] = React.useState(false);
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const isFileResettable = useExerciseFile.useExerciseFileResettable(activeFilename);
   /**
    * Reset the active file.
    */
-  var handleReset = function handleReset() {
+  const handleReset = () => {
     subjects.exerciseFileEditorContentChange$.next(null);
     setDialogOpen(false);
   };
   /**
    * Reset button.
    */
-  var renderResetButton = function renderResetButton() {
-    return jsxRuntime.jsx(ExerciseMenuButton.default, {
+  const renderResetButton = () => {
+    return React.createElement(ExerciseMenuButton.default, {
       icon: icons.eilReset,
       active: isDialogOpen,
       title: isFileResettable ? intl$1.formatMessage({
@@ -56,21 +51,17 @@ var ExerciseMenuReset = function ExerciseMenuReset() {
         id: 'exerciseMenu.reset.button.tooltip.disabled'
       }),
       disabled: !isFileResettable,
-      onClick: function onClick() {
-        return setDialogOpen(function (isOpen) {
-          return !isOpen;
-        });
-      }
+      onClick: () => setDialogOpen(isOpen => !isOpen)
     });
   };
   /**
    * Reset confirm dialog.
    */
-  var renderResetConfirmDialog = function renderResetConfirmDialog() {
+  const renderResetConfirmDialog = () => {
     if (!isDialogOpen) {
       return null;
     }
-    return jsxRuntime.jsxs(blocks.Dialog, {
+    return React.createElement(blocks.Dialog, {
       type: "warning",
       title: intl$1.formatMessage({
         id: 'exerciseMenu.reset.confirmDialog.title'
@@ -78,30 +69,21 @@ var ExerciseMenuReset = function ExerciseMenuReset() {
       body: intl$1.formatMessage({
         id: 'exerciseMenu.reset.confirmDialog.body'
       }),
-      onHide: function onHide() {
-        return setDialogOpen(false);
-      },
-      children: [jsxRuntime.jsx(blocks.Dialog.CloseButton, {
-        onClick: function onClick() {
-          return setDialogOpen(false);
-        },
-        children: intl$1.formatMessage({
-          id: 'exerciseMenu.reset.confirmDialog.cancel'
-        })
-      }), jsxRuntime.jsx(blocks.Dialog.ActionButton, {
-        onClick: handleReset,
-        children: intl$1.formatMessage({
-          id: 'exerciseMenu.reset.confirmDialog.confirm'
-        })
-      })]
-    });
+      onHide: () => setDialogOpen(false)
+    }, React.createElement(blocks.Dialog.CloseButton, {
+      onClick: () => setDialogOpen(false)
+    }, intl$1.formatMessage({
+      id: 'exerciseMenu.reset.confirmDialog.cancel'
+    })), React.createElement(blocks.Dialog.ActionButton, {
+      onClick: handleReset
+    }, intl$1.formatMessage({
+      id: 'exerciseMenu.reset.confirmDialog.confirm'
+    })));
   };
   //
   //
   //
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [renderResetButton(), renderResetConfirmDialog()]
-  });
+  return React.createElement(React.Fragment, null, renderResetButton(), renderResetConfirmDialog());
 };
 
 exports.default = ExerciseMenuReset;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -21,22 +19,15 @@ require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 var ExerciseMenuStdioFileBrowser_styled = require('./ExerciseMenuStdioFileBrowser.styled.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
-  var intl$1 = intl.useRawEliceIntl();
-  var _React$useState = React__default.default.useState(false),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    open = _React$useState2[0],
-    setOpen = _React$useState2[1];
-  var anchorRef = React__default.default.useRef(null);
-  var stdioFiles = recoil.useRecoilValue(recoil$1.exerciseRunnerStdioFilesState);
+const ExerciseMenuStdioFileBrowser = () => {
+  const intl$1 = intl.useRawEliceIntl();
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const stdioFiles = recoil.useRecoilValue(recoil$1.exerciseRunnerStdioFilesState);
   //
   // Open stdio file browser, on file changes.
   //
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (stdioFiles && stdioFiles.length > 0) {
       setOpen(true);
     }
@@ -46,174 +37,158 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
   /**
    * Image type stdio file.
    */
-  var renderStdioFileListItemImage = function renderStdioFileListItemImage(key, f) {
+  const renderStdioFileListItemImage = (key, f) => {
     var _a;
-    var ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
-    var filename = ext ? "image_output.".concat(ext) : 'image_output';
-    return jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
-      children: [jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImageWrap, {
-        children: jsxRuntime.jsx(muiElements.ImageViewer, {
-          children: jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImage, {
-            src: f.data,
-            alt: filename
-          })
-        })
-      }), jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
-        href: f.data,
-        download: filename,
-        children: jsxRuntime.jsx(blocks.Icon, {
-          icon: icons.eilDownload
-        })
-      })]
-    }, key);
+    const ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
+    const filename = ext ? `image_output.${ext}` : 'image_output';
+    return React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
+      key: key
+    }, React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImageWrap, null, React.createElement(muiElements.ImageViewer, null, React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImage, {
+      src: f.data,
+      alt: filename
+    }))), React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
+      href: f.data,
+      download: filename
+    }, React.createElement(blocks.Icon, {
+      icon: icons.eilDownload
+    })));
   };
   /**
    * File type stdio file.
    */
-  var renderStdioFileListFile = function renderStdioFileListFile(key, f) {
-    var size = (f.data.length / 1024).toFixed(2);
-    return jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
-      children: [jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentFile, {
-        children: [jsxRuntime.jsx(blocks.Text, {
-          children: f.filename,
-          role: "white",
-          size: "small"
-        }), jsxRuntime.jsx(blocks.Text, {
-          children: "".concat(size, " KB"),
-          role: "gray4",
-          size: "tiny"
-        })]
-      }), jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
-        href: f.data,
-        download: f.filename,
-        children: jsxRuntime.jsx(blocks.Icon, {
-          icon: icons.eilDownload
-        })
-      })]
-    }, key);
+  const renderStdioFileListFile = (key, f) => {
+    const size = (f.data.length / 1024).toFixed(2);
+    return React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
+      key: key
+    }, React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentFile, null, React.createElement(blocks.Text, {
+      children: f.filename,
+      role: "white",
+      size: "small"
+    }), React.createElement(blocks.Text, {
+      children: `${size} KB`,
+      role: "gray4",
+      size: "tiny"
+    })), React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
+      href: f.data,
+      download: f.filename
+    }, React.createElement(blocks.Icon, {
+      icon: icons.eilDownload
+    })));
   };
   /**
    * Empty list of stdio files.
    */
-  var renderStdioFileListEmpty = function renderStdioFileListEmpty() {
-    return jsxRuntime.jsxs(blocks.Flex, {
+  const renderStdioFileListEmpty = () => {
+    return React.createElement(blocks.Flex, {
       column: true,
       align: "center",
       width: "100%",
-      paddingy: "1.5rem",
-      children: [jsxRuntime.jsx(blocks.Icon, {
-        icon: icons.eilFolder,
-        size: "jumbo",
-        color: designTokens.base.color.navy3
-      }), jsxRuntime.jsx(blocks.Vspace, {
-        height: 0.5
-      }), jsxRuntime.jsx(material.Typography, {
-        variant: "body2",
-        textAlign: "center",
-        color: color.DARK_TEXT_SECONDARY_COLOR,
-        sx: {
-          whiteSpace: 'pre-wrap'
-        },
-        children: intl$1.formatMessage({
-          id: 'exerciseMenu.stdioFileBrowser.popover.body.placeholder'
-        })
-      })]
-    });
+      paddingy: "1.5rem"
+    }, React.createElement(blocks.Icon, {
+      icon: icons.eilFolder,
+      size: "jumbo",
+      color: designTokens.base.color.navy3
+    }), React.createElement(blocks.Vspace, {
+      height: 0.5
+    }), React.createElement(material.Typography, {
+      variant: "body2",
+      textAlign: "center",
+      color: color.DARK_TEXT_SECONDARY_COLOR,
+      sx: {
+        whiteSpace: 'pre-wrap'
+      }
+    }, intl$1.formatMessage({
+      id: 'exerciseMenu.stdioFileBrowser.popover.body.placeholder'
+    })));
   };
   /**
    * List of stdio files.
    */
-  var renderStdioFileList = function renderStdioFileList() {
+  const renderStdioFileList = () => {
     if (!stdioFiles || !stdioFiles.length) {
       return renderStdioFileListEmpty();
     }
-    return jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyList, {
-      children: stdioFiles.map(function (f, index) {
-        switch (f.type) {
-          case 'image':
-            return renderStdioFileListItemImage(index, f);
-          case 'file':
-            return renderStdioFileListFile(index, f);
-          default:
-            return null;
-        }
-      })
-    });
+    return React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyList, null, stdioFiles.map((f, index) => {
+      switch (f.type) {
+        case 'image':
+          return renderStdioFileListItemImage(index, f);
+        case 'file':
+          return renderStdioFileListFile(index, f);
+        default:
+          return null;
+      }
+    }));
   };
   /**
    * Popover header.
    */
-  var renderStdioFilePopoverHeader = function renderStdioFilePopoverHeader() {
-    return jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverHeader, {
-      children: [jsxRuntime.jsxs(blocks.Flex, {
-        align: "center",
-        children: [jsxRuntime.jsx(blocks.Text, {
-          role: "white",
-          size: "small",
-          bold: true,
-          children: intl$1.formatMessage({
-            id: 'exerciseMenu.stdioFileBrowser.popover.header'
-          })
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 0.5
-        }), jsxRuntime.jsx(blocks.NotificationCount, {
-          role: "white",
-          value: stdioFiles.length
-        })]
-      }), jsxRuntime.jsx(blocks.IconButton, {
-        icon: icons.eilMathsignMultiplyBasic,
-        role: "white",
-        size: "micro",
-        border: false,
-        transparent: true,
-        onClick: function onClick() {
-          return setOpen(false);
-        }
-      })]
-    });
+  const renderStdioFilePopoverHeader = () => {
+    return React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverHeader, null, React.createElement(blocks.Flex, {
+      align: "center"
+    }, React.createElement(blocks.Text, {
+      role: "white",
+      size: "small",
+      bold: true
+    }, intl$1.formatMessage({
+      id: 'exerciseMenu.stdioFileBrowser.popover.header'
+    })), React.createElement(blocks.Hspace, {
+      width: 0.5
+    }), React.createElement(blocks.NotificationCount, {
+      role: "white",
+      value: stdioFiles.length
+    })), React.createElement(blocks.IconButton, {
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "white",
+      size: "micro",
+      border: false,
+      transparent: true,
+      onClick: () => setOpen(false)
+    }));
   };
   /**
    * Popover body.
    */
-  var renderStdioFilePopoverBody = function renderStdioFilePopoverBody() {
-    return jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
+  const renderStdioFilePopoverBody = () => {
+    return React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
       children: renderStdioFileList()
     });
   };
   /**
    * Popover.
    */
-  var renderStdioFilePopover = function renderStdioFilePopover() {
-    if (open) {
-      return jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverContent, {
-        children: [renderStdioFilePopoverHeader(), renderStdioFilePopoverBody()]
-      });
-    }
-    return null;
+  const renderStdioFilePopover = () => {
+    return React.createElement(blocks.Popover, {
+      open: open,
+      anchorEl: anchorRef.current,
+      placement: "bottom-end",
+      // lower than community floating button
+      // - ref : https://elicer.atlassian.net/browse/IP-2987
+      style: {
+        zIndex: 9
+      }
+    }, React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverContent, null, renderStdioFilePopoverHeader(), renderStdioFilePopoverBody()));
   };
-  //
-  //
-  //
-  return jsxRuntime.jsxs(material.Stack, {
-    position: "relative",
-    children: [jsxRuntime.jsx(ExerciseMenuButton.default, {
+  /**
+   * Popover toggle button.
+   */
+  const renderStdioFilePopoverToggleButton = () => {
+    return React.createElement(ExerciseMenuButton.default, {
       icon: icons.eilAttachment,
       active: open,
       title: intl$1.formatMessage({
         id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
       }),
-      onClick: function onClick() {
-        return setOpen(function (prev) {
-          return !prev;
-        });
-      },
-      ref: anchorRef,
-      children: jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
-        role: "white",
-        value: stdioFiles.length
-      })
-    }), renderStdioFilePopover()]
-  });
+      onClick: () => setOpen(prev => !prev),
+      ref: anchorRef
+    }, React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
+      role: "white",
+      value: stdioFiles.length
+    }));
+  };
+  //
+  //
+  //
+  return React.createElement(React.Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
 };
 
 exports.default = ExerciseMenuStdioFileBrowser;