@elice/material-runbox 1.260825.0-runboxusability.1 → 1.260826.0

package/es/components/material-runbox/timer/MaterialRunboxTimerDetailPopover.js

@@ -9,12 +9,13 @@ import { useEliceRunboxQuota } from '@elice/runbox-client';
 import { faXmarkLarge } from '@fortawesome/pro-regular-svg-icons';
 import { Popover, Stack, Card, Divider, Button, FormControlLabel, Typography, Checkbox, IconButton } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
-import { QUOTA_ALMOST_END_MINUTES, QUOTA_PER_SESSION_ALMOST_END_MINUTES } from '../hooks/useRunboxSessionEndWarning.js';
-import MaterialRunboxQuotaAmount from './MaterialRunboxQuotaAmount.js';
+import { getTimeParts } from '../../../utils/time.js';
 
 //
 //
 //
+var QUOTA_ALMOST_END_MINUTES = 30;
+var QUOTA_PER_SESSION_ALMOST_END_MINUTES = 10;
 var QUOTA_POPOVER_NOT_SHOW_ON_START = 'MaterialRunboxTimer.timerDetailPopover.notShowOnStart';
 //
 //
@@ -113,6 +114,48 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       })]
     });
   };
+  /**
+   *
+   */
+  var formatTimePart = function formatTimePart(value, unit) {
+    return intl.formatNumber(value, {
+      style: 'unit',
+      unit: unit,
+      unitDisplay: 'short'
+    });
+  };
+  /**
+   *
+   */
+  var renderQuotaTimePart = function renderQuotaTimePart(value, unit, color) {
+    if (value === 0) {
+      return null;
+    }
+    var parts = intl.formatNumberToParts(value, {
+      style: 'unit',
+      unit: unit,
+      unitDisplay: 'short'
+    });
+    return jsx(Typography, {
+      component: "span",
+      variant: "h5",
+      fontWeight: "extraBold",
+      color: color,
+      children: parts.map(function (part, index) {
+        if (part.type === 'unit') {
+          return jsx(Typography, {
+            component: "span",
+            variant: "body2",
+            fontWeight: "regular",
+            children: part.value
+          }, index);
+        }
+        return jsx("span", {
+          children: part.value
+        }, index);
+      })
+    });
+  };
   /**
    *
    */
@@ -138,6 +181,13 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
+    // Sync UI with the timer.
+    var _getTimeParts = getTimeParts(quotaInfo.remainingQuota * 60),
+      remainingHours = _getTimeParts.hours,
+      remainingMinutes = _getTimeParts.minutes;
+    var _getTimeParts2 = getTimeParts(quotaInfo.quota * 60),
+      totalHours = _getTimeParts2.hours,
+      totalMinutes = _getTimeParts2.minutes;
     var quotaColor = quotaInfo.remainingQuota > QUOTA_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
     var quotaBgColor = quotaInfo.remainingQuota > QUOTA_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxs(Stack, {
@@ -151,10 +201,15 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl.formatMessage({
           id: 'runbox.timer.popover.quota.title'
         })
-      }), jsx(MaterialRunboxQuotaAmount, {
-        remainingQuota: quotaInfo.remainingQuota,
-        quota: quotaInfo.quota,
-        color: quotaColor
+      }), jsxs(Typography, {
+        variant: "body2",
+        children: [jsxs(Stack, {
+          component: "span",
+          display: "inline-flex",
+          direction: "row",
+          gap: "0.25rem",
+          children: [renderQuotaTimePart(remainingHours, 'hour', quotaColor), renderQuotaTimePart(remainingMinutes, 'minute', quotaColor)]
+        }), [" / ", totalHours > 0 ? formatTimePart(totalHours, 'hour') : null, totalMinutes > 0 ? formatTimePart(totalMinutes, 'minute') : null].filter(Boolean).join(' ')]
       })]
     });
   };
@@ -173,6 +228,12 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
+    var _getTimeParts3 = getTimeParts(quotaPerSessionInfo.remainingQuota * 60),
+      remainingHours = _getTimeParts3.hours,
+      remainingMinutes = _getTimeParts3.minutes;
+    var _getTimeParts4 = getTimeParts(quotaPerSessionInfo.quota * 60),
+      totalHours = _getTimeParts4.hours,
+      totalMinutes = _getTimeParts4.minutes;
     var perSessionColor = quotaPerSessionInfo.remainingQuota > QUOTA_PER_SESSION_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
     var perSessionBgColor = quotaPerSessionInfo.remainingQuota > QUOTA_PER_SESSION_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxs(Stack, {
@@ -186,21 +247,22 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.title'
         })
-      }), jsx(MaterialRunboxQuotaAmount, {
-        remainingQuota: quotaPerSessionInfo.remainingQuota,
-        quota: quotaPerSessionInfo.quota,
-        color: perSessionColor
+      }), jsxs(Typography, {
+        variant: "body2",
+        children: [jsxs(Stack, {
+          component: "span",
+          display: "inline-flex",
+          direction: "row",
+          gap: "0.25rem",
+          children: [renderQuotaTimePart(remainingHours, 'hour', perSessionColor), renderQuotaTimePart(remainingMinutes, 'minute', perSessionColor)]
+        }), [" / ", totalHours > 0 ? formatTimePart(totalHours, 'hour') : null, totalMinutes > 0 ? formatTimePart(totalMinutes, 'minute') : null].filter(Boolean).join(' ')]
       }), jsx(Typography, {
         variant: "body2",
         color: "text.tertiary",
         children: intl.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.description'
         }, {
-          time: intl.formatNumber(quotaPerSessionInfo.quota, {
-            style: 'unit',
-            unit: 'minute',
-            unitDisplay: 'short'
-          })
+          time: formatTimePart(quotaPerSessionInfo.quota, 'minute')
         })
       })]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-runbox",
-  "version": "1.260825.0-runboxusability.1",
+  "version": "1.260826.0",
   "description": "User view and editing components of Elice material runbox",
   "repository": {
     "type": "git",
@@ -20,8 +20,8 @@
   "peerDependencies": {
     "@elice/api-client": "^1",
     "@elice/intl": "^0",
-    "@elice/material-shared-types": "1.260825.0-runboxusability.1",
-    "@elice/material-shared-utils": "1.260825.0-runboxusability.1",
+    "@elice/material-shared-types": "1.260826.0",
+    "@elice/material-shared-utils": "1.260826.0",
     "@elice/mui-elements": "^5",
     "@elice/mui-system": "^5",
     "@elice/mui-x-snackbar": "^5",
@@ -51,12 +51,12 @@
   "devDependencies": {
     "@elice/api-client": "1.260529.0",
     "@elice/intl": "0.260526.0",
-    "@elice/material-shared-types": "1.260825.0-runboxusability.1",
-    "@elice/material-shared-utils": "1.260825.0-runboxusability.1",
+    "@elice/material-shared-types": "1.260826.0",
+    "@elice/material-shared-utils": "1.260826.0",
     "@elice/mui-elements": "5.251204.0",
     "@elice/mui-system": "5.251204.0",
     "@elice/mui-x-snackbar": "^5.250108.0-controllabel.0",
-    "@elice/openapi-client-material-runbox": "1.260727.0",
+    "@elice/openapi-client-material-runbox": "1.250821.0",
     "@elice/rollup-config": "^1.260406.0",
     "@elice/runbox-client": "^1.250828.0",
     "@elice/types": "1.260608.0",

package/cjs/components/material-runbox/hooks/useOnlineState.d.ts

@@ -1,12 +0,0 @@
-/**
- * Whether the browser currently has a network connection.
- *
- * NOTICE: this deliberately does not use `react-use`'s `useNetworkState`.
- * That hook only exists in react-use v17, and consumers of this package do not
- * agree on the major — elice-web still resolves v13, which breaks the build at
- * link time. Reading `navigator.onLine` keeps this working on both.
- *
- * `undefined` means "not known yet" (server render, or no `navigator`), which
- * callers should treat as online rather than as offline.
- */
-export declare const useOnlineState: () => boolean | undefined;

package/cjs/components/material-runbox/hooks/useOnlineState.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-//
-//
-//
-/**
- * Whether the browser currently has a network connection.
- *
- * NOTICE: this deliberately does not use `react-use`'s `useNetworkState`.
- * That hook only exists in react-use v17, and consumers of this package do not
- * agree on the major — elice-web still resolves v13, which breaks the build at
- * link time. Reading `navigator.onLine` keeps this working on both.
- *
- * `undefined` means "not known yet" (server render, or no `navigator`), which
- * callers should treat as online rather than as offline.
- */
-var useOnlineState = function useOnlineState() {
-  var _React$useState = React__default.default.useState(function () {
-      return typeof navigator === 'undefined' ? undefined : navigator.onLine;
-    }),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    online = _React$useState2[0],
-    setOnline = _React$useState2[1];
-  React__default.default.useEffect(function () {
-    var handleOnline = function handleOnline() {
-      return setOnline(true);
-    };
-    var handleOffline = function handleOffline() {
-      return setOnline(false);
-    };
-    window.addEventListener('online', handleOnline);
-    window.addEventListener('offline', handleOffline);
-    // Catch a change that happened between the initial state and this effect.
-    setOnline(navigator.onLine);
-    return function () {
-      window.removeEventListener('online', handleOnline);
-      window.removeEventListener('offline', handleOffline);
-    };
-  }, []);
-  return online;
-};
-
-exports.useOnlineState = useOnlineState;

package/cjs/components/material-runbox/hooks/useRunboxSessionEndWarning.d.ts

@@ -1,18 +0,0 @@
-export type RunboxSessionEndWarning = 'quota' | 'quotaPerSession';
-interface UseRunboxSessionEndWarningParams {
-    runboxId: string;
-    /**
-     * Suppress every warning.
-     * @default false
-     */
-    disabled?: boolean;
-}
-interface UseRunboxSessionEndWarningReturn {
-    warning: RunboxSessionEndWarning | null;
-    /** Marks the current warning as seen, which is what closes it. */
-    dismiss: () => void;
-}
-export declare const QUOTA_ALMOST_END_MINUTES = 30;
-export declare const QUOTA_PER_SESSION_ALMOST_END_MINUTES = 10;
-export declare function useRunboxSessionEndWarning({ runboxId, disabled, }: UseRunboxSessionEndWarningParams): UseRunboxSessionEndWarningReturn;
-export {};

package/cjs/components/material-runbox/hooks/useRunboxSessionEndWarning.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var reactUse = require('react-use');
-var runboxClient = require('@elice/runbox-client');
-
-//
-//
-//
-var QUOTA_ALMOST_END_MINUTES = 30;
-var QUOTA_PER_SESSION_ALMOST_END_MINUTES = 10;
-var WAS_WARNED_STORAGE_KEY = 'MaterialRunboxSessionEndWarning.wasWarned';
-//
-//
-//
-/** Remaining minutes while the almost-end warning is due, `null` when it is not. */
-function getAlmostEndRemaining(quotaInfo, thresholdMinutes) {
-  var seen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  if (seen || quotaInfo.isUnlimited || quotaInfo.remainingQuota > thresholdMinutes) {
-    return null;
-  }
-  return quotaInfo.remainingQuota;
-}
-/** The due warning that runs out soonest, `null` when neither is due. */
-function getSessionEndWarning(quotaInfo, quotaPerSessionInfo, seen) {
-  var quota = getAlmostEndRemaining(quotaInfo, QUOTA_ALMOST_END_MINUTES, seen.quota);
-  var quotaPerSession = getAlmostEndRemaining(quotaPerSessionInfo, QUOTA_PER_SESSION_ALMOST_END_MINUTES, seen.quotaPerSession);
-  if (quota === null) {
-    return quotaPerSession === null ? null : 'quotaPerSession';
-  }
-  if (quotaPerSession === null) {
-    return 'quota';
-  }
-  return quota < quotaPerSession ? 'quota' : 'quotaPerSession';
-}
-//
-//
-//
-function useRunboxSessionEndWarning(_ref) {
-  var runboxId = _ref.runboxId,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _a;
-  var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
-    quotaInfo = _useEliceRunboxQuota.quotaInfo,
-    quotaPerSessionInfo = _useEliceRunboxQuota.quotaPerSessionInfo;
-  var _useSessionStorage = reactUse.useSessionStorage(WAS_WARNED_STORAGE_KEY, {}),
-    _useSessionStorage2 = _rollupPluginBabelHelpers.slicedToArray(_useSessionStorage, 2),
-    wasWarned = _useSessionStorage2[0],
-    setWasWarned = _useSessionStorage2[1];
-  var seen = (_a = wasWarned === null || wasWarned === void 0 ? void 0 : wasWarned[runboxId]) !== null && _a !== void 0 ? _a : {};
-  var warning = disabled ? null : getSessionEndWarning(quotaInfo, quotaPerSessionInfo, seen);
-  var dismiss = function dismiss() {
-    if (warning === null) {
-      return;
-    }
-    setWasWarned(Object.assign(Object.assign({}, wasWarned), _rollupPluginBabelHelpers.defineProperty({}, runboxId, Object.assign(Object.assign({}, seen), _rollupPluginBabelHelpers.defineProperty({}, warning, true)))));
-  };
-  return {
-    warning: warning,
-    dismiss: dismiss
-  };
-}
-
-exports.QUOTA_ALMOST_END_MINUTES = QUOTA_ALMOST_END_MINUTES;
-exports.QUOTA_PER_SESSION_ALMOST_END_MINUTES = QUOTA_PER_SESSION_ALMOST_END_MINUTES;
-exports.useRunboxSessionEndWarning = useRunboxSessionEndWarning;

package/cjs/components/material-runbox/status/MaterialRunboxStatusButton.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-export interface MaterialRunboxStatusButtonProps {
-    /**
-     * Bottom action slot of the popover.
-     *
-     * NOTICE: the "실습 환경 초기화" button is out of scope for PLAT-4181.
-     * PLAT-4184 injects it here.
-     */
-    bottomAction?: React.ReactNode;
-}
-/**
- * Opens the runbox connection/resource status popover.
- *
- * Replaces the always-visible resource stats of the removed footer,
- * so the numbers are only shown on explicit request. (`[R-5]` `[R-6]`)
- */
-declare const MaterialRunboxStatusButton: React.FC<MaterialRunboxStatusButtonProps>;
-export default MaterialRunboxStatusButton;

package/cjs/components/material-runbox/status/MaterialRunboxStatusButton.js

@@ -1,88 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
-var runboxClient = require('@elice/runbox-client');
-var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var material = require('@mui/material');
-var MaterialRunboxStatusPopover = require('./MaterialRunboxStatusPopover.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-//
-//
-//
-/**
- * Opens the runbox connection/resource status popover.
- *
- * Replaces the always-visible resource stats of the removed footer,
- * so the numbers are only shown on explicit request. (`[R-5]` `[R-6]`)
- */
-var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
-  var bottomAction = _ref.bottomAction;
-  var intl$1 = intl.useRawEliceIntl();
-  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status;
-  var _React$useState = React__default.default.useState(null),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    anchorEl = _React$useState2[0],
-    setAnchorEl = _React$useState2[1];
-  var isRunboxRunning = status === 'running';
-  /**
-   *
-   */
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
-  //
-  //
-  //
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(material.Button, {
-      variant: "text",
-      size: "small",
-      startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
-        icon: proSolidSvgIcons.faWifi
-      }),
-      endIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
-        icon: proSolidSvgIcons.faAngleDown
-      }),
-      sx: _rollupPluginBabelHelpers.defineProperty({}, "& .".concat(material.buttonClasses.startIcon), {
-        color: isRunboxRunning ? 'success.main' : 'text.disabled'
-      }),
-      onClick: function onClick(e) {
-        return setAnchorEl(function (prev) {
-          return prev ? null : e.currentTarget;
-        });
-      },
-      children: intl$1.formatMessage({
-        id: 'runbox.status.button.title'
-      })
-    }), jsxRuntime.jsx(MaterialRunboxStatusPopover.default, {
-      open: Boolean(anchorEl),
-      anchorEl: anchorEl,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      sx: {
-        marginTop: '0.5rem'
-      },
-      bottomAction: bottomAction,
-      onClose: handleClose
-    })]
-  });
-};
-
-exports.default = MaterialRunboxStatusButton;

package/cjs/components/material-runbox/status/MaterialRunboxStatusConnectionItem.d.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-export interface MaterialRunboxStatusConnectionItemProps {
-    /** Leading icon element. */
-    icon: React.ReactNode;
-    /** Row label. */
-    label: React.ReactNode;
-    /** Whether the subject is connected. Drives the icon color. */
-    connected: boolean;
-}
-declare const MaterialRunboxStatusConnectionItem: React.FC<MaterialRunboxStatusConnectionItemProps>;
-export default MaterialRunboxStatusConnectionItem;

package/cjs/components/material-runbox/status/MaterialRunboxStatusConnectionItem.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var material = require('@mui/material');
-
-//
-//
-//
-var MaterialRunboxStatusConnectionItem = function MaterialRunboxStatusConnectionItem(_ref) {
-  var icon = _ref.icon,
-    label = _ref.label,
-    connected = _ref.connected;
-  return jsxRuntime.jsxs(material.Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: "0.75rem",
-    padding: "0.625rem 0.75rem",
-    children: [jsxRuntime.jsx(material.Typography, {
-      component: "span",
-      display: "inline-flex",
-      color: connected ? 'success.main' : 'text.disabled',
-      children: icon
-    }), jsxRuntime.jsx(material.Typography, {
-      variant: "body2",
-      children: label
-    })]
-  });
-};
-
-exports.default = MaterialRunboxStatusConnectionItem;

package/cjs/components/material-runbox/status/MaterialRunboxStatusPopover.d.ts

@@ -1,17 +0,0 @@
-import type { PopoverProps } from '@mui/material';
-import type React from 'react';
-export interface MaterialRunboxStatusPopoverProps extends Omit<PopoverProps, 'open' | 'onClose' | 'children'> {
-    /** Whether the popover is open. */
-    open: boolean;
-    /** Called when the popover requests to be closed. */
-    onClose: () => void;
-    /**
-     * Bottom action slot.
-     *
-     * NOTICE: the "실습 환경 초기화" button is out of scope for PLAT-4181.
-     * PLAT-4184 injects it here.
-     */
-    bottomAction?: React.ReactNode;
-}
-declare const MaterialRunboxStatusPopover: React.FC<MaterialRunboxStatusPopoverProps>;
-export default MaterialRunboxStatusPopover;

package/cjs/components/material-runbox/status/MaterialRunboxStatusPopover.js

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
-var runboxClient = require('@elice/runbox-client');
-var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var material = require('@mui/material');
-var MaterialRunboxStatusConnectionItem = require('./MaterialRunboxStatusConnectionItem.js');
-var MaterialRunboxStatusResourceItem = require('./MaterialRunboxStatusResourceItem.js');
-var useOnlineState = require('../hooks/useOnlineState.js');
-
-//
-//
-//
-var POPOVER_WIDTH = '15.25rem'; // 244px
-//
-//
-//
-var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
-  var open = _a.open,
-    onClose = _a.onClose,
-    bottomAction = _a.bottomAction,
-    props = tslib.__rest(_a, ["open", "onClose", "bottomAction"]);
-  var intl$1 = intl.useRawEliceIntl();
-  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status;
-  var online = useOnlineState.useOnlineState();
-  var contStats = runboxClient.useEliceRunboxContainerStats();
-  var stats = contStats ? contStats[contStats.length - 1] : null;
-  var isRunboxRunning = status === 'running';
-  //
-  //
-  //
-  return jsxRuntime.jsx(material.Popover, Object.assign({
-    open: open,
-    onClose: onClose
-  }, props, {
-    children: jsxRuntime.jsxs(material.Stack, {
-      direction: "column",
-      padding: "0.75rem 0",
-      width: POPOVER_WIDTH,
-      bgcolor: "background.paper",
-      children: [jsxRuntime.jsxs(material.Stack, {
-        direction: "column",
-        children: [jsxRuntime.jsx(MaterialRunboxStatusConnectionItem.default, {
-          icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-            icon: online === false ? proSolidSvgIcons.faWifiSlash : proSolidSvgIcons.faWifi
-          }),
-          label: intl$1.formatMessage({
-            id: 'runbox.status.network'
-          }),
-          // `online` is undefined while unknown — only mark it down when known offline.
-          connected: online !== false
-        }), jsxRuntime.jsx(MaterialRunboxStatusConnectionItem.default, {
-          icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-            icon: isRunboxRunning ? proSolidSvgIcons.faLinkSimple : proSolidSvgIcons.faLinkSimpleSlash
-          }),
-          label: intl$1.formatMessage({
-            id: isRunboxRunning ? 'runbox.status.runtime.connected' : 'runbox.status.runtime.disconnected'
-          }),
-          connected: isRunboxRunning
-        })]
-      }), stats ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(material.Divider, {
-          sx: {
-            margin: '0.75rem'
-          }
-        }), jsxRuntime.jsxs(material.Stack, {
-          direction: "column",
-          children: [jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-              icon: proSolidSvgIcons.faMicrochip
-            }),
-            label: "CPU",
-            value: intl$1.formatNumber(stats.avgCpu, {
-              style: 'percent',
-              maximumFractionDigits: 2
-            })
-          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-              icon: proSolidSvgIcons.faMemory
-            }),
-            label: "Memory",
-            value: "".concat(intl$1.formatDataSize(stats.memCurrent, {
-              unitSystem: 'iec',
-              maximumFractionDigits: 2
-            }), " / ").concat(intl$1.formatDataSize(stats.memTotal, {
-              unitSystem: 'iec',
-              maximumFractionDigits: 2
-            }))
-          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-              icon: proSolidSvgIcons.faArrowUpRight
-            }),
-            label: "UP",
-            value: "".concat(intl$1.formatDataSize(stats.netOutPsec, {
-              unitSystem: 'iec'
-            }), "/s")
-          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-              icon: proSolidSvgIcons.faArrowDownLeft
-            }),
-            label: "DOWN",
-            value: "".concat(intl$1.formatDataSize(stats.netInPsec, {
-              unitSystem: 'iec'
-            }), "/s")
-          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
-              icon: proSolidSvgIcons.faDiscDrive
-            }),
-            label: "DISK",
-            value: "".concat(intl$1.formatDataSize(stats.diskCurrent, {
-              unitSystem: 'iec',
-              maximumFractionDigits: 2
-            }), " / ").concat(intl$1.formatDataSize(stats.diskTotal, {
-              unitSystem: 'iec',
-              maximumFractionDigits: 2
-            }))
-          })]
-        })]
-      }) : null, bottomAction ? jsxRuntime.jsx(material.Stack, {
-        padding: "0.75rem 0.75rem 0",
-        children: bottomAction
-      }) : null]
-    })
-  }));
-};
-
-exports.default = MaterialRunboxStatusPopover;

package/cjs/components/material-runbox/status/MaterialRunboxStatusResourceItem.d.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-export interface MaterialRunboxStatusResourceItemProps {
-    /** Leading icon element. */
-    icon: React.ReactNode;
-    /** Resource label, e.g. `CPU`. */
-    label: React.ReactNode;
-    /** Formatted value, e.g. `438.33 MiB / 4 GiB`. */
-    value: React.ReactNode;
-}
-declare const MaterialRunboxStatusResourceItem: React.FC<MaterialRunboxStatusResourceItemProps>;
-export default MaterialRunboxStatusResourceItem;