@aws-amplify/ui-react-storage 2.3.2 → 3.0.1

package/dist/esm/components/StorageManager/ui/FileList/FileList.mjs

@@ -1 +1,44 @@
-import e from"react";import{View as a,ComponentClassNames as s,Alert as r}from"@aws-amplify/ui-react";import{FileStatus as o}from"../../types.mjs";import{FileControl as i}from"./FileControl.mjs";function t({displayText:t,files:l,hasMaxFilesError:n,isResumable:m,onCancelUpload:u,onDeleteUpload:p,onResume:d,onPause:c,showThumbnails:g,maxFileCount:f}){if(l.length<1)return null;const{getMaxFilesErrorText:T}=t,U=T(f);return e.createElement(a,{className:s.StorageManagerFileList},l.map((a=>{const{file:s,status:r,progress:l,error:n,key:f,isImage:T,id:U,uploadTask:h}=a,x=s&&T?URL.createObjectURL(s):"",y=!m||l>0,R=r===o.UPLOADING;return e.createElement(i,{displayName:f,errorMessage:n,displayText:t,isImage:T,isUploading:R,isResumable:m,key:U,loaderIsDeterminate:y,onRemove:()=>{m&&(r===o.UPLOADING||r===o.PAUSED)&&h?u({id:U,uploadTask:h}):p({id:U})},onPause:()=>{h&&c({id:U,uploadTask:h})},onResume:()=>{h&&d({id:U,uploadTask:h})},progress:l,showThumbnails:g,size:null==s?void 0:s.size,status:r,thumbnailUrl:x})})),n&&e.createElement(r,{variation:"error",heading:U}))}export{t as FileList};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Alert } from '@aws-amplify/ui-react';
+import { FileStatus } from '../../types.mjs';
+import { FileControl } from './FileControl.mjs';
+
+function FileList({ displayText, files, hasMaxFilesError, isResumable, onCancelUpload, onDeleteUpload, onResume, onPause, showThumbnails, maxFileCount, }) {
+    if (files.length < 1) {
+        return null;
+    }
+    const { getMaxFilesErrorText } = displayText;
+    const headingMaxFiles = getMaxFilesErrorText(maxFileCount);
+    return (React__default.createElement(View, { className: ComponentClassName.StorageManagerFileList },
+        files.map((storageFile) => {
+            const { file, status, progress, error, key, isImage, id, uploadTask } = storageFile;
+            const thumbnailUrl = file && isImage ? URL.createObjectURL(file) : '';
+            const loaderIsDeterminate = isResumable ? progress > 0 : true;
+            const isUploading = status === FileStatus.UPLOADING;
+            const onRemove = () => {
+                if (isResumable &&
+                    (status === FileStatus.UPLOADING || status === FileStatus.PAUSED) &&
+                    uploadTask) {
+                    onCancelUpload({ id, uploadTask });
+                }
+                else {
+                    onDeleteUpload({ id });
+                }
+            };
+            const handlePauseUpload = () => {
+                if (uploadTask) {
+                    onPause({ id, uploadTask });
+                }
+            };
+            const handleResumeUpload = () => {
+                if (uploadTask) {
+                    onResume({ id, uploadTask });
+                }
+            };
+            return (React__default.createElement(FileControl, { displayName: key, errorMessage: error, displayText: displayText, isImage: isImage, isUploading: isUploading, isResumable: isResumable, key: id, loaderIsDeterminate: loaderIsDeterminate, onRemove: onRemove, onPause: handlePauseUpload, onResume: handleResumeUpload, progress: progress, showThumbnails: showThumbnails, size: file?.size, status: status, thumbnailUrl: thumbnailUrl }));
+        }),
+        hasMaxFilesError && (React__default.createElement(Alert, { variation: "error", heading: headingMaxFiles }))));
+}
+
+export { FileList };

package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.mjs

