@elice/material-exercise 1.240718.3 → 1.240719.1

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

@@ -2,6 +2,8 @@
 
 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');
@@ -18,52 +20,68 @@ var ExerciseCodeHistory = require('../exercise-code-history/ExerciseCodeHistory.
 var ExerciseRoom = require('../exercise-room/ExerciseRoom.js');
 var ExerciseSubmitHistory = require('../exercise-submit-history/ExerciseSubmitHistory.js');
 
-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;
+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;
   //
   // Runner Rooms Open Subscription
   //
-  React.useEffect(() => {
-    const runnerRoomsOpenSubscription = subjects.exerciseRunnerRoomsOpen$.subscribe(() => {
+  React__default.default.useEffect(function () {
+    var runnerRoomsOpenSubscription = subjects.exerciseRunnerRoomsOpen$.subscribe(function () {
       setIsExerciseRoomModalOpen(true);
     });
-    return () => {
+    return function () {
       runnerRoomsOpenSubscription.unsubscribe();
     };
   }, []);
   /**
    *
    */
-  const renderSumbitHistoryModal = () => {
+  var renderSumbitHistoryModal = function renderSumbitHistoryModal() {
     if (!isSubmitHistoryModalOpen) {
       return null;
     }
-    return React.createElement(ExerciseSubmitHistory.default, {
-      onHide: () => setIsSubmitHistoryModalOpen(false)
+    return jsxRuntime.jsx(ExerciseSubmitHistory.default, {
+      onHide: function onHide() {
+        return setIsSubmitHistoryModalOpen(false);
+      }
     });
   };
   /**
    *
    */
-  const renderCodeHistoryModal = () => {
+  var renderCodeHistoryModal = function renderCodeHistoryModal() {
     if (!isCodeHistoryModalOpen) {
       return null;
     }
-    return React.createElement(ExerciseCodeHistory.default, {
-      onHide: () => setIsCodeHistoryModalOpen(false),
-      onLoadVersionButtonClick: content => {
+    return jsxRuntime.jsx(ExerciseCodeHistory.default, {
+      onHide: function onHide() {
+        return setIsCodeHistoryModalOpen(false);
+      },
+      onLoadVersionButtonClick: function onLoadVersionButtonClick(content) {
         subjects.exerciseFileEditorContentChange$.next(content);
         setIsCodeHistoryModalOpen(false);
       }
@@ -72,57 +90,72 @@ const ExerciseMenuDropdown = () => {
   /**
    *
    */
-  const renderExerciseRoomModal = () => {
+  var renderExerciseRoomModal = function renderExerciseRoomModal() {
     if (!isExerciseRoomModalOpen) {
       return null;
     }
-    return React.createElement(ExerciseRoom.default, {
-      onHide: () => setIsExerciseRoomModalOpen(false)
+    return jsxRuntime.jsx(ExerciseRoom.default, {
+      onHide: function onHide() {
+        return setIsExerciseRoomModalOpen(false);
+      }
     });
   };
   //
   //
   //
-  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());
+  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()]
+  });
 };
 
 exports.default = ExerciseMenuDropdown;

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

@@ -2,6 +2,8 @@
 
 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');
@@ -26,23 +28,26 @@ require('lodash/debounce');
 require('random-words');
 require('unicount');
 
-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);
+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);
   /**
    * Reset the active file.
    */
-  const handleReset = () => {
+  var handleReset = function handleReset() {
     subjects.exerciseFileEditorContentChange$.next(null);
     setDialogOpen(false);
   };
   /**
    * Reset button.
    */
-  const renderResetButton = () => {
-    return React.createElement(ExerciseMenuButton.default, {
+  var renderResetButton = function renderResetButton() {
+    return jsxRuntime.jsx(ExerciseMenuButton.default, {
       icon: icons.eilReset,
       active: isDialogOpen,
       title: isFileResettable ? intl$1.formatMessage({
@@ -51,17 +56,21 @@ const ExerciseMenuReset = () => {
         id: 'exerciseMenu.reset.button.tooltip.disabled'
       }),
       disabled: !isFileResettable,
-      onClick: () => setDialogOpen(isOpen => !isOpen)
+      onClick: function onClick() {
+        return setDialogOpen(function (isOpen) {
+          return !isOpen;
+        });
+      }
     });
   };
   /**
    * Reset confirm dialog.
    */
-  const renderResetConfirmDialog = () => {
+  var renderResetConfirmDialog = function renderResetConfirmDialog() {
     if (!isDialogOpen) {
       return null;
     }
-    return React.createElement(blocks.Dialog, {
+    return jsxRuntime.jsxs(blocks.Dialog, {
       type: "warning",
       title: intl$1.formatMessage({
         id: 'exerciseMenu.reset.confirmDialog.title'
@@ -69,21 +78,30 @@ const ExerciseMenuReset = () => {
       body: intl$1.formatMessage({
         id: 'exerciseMenu.reset.confirmDialog.body'
       }),
-      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'
-    })));
+      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'
+        })
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderResetButton(), renderResetConfirmDialog());
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderResetButton(), renderResetConfirmDialog()]
+  });
 };
 
 exports.default = ExerciseMenuReset;

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

@@ -2,6 +2,8 @@
 
 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');
@@ -19,15 +21,22 @@ require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 var ExerciseMenuStdioFileBrowser_styled = require('./ExerciseMenuStdioFileBrowser.styled.js');
 
-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);
+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);
   //
   // Open stdio file browser, on file changes.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (stdioFiles && stdioFiles.length > 0) {
       setOpen(true);
     }
@@ -37,158 +46,174 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Image type stdio file.
    */
-  const renderStdioFileListItemImage = (key, f) => {
+  var renderStdioFileListItemImage = function renderStdioFileListItemImage(key, f) {
     var _a;
-    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
-    })));
+    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);
   };
   /**
    * File type stdio file.
    */
-  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
-    })));
+  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);
   };
   /**
    * Empty list of stdio files.
    */
-  const renderStdioFileListEmpty = () => {
-    return React.createElement(blocks.Flex, {
+  var renderStdioFileListEmpty = function renderStdioFileListEmpty() {
+    return jsxRuntime.jsxs(blocks.Flex, {
       column: true,
       align: "center",
       width: "100%",
-      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'
-    })));
+      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'
+        })
+      })]
+    });
   };
   /**
    * List of stdio files.
    */
-  const renderStdioFileList = () => {
+  var renderStdioFileList = function renderStdioFileList() {
     if (!stdioFiles || !stdioFiles.length) {
       return renderStdioFileListEmpty();
     }
-    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;
-      }
-    }));
+    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;
+        }
+      })
+    });
   };
   /**
    * Popover header.
    */
-  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)
-    }));
+  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);
+        }
+      })]
+    });
   };
   /**
    * Popover body.
    */
-  const renderStdioFilePopoverBody = () => {
-    return React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
+  var renderStdioFilePopoverBody = function renderStdioFilePopoverBody() {
+    return jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
       children: renderStdioFileList()
     });
   };
   /**
    * Popover.
    */
-  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()));
+  var renderStdioFilePopover = function renderStdioFilePopover() {
+    if (open) {
+      return jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverContent, {
+        children: [renderStdioFilePopoverHeader(), renderStdioFilePopoverBody()]
+      });
+    }
+    return null;
   };
-  /**
-   * Popover toggle button.
-   */
-  const renderStdioFilePopoverToggleButton = () => {
-    return React.createElement(ExerciseMenuButton.default, {
+  //
+  //
+  //
+  return jsxRuntime.jsxs(material.Stack, {
+    position: "relative",
+    children: [jsxRuntime.jsx(ExerciseMenuButton.default, {
       icon: icons.eilAttachment,
       active: open,
       title: intl$1.formatMessage({
         id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
       }),
-      onClick: () => setOpen(prev => !prev),
-      ref: anchorRef
-    }, React.createElement(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
-      role: "white",
-      value: stdioFiles.length
-    }));
-  };
-  //
-  //
-  //
-  return React.createElement(React.Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      },
+      ref: anchorRef,
+      children: jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
+        role: "white",
+        value: stdioFiles.length
+      })
+    }), renderStdioFilePopover()]
+  });
 };
 
 exports.default = ExerciseMenuStdioFileBrowser;