@aws-amplify/ui-react-storage 0.0.0-studio-console-80bb2e2-20230921222703 → 0.0.0-testdelay-84839eb-20250107181059

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

@@ -1 +1,186 @@
-import*as e from"react";import{Logger as i}from"aws-amplify";import{ComponentClassName as t}from"@aws-amplify/ui";import{VisuallyHidden as o}from"@aws-amplify/ui-react";import{useDropZone as l}from"@aws-amplify/ui-react/internal";import{useStorageManager as r}from"./hooks/useStorageManager/useStorageManager.mjs";import{useUploadFiles as s}from"./hooks/useUploadFiles/useUploadFiles.mjs";import{FileStatus as a}from"./types.mjs";import{Container as n}from"./ui/Container/Container.mjs";import{DropZone as p}from"./ui/DropZone/DropZone.mjs";import{FileList as m}from"./ui/FileList/FileList.mjs";import{FileListHeader as c}from"./ui/FileListHeader/FileListHeader.mjs";import{FileListFooter as u}from"./ui/FileListFooter/FileListFooter.mjs";import{FilePicker as d}from"./ui/FilePicker/FilePicker.mjs";import{checkMaxFileSize as F}from"./utils/checkMaxFileSize.mjs";import{defaultStorageManagerDisplayText as f}from"./utils/displayText.mjs";import{filterAllowedFiles as g}from"./utils/filterAllowedFiles.mjs";const U=new i("Storage.StorageManager");const E=Object.assign(e.forwardRef((function({acceptedFileTypes:i=[],accessLevel:E,autoUpload:y=!0,defaultFiles:D,displayText:L,isResumable:S=!1,maxFileCount:h,maxFileSize:x,onUploadError:C,onUploadSuccess:j,onFileRemove:T,onUploadStart:k,showThumbnails:v=!0,processFile:w,components:P,provider:M,path:b},R){E&&h||U.warn("StorageManager requires accessLevel and maxFileCount props");const A={Container:n,DropZone:p,FileList:m,FilePicker:d,FileListHeader:c,FileListFooter:u,...P},H=void 0===h||"number"==typeof h&&h>1,Z={...f,...L},{getFileSizeErrorText:z}=Z,O=e=>F({file:e,maxFileSize:x,getFileSizeErrorText:z}),{addFiles:q,clearFiles:I,files:Q,removeUpload:$,queueFiles:N,setUploadingFile:B,setUploadPaused:G,setUploadProgress:J,setUploadSuccess:K,setUploadResumed:V}=r(D);e.useImperativeHandle(R,(()=>({clearFiles:I})));const{dragState:W,...X}=l({acceptedFileTypes:i,onDropComplete:({acceptedFiles:e,rejectedFiles:t})=>{t&&t.length>0&&U.warn("Rejected files: ",t);const o=g(e,i);q({files:o,status:y?a.QUEUED:a.ADDED,getFileErrorMessage:O})}});s({accessLevel:E,files:Q,isResumable:S,maxFileCount:h,onUploadError:C,onUploadSuccess:j,onUploadStart:k,setUploadingFile:B,setUploadProgress:J,setUploadSuccess:K,processFile:w,provider:M,path:b});const Y=0!==Q.length&&Q.every((e=>e?.status===a.UPLOADED)),_=Q.filter((e=>e.progress<100)).length>h,ee=Q.filter((e=>e?.status===a.UPLOADED)).length,ie=Q.length-ee,te=y?0:ie,oe=Q.length>0,le=!y&&ie>0,re=e.useRef(null);return e.createElement(A.Container,{className:`${t.StorageManager} ${oe?t.StorageManagerPreviewer:""}`},e.createElement(A.DropZone,{inDropZone:"inactive"!==W,...X,displayText:Z},e.createElement(e.Fragment,null,e.createElement(A.FilePicker,{onClick:function(){re.current&&(re.current.click(),re.current.value="")}},Z.browseFilesText),e.createElement(o,null,e.createElement("input",{type:"file",tabIndex:-1,ref:re,onChange:e=>{const{files:i}=e.target;i&&0!==i.length&&q({files:Array.from(i),status:y?a.QUEUED:a.ADDED,getFileErrorMessage:O})},multiple:H,accept:i.join(",")})))),oe?e.createElement(A.FileListHeader,{allUploadsSuccessful:Y,displayText:Z,fileCount:Q.length,remainingFilesCount:ie,selectedFilesCount:te}):null,e.createElement(A.FileList,{displayText:Z,files:Q,isResumable:S,onCancelUpload:({id:e,uploadTask:i})=>{i.pause(),$({id:e})},onDeleteUpload:({id:e})=>{if($({id:e}),"function"==typeof T){const i=Q.find((i=>i.id===e));i&&T({key:i.key})}},onResume:({id:e,uploadTask:i})=>{i.resume(),V({id:e})},onPause:({id:e,uploadTask:i})=>{i.pause(),G({id:e})},showThumbnails:v,hasMaxFilesError:_,maxFileCount:h}),le?e.createElement(A.FileListFooter,{displayText:Z,remainingFilesCount:ie,onClearAll:()=>{I()},onUploadAll:()=>{N()}}):null)})),{Container:n,DropZone:p,FileList:m,FileListHeader:c,FileListFooter:u,FilePicker:d});export{E as StorageManager};
+import * as React from 'react';
+import { getLogger, ComponentClassName } from '@aws-amplify/ui';
+import { VisuallyHidden } from '@aws-amplify/ui-react';
+import { useDeprecationWarning, useDropZone, useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useFileUploader } from '../FileUploader/hooks/useFileUploader/useFileUploader.mjs';
+import { useUploadFiles } from '../FileUploader/hooks/useUploadFiles/useUploadFiles.mjs';
+import { FileStatus } from '../FileUploader/types.mjs';
+import { Container } from './ui/Container/Container.mjs';
+import { DropZone } from './ui/DropZone/DropZone.mjs';
+import { FileList } from './ui/FileList/FileList.mjs';
+import { FileListHeader } from './ui/FileListHeader/FileListHeader.mjs';
+import { FileListFooter } from './ui/FileListFooter/FileListFooter.mjs';
+import { FilePicker } from './ui/FilePicker/FilePicker.mjs';
+import { checkMaxFileSize } from '../FileUploader/utils/checkMaxFileSize.mjs';
+import { defaultFileUploaderDisplayText } from '../FileUploader/utils/displayText.mjs';
+import { filterAllowedFiles } from '../FileUploader/utils/filterAllowedFiles.mjs';
+import 'aws-amplify/auth';
+import 'aws-amplify/storage';
+import { VERSION } from '../../version.mjs';
+
+const logger = getLogger('Storage');
+const MISSING_REQUIRED_PROPS_MESSAGE = '`StorageManager` requires a `maxFileCount` prop to be provided.';
+const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = '`StorageManager` does not allow usage of a `path` callback prop with an `accessLevel` prop.';
+const ACCESS_LEVEL_DEPRECATION_MESSAGE = '`accessLevel` has been deprecated and will be removed in a future major version. See migration notes at https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager';
+const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFileTypes = [], accessLevel, autoUpload = true, components, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onFileRemove, onUploadError, onUploadStart, onUploadSuccess, path, processFile, showThumbnails = true, useAccelerateEndpoint, }, ref) {
+    useDeprecationWarning({
+        message: 'The `StorageManager` component has been renamed as the `FileUploader` component.',
+        shouldWarn: false,
+    });
+    if (!maxFileCount) {
+        // eslint-disable-next-line no-console
+        console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
+    }
+    if (accessLevel && typeof path === 'function') {
+        throw new Error(ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE);
+    }
+    useDeprecationWarning({
+        message: ACCESS_LEVEL_DEPRECATION_MESSAGE,
+        shouldWarn: !!accessLevel,
+    });
+    const Components = {
+        Container,
+        DropZone,
+        FileList,
+        FilePicker,
+        FileListHeader,
+        FileListFooter,
+        ...components,
+    };
+    const allowMultipleFiles = maxFileCount === undefined ||
+        (typeof maxFileCount === 'number' && maxFileCount > 1);
+    const displayText = {
+        ...defaultFileUploaderDisplayText,
+        ...overrideDisplayText,
+    };
+    const { getFileSizeErrorText } = displayText;
+    const getMaxFileSizeErrorMessage = (file) => {
+        return checkMaxFileSize({
+            file,
+            maxFileSize,
+            getFileSizeErrorText,
+        });
+    };
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useFileUploader(defaultFiles);
+    React.useImperativeHandle(ref, () => ({ clearFiles }));
+    const { dragState, ...dropZoneProps } = useDropZone({
+        acceptedFileTypes,
+        onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
+            if (rejectedFiles && rejectedFiles.length > 0) {
+                logger.warn('Rejected files: ', rejectedFiles);
+            }
+            // We need to filter out files by extension here,
+            // we don't get filenames on the drag event, only on drop
+            const _acceptedFiles = filterAllowedFiles(acceptedFiles, acceptedFileTypes);
+            addFiles({
+                files: _acceptedFiles,
+                status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+                getFileErrorMessage: getMaxFileSizeErrorMessage,
+            });
+        },
+    });
+    useUploadFiles({
+        accessLevel,
+        files,
+        isResumable,
+        maxFileCount,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        setUploadingFile,
+        setUploadProgress,
+        setUploadSuccess,
+        processFile,
+        path,
+        useAccelerateEndpoint,
+    });
+    const onFilePickerChange = (event) => {
+        const { files } = event.target;
+        if (!files || files.length === 0) {
+            return;
+        }
+        addFiles({
+            files: Array.from(files),
+            status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+            getFileErrorMessage: getMaxFileSizeErrorMessage,
+        });
+    };
+    const onClearAll = () => {
+        clearFiles();
+    };
+    const onUploadAll = () => {
+        queueFiles();
+    };
+    const onPauseUpload = ({ id, uploadTask }) => {
+        uploadTask.pause();
+        setUploadPaused({ id });
+    };
+    const onResumeUpload = ({ id, uploadTask }) => {
+        uploadTask.resume();
+        setUploadResumed({ id });
+    };
+    const onCancelUpload = ({ id, uploadTask }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled (required to cancel upload),
+        // so we do a pause instead and remove from files
+        uploadTask.pause();
+        removeUpload({ id });
+    };
+    const onDeleteUpload = ({ id }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled, so we do a soft delete
+        // from file list, but don't remove from storage
+        removeUpload({ id });
+        if (typeof onFileRemove === 'function') {
+            const file = files.find((file) => file.id === id);
+            if (file) {
+                const key = file.resolvedKey ?? file.key;
+                onFileRemove({ key });
+            }
+        }
+    };
+    // checks if all downloads completed to 100%
+    const allUploadsSuccessful = files.length === 0
+        ? false
+        : files.every((file) => file?.status === FileStatus.UPLOADED);
+    // Displays if over max files
+    const hasMaxFilesError = files.filter((file) => file.progress < 100).length > maxFileCount;
+    const uploadedFilesLength = files.filter((file) => file?.status === FileStatus.UPLOADED).length;
+    const remainingFilesCount = files.length - uploadedFilesLength;
+    // number of files selected for upload when autoUpload is turned off
+    const selectedFilesCount = autoUpload ? 0 : remainingFilesCount;
+    const hasFiles = files.length > 0;
+    const hasUploadActions = !autoUpload && remainingFilesCount > 0;
+    const hiddenInput = React.useRef(null);
+    function handleClick() {
+        if (hiddenInput.current) {
+            hiddenInput.current.click();
+            hiddenInput.current.value = '';
+        }
+    }
+    useSetUserAgent({
+        componentName: 'StorageManager',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    return (React.createElement(Components.Container, { className: `${ComponentClassName.StorageManager} ${hasFiles ? ComponentClassName.StorageManagerPreviewer : ''}` },
+        React.createElement(Components.DropZone, { inDropZone: dragState !== 'inactive', ...dropZoneProps, displayText: displayText },
+            React.createElement(React.Fragment, null,
+                React.createElement(Components.FilePicker, { onClick: handleClick }, displayText.browseFilesText),
+                React.createElement(VisuallyHidden, null,
+                    React.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: onFilePickerChange, multiple: allowMultipleFiles, accept: acceptedFileTypes.join(',') })))),
+        hasFiles ? (React.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
+        React.createElement(Components.FileList, { displayText: displayText, files: files, isResumable: isResumable, onCancelUpload: onCancelUpload, onDeleteUpload: onDeleteUpload, onResume: onResumeUpload, onPause: onPauseUpload, showThumbnails: showThumbnails, hasMaxFilesError: hasMaxFilesError, maxFileCount: maxFileCount }),
+        hasUploadActions ? (React.createElement(Components.FileListFooter, { displayText: displayText, remainingFilesCount: remainingFilesCount, onClearAll: onClearAll, onUploadAll: onUploadAll })) : null));
+});
+// pass an empty object as first param to avoid destructive action on `StorageManagerBase`
+const StorageManager = Object.assign({}, StorageManagerBase, {
+    Container,
+    DropZone,
+    FileList,
+    FileListHeader,
+    FileListFooter,
+    FilePicker,
+});
+
+export { ACCESS_LEVEL_DEPRECATION_MESSAGE, ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE, MISSING_REQUIRED_PROPS_MESSAGE, StorageManager };

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

@@ -1 +1,8 @@
-import e from"react";import{View as r}from"@aws-amplify/ui-react";function a({children:a,className:t}){return e.createElement(r,{className:t},a)}export{a as Container};
+import React__default from 'react';
+import { View } from '@aws-amplify/ui-react';
+
+function Container({ children, className, }) {
+    return React__default.createElement(View, { className: className }, children);
+}
+
+export { Container };

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

@@ -1 +1,16 @@
-import a from"react";import e from"classnames";import{classNameModifier as r,ComponentClassName as o}from"@aws-amplify/ui";import{View as t,Text as n}from"@aws-amplify/ui-react";import{useIcons as i,IconUpload as m}from"@aws-amplify/ui-react/internal";function p({children:p,displayText:s,inDropZone:g,onDragEnter:l,onDragLeave:c,onDragOver:D,onDragStart:d,onDrop:f,testId:u}){const{dropFilesText:E}=s,S=i("storageManager");return a.createElement(t,{className:e(g&&r(o.StorageManagerDropZone,"active"),o.StorageManagerDropZone),"data-testid":u,onDragStart:d,onDragEnter:l,onDragLeave:c,onDrop:f,onDragOver:D},a.createElement(t,{as:"span","aria-hidden":!0,className:o.StorageManagerDropZoneIcon},S?.upload??a.createElement(m,null)),a.createElement(n,{className:o.StorageManagerDropZoneText},E),p)}export{p as DropZone};
+import React__default from 'react';
+import { classNames, classNameModifier, ComponentClassName } from '@aws-amplify/ui';
+import { View, Text } from '@aws-amplify/ui-react';
+import { useIcons, IconUpload } from '@aws-amplify/ui-react/internal';
+
+function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
+    const { dropFilesText } = displayText;
+    const icons = useIcons('storageManager');
+    return (React__default.createElement(View, { className: classNames(inDropZone &&
+            classNameModifier(ComponentClassName.StorageManagerDropZone, 'active'), ComponentClassName.StorageManagerDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
+        React__default.createElement(View, { as: "span", "aria-hidden": true, className: ComponentClassName.StorageManagerDropZoneIcon }, icons?.upload ?? React__default.createElement(IconUpload, null)),
+        React__default.createElement(Text, { className: ComponentClassName.StorageManagerDropZoneText }, dropFilesText),
+        children));
+}
+
+export { DropZone };

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

@@ -1 +1,23 @@
-import e from"react";import{ComponentClassName as a}from"@aws-amplify/ui";import{View as t,Loader as r,Button as l}from"@aws-amplify/ui-react";import{FileStatus as s}from"../../types.mjs";import{FileStatusMessage as i}from"./FileStatusMessage.mjs";import{FileRemoveButton as m}from"./FileRemoveButton.mjs";import{UploadDetails as o}from"./FileDetails.mjs";import{FileThumbnail as n}from"./FileThumbnail.mjs";function u({onPause:u,onResume:c,displayName:p,errorMessage:g,isImage:f,isResumable:d,loaderIsDeterminate:T,onRemove:x,progress:E,showThumbnails:S=!0,size:N,status:P,displayText:D,thumbnailUrl:U}){const{getPausedText:v,getUploadingText:y,uploadSuccessfulText:F,pauseText:M,resumeText:j}=D;return e.createElement(t,{className:a.StorageManagerFile},e.createElement(t,{className:a.StorageManagerFileWrapper},S?e.createElement(n,{isImage:f,fileName:p,url:U}):null,e.createElement(o,{displayName:p,fileSize:N}),P===s.UPLOADING?e.createElement(r,{className:a.StorageManagerLoader,variation:"linear",percentage:E,isDeterminate:T,isPercentageTextHidden:!0}):null,!d||P!==s.UPLOADING&&P!==s.PAUSED?null:P===s.PAUSED?e.createElement(l,{onClick:c,size:"small",variation:"link"},j):e.createElement(l,{onClick:u,size:"small",variation:"link"},M),e.createElement(m,{altText:`Remove file ${p}`,onClick:x})),e.createElement(i,{uploadSuccessfulText:F,getUploadingText:y,getPausedText:v,status:P,errorMessage:g,percentage:E}))}export{u as FileControl};
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Loader, Button } from '@aws-amplify/ui-react';
+import { FileStatus } from '../../../FileUploader/types.mjs';
+import { FileStatusMessage } from './FileStatusMessage.mjs';
+import { FileRemoveButton } from './FileRemoveButton.mjs';
+import { UploadDetails } from './FileDetails.mjs';
+import { FileThumbnail } from './FileThumbnail.mjs';
+
+function FileControl({ onPause, onResume, displayName, errorMessage, isImage, isResumable, loaderIsDeterminate, onRemove, progress, showThumbnails = true, size, status, displayText, thumbnailUrl, }) {
+    const { getPausedText, getUploadingText, uploadSuccessfulText, pauseButtonText, resumeButtonText, } = displayText;
+    return (React__default.createElement(View, { className: ComponentClassName.StorageManagerFile },
+        React__default.createElement(View, { className: ComponentClassName.StorageManagerFileWrapper },
+            showThumbnails ? (React__default.createElement(FileThumbnail, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
+            React__default.createElement(UploadDetails, { displayName: displayName, fileSize: size }),
+            status === FileStatus.UPLOADING ? (React__default.createElement(Loader, { className: ComponentClassName.StorageManagerLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
+            isResumable &&
+                (status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (React__default.createElement(Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__default.createElement(Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
+            React__default.createElement(FileRemoveButton, { altText: `Remove file ${displayName}`, onClick: onRemove })),
+        React__default.createElement(FileStatusMessage, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
+}
+
+export { FileControl };

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

@@ -1 +1,12 @@
-import e from"react";import{ComponentClassName as a}from"@aws-amplify/ui";import{View as m,Text as r}from"@aws-amplify/ui-react";import{humanFileSize as t}from"../../utils/humanFileSize.mjs";import"aws-amplify";const i=({displayName:i,fileSize:l})=>e.createElement(e.Fragment,null,e.createElement(m,{className:a.StorageManagerFileMain},e.createElement(r,{className:a.StorageManagerFileName},i)),e.createElement(r,{as:"span",className:a.StorageManagerFileSize},l?t(l,!0):""));export{i as UploadDetails};
+import React__default from 'react';
+import { ComponentClassName, humanFileSize } from '@aws-amplify/ui';
+import { View, Text } from '@aws-amplify/ui-react';
+
+const UploadDetails = ({ displayName, fileSize, }) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(View, { className: ComponentClassName.StorageManagerFileMain },
+            React__default.createElement(Text, { className: ComponentClassName.StorageManagerFileName }, displayName)),
+        React__default.createElement(Text, { as: "span", className: ComponentClassName.StorageManagerFileSize }, fileSize ? humanFileSize(fileSize, true) : '')));
+};
+
+export { UploadDetails };

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

@@ -1 +1,44 @@
-import e from"react";import{ComponentClassName as a}from"@aws-amplify/ui";import{View as r,Alert as s}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:m,isResumable:n,onCancelUpload:u,onDeleteUpload:p,onResume:d,onPause:c,showThumbnails:f,maxFileCount:g}){if(l.length<1)return null;const{getMaxFilesErrorText:T}=t,U=T(g);return e.createElement(r,{className:a.StorageManagerFileList},l.map((a=>{const{file:r,status:s,progress:l,error:m,key:g,isImage:T,id:U,uploadTask:h}=a,y=r&&T?URL.createObjectURL(r):"",x=!n||l>0,R=s===o.UPLOADING;return e.createElement(i,{displayName:g,errorMessage:m,displayText:t,isImage:T,isUploading:R,isResumable:n,key:U,loaderIsDeterminate:x,onRemove:()=>{n&&(s===o.UPLOADING||s===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:f,size:r?.size,status:s,thumbnailUrl:y})})),m&&e.createElement(s,{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 '../../../FileUploader/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 n,View as l}from"@aws-amplify/ui-react";const m=({altText:m,onClick:i})=>{const o=t("storageManager");return e.createElement(r,{size:"small",onClick:i},e.createElement(n,null,m),e.createElement(l,{as:"span","aria-hidden":!0,fontSize:"medium"},o?.remove??e.createElement(a,null)))};export{m 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, testId: "storage-manager-remove-button" },
+        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{ComponentClassName as t,classNameModifier as r}from"@aws-amplify/ui";import{Text as s,View as l}from"@aws-amplify/ui-react";import{useIcons as n,IconError as c,IconCheck as m}from"@aws-amplify/ui-react/internal";import{FileStatus as o}from"../../types.mjs";const u=({errorMessage:u,getPausedText:i,getUploadingText:g,percentage:p,status:S,uploadSuccessfulText:f})=>{const E=n("storageManager");switch(S){case o.UPLOADING:return e.createElement(s,{className:t.StorageManagerFileStatus},g(p));case o.PAUSED:return e.createElement(s,{className:t.StorageManagerFileStatus},i(p));case o.UPLOADED:return e.createElement(s,{className:a(t.StorageManagerFileStatus,r(t.StorageManagerFileStatus,"success"))},e.createElement(l,{as:"span",fontSize:"xl"},E?.success??e.createElement(m,null)),f);case o.ERROR:return e.createElement(s,{className:a(t.StorageManagerFileStatus,r(t.StorageManagerFileStatus,"error"))},e.createElement(l,{as:"span",fontSize:"xl"},E?.error??e.createElement(c,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 '../../../FileUploader/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{ComponentClassName as a}from"@aws-amplify/ui";import{Image as r,View as t}from"@aws-amplify/ui-react";import{useIcons as m,IconFile as i}from"@aws-amplify/ui-react/internal";const l=({fileName:l,isImage:o,url:n})=>{const c=m("storageManager"),s=o?e.createElement(r,{alt:l,src:n}):c?.file??e.createElement(i,null);return e.createElement(t,{className:a.StorageManagerFileImage},s)};export{l 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{ComponentClassName as a}from"@aws-amplify/ui";import{View as t,Button as r}from"@aws-amplify/ui-react";function l({displayText:l,remainingFilesCount:i,onClearAll:o,onUploadAll:n}){const{clearAllButtonText:m,getUploadButtonText:c}=l;return e.createElement(t,{className:a.StorageManagerPreviewerFooter},e.createElement(t,{className:a.StorageManagerPreviewerActions},e.createElement(r,{size:"small",variation:"link",onClick:o},m),e.createElement(r,{size:"small",variation:"primary",onClick:n},c(i))))}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{ComponentClassName as t}from"@aws-amplify/ui";import{Text as i}from"@aws-amplify/ui-react";function a({allUploadsSuccessful:a,displayText:l,fileCount:r,remainingFilesCount:o,selectedFilesCount:s=0}){const{getFilesUploadedText:n,getRemainingFilesText:m,getSelectedFilesText:c}=l;return e.createElement(i,{className:t.StorageManagerPreviewerText},s?c(s):a?n(r):m(o))}export{a 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 e from"react";import{ComponentClassName as r}from"@aws-amplify/ui";import{Button as a}from"@aws-amplify/ui-react";function i({children:i,className:m=r.StorageManagerFilePicker,size:t="small",...l}){return e.createElement(a,{...l,className:m,size:t},i)}export{i 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/index.mjs

@@ -1 +1,4 @@
-export{StorageImage}from"./components/StorageImage/StorageImage.mjs";export{StorageManager}from"./components/StorageManager/StorageManager.mjs";
+export { FileUploader } from './components/FileUploader/FileUploader.mjs';
+export { StorageImage } from './components/StorageImage/StorageImage.mjs';
+export { StorageManager } from './components/StorageManager/StorageManager.mjs';
+export { StorageBrowser } from './components/StorageBrowser/StorageBrowserAmplify.mjs';

package/dist/esm/version.mjs

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