@@ -1 +1,12 @@
-import e from"react";import{useIcons as t,IconClose as a}from"@aws-amplify/ui-react/internal";import{Button as r,VisuallyHidden as l,View as n}from"@aws-amplify/ui-react";const i=({altText:i,onClick:m})=>{var o;const c=t("storageManager");return e.createElement(r,{size:"small",onClick:m},e.createElement(l,null,i),e.createElement(n,{as:"span","aria-hidden":!0,fontSize:"medium"},null!==(o=null==c?void 0:c.remove)&&void 0!==o?o:e.createElement(a,null)))};export{i as FileRemoveButton};
+import React__default from 'react';
+import { useIcons, IconClose } from '@aws-amplify/ui-react/internal';
+import { Button, VisuallyHidden, View } from '@aws-amplify/ui-react';
+
+const FileRemoveButton = ({ altText, onClick, }) => {
+    const icons = useIcons('storageManager');
+    return (React__default.createElement(Button, { size: "small", onClick: onClick },
+        React__default.createElement(VisuallyHidden, null, altText),
+        React__default.createElement(View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default.createElement(IconClose, null))));
+};
+
+export { FileRemoveButton };

package/dist/esm/components/StorageManager/ui/FileList/FileStatusMessage.mjs

@@ -1 +1,28 @@
-import e from"react";import a from"classnames";import{Text as t,ComponentClassNames as r,View as s}from"@aws-amplify/ui-react";import{useIcons as l,IconError as n,IconCheck as o}from"@aws-amplify/ui-react/internal";import{classNameModifier as c}from"@aws-amplify/ui";import{FileStatus as m}from"../../types.mjs";const u=({errorMessage:u,getPausedText:i,getUploadingText:g,percentage:p,status:S,uploadSuccessfulText:f})=>{var E,d;const M=l("storageManager");switch(S){case m.UPLOADING:return e.createElement(t,{className:r.StorageManagerFileStatus},g(p));case m.PAUSED:return e.createElement(t,{className:r.StorageManagerFileStatus},i(p));case m.UPLOADED:return e.createElement(t,{className:a(r.StorageManagerFileStatus,c(r.StorageManagerFileStatus,"success"))},e.createElement(s,{as:"span",fontSize:"xl"},null!==(E=null==M?void 0:M.success)&&void 0!==E?E:e.createElement(o,null)),f);case m.ERROR:return e.createElement(t,{className:a(r.StorageManagerFileStatus,c(r.StorageManagerFileStatus,"error"))},e.createElement(s,{as:"span",fontSize:"xl"},null!==(d=null==M?void 0:M.error)&&void 0!==d?d:e.createElement(n,null)),u);default:return null}};export{u as FileStatusMessage};
+import React__default from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { Text, View } from '@aws-amplify/ui-react';
+import { useIcons, IconError, IconCheck } from '@aws-amplify/ui-react/internal';
+import { FileStatus } from '../../types.mjs';
+
+const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, percentage, status, uploadSuccessfulText, }) => {
+    const icons = useIcons('storageManager');
+    switch (status) {
+        case FileStatus.UPLOADING: {
+            return (React__default.createElement(Text, { className: ComponentClassName.StorageManagerFileStatus }, getUploadingText(percentage)));
+        }
+        case FileStatus.PAUSED:
+            return (React__default.createElement(Text, { className: ComponentClassName.StorageManagerFileStatus }, getPausedText(percentage)));
+        case FileStatus.UPLOADED:
+            return (React__default.createElement(Text, { className: classNames(ComponentClassName.StorageManagerFileStatus, classNameModifier(ComponentClassName.StorageManagerFileStatus, 'success')) },
+                React__default.createElement(View, { as: "span", fontSize: "xl" }, icons?.success ?? React__default.createElement(IconCheck, null)),
+                uploadSuccessfulText));
+        case FileStatus.ERROR:
+            return (React__default.createElement(Text, { className: classNames(ComponentClassName.StorageManagerFileStatus, classNameModifier(ComponentClassName.StorageManagerFileStatus, 'error')) },
+                React__default.createElement(View, { as: "span", fontSize: "xl" }, icons?.error ?? React__default.createElement(IconError, null)),
+                errorMessage));
+        default:
+            return null;
+    }
+};
+
+export { FileStatusMessage };

