@elice/material-runbox 1.231227.0 → 1.231228.0

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useEliceRunboxRunning } from '@elice/runbox-client';
+import { Menu } from '@mui/material';
+import MaterialRunboxActionReset from './MaterialRunboxActionReset.js';
+import MaterialRunboxActionRestart from './MaterialRunboxActionRestart.js';
+import MaterialRunboxActionShare from './MaterialRunboxActionShare.js';
+
+//
+//
+//
+const MaterialRunboxActionMenu = ({
+  runbox,
+  runtime,
+  courseId,
+  menuAnchorEl,
+  refetch,
+  handleMenuClose
+}) => {
+  const {
+    status
+  } = useEliceRunboxRunning();
+  const isRunboxRunning = status === 'running';
+  //
+  //
+  //
+  React.useEffect(() => {
+    if (!isRunboxRunning) {
+      handleMenuClose();
+    }
+  }, [handleMenuClose, isRunboxRunning]);
+  //
+  //
+  //
+  return React.createElement(Menu, {
+    open: Boolean(menuAnchorEl),
+    anchorEl: menuAnchorEl,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    onClose: handleMenuClose
+  }, React.createElement(MaterialRunboxActionShare, {
+    handleMenuClose: handleMenuClose
+  }), React.createElement(MaterialRunboxActionRestart, {
+    runbox: runbox,
+    runtime: runtime,
+    courseId: courseId,
+    refetch: refetch,
+    handleMenuClose: handleMenuClose
+  }), React.createElement(MaterialRunboxActionReset, {
+    runtime: runtime,
+    courseId: courseId,
+    handleMenuClose: handleMenuClose
+  }));
+};
+
+export { MaterialRunboxActionMenu as default };

package/es/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;

package/es/components/material-runbox/actions/MaterialRunboxActionReset.js

@@ -1,11 +1,11 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { useSnackbar } from '@elice/mui-x-snackbar';
 import { CommandType } from '@elice/openapi-client-material-runbox';
-import { useEliceRunboxRunning } from '@elice/runbox-client';
+import { faRefresh } from '@fortawesome/pro-solid-svg-icons';
 import { LoadingButton } from '@mui/lab';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
-import { useSnackbar } from 'notistack';
+import { MenuItem, ListItemIcon, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
 import { useMaterialRunboxApiContext } from '../contexts/MaterialRunboxApiContext.js';
 import { useMaterialRunboxCommandContext } from '../contexts/MaterialRunboxCommandContext.js';
 import '../contexts/MaterialRunboxContext.js';
@@ -13,114 +13,81 @@ import '../contexts/MaterialRunboxContext.js';
 //
 //
 //
-var MaterialRunboxActionReset = function MaterialRunboxActionReset(_ref) {
-  var runtime = _ref.runtime,
-    courseId = _ref.courseId;
-  var _useSnackbar = useSnackbar(),
-    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
-  var intl = useIntl();
-  var materialRunboxApi = useMaterialRunboxApiContext();
-  var _useMaterialRunboxCom = useMaterialRunboxCommandContext(),
-    isLastCommandRunning = _useMaterialRunboxCom.isLastCommandRunning,
-    lastCommand = _useMaterialRunboxCom.lastCommand,
-    setCommandIdToPing = _useMaterialRunboxCom.setCommandIdToPing;
-  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status;
-  var isRunboxRunning = status === 'running';
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isConfirmDialogOpen = _React$useState2[0],
-    setConfirmDialogOpen = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isActionLoading = _React$useState4[0],
-    setActionLoading = _React$useState4[1];
+const MaterialRunboxActionReset = ({
+  runtime,
+  courseId,
+  handleMenuClose
+}) => {
+  const intl = useIntl();
+  const {
+    enqueueSnackbar
+  } = useSnackbar();
+  const materialRunboxApi = useMaterialRunboxApiContext();
+  const [isLoading, setLoading] = React.useState(false);
+  const [isDialogOpened, setDialogOpened] = React.useState(false);
+  const {
+    isLastCommandRunning,
+    setCommandIdToPing
+  } = useMaterialRunboxCommandContext();
   /**
    *
    */
-  var handleConfirmDialogOpen = function handleConfirmDialogOpen() {
-    setConfirmDialogOpen(true);
+  const handleDialogClose = () => {
+    setDialogOpened(false);
   };
   /**
    *
    */
-  var handleConfirmDialogClose = function handleConfirmDialogClose() {
-    setConfirmDialogOpen(false);
-  };
-  /**
-   *
-   */
-  var handleAction = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var runtimeId, _yield$materialRunbox, commentId;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setActionLoading(true);
-            _context.prev = 1;
-            runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
-            _context.next = 5;
-            return materialRunboxApi.runtime.runtimeRuntimeIdCommandPost({
-              runtimeId: runtimeId,
-              eliceCourseId: courseId,
-              runboxCommandPostRequest: {
-                commandType: CommandType.ProjectFileReset
-              }
-            });
-          case 5:
-            _yield$materialRunbox = _context.sent;
-            commentId = _yield$materialRunbox.id;
-            setCommandIdToPing(commentId);
-            handleConfirmDialogClose();
-            _context.next = 14;
-            break;
-          case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](1);
-            enqueueSnackbar(intl.formatMessage({
-              id: 'runbox.action.reset.noti.error'
-            }), {
-              variant: 'error'
-            });
-          case 14:
-            _context.prev = 14;
-            setActionLoading(false);
-            return _context.finish(14);
-          case 17:
-          case "end":
-            return _context.stop();
+  const handleReset = async () => {
+    setLoading(true);
+    try {
+      const runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
+      const {
+        id: commentId
+      } = await materialRunboxApi.runtime.runtimeRuntimeIdCommandPost({
+        runtimeId,
+        eliceCourseId: courseId,
+        runboxCommandPostRequest: {
+          commandType: CommandType.ProjectFileReset
         }
-      }, _callee, null, [[1, 11, 14, 17]]);
-    }));
-    return function handleAction() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+      });
+      setCommandIdToPing(commentId);
+      handleDialogClose();
+    } catch (err) {
+      enqueueSnackbar(intl.formatMessage({
+        id: 'runbox.action.reset.noti.error'
+      }), {
+        variant: 'error'
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
   /**
    *
    */
-  var renderActionButton = function renderActionButton() {
-    var isResetType = (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === CommandType.ProjectFileReset;
-    return React.createElement(LoadingButton, {
-      variant: "contained",
-      color: "inherit",
-      loading: isActionLoading || isLastCommandRunning && isResetType,
-      disabled: !isRunboxRunning || isLastCommandRunning,
-      size: "small",
-      onClick: handleConfirmDialogOpen
-    }, React.createElement(FormattedMessage, {
+  const renderResetMenuItem = () => {
+    return React.createElement(MenuItem, {
+      onClick: () => setDialogOpened(true),
+      disabled: isLastCommandRunning
+    }, React.createElement(ListItemIcon, null, React.createElement(EliceIcon, {
+      icon: faRefresh
+    })), React.createElement(ListItemText, null, React.createElement(FormattedMessage, {
       id: "runbox.action.reset.title"
-    }));
+    })));
   };
   /**
    *
    */
-  var renderActionConfirmDialog = function renderActionConfirmDialog() {
+  const renderConfirmDialog = () => {
+    if (!isDialogOpened) {
+      return null;
+    }
     return React.createElement(Dialog, {
-      open: isConfirmDialogOpen,
+      open: true,
       maxWidth: "xs",
       fullWidth: true,
-      onClose: handleConfirmDialogClose
+      onClose: handleDialogClose
     }, React.createElement(DialogTitle, null, React.createElement(FormattedMessage, {
       id: "runbox.action.reset.title"
     })), React.createElement(DialogContent, null, React.createElement(DialogContentText, {
@@ -131,15 +98,15 @@ var MaterialRunboxActionReset = function MaterialRunboxActionReset(_ref) {
       id: "runbox.action.reset.dialog.description"
     }))), React.createElement(DialogActions, null, React.createElement(Button, {
       color: "inherit",
-      disabled: isActionLoading,
-      onClick: handleConfirmDialogClose
+      disabled: isLoading,
+      onClick: handleDialogClose
     }, React.createElement(FormattedMessage, {
       id: "runbox.common.close"
     })), React.createElement(LoadingButton, {
       variant: "contained",
       color: "warning",
-      loading: isActionLoading,
-      onClick: handleAction
+      loading: isLoading || isLastCommandRunning,
+      onClick: handleReset
     }, React.createElement(FormattedMessage, {
       id: "runbox.action.reset.dialog.actions.confirm"
     }))));
@@ -147,7 +114,7 @@ var MaterialRunboxActionReset = function MaterialRunboxActionReset(_ref) {
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderActionButton(), renderActionConfirmDialog());
+  return React.createElement(React.Fragment, null, renderResetMenuItem(), renderConfirmDialog());
 };
 
 export { MaterialRunboxActionReset as default };

package/es/components/material-runbox/actions/MaterialRunboxActionRestart.d.ts

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

package/es/components/material-runbox/actions/MaterialRunboxActionRestart.js

@@ -1,83 +1,71 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { useEliceRunboxRunning } from '@elice/runbox-client';
-import { RestartAlt } from '@mui/icons-material';
+import { FormattedMessage } from 'react-intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { faRotateRight } from '@fortawesome/pro-solid-svg-icons';
 import { LoadingButton } from '@mui/lab';
-import { Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
+import { MenuItem, ListItemIcon, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
 import { useRunboxControl } from '../hooks/useRunboxControl.js';
 
 //
 //
 //
-var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
-  var runbox = _ref.runbox,
-    courseId = _ref.courseId,
-    refetch = _ref.refetch;
-  var intl = useIntl();
-  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status;
-  var _useRunboxControl = useRunboxControl({
-      runbox: runbox,
-      courseId: courseId,
-      refetch: refetch
-    }),
-    start = _useRunboxControl.start;
-  var isRunboxRunning = status === 'running';
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isConfirmDialogOpen = _React$useState2[0],
-    setConfirmDialogOpen = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isActionLoading = _React$useState4[0],
-    setActionLoading = _React$useState4[1];
+const MaterialRunboxActionRestart = ({
+  runbox,
+  courseId,
+  refetch,
+  handleMenuClose
+}) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDialogOpened, setDialogOpened] = React.useState(false);
+  // restart
+  const {
+    start
+  } = useRunboxControl({
+    runbox,
+    courseId,
+    refetch
+  });
   /**
    *
    */
-  var handleConfirmDialogOpen = function handleConfirmDialogOpen() {
-    setConfirmDialogOpen(true);
+  const handleDialogClose = () => {
+    setDialogOpened(false);
   };
   /**
    *
    */
-  var handleConfirmDialogClose = function handleConfirmDialogClose() {
-    setConfirmDialogOpen(false);
-  };
-  /**
-   *
-   */
-  var handleAction = function handleAction() {
-    setActionLoading(true);
-    start(true).catch(function () {
-      return void 0;
-    }).finally(function () {
-      setActionLoading(false);
-      handleConfirmDialogClose();
+  const handleRestartAction = () => {
+    setIsLoading(true);
+    start(true).catch(() => void 0).finally(() => {
+      handleDialogClose();
+      handleMenuClose();
+      setIsLoading(false);
     });
   };
   /**
    *
    */
-  var renderActionButton = function renderActionButton() {
-    return React.createElement(Tooltip, {
-      title: intl.formatMessage({
-        id: 'runbox.action.restart.title'
-      })
-    }, React.createElement(IconButton, {
-      disabled: !isRunboxRunning,
-      onClick: handleConfirmDialogOpen
-    }, React.createElement(RestartAlt, null)));
+  const renderRestartMenuItem = () => {
+    return React.createElement(MenuItem, {
+      onClick: () => setDialogOpened(true)
+    }, React.createElement(ListItemIcon, null, React.createElement(EliceIcon, {
+      icon: faRotateRight
+    })), React.createElement(ListItemText, null, React.createElement(FormattedMessage, {
+      id: "runbox.action.restart.title"
+    })));
   };
   /**
    *
    */
-  var renderActionConfirmDialog = function renderActionConfirmDialog() {
+  const renderConfirmDialog = () => {
+    if (!isDialogOpened) {
+      return null;
+    }
     return React.createElement(Dialog, {
-      open: isConfirmDialogOpen,
       maxWidth: "xs",
+      open: true,
       fullWidth: true,
-      onClose: handleConfirmDialogClose
+      onClose: handleDialogClose
     }, React.createElement(DialogTitle, null, React.createElement(FormattedMessage, {
       id: "runbox.action.restart.title"
     })), React.createElement(DialogContent, null, React.createElement(DialogContentText, {
@@ -88,15 +76,15 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
       id: "runbox.action.restart.dialog.description"
     }))), React.createElement(DialogActions, null, React.createElement(Button, {
       color: "inherit",
-      disabled: isActionLoading,
-      onClick: handleConfirmDialogClose
+      disabled: isLoading,
+      onClick: handleDialogClose
     }, React.createElement(FormattedMessage, {
       id: "runbox.common.close"
     })), React.createElement(LoadingButton, {
       variant: "contained",
       color: "warning",
-      loading: isActionLoading,
-      onClick: handleAction
+      loading: isLoading,
+      onClick: handleRestartAction
     }, React.createElement(FormattedMessage, {
       id: "runbox.action.restart.dialog.actions.confirm"
     }))));
@@ -104,7 +92,7 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderActionButton(), renderActionConfirmDialog());
+  return React.createElement(React.Fragment, null, renderRestartMenuItem(), renderConfirmDialog());
 };
 
 export { MaterialRunboxActionRestart as default };

package/es/components/material-runbox/actions/MaterialRunboxActionShare.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const MaterialRunboxActionShare: React.FC;
+interface MaterialRunboxActionShareProps {
+    handleMenuClose: () => void;
+}
+declare const MaterialRunboxActionShare: React.FC<MaterialRunboxActionShareProps>;
 export default MaterialRunboxActionShare;

package/es/components/material-runbox/actions/MaterialRunboxActionShare.js

@@ -1,61 +1,91 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import { useIntl } from 'react-intl';
+import { useIntl, FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from 'react-use';
+import { EliceIcon } from '@elice/mui-elements';
+import { useSnackbar } from '@elice/mui-x-snackbar';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
-import { Check, Link } from '@mui/icons-material';
-import { Tooltip, IconButton } from '@mui/material';
+import { faLinkSimple } from '@fortawesome/pro-solid-svg-icons';
+import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
+import '../contexts/MaterialRunboxApiContext.js';
+import '../contexts/MaterialRunboxCommandContext.js';
+import { useMaterialRunboxContext } from '../contexts/MaterialRunboxContext.js';
 
 //
 //
 //
-var MaterialRunboxActionShare = function MaterialRunboxActionShare() {
-  var intl = useIntl();
-  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status,
-    url = _useEliceRunboxRunnin.url;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isClipboardCopied = _React$useState2[0],
-    setClipboardCopied = _React$useState2[1];
-  var _useCopyToClipboard = useCopyToClipboard(),
-    _useCopyToClipboard2 = _slicedToArray(_useCopyToClipboard, 2),
-    clipboardValue = _useCopyToClipboard2[0].value,
-    copy = _useCopyToClipboard2[1];
-  var isRunboxRunning = status === 'running';
+const MaterialRunboxActionShare = ({
+  handleMenuClose
+}) => {
+  const intl = useIntl();
+  const {
+    enqueueSnackbar
+  } = useSnackbar();
+  const {
+    enableUrlShare
+  } = useMaterialRunboxContext();
+  const {
+    url
+  } = useEliceRunboxRunning();
+  const [{
+    value: clipboardValue,
+    error
+  }, copy] = useCopyToClipboard();
+  const [isClipboardCopied, setClipboardCopied] = React.useState(false);
   /**
    *
    */
-  var handleAction = function handleAction() {
+  const renderShareMenuItem = () => {
+    if (!enableUrlShare) {
+      return null;
+    }
+    return React.createElement(MenuItem, {
+      disabled: !url,
+      onClick: handleShareAction
+    }, React.createElement(ListItemIcon, null, React.createElement(EliceIcon, {
+      icon: faLinkSimple
+    })), React.createElement(ListItemText, null, React.createElement(FormattedMessage, {
+      id: "runbox.action.share.title"
+    })));
+  };
+  /**
+   *
+   */
+  const handleShareAction = () => {
     if (url) {
       copy(url);
+      if (!error) {
+        handleMenuClose();
+        setClipboardCopied(true);
+      }
     }
   };
   //
   //
   //
-  React.useEffect(function () {
-    setClipboardCopied(Boolean(clipboardValue));
-    var timeoutId = setTimeout(function () {
-      return setClipboardCopied(false);
-    }, 2000);
-    return function () {
-      clearTimeout(timeoutId);
-    };
-  }, [clipboardValue]);
+  React.useEffect(() => {
+    if (!isClipboardCopied) {
+      return;
+    }
+    if (clipboardValue && !error) {
+      enqueueSnackbar(intl.formatMessage({
+        id: 'runbox.action.share.snackbar.copied.success'
+      }), {
+        variant: 'success'
+      });
+    } else {
+      enqueueSnackbar(intl.formatMessage({
+        id: 'runbox.action.share.snackbar.copied.fail'
+      }), {
+        variant: 'error'
+      });
+    }
+    setClipboardCopied(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isClipboardCopied]);
   //
   //
   //
-  return React.createElement(Tooltip, {
-    title: isClipboardCopied ? intl.formatMessage({
-      id: 'runbox.action.share.tooltip.copied'
-    }) : intl.formatMessage({
-      id: 'runbox.action.share.title'
-    })
-  }, React.createElement(IconButton, {
-    disabled: !isRunboxRunning || !url,
-    onClick: handleAction
-  }, isClipboardCopied ? React.createElement(Check, null) : React.createElement(Link, null)));
+  return renderShareMenuItem();
 };
 
 export { MaterialRunboxActionShare as default };

package/es/components/material-runbox/contexts/MaterialRunboxApiContext.js

@@ -1,40 +1,33 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { RunboxApi, RuntimeApi, RuntimeTemplateApi } from '@elice/openapi-client-material-runbox';
 
 //
 //
 //
-var MaterialRunboxApiContext = React.createContext({});
-var useMaterialRunboxApiContext = function useMaterialRunboxApiContext() {
+const MaterialRunboxApiContext = React.createContext({});
+const useMaterialRunboxApiContext = () => {
   return React.useContext(MaterialRunboxApiContext);
 };
 //
 //
 //
-var MaterialRunboxApiContextProvider = function MaterialRunboxApiContextProvider(_ref) {
-  var children = _ref.children,
-    eliceMaterialRunboxApiConfiguration = _ref.eliceMaterialRunboxApiConfiguration;
-  var createMaterialRunboxApi = function createMaterialRunboxApi() {
-    return Object.freeze({
-      runbox: new RunboxApi(eliceMaterialRunboxApiConfiguration),
-      runtime: new RuntimeApi(eliceMaterialRunboxApiConfiguration),
-      runtimeTemplate: new RuntimeTemplateApi(eliceMaterialRunboxApiConfiguration)
-    });
-  };
+const MaterialRunboxApiContextProvider = ({
+  children,
+  eliceMaterialRunboxApiConfiguration
+}) => {
+  const createMaterialRunboxApi = () => Object.freeze({
+    runbox: new RunboxApi(eliceMaterialRunboxApiConfiguration),
+    runtime: new RuntimeApi(eliceMaterialRunboxApiConfiguration),
+    runtimeTemplate: new RuntimeTemplateApi(eliceMaterialRunboxApiConfiguration)
+  });
   //
   //
   //
-  var _React$useState = React.useState(createMaterialRunboxApi),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    materialRunboxApi = _React$useState2[0],
-    setMaterialRunboxApi = _React$useState2[1];
+  const [materialRunboxApi, setMaterialRunboxApi] = React.useState(createMaterialRunboxApi);
   //
   //
   //
-  React.useEffect(function () {
-    return setMaterialRunboxApi(createMaterialRunboxApi);
-  },
+  React.useEffect(() => setMaterialRunboxApi(createMaterialRunboxApi),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [eliceMaterialRunboxApiConfiguration]);
   //