@elice/material-exercise 1.260305.0 → 1.260430.0

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionSyncRequest.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var lab = require('@mui/lab');
+var useControllerActionSyncRequest = require('./useControllerActionSyncRequest.js');
+var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
+
+//
+//
+//
+var ControllerActionSyncRequest = function ControllerActionSyncRequest() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useControllerActionS = useControllerActionSyncRequest.useControllerActionSyncRequest(),
+    isHidden = _useControllerActionS.isHidden,
+    isDisabled = _useControllerActionS.isDisabled,
+    isLoading = _useControllerActionS.isLoading,
+    syncRequest = _useControllerActionS.syncRequest;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut.useExericseShortcut('RUNNER_SYNC_REQUEST', syncRequest);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsxRuntime.jsx(lab.LoadingButton, {
+    size: "small",
+    variant: "contained",
+    color: "secondary",
+    loading: isLoading,
+    disabled: isDisabled,
+    onClick: syncRequest,
+    children: intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
+    })
+  });
+};
+
+exports.default = ControllerActionSyncRequest;

package/cjs/components/material-exercise/exercise-runner/action/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ControllerActionCancel } from './ControllerActionCancel';
+export { default as ControllerActionGrade } from './ControllerActionGrade';
+export { default as ControllerActionRun } from './ControllerActionRun';
+export { default as ControllerActionSyncRequest } from './ControllerActionSyncRequest';
+export { useControllerActionRun } from './useControllerActionRun';

package/cjs/components/material-exercise/exercise-runner/action/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var ControllerActionCancel = require('./ControllerActionCancel.js');
+var ControllerActionGrade = require('./ControllerActionGrade.js');
+var ControllerActionRun = require('./ControllerActionRun.js');
+var ControllerActionSyncRequest = require('./ControllerActionSyncRequest.js');
+var useControllerActionRun = require('./useControllerActionRun.js');
+
+
+
+exports.ControllerActionCancel = ControllerActionCancel.default;
+exports.ControllerActionGrade = ControllerActionGrade.default;
+exports.ControllerActionRun = ControllerActionRun.default;
+exports.ControllerActionSyncRequest = ControllerActionSyncRequest.default;
+exports.useControllerActionRun = useControllerActionRun.useControllerActionRun;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionCancel.d.ts

@@ -0,0 +1,14 @@
+export interface UseControllerActionCancelReturn {
+    /** Whether the cancel button should be hidden. */
+    isHidden: boolean;
+    /** Whether the cancel button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the cancel button should show a loading indicator. */
+    isLoading: boolean;
+    /** Cancel the running exercise. */
+    cancel: () => void;
+}
+/**
+ * Provides state and handler for the exercise runner's "cancel" action.
+ */
+export declare const useControllerActionCancel: () => UseControllerActionCancelReturn;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionCancel.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var websocket = require('@elice/websocket');
+var recoil = require('recoil');
+var ExerciseRunnerContext = require('../ExerciseRunnerContext.js');
+var recoil$1 = require('../../context/recoil.js');
+var useExerciseFile = require('../../../../hooks/useExerciseFile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "cancel" action.
+ */
+var useControllerActionCancel = function useControllerActionCancel() {
+  var _return = React__default.default.useRef({});
+  var _React$useContext = React__default.default.useContext(ExerciseRunnerContext.ExerciseRunnerContext),
+    onCancel = _React$useContext.onCancel;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseWebSocketTotalStatusQuery([].concat(_rollupPluginBabelHelpers.toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === websocket.EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== websocket.EliceWebSocket.OPEN;
+  var isHidden = !isRunning;
+  var isDisabled = isHidden || isNotReady || isConnecting;
+  var isLoading = isConnecting;
+  /**
+   *
+   */
+  var cancel = React__default.default.useCallback(function () {
+    if (!isDisabled) {
+      onCancel();
+    }
+  }, [isDisabled, onCancel]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.cancel = cancel;
+  return _return.current;
+};
+
+exports.useControllerActionCancel = useControllerActionCancel;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionGrade.d.ts

@@ -0,0 +1,16 @@
+export interface UseControllerActionGradeReturn {
+    /** Whether the grade button should be hidden. */
+    isHidden: boolean;
+    /** Whether the grade button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the grade button should show a loading indicator. */
+    isLoading: boolean;
+    /** Whether grading is disallowed for this exercise (used to show tooltip). */
+    isNoGrade: boolean;
+    /** Submit the exercise to grade. Resolves when the submission completes. */
+    grade: () => Promise<void>;
+}
+/**
+ * Provides state and handler for the exercise runner's "grade" action.
+ */
+export declare const useControllerActionGrade: () => UseControllerActionGradeReturn;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionGrade.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var types = require('@elice/types');
+var websocket = require('@elice/websocket');
+var recoil = require('recoil');
+var ExerciseRunnerContext = require('../ExerciseRunnerContext.js');
+var recoil$1 = require('../../context/recoil.js');
+var context = require('../../context/context.js');
+var useExerciseFile = require('../../../../hooks/useExerciseFile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "grade" action.
+ */
+var useControllerActionGrade = function useControllerActionGrade() {
+  var _return = React__default.default.useRef({});
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var _React$useContext2 = React__default.default.useContext(ExerciseRunnerContext.ExerciseRunnerContext),
+    onSubmit = _React$useContext2.onSubmit;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseWebSocketTotalStatusQuery([].concat(_rollupPluginBabelHelpers.toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var exerciseRunType = recoil.useRecoilValue(recoil$1.exerciseRunnerRunTypeState);
+  var isNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
+  var lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test;
+  var isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed;
+  var isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === websocket.EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== websocket.EliceWebSocket.OPEN;
+  var isHidden = isRunning;
+  var isDisabled = isHidden || isNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting;
+  var isLoading = isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Grade;
+  /**
+   *
+   */
+  var grade = React__default.default.useCallback(/*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (isDisabled) {
+            _context.n = 1;
+            break;
+          }
+          _context.n = 1;
+          return onSubmit(types.enums.ExerciseRunType.Grade);
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), [isDisabled, onSubmit]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.isNoGrade = isNoGrade;
+  _return.current.grade = grade;
+  return _return.current;
+};
+
+exports.useControllerActionGrade = useControllerActionGrade;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionRun.d.ts

@@ -0,0 +1,14 @@
+export interface UseControllerActionRunReturn {
+    /** Whether the run button should be hidden. */
+    isHidden: boolean;
+    /** Whether the run button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the run button should show a loading indicator. */
+    isLoading: boolean;
+    /** Submit the exercise to run. Resolves when the submission completes. */
+    run: () => Promise<void>;
+}
+/**
+ * Provides state and handler for the exercise runner's "run" action.
+ */
+export declare const useControllerActionRun: () => UseControllerActionRunReturn;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionRun.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var types = require('@elice/types');
+var websocket = require('@elice/websocket');
+var recoil = require('recoil');
+var ExerciseRunnerContext = require('../ExerciseRunnerContext.js');
+var recoil$1 = require('../../context/recoil.js');
+var useExerciseFile = require('../../../../hooks/useExerciseFile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "run" action.
+ */
+var useControllerActionRun = function useControllerActionRun() {
+  var _return = React__default.default.useRef({});
+  var _React$useContext = React__default.default.useContext(ExerciseRunnerContext.ExerciseRunnerContext),
+    onSubmit = _React$useContext.onSubmit;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseWebSocketTotalStatusQuery([].concat(_rollupPluginBabelHelpers.toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var exerciseRunType = recoil.useRecoilValue(recoil$1.exerciseRunnerRunTypeState);
+  var isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === websocket.EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== websocket.EliceWebSocket.OPEN;
+  var isHidden = isRunning;
+  var isDisabled = isHidden || isNotReady || isConnecting || isSubmitting;
+  var isLoading = isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Run;
+  /**
+   *
+   */
+  var run = React__default.default.useCallback(/*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (isDisabled) {
+            _context.n = 1;
+            break;
+          }
+          _context.n = 1;
+          return onSubmit(types.enums.ExerciseRunType.Run);
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), [isDisabled, onSubmit]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.run = run;
+  return _return.current;
+};
+
+exports.useControllerActionRun = useControllerActionRun;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionSyncRequest.d.ts

@@ -0,0 +1,15 @@
+export interface UseControllerActionSyncRequestReturn {
+    /** Whether the sync-request button should be hidden. */
+    isHidden: boolean;
+    /** Whether the sync-request button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the sync-request button should show a loading indicator. */
+    isLoading: boolean;
+    /** Request the runner to sync the latest user code. */
+    syncRequest: () => void;
+}
+/**
+ * Provides state and handler for the exercise runner's "sync request" action,
+ * and forwards file-editor save actions to the same handler.
+ */
+export declare const useControllerActionSyncRequest: () => UseControllerActionSyncRequestReturn;

package/cjs/components/material-exercise/exercise-runner/action/useControllerActionSyncRequest.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var websocket = require('@elice/websocket');
+var recoil = require('recoil');
+var ExerciseRunnerContext = require('../ExerciseRunnerContext.js');
+var context = require('../../context/context.js');
+var recoil$1 = require('../../context/recoil.js');
+var useExerciseFile = require('../../../../hooks/useExerciseFile.js');
+var subjects = require('../../context/subjects.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "sync request" action,
+ * and forwards file-editor save actions to the same handler.
+ */
+var useControllerActionSyncRequest = function useControllerActionSyncRequest() {
+  var _a;
+  var _return = React__default.default.useRef({});
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var _React$useContext2 = React__default.default.useContext(ExerciseRunnerContext.ExerciseRunnerContext),
+    onSyncRequest = _React$useContext2.onSyncRequest;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseWebSocketTotalStatusQuery([].concat(_rollupPluginBabelHelpers.toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === websocket.EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== websocket.EliceWebSocket.OPEN;
+  var isHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
+  var isDisabled = isHidden || isNotReady || isConnecting;
+  var isLoading = isConnecting;
+  /**
+   *
+   */
+  var syncRequest = React__default.default.useCallback(function () {
+    if (!isDisabled) {
+      onSyncRequest();
+    }
+  }, [isDisabled, onSyncRequest]);
+  //
+  //
+  //
+  React__default.default.useEffect(function () {
+    var saveActionSub = subjects.exerciseFileEditorSaveAction$.subscribe(syncRequest);
+    return function () {
+      saveActionSub.unsubscribe();
+    };
+  }, [syncRequest]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.syncRequest = syncRequest;
+  return _return.current;
+};
+
+exports.useControllerActionSyncRequest = useControllerActionSyncRequest;

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionGuideDialog.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoConnectionGuideDialog: React.VFC;
+export default ArduinoConnectionGuideDialog;

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionGuideDialog.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var mcuBridge = require('@elice/mcu-bridge');
+var ArrowUpwardIcon = require('@mui/icons-material/ArrowUpward');
+var Alert = require('@mui/material/Alert');
+var Dialog = require('@mui/material/Dialog');
+var DialogActions = require('@mui/material/DialogActions');
+var DialogContent = require('@mui/material/DialogContent');
+var DialogTitle = require('@mui/material/DialogTitle');
+var Stack = require('@mui/material/Stack');
+var Typography = require('@mui/material/Typography');
+var _context = require('./_context.js');
+var ArduinoConnectionGuideDialogNativeMock = require('./ArduinoConnectionGuideDialogNativeMock.js');
+var ArduinoConnectionGuideDialogSteps = require('./ArduinoConnectionGuideDialogSteps.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var ArrowUpwardIcon__default = /*#__PURE__*/_interopDefaultCompat(ArrowUpwardIcon);
+var Alert__default = /*#__PURE__*/_interopDefaultCompat(Alert);
+var Dialog__default = /*#__PURE__*/_interopDefaultCompat(Dialog);
+var DialogActions__default = /*#__PURE__*/_interopDefaultCompat(DialogActions);
+var DialogContent__default = /*#__PURE__*/_interopDefaultCompat(DialogContent);
+var DialogTitle__default = /*#__PURE__*/_interopDefaultCompat(DialogTitle);
+var Stack__default = /*#__PURE__*/_interopDefaultCompat(Stack);
+var Typography__default = /*#__PURE__*/_interopDefaultCompat(Typography);
+
+//
+//
+//
+var ACCENT = '#7353ea';
+var PREVIEW_BG = '#f6f8fb';
+var PREVIEW_BORDER = '#e9ebf0';
+//
+//
+//
+var ArduinoConnectionGuideDialog = function ArduinoConnectionGuideDialog() {
+  var intl$1 = intl.useRawEliceIntl();
+  var phase = mcuBridge.usePermissionPhase();
+  var _useArduinoBridge = _context.useArduinoBridge(),
+    connectionIntent = _useArduinoBridge.connectionIntent;
+  var open = phase === 'requesting';
+  var isUpload = connectionIntent === 'upload';
+  /**
+   *
+   */
+  var renderTitle = function renderTitle() {
+    return intl$1.formatMessage({
+      id: isUpload ? 'exerciseRunner.arduino.connectGuide.title.upload' : 'exerciseRunner.arduino.connectGuide.title.connect'
+    });
+  };
+  /**
+   *
+   */
+  var renderUploadNotice = function renderUploadNotice() {
+    if (!isUpload) {
+      return null;
+    }
+    return jsxRuntime.jsx(Alert__default.default, {
+      severity: "info",
+      variant: "outlined",
+      icon: false,
+      children: intl$1.formatMessage({
+        id: 'exerciseRunner.arduino.connectGuide.upload.note'
+      })
+    });
+  };
+  /**
+   *
+   */
+  var renderPreview = function renderPreview() {
+    return jsxRuntime.jsxs(Stack__default.default, {
+      alignItems: "center",
+      spacing: 1.25,
+      sx: {
+        bgcolor: PREVIEW_BG,
+        border: "1px solid ".concat(PREVIEW_BORDER),
+        borderRadius: '10px',
+        p: '14px'
+      },
+      children: [jsxRuntime.jsxs(Stack__default.default, {
+        direction: "row",
+        spacing: 0.75,
+        alignItems: "center",
+        sx: {
+          color: ACCENT
+        },
+        children: [jsxRuntime.jsx(ArrowUpwardIcon__default.default, {
+          sx: {
+            fontSize: 11
+          }
+        }), jsxRuntime.jsx(Typography__default.default, {
+          sx: {
+            fontSize: 12,
+            fontWeight: 700,
+            letterSpacing: '-.01em',
+            color: ACCENT
+          },
+          children: intl$1.formatMessage({
+            id: 'exerciseRunner.arduino.connectGuide.preview.label'
+          })
+        })]
+      }), jsxRuntime.jsx(ArduinoConnectionGuideDialogNativeMock.default, {})]
+    });
+  };
+  /**
+   *
+   */
+  var renderActions = function renderActions() {
+    return jsxRuntime.jsx(DialogActions__default.default, {
+      sx: {
+        justifyContent: 'flex-start',
+        px: 3,
+        py: 2
+      },
+      children: jsxRuntime.jsx(Typography__default.default, {
+        variant: "caption",
+        color: "text.secondary",
+        children: intl$1.formatMessage({
+          id: 'exerciseRunner.arduino.connectGuide.footer'
+        })
+      })
+    });
+  };
+  //
+  //
+  //
+  // No onClose: open state is fully derived from the picker phase.
+  return jsxRuntime.jsxs(Dialog__default.default, {
+    disableEnforceFocus: true,
+    hideBackdrop: true,
+    fullWidth: true,
+    open: open,
+    maxWidth: "sm",
+    sx: {
+      pointerEvents: 'none'
+    },
+    PaperProps: {
+      sx: {
+        pointerEvents: 'auto'
+      }
+    },
+    children: [jsxRuntime.jsx(DialogTitle__default.default, {
+      children: renderTitle()
+    }), jsxRuntime.jsx(DialogContent__default.default, {
+      children: jsxRuntime.jsxs(Stack__default.default, {
+        spacing: 2,
+        children: [renderUploadNotice(), jsxRuntime.jsx(Typography__default.default, {
+          variant: "body2",
+          color: "text.secondary",
+          children: intl$1.formatMessage({
+            id: 'exerciseRunner.arduino.connectGuide.body'
+          })
+        }), renderPreview(), jsxRuntime.jsx(ArduinoConnectionGuideDialogSteps.default, {})]
+      })
+    }), renderActions()]
+  });
+};
+
+exports.default = ArduinoConnectionGuideDialog;

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionGuideDialogNativeMock.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoConnectionGuideDialogNativeMock: React.VFC;
+export default ArduinoConnectionGuideDialogNativeMock;