package/dist/esm/components/StorageManager/ui/FileList/FileThumbnail.mjs

@@ -1 +1,12 @@
-import e from"react";import{Image as a,View as r,ComponentClassNames as t}from"@aws-amplify/ui-react";import{useIcons as l,IconFile as m}from"@aws-amplify/ui-react/internal";const i=({fileName:i,isImage:n,url:o})=>{var c;const s=l("storageManager"),f=n?e.createElement(a,{alt:i,src:o}):null!==(c=null==s?void 0:s.file)&&void 0!==c?c:e.createElement(m,null);return e.createElement(r,{className:t.StorageManagerFileImage},f)};export{i as FileThumbnail};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Image, View } from '@aws-amplify/ui-react';
+import { useIcons, IconFile } from '@aws-amplify/ui-react/internal';
+
+const FileThumbnail = ({ fileName, isImage, url, }) => {
+    const icons = useIcons('storageManager');
+    const thumbnail = isImage ? (React__default.createElement(Image, { alt: fileName, src: url })) : (icons?.file ?? React__default.createElement(IconFile, null));
+    return (React__default.createElement(View, { className: ComponentClassName.StorageManagerFileImage }, thumbnail));
+};
+
+export { FileThumbnail };

package/dist/esm/components/StorageManager/ui/FileListFooter/FileListFooter.mjs

@@ -1 +1,13 @@
-import e from"react";import{View as a,ComponentClassNames as t,Button as r}from"@aws-amplify/ui-react";function l({displayText:l,remainingFilesCount:n,onClearAll:o,onUploadAll:i}){const{clearAllButtonText:m,getUploadButtonText:c}=l;return e.createElement(a,{className:t.StorageManagerPreviewerFooter},e.createElement(a,{className:t.StorageManagerPreviewerActions},e.createElement(r,{size:"small",variation:"link",onClick:o},m),e.createElement(r,{size:"small",variation:"primary",onClick:i},c(n))))}export{l as FileListFooter};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Button } from '@aws-amplify/ui-react';
+
+function FileListFooter({ displayText, remainingFilesCount, onClearAll, onUploadAll, }) {
+    const { clearAllButtonText, getUploadButtonText } = displayText;
+    return (React__default.createElement(View, { className: ComponentClassName.StorageManagerPreviewerFooter },
+        React__default.createElement(View, { className: ComponentClassName.StorageManagerPreviewerActions },
+            React__default.createElement(Button, { size: "small", variation: "link", onClick: onClearAll }, clearAllButtonText),
+            React__default.createElement(Button, { size: "small", variation: "primary", onClick: onUploadAll }, getUploadButtonText(remainingFilesCount)))));
+}
+
+export { FileListFooter };

package/dist/esm/components/StorageManager/ui/FileListHeader/FileListHeader.mjs

@@ -1 +1,14 @@
-import e from"react";import{Text as t,ComponentClassNames as i}from"@aws-amplify/ui-react";function l({allUploadsSuccessful:l,displayText:a,fileCount:r,remainingFilesCount:s,selectedFilesCount:n=0}){const{getFilesUploadedText:o,getRemainingFilesText:c,getSelectedFilesText:m}=a;return e.createElement(t,{className:i.StorageManagerPreviewerText},n?m(n):l?o(r):c(s))}export{l as FileListHeader};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Text } from '@aws-amplify/ui-react';
+
+function FileListHeader({ allUploadsSuccessful, displayText, fileCount, remainingFilesCount, selectedFilesCount = 0, }) {
+    const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } = displayText;
+    return (React__default.createElement(Text, { className: ComponentClassName.StorageManagerPreviewerText }, selectedFilesCount
+        ? getSelectedFilesText(selectedFilesCount)
+        : allUploadsSuccessful
+            ? getFilesUploadedText(fileCount)
+            : getRemainingFilesText(remainingFilesCount)));
+}
+
+export { FileListHeader };

package/dist/esm/components/StorageManager/ui/FilePicker/FilePicker.mjs

@@ -1 +1,9 @@
-import{__rest as e}from"tslib";import r from"react";import{ComponentClassNames as a,Button as i}from"@aws-amplify/ui-react";function s(s){var{children:t,className:m=a.StorageManagerFilePicker,size:c="small"}=s,l=e(s,["children","className","size"]);return r.createElement(i,Object.assign({},l,{className:m,size:c}),t)}export{s as FilePicker};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Button } from '@aws-amplify/ui-react';
+
+function FilePicker({ children, className = ComponentClassName.StorageManagerFilePicker, size = 'small', ...props }) {
+    return (React__default.createElement(Button, { ...props, className: className, size: size }, children));
+}
+
+export { FilePicker };

package/dist/esm/components/StorageManager/utils/checkMaxFileSize.mjs

@@ -1 +1,12 @@
-import{humanFileSize as e}from"./humanFileSize.mjs";const i=({file:i,getFileSizeErrorText:o,maxFileSize:r})=>void 0===r?"":i.size>r?o(e(r,!0)):"";export{i as checkMaxFileSize};
+import { humanFileSize } from './humanFileSize.mjs';
+
+const checkMaxFileSize = ({ file, getFileSizeErrorText, maxFileSize, }) => {
+    if (maxFileSize === undefined)
+        return '';
+    if (file.size > maxFileSize) {
+        return getFileSizeErrorText(humanFileSize(maxFileSize, true));
+    }
+    return '';
+};
+
+export { checkMaxFileSize };

package/dist/esm/components/StorageManager/utils/displayText.mjs

@@ -1 +1,39 @@
-const e={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getSelectedFilesText:e=>`${e} ${1===e?"file":"files"} selected`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded",getPausedText:e=>`Paused: ${e}%`};export{e as defaultStorageManagerDisplayText};
+const defaultStorageManagerDisplayText = {
+    getFilesUploadedText(count) {
+        return `${count} ${count === 1 ? 'file uploaded' : 'files uploaded'}`;
+    },
+    getFileSizeErrorText(sizeText) {
+        return `File size must be below ${sizeText}`;
+    },
+    getRemainingFilesText(count) {
+        return `${count} ${count === 1 ? 'file' : 'files'} uploading`;
+    },
+    getSelectedFilesText(count) {
+        return `${count} ${count === 1 ? 'file' : 'files'} selected`;
+    },
+    getUploadingText(percentage) {
+        return `Uploading${percentage > 0 ? `: ${percentage}%` : ''}`;
+    },
+    getUploadButtonText(count) {
+        return `Upload ${count} ${count === 1 ? 'file' : 'files'}`;
+    },
+    getMaxFilesErrorText(count) {
+        return `Cannot choose more than ${count} ${count === 1 ? 'file' : 'files'}. Remove files before updating`;
+    },
+    getErrorText(message) {
+        return message;
+    },
+    doneButtonText: 'Done',
+    clearAllButtonText: 'Clear all',
+    extensionNotAllowedText: 'Extension not allowed',
+    browseFilesText: 'Browse files',
+    dropFilesText: 'Drop files here or',
+    pauseButtonText: 'Pause',
+    resumeButtonText: 'Resume',
+    uploadSuccessfulText: 'Uploaded',
+    getPausedText(percentage) {
+        return `Paused: ${percentage}%`;
+    },
+};
+
+export { defaultStorageManagerDisplayText };

package/dist/esm/components/StorageManager/utils/filterAllowedFiles.mjs

@@ -1 +1,27 @@
-const e=(e,t)=>!t||0===t.length||t.includes("*")?e:e.filter((e=>{const r=e.name||"",o=(e.type||"").toLowerCase(),n=o.replace(/\/.*$/,"");return t.some((e=>{const t=e.trim().toLowerCase();return"."===t.charAt(0)?r.toLowerCase().endsWith(t):t.endsWith("/*")?n===t.replace(/\/.*$/,""):o===t}))}));export{e as filterAllowedFiles};
+const filterAllowedFiles = (files, acceptedFileTypes) => {
+    // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
+    if (!acceptedFileTypes ||
+        acceptedFileTypes.length === 0 ||
+        acceptedFileTypes.includes('*')) {
+        return files;
+    }
+    // Remove any files that are not in the accepted file list
+    return files.filter((file) => {
+        const fileName = file.name || '';
+        const mimeType = (file.type || '').toLowerCase();
+        const baseMimeType = mimeType.replace(/\/.*$/, '');
+        return acceptedFileTypes.some((type) => {
+            const validType = type.trim().toLowerCase();
+            if (validType.charAt(0) === '.') {
+                return fileName.toLowerCase().endsWith(validType);
+            }
+            else if (validType.endsWith('/*')) {
+                // This is something like a image/* mime type
+                return baseMimeType === validType.replace(/\/.*$/, '');
+            }
+            return mimeType === validType;
+        });
+    });
+};
+
+export { filterAllowedFiles };

package/dist/esm/components/StorageManager/utils/humanFileSize.mjs

@@ -1 +1,29 @@
-function B(B,t=!1,i=1){const n=t?1e3:1024;if(Math.abs(B)<n)return`${B} B`;const o=t?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let e=-1;const a=Math.pow(10,i);do{B/=n,++e}while(Math.round(Math.abs(B)*a)/a>=n&&e<o.length-1);return B.toFixed(i)+" "+o[e]}export{B as humanFileSize};
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+function humanFileSize(bytes, si = false, dp = 1) {
+    const thresh = si ? 1000 : 1024;
+    if (Math.abs(bytes) < thresh) {
+        return `${bytes} B`;
+    }
+    const units = si
+        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    let unit = -1;
+    const range = 10 ** dp;
+    do {
+        bytes /= thresh;
+        ++unit;
+    } while (Math.round(Math.abs(bytes) * range) / range >= thresh &&
+        unit < units.length - 1);
+    return bytes.toFixed(dp) + ' ' + units[unit];
+}
+
+export { humanFileSize };

package/dist/esm/components/StorageManager/utils/uploadFile.mjs

@@ -1 +1,29 @@
-import{__rest as e}from"tslib";import{Storage as l}from"aws-amplify";function r(r){var{file:a,key:o,level:t="private",progressCallback:s,errorCallback:p,completeCallback:c,isResumable:b=!1,provider:i}=r,m=e(r,["file","key","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const k=a.type||"binary/octet-stream";return!0===b?l.put(o,a,Object.assign({level:t,resumable:!0,progressCallback:s,errorCallback:p,completeCallback:c,contentType:k,provider:i},m)):l.put(o,a,Object.assign({level:t,resumable:!1,progressCallback:s,contentType:k,provider:i},m)).then(c,p)}export{r as uploadFile};
+import { uploadData } from 'aws-amplify/storage';
+
+function uploadFile({ file, key, level = 'private', progressCallback, errorCallback, completeCallback, ...rest }) {
+    const contentType = file.type || 'binary/octet-stream';
+    const input = {
+        key,
+        data: file,
+        options: {
+            accessLevel: level,
+            contentType,
+            onProgress: ({ transferredBytes, totalBytes }) => progressCallback({ transferredBytes, totalBytes }),
+            ...rest,
+        },
+    };
+    const output = uploadData(input);
+    output.result
+        .then(() => {
+        if (output.state === 'SUCCESS') {
+            completeCallback?.({ key });
+        }
+    })
+        .catch((e) => {
+        const error = e;
+        errorCallback?.(error.message);
+    });
+    return output;
+}
+
+export { uploadFile };

package/dist/esm/index.mjs

@@ -1 +1,2 @@
-export{StorageImage}from"./components/StorageImage/StorageImage.mjs";export{StorageManager}from"./components/StorageManager/StorageManager.mjs";
+export { StorageImage } from './components/StorageImage/StorageImage.mjs';
+export { StorageManager } from './components/StorageManager/StorageManager.mjs';

package/dist/esm/version.mjs

@@ -0,0 +1,3 @@
+const VERSION = '3.0.1';
+
+export { VERSION };