@box/uploads-manager 2.3.2 → 2.4.0

package/dist/esm/lib/uploads-item/components/status-line.js

@@ -1 +1 @@
-import uploads_item_messages_default from"../uploads-item.messages.js";import{t as uploads_item_module_default}from"../../../../chunks/uploads-item.module.js";import{Text}from"@box/blueprint-web";import{AlertCircle,CheckmarkCircle,XMarkCircle}from"@box/blueprint-web-assets/icons/Medium";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";function StatusLine({item}){let intl=useIntl(),{status,progress,isFolder,errorMessage,versionNumber}=item,showVersion=versionNumber&&Number(versionNumber)>1;if(status===`pending`||status===`uploading`||status===`staged`)return isFolder?null:jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusUploading,{progress})});if(status===`complete`)return jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(CheckmarkCircle,{"aria-hidden":!0,className:`${uploads_item_module_default.statusIcon} ${uploads_item_module_default.statusCompleted}`,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,className:uploads_item_module_default.statusCompleted,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusCompleted)}),showVersion&&jsx(Text,{as:`span`,variant:`bodySmall`,color:`textOnLightSecondary`,children:intl.formatMessage(uploads_item_messages_default.itemStatusVersionSuffix,{versionNumber})})]});if(status===`error`){let errorText=errorMessage?intl.formatMessage(uploads_item_messages_default.itemStatusError,{errorMessage}):intl.formatMessage(uploads_item_messages_default.itemStatusErrorNoMessage);return jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(AlertCircle,{"aria-hidden":!0,className:`${uploads_item_module_default.statusIcon} ${uploads_item_module_default.statusError}`,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,color:`textOnLightError`,variant:`bodySmall`,children:errorText})]})}return status===`canceled`?jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(XMarkCircle,{"aria-hidden":!0,className:uploads_item_module_default.statusIcon,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusCanceled)})]}):null}export{StatusLine};
+import uploads_item_messages_default from"../uploads-item.messages.js";import{t as uploads_item_module_default}from"../../../../chunks/uploads-item.module.js";import{formatBytesProgress}from"../../utils/formatBytesProgress.js";import{formatTimeRemaining}from"../../utils/formatTimeRemaining.js";import{Text}from"@box/blueprint-web";import{AlertCircle,CheckmarkCircle,XMarkCircle}from"@box/blueprint-web-assets/icons/Medium";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";function StatusLine({item}){let intl=useIntl(),{status,progress,isFolder,errorMessage,versionNumber,bytesUploaded,totalBytes,remainingMs}=item,showVersion=versionNumber&&Number(versionNumber)>1;if(status===`pending`||status===`uploading`||status===`staged`){if(isFolder)return null;let size=formatBytesProgress(intl,bytesUploaded,totalBytes),time=remainingMs===void 0?null:formatTimeRemaining(intl,remainingMs),statusText;return statusText=size&&time?intl.formatMessage(uploads_item_messages_default.itemStatusUploadingSizeWithTime,{size,time}):size?intl.formatMessage(uploads_item_messages_default.itemStatusUploadingSize,{size}):intl.formatMessage(uploads_item_messages_default.itemStatusUploading,{progress}),jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodySmall`,children:statusText})}if(status===`complete`)return jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(CheckmarkCircle,{"aria-hidden":!0,className:`${uploads_item_module_default.statusIcon} ${uploads_item_module_default.statusCompleted}`,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,className:uploads_item_module_default.statusCompleted,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusCompleted)}),showVersion&&jsx(Text,{as:`span`,variant:`bodySmall`,color:`textOnLightSecondary`,children:intl.formatMessage(uploads_item_messages_default.itemStatusVersionSuffix,{versionNumber})})]});if(status===`error`){let errorText=errorMessage?intl.formatMessage(uploads_item_messages_default.itemStatusError,{errorMessage}):intl.formatMessage(uploads_item_messages_default.itemStatusErrorNoMessage);return jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(AlertCircle,{"aria-hidden":!0,className:`${uploads_item_module_default.statusIcon} ${uploads_item_module_default.statusError}`,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,color:`textOnLightError`,variant:`bodySmall`,children:errorText})]})}return status===`canceled`?jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(XMarkCircle,{"aria-hidden":!0,className:uploads_item_module_default.statusIcon,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusCanceled)})]}):null}export{StatusLine};

package/dist/esm/lib/uploads-item/uploads-item.messages.js

@@ -1 +1 @@
-import{defineMessages}from"react-intl";var uploads_item_messages_default=defineMessages({itemStatusUploading:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusUploading`,defaultMessage:`Uploading · {progress}%`},itemStatusCompleted:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCompleted`,defaultMessage:`Completed`},itemStatusCompletedWithVersion:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCompletedWithVersion`,defaultMessage:`Completed · Version {versionNumber}`},itemStatusVersionSuffix:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusVersionSuffix`,defaultMessage:`· Version {versionNumber}`},itemStatusCanceled:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCanceled`,defaultMessage:`Canceled`},itemStatusError:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusError`,defaultMessage:`Error: {errorMessage}`},itemStatusErrorNoMessage:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusErrorNoMessage`,defaultMessage:`Error`},itemProgressAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemProgressAriaLabel`,defaultMessage:`Uploading {name}, {progress}% complete`},itemActionCancel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionCancel`,defaultMessage:`Cancel`},itemActionCancelAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionCancelAriaLabel`,defaultMessage:`Cancel upload`},itemActionRetry:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRetry`,defaultMessage:`Retry`},itemActionRetryAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRetryAriaLabel`,defaultMessage:`Retry upload`},itemActionRemove:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRemove`,defaultMessage:`Remove`},itemActionRemoveAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRemoveAriaLabel`,defaultMessage:`Remove`},itemActionOpen:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionOpen`,defaultMessage:`Open`},itemActionOpenAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionOpenAriaLabel`,defaultMessage:`Open`},itemActionShare:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionShare`,defaultMessage:`Share`},itemActionShareAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionShareAriaLabel`,defaultMessage:`Share`}});export{uploads_item_messages_default as default};
+import{defineMessages}from"react-intl";var uploads_item_messages_default=defineMessages({itemStatusUploading:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusUploading`,defaultMessage:`Uploading · {progress}%`},itemStatusUploadingSize:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusUploadingSize`,defaultMessage:`{size}`},itemStatusUploadingSizeWithTime:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusUploadingSizeWithTime`,defaultMessage:`{size} · {time} left`},itemStatusCompleted:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCompleted`,defaultMessage:`Completed`},itemStatusCompletedWithVersion:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCompletedWithVersion`,defaultMessage:`Completed · Version {versionNumber}`},itemStatusVersionSuffix:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusVersionSuffix`,defaultMessage:`· Version {versionNumber}`},itemStatusCanceled:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCanceled`,defaultMessage:`Canceled`},itemStatusError:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusError`,defaultMessage:`Error: {errorMessage}`},itemStatusErrorNoMessage:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusErrorNoMessage`,defaultMessage:`Error`},itemProgressAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemProgressAriaLabel`,defaultMessage:`Uploading {name}, {progress}% complete`},itemActionCancel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionCancel`,defaultMessage:`Cancel`},itemActionCancelAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionCancelAriaLabel`,defaultMessage:`Cancel upload`},itemActionRetry:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRetry`,defaultMessage:`Retry`},itemActionRetryAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRetryAriaLabel`,defaultMessage:`Retry upload`},itemActionRemove:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRemove`,defaultMessage:`Remove`},itemActionRemoveAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRemoveAriaLabel`,defaultMessage:`Remove`},itemActionOpen:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionOpen`,defaultMessage:`Open`},itemActionOpenAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionOpenAriaLabel`,defaultMessage:`Open`},itemActionShare:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionShare`,defaultMessage:`Share`},itemActionShareAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionShareAriaLabel`,defaultMessage:`Share`}});export{uploads_item_messages_default as default};

package/dist/esm/lib/utils/formatBytesProgress.js

@@ -0,0 +1 @@
+var BYTES_PER_UNIT=1024,UNITS=[`B`,`KB`,`MB`,`GB`,`TB`,`PB`];function formatBytesProgress(intl,bytesUploaded,totalBytes){if(totalBytes===void 0||totalBytes<=0||!Number.isFinite(totalBytes))return null;let uploaded=Number.isFinite(bytesUploaded)?Math.max(0,bytesUploaded):0,exponent=Math.min(Math.floor(Math.log(totalBytes)/Math.log(BYTES_PER_UNIT)),UNITS.length-1),divisor=BYTES_PER_UNIT**exponent,fractionDigits={minimumFractionDigits:1,maximumFractionDigits:1};return`${intl.formatNumber(uploaded/divisor,fractionDigits)} / ${intl.formatNumber(totalBytes/divisor,fractionDigits)} ${UNITS[exponent]}`}export{formatBytesProgress};

package/dist/esm/lib/utils/formatTimeRemaining.js

@@ -0,0 +1 @@
+var MS_PER_SECOND=1e3,SECONDS_PER_MINUTE=60,SECONDS_PER_HOUR=3600;function formatTimeRemaining(intl,remainingMs){if(!Number.isFinite(remainingMs)||remainingMs<0)return null;let remainingSeconds=remainingMs/MS_PER_SECOND,value,unit;if(remainingSeconds<SECONDS_PER_MINUTE){let rounded=Math.round(remainingSeconds);if(rounded<=0)return null;value=rounded,unit=`second`}else remainingSeconds<SECONDS_PER_HOUR?(value=Math.round(remainingSeconds/SECONDS_PER_MINUTE),unit=`minute`):(value=Math.round(remainingSeconds/SECONDS_PER_HOUR),unit=`hour`);return intl.formatNumber(value,{style:`unit`,unit,unitDisplay:`short`})}export{formatTimeRemaining};

package/dist/types/lib/types.d.ts

@@ -35,6 +35,25 @@ export interface UploadItem {
      * Only meaningful when status is `uploading` or `staged`.
      */
     progress: number;
+    /**
+     * Number of bytes uploaded so far.
+     * When provided together with `totalBytes`, the item row shows a
+     * byte-count detail (e.g. `2.4 / 5.3 MB`) instead of the plain percentage.
+     * Only meaningful when status is `pending`, `uploading`, or `staged`.
+     */
+    bytesUploaded?: number;
+    /**
+     * Total size of the upload in bytes.
+     * Required (alongside `bytesUploaded`) to render the `X / TOTAL` detail.
+     */
+    totalBytes?: number;
+    /**
+     * Estimated time remaining for this upload, in milliseconds.
+     * When provided (and finite), the item row appends a `· N sec left` hint.
+     * Omit or pass a non-finite value while the estimate is not yet available
+     * (e.g. before the first progress tick).
+     */
+    remainingMs?: number;
     /** Current status of this upload item */
     status: UploadItemStatus;
     /**

package/dist/types/lib/uploads-item/uploads-item.messages.d.ts

@@ -4,6 +4,16 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    itemStatusUploadingSize: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    itemStatusUploadingSizeWithTime: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     itemStatusCompleted: {
         id: string;
         defaultMessage: string;

package/dist/types/lib/utils/formatBytesProgress.d.ts

@@ -0,0 +1,2 @@
+import { IntlShape } from 'react-intl';
+export declare function formatBytesProgress(intl: IntlShape, bytesUploaded: number | undefined, totalBytes: number | undefined): string | null;

package/dist/types/lib/utils/formatTimeRemaining.d.ts

@@ -0,0 +1,2 @@
+import { IntlShape } from 'react-intl';
+export declare function formatTimeRemaining(intl: IntlShape, remainingMs: number): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/uploads-manager",
-    "version": "2.3.2",
+    "version": "2.4.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^16.14.2",