@elice/material-runbox 1.231212.0 → 1.231228.0

package/cjs/components/material-runbox/actions/MaterialRunboxActionAutoShutdown.js

@@ -2,40 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var React = require('react');
 var reactIntl = require('react-intl');
-var styled = require('@emotion/styled');
 var material = require('@mui/material');
 var MaterialRunboxApiContext = require('../contexts/MaterialRunboxApiContext.js');
 require('../contexts/MaterialRunboxCommandContext.js');
 require('../contexts/MaterialRunboxContext.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-var StyledFormControlLabel = styled__default["default"](material.FormControlLabel)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  margin: 0 !important;\n"])));
+const StyledFormControlLabel = /*#__PURE__*/_styled(material.FormControlLabel, {
+  target: "e1ket70c0"
+})("production" === "production" ? {
+  name: "1ep9nyp",
+  styles: "margin:0!important"
+} : {
+  name: "1ep9nyp",
+  styles: "margin:0!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 //
 //
 //
-var MaterialRunboxActionAutoShutdown = function MaterialRunboxActionAutoShutdown(_ref) {
-  var runtime = _ref.runtime,
-    runtimeTemplate = _ref.runtimeTemplate,
-    courseId = _ref.courseId,
-    refetch = _ref.refetch;
+const MaterialRunboxActionAutoShutdown = ({
+  runtime,
+  runtimeTemplate,
+  courseId,
+  refetch
+}) => {
   var _a;
-  var intl = reactIntl.useIntl();
-  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+  const intl = reactIntl.useIntl();
+  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
   /**
    *
    */
-  var handleAction = function handleAction(_, shutdown) {
+  const handleAction = (_, shutdown) => {
     if (!runtime) {
       return;
     }
@@ -45,14 +49,14 @@ var MaterialRunboxActionAutoShutdown = function MaterialRunboxActionAutoShutdown
         autoShutdown: !shutdown
       },
       eliceCourseId: courseId
-    }).then(refetch).catch(function () {
+    }).then(refetch).catch(() => {
       //
     });
   };
   //
   //
   //
-  return React__default["default"].createElement(material.Tooltip, {
+  return React.createElement(material.Tooltip, {
     title: intl.formatMessage({
       id: runtimeTemplate.autoShutdown ? 'runbox.action.autoShutdown.tooltip.disabled' : 'runbox.action.autoShutdown.tooltip.enabled'
     }, {
@@ -62,8 +66,8 @@ var MaterialRunboxActionAutoShutdown = function MaterialRunboxActionAutoShutdown
         unitDisplay: 'short'
       })
     })
-  }, React__default["default"].createElement(StyledFormControlLabel, {
-    control: React__default["default"].createElement(material.Switch, {
+  }, React.createElement(StyledFormControlLabel, {
+    control: React.createElement(material.Switch, {
       checked: !(runtime === null || runtime === void 0 ? void 0 : runtime.autoShutdown),
       disabled: !runtime || runtimeTemplate.autoShutdown,
       onChange: handleAction
@@ -79,4 +83,4 @@ var MaterialRunboxActionAutoShutdown = function MaterialRunboxActionAutoShutdown
   }));
 };
 
-exports["default"] = MaterialRunboxActionAutoShutdown;
+exports.default = MaterialRunboxActionAutoShutdown;

package/cjs/components/material-runbox/actions/MaterialRunboxActionGrade.js

@@ -2,33 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var React = require('react');
 var reactIntl = require('react-intl');
 var reactTransitionGroup = require('react-transition-group');
+var muiXSnackbar = require('@elice/mui-x-snackbar');
 var openapiClientMaterialRunbox = require('@elice/openapi-client-material-runbox');
 var runboxClient = require('@elice/runbox-client');
-var styled = require('@emotion/styled');
 var iconsMaterial = require('@mui/icons-material');
 var lab = require('@mui/lab');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
-var notistack = require('notistack');
 var MaterialRunboxApiContext = require('../contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxCommandContext = require('../contexts/MaterialRunboxCommandContext.js');
 require('../contexts/MaterialRunboxContext.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject, _templateObject2, _templateObject3;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-var TRANSITION_DURATION = 300;
-var TRANSITION_STYLE_MAP = {
+const TRANSITION_DURATION = 300;
+const TRANSITION_STYLE_MAP = {
   entering: {
     maxWidth: 0
   },
@@ -48,181 +42,149 @@ var TRANSITION_STYLE_MAP = {
 //
 //
 //
-var StyledMainActionButton = styled__default["default"](lab.LoadingButton)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  min-width: 4rem !important;\n"])));
-var StyledSubActionButton = styled__default["default"](material.Button)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  transition: max-width ", "ms\n    cubic-bezier(0.25, 0.46, 0.45, 1);\n"])), TRANSITION_DURATION);
-var StyledTerminal = styled__default["default"].textarea(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 1rem;\n  width: 100%;\n  color: ", ";\n  background-color: ", ";\n  border: none;\n  border-radius: 0.5rem;\n  font-family: 'Elice Digital Coding', monospace;\n  font-size: ", ";\n  line-height: ", ";\n  outline: none;\n  resize: none;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.common.white;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.common.black;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.typography.body2.fontSize;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.typography.body2.lineHeight;
+const StyledMainActionButton = /*#__PURE__*/_styled(lab.LoadingButton, {
+  target: "eae460y2"
+})("production" === "production" ? {
+  name: "tssn5p",
+  styles: "min-width:4rem!important"
+} : {
+  name: "tssn5p",
+  styles: "min-width:4rem!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+const StyledSubActionButton = /*#__PURE__*/_styled(material.Button, {
+  target: "eae460y1"
+})("transition:max-width ", TRANSITION_DURATION, "ms cubic-bezier(0.25, 0.46, 0.45, 1);");
+const StyledTerminal = /*#__PURE__*/_styled("textarea", {
+  target: "eae460y0"
+})("padding:1rem;width:100%;color:", ({
+  theme
+}) => theme.palette.common.white, ";background-color:", ({
+  theme
+}) => theme.palette.common.black, ";border:none;border-radius:0.5rem;font-family:'Elice Digital Coding',monospace;font-size:", ({
+  theme
+}) => theme.typography.body2.fontSize, ";line-height:", ({
+  theme
+}) => theme.typography.body2.lineHeight, ";outline:none;resize:none;");
 //
 //
 //
-var MaterialRunboxActionGrade = function MaterialRunboxActionGrade(_ref5) {
-  var runtime = _ref5.runtime,
-    courseId = _ref5.courseId;
+const MaterialRunboxActionGrade = ({
+  runtime,
+  courseId
+}) => {
   var _a;
-  var _useSnackbar = notistack.useSnackbar(),
-    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
-  var intl = reactIntl.useIntl();
-  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
-  var _useMaterialRunboxCom = MaterialRunboxCommandContext.useMaterialRunboxCommandContext(),
-    isLastCommandRunning = _useMaterialRunboxCom.isLastCommandRunning,
-    lastCommand = _useMaterialRunboxCom.lastCommand,
-    setCommandIdToPing = _useMaterialRunboxCom.setCommandIdToPing;
-  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status;
-  var leaderboardSubmitInfoQuery = reactQuery.useQuery({
+  const intl = reactIntl.useIntl();
+  const {
+    enqueueSnackbar
+  } = muiXSnackbar.useSnackbar();
+  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+  const {
+    isLastCommandRunning,
+    lastCommand,
+    setCommandIdToPing
+  } = MaterialRunboxCommandContext.useMaterialRunboxCommandContext();
+  const {
+    status
+  } = runboxClient.useEliceRunboxRunning();
+  const leaderboardSubmitInfoQuery = reactQuery.useQuery({
     queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
-      courseId: courseId,
-      runtime: runtime
+      courseId,
+      runtime
     }],
-    queryFn: function queryFn(_ref6) {
-      var signal = _ref6.signal;
-      return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
-        eliceCourseId: courseId,
-        runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
-      }, {
-        signal: signal
-      });
-    },
+    queryFn: ({
+      signal
+    }) => materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
+      eliceCourseId: courseId,
+      runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
+    }, {
+      signal
+    }),
     enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
     retry: false
   });
-  var isSubmitCountRemained = ((_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount) !== 0;
-  var _React$useState = React__default["default"].useState(false),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    isActionLoading = _React$useState2[0],
-    setActionLoading = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isGradeResultDialogOpen = _React$useState4[0],
-    setGradeResultDialogOpen = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState(false),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    isSubmitCountInfoDialogOpen = _React$useState6[0],
-    setSubmitCountInfoDialogOpen = _React$useState6[1];
-  var _React$useState7 = React__default["default"].useState(false),
-    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
-    hasUnreadResult = _React$useState8[0],
-    setHasUnreadResult = _React$useState8[1];
-  var isRunboxRunning = status === 'running';
-  var isGradeDoneWithOutput = !isLastCommandRunning && (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === openapiClientMaterialRunbox.CommandType.Grade && Boolean(lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.output);
+  const isSubmitCountRemained = ((_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount) !== 0;
+  const [isActionLoading, setActionLoading] = React.useState(false);
+  const [isGradeResultDialogOpen, setGradeResultDialogOpen] = React.useState(false);
+  const [isSubmitCountInfoDialogOpen, setSubmitCountInfoDialogOpen] = React.useState(false);
+  const [hasUnreadResult, setHasUnreadResult] = React.useState(false);
+  const isRunboxRunning = status === 'running';
+  const isGradeDoneWithOutput = !isLastCommandRunning && (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === openapiClientMaterialRunbox.CommandType.Grade && Boolean(lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.output);
   /**
    *
    */
-  var handleGradeResultDialogOpen = function handleGradeResultDialogOpen() {
+  const handleGradeResultDialogOpen = () => {
     setGradeResultDialogOpen(true);
   };
   /**
    *
    */
-  var handleGradeResultDialogClose = function handleGradeResultDialogClose() {
+  const handleGradeResultDialogClose = () => {
     setGradeResultDialogOpen(false);
   };
   /**
    *
    */
-  var handleSubmitCountInfoDialogClose = function handleSubmitCountInfoDialogClose() {
+  const handleSubmitCountInfoDialogClose = () => {
     setSubmitCountInfoDialogOpen(false);
   };
   /**
    *
    */
-  var handleAction = /*#__PURE__*/function () {
-    var _ref7 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-      var _yield$leaderboardSub, currentLeaderboardSubmitInfo, isCurrentSubmitCountEmpty, runtimeId, _yield$materialRunbox, commandId;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setActionLoading(true);
-            _context.prev = 1;
-            _context.next = 4;
-            return leaderboardSubmitInfoQuery.refetch();
-          case 4:
-            _yield$leaderboardSub = _context.sent;
-            currentLeaderboardSubmitInfo = _yield$leaderboardSub.data;
-            isCurrentSubmitCountEmpty = (currentLeaderboardSubmitInfo === null || currentLeaderboardSubmitInfo === void 0 ? void 0 : currentLeaderboardSubmitInfo.remainSubmitCount) === 0;
-            if (!isCurrentSubmitCountEmpty) {
-              _context.next = 10;
-              break;
-            }
-            setSubmitCountInfoDialogOpen(true);
-            return _context.abrupt("return");
-          case 10:
-            runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
-            _context.next = 13;
-            return materialRunboxApi.runtime.runtimeRuntimeIdCommandPost({
-              runtimeId: runtimeId,
-              eliceCourseId: courseId,
-              runboxCommandPostRequest: {
-                commandType: openapiClientMaterialRunbox.CommandType.Grade
-              }
-            });
-          case 13:
-            _yield$materialRunbox = _context.sent;
-            commandId = _yield$materialRunbox.id;
-            setCommandIdToPing(commandId);
-            _context.next = 21;
-            break;
-          case 18:
-            _context.prev = 18;
-            _context.t0 = _context["catch"](1);
-            enqueueSnackbar(intl.formatMessage({
-              id: 'runbox.action.grade.noti.error'
-            }), {
-              variant: 'error'
-            });
-          case 21:
-            _context.prev = 21;
-            setActionLoading(false);
-            return _context.finish(21);
-          case 24:
-          case "end":
-            return _context.stop();
+  const handleAction = async () => {
+    setActionLoading(true);
+    try {
+      const {
+        data: currentLeaderboardSubmitInfo
+      } = await leaderboardSubmitInfoQuery.refetch();
+      const isCurrentSubmitCountEmpty = (currentLeaderboardSubmitInfo === null || currentLeaderboardSubmitInfo === void 0 ? void 0 : currentLeaderboardSubmitInfo.remainSubmitCount) === 0;
+      if (isCurrentSubmitCountEmpty) {
+        setSubmitCountInfoDialogOpen(true);
+        return;
+      }
+      const runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
+      const {
+        id: commandId
+      } = await materialRunboxApi.runtime.runtimeRuntimeIdCommandPost({
+        runtimeId,
+        eliceCourseId: courseId,
+        runboxCommandPostRequest: {
+          commandType: openapiClientMaterialRunbox.CommandType.Grade
         }
-      }, _callee, null, [[1, 18, 21, 24]]);
-    }));
-    return function handleAction() {
-      return _ref7.apply(this, arguments);
-    };
-  }();
+      });
+      setCommandIdToPing(commandId);
+    } catch (err) {
+      enqueueSnackbar(intl.formatMessage({
+        id: 'runbox.action.grade.noti.error'
+      }), {
+        variant: 'error'
+      });
+    } finally {
+      setActionLoading(false);
+    }
+  };
   //
   // set `hasUnreadResult` when last command output exists
   //
-  React__default["default"].useEffect(function () {
-    return setHasUnreadResult(isGradeDoneWithOutput);
-  }, [isGradeDoneWithOutput]);
+  React.useEffect(() => setHasUnreadResult(isGradeDoneWithOutput), [isGradeDoneWithOutput]);
   //
   // reset `hasUnreadResult` when dialog state toggled
   //
-  React__default["default"].useEffect(function () {
-    return setHasUnreadResult(false);
-  }, [isGradeResultDialogOpen]);
+  React.useEffect(() => setHasUnreadResult(false), [isGradeResultDialogOpen]);
   //
   // toggle dialog state when last command output exists
   //
-  React__default["default"].useEffect(function () {
-    return setGradeResultDialogOpen(isGradeDoneWithOutput);
-  }, [isGradeDoneWithOutput]);
+  React.useEffect(() => setGradeResultDialogOpen(isGradeDoneWithOutput), [isGradeDoneWithOutput]);
   /**
    *
    */
-  var renderActionButton = function renderActionButton() {
-    var isGradeType = (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === openapiClientMaterialRunbox.CommandType.Grade;
-    var isGrading = isActionLoading || isLastCommandRunning && isGradeType;
+  const renderActionButton = () => {
+    const isGradeType = (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === openapiClientMaterialRunbox.CommandType.Grade;
+    const isGrading = isActionLoading || isLastCommandRunning && isGradeType;
     /**
      *
      */
-    var getActionTooltipMessage = function getActionTooltipMessage() {
+    const getActionTooltipMessage = () => {
       if (!isSubmitCountRemained) {
         return intl.formatMessage({
           id: 'runbox.action.submitCountInfo.tooltip.disabled'
@@ -235,99 +197,97 @@ var MaterialRunboxActionGrade = function MaterialRunboxActionGrade(_ref5) {
       }
       return '';
     };
-    return React__default["default"].createElement(material.Tooltip, {
+    return React.createElement(material.Tooltip, {
       title: getActionTooltipMessage(),
       placement: "bottom-end"
-    }, React__default["default"].createElement(material.ButtonGroup, {
+    }, React.createElement(material.ButtonGroup, {
       variant: "contained"
-    }, React__default["default"].createElement(StyledMainActionButton, {
+    }, React.createElement(StyledMainActionButton, {
       variant: "contained",
       loading: isGrading,
       disabled: !isRunboxRunning || isLastCommandRunning || !isSubmitCountRemained,
       size: "small",
       onClick: handleAction
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.action.grade.title"
-    })), React__default["default"].createElement(reactTransitionGroup.Transition, {
+    })), isGradeDoneWithOutput ? React.createElement(reactTransitionGroup.Transition, {
       in: isGradeDoneWithOutput,
       timeout: 0,
       mountOnEnter: true,
       unmountOnExit: true
-    }, function (state) {
-      return React__default["default"].createElement(StyledSubActionButton, {
-        size: "small",
-        disabled: isLastCommandRunning,
-        onClick: handleGradeResultDialogOpen,
-        style: TRANSITION_STYLE_MAP[state]
-      }, React__default["default"].createElement(material.Badge, {
-        color: "error",
-        variant: "dot",
-        invisible: !hasUnreadResult
-      }, React__default["default"].createElement(iconsMaterial.Terminal, {
-        fontSize: "small"
-      })));
-    })));
+    }, state => React.createElement(StyledSubActionButton, {
+      size: "small",
+      disabled: isLastCommandRunning,
+      onClick: handleGradeResultDialogOpen,
+      style: TRANSITION_STYLE_MAP[state]
+    }, React.createElement(material.Badge, {
+      color: "error",
+      variant: "dot",
+      invisible: !hasUnreadResult
+    }, React.createElement(iconsMaterial.Terminal, {
+      fontSize: "small"
+    })))) : null));
   };
   /**
    *
    */
-  var renderActionGradeResultDialog = function renderActionGradeResultDialog() {
+  const renderActionGradeResultDialog = () => {
     if ((lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) !== openapiClientMaterialRunbox.CommandType.Grade) {
       return null;
     }
-    return React__default["default"].createElement(material.Dialog, {
+    return React.createElement(material.Dialog, {
       open: isGradeResultDialogOpen,
       maxWidth: "md",
       fullWidth: true,
       onClose: handleGradeResultDialogClose
-    }, React__default["default"].createElement(material.DialogTitle, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(material.DialogTitle, null, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.action.grade.dialog.title"
-    })), React__default["default"].createElement(material.DialogContent, null, React__default["default"].createElement(material.Stack, {
+    })), React.createElement(material.DialogContent, null, React.createElement(material.Stack, {
       gap: "0.75rem"
-    }, lastCommand.terminatedReason === 'done' ? React__default["default"].createElement(material.Alert, {
+    }, lastCommand.terminatedReason === 'done' ? React.createElement(material.Alert, {
       severity: "success"
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.action.grade.dialog.description.success"
-    })) : React__default["default"].createElement(material.Alert, {
+    })) : React.createElement(material.Alert, {
       severity: "error"
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.action.grade.dialog.description.error"
-    })), React__default["default"].createElement(StyledTerminal, {
+    })), React.createElement(StyledTerminal, {
       value: lastCommand.output,
       readOnly: true,
       rows: 20
-    }))), React__default["default"].createElement(material.DialogActions, null, React__default["default"].createElement(material.Button, {
+    }))), React.createElement(material.DialogActions, null, React.createElement(material.Button, {
       color: "inherit",
       disabled: isActionLoading,
       onClick: handleGradeResultDialogClose
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.common.close"
     }))));
   };
   /**
    *
    */
-  var renderActionSubmitCountInfoDialog = function renderActionSubmitCountInfoDialog() {
-    return React__default["default"].createElement(material.Dialog, {
+  const renderActionSubmitCountInfoDialog = () => {
+    return React.createElement(material.Dialog, {
       fullWidth: true,
       maxWidth: "xs",
       open: isSubmitCountInfoDialogOpen,
       onClick: handleSubmitCountInfoDialogClose
-    }, React__default["default"].createElement(material.DialogTitle, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(material.DialogTitle, null, React.createElement(reactIntl.FormattedMessage, {
       id: "runbtox.action.submitCountInfo.dialog.title"
-    })), React__default["default"].createElement(material.DialogContent, null, React__default["default"].createElement(material.Typography, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    })), React.createElement(material.DialogContent, null, React.createElement(material.Typography, null, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.action.submitCountInfo.dialog.description"
-    }))), React__default["default"].createElement(material.DialogActions, null, React__default["default"].createElement(material.Button, {
+    }))), React.createElement(material.DialogActions, null, React.createElement(material.Button, {
       color: "inherit",
       onClick: handleSubmitCountInfoDialogClose
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.common.close"
     }))));
   };
   //
   //
   //
-  return React__default["default"].createElement(React__default["default"].Fragment, null, renderActionButton(), renderActionGradeResultDialog(), renderActionSubmitCountInfoDialog());
+  return React.createElement(React.Fragment, null, renderActionButton(), renderActionGradeResultDialog(), renderActionSubmitCountInfoDialog());
 };
 
-exports["default"] = MaterialRunboxActionGrade;
+exports.default = MaterialRunboxActionGrade;

package/cjs/components/material-runbox/actions/MaterialRunboxActionMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RuntimeProps } from '../runtime/Runtime';
+type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'courseId' | 'refetch'> & {
+    menuAnchorEl: null | HTMLButtonElement;
+    handleMenuClose: () => void;
+};
+declare const MaterialRunboxActionMenu: React.FC<MaterialRunboxActionMenuProps>;
+export default MaterialRunboxActionMenu;

package/cjs/components/material-runbox/actions/MaterialRunboxActionMenu.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var runboxClient = require('@elice/runbox-client');
+var material = require('@mui/material');
+var MaterialRunboxActionReset = require('./MaterialRunboxActionReset.js');
+var MaterialRunboxActionRestart = require('./MaterialRunboxActionRestart.js');
+var MaterialRunboxActionShare = require('./MaterialRunboxActionShare.js');
+
+//
+//
+//
+const MaterialRunboxActionMenu = ({
+  runbox,
+  runtime,
+  courseId,
+  menuAnchorEl,
+  refetch,
+  handleMenuClose
+}) => {
+  const {
+    status
+  } = runboxClient.useEliceRunboxRunning();
+  const isRunboxRunning = status === 'running';
+  //
+  //
+  //
+  React.useEffect(() => {
+    if (!isRunboxRunning) {
+      handleMenuClose();
+    }
+  }, [handleMenuClose, isRunboxRunning]);
+  //
+  //
+  //
+  return React.createElement(material.Menu, {
+    open: Boolean(menuAnchorEl),
+    anchorEl: menuAnchorEl,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    onClose: handleMenuClose
+  }, React.createElement(MaterialRunboxActionShare.default, {
+    handleMenuClose: handleMenuClose
+  }), React.createElement(MaterialRunboxActionRestart.default, {
+    runbox: runbox,
+    runtime: runtime,
+    courseId: courseId,
+    refetch: refetch,
+    handleMenuClose: handleMenuClose
+  }), React.createElement(MaterialRunboxActionReset.default, {
+    runtime: runtime,
+    courseId: courseId,
+    handleMenuClose: handleMenuClose
+  }));
+};
+
+exports.default = MaterialRunboxActionMenu;

package/cjs/components/material-runbox/actions/MaterialRunboxActionReset.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { RuntimeProps } from '../runtime/Runtime';
-type MaterialRunboxActionResetProps = Pick<RuntimeProps, 'runtime' | 'courseId'>;
+type MaterialRunboxActionResetProps = Pick<RuntimeProps, 'runtime' | 'courseId'> & {
+    handleMenuClose: () => void;
+};
 declare const MaterialRunboxActionReset: React.FC<MaterialRunboxActionResetProps>;
 export default MaterialRunboxActionReset;