@aws-amplify/ui-react-storage 0.0.0-studio-console-80bb2e2-20230921222703 → 0.0.0-theming-v2-c5d1f72-20240709163904

package/dist/esm/components/StorageImage/StorageImage.mjs

@@ -1 +1,57 @@
-import*as e from"react";import r from"classnames";import{ComponentClassName as a}from"@aws-amplify/ui";import{Image as t}from"@aws-amplify/ui-react";import{useStorageURL as o}from"@aws-amplify/ui-react/internal";const m=({accessLevel:m,className:i,fallbackSrc:s,identityId:c,imgKey:l,onStorageGetError:n,...f})=>{const p=e.useMemo((()=>({level:m,identityId:c})),[m,c]),y=o({key:l,options:p,fallbackURL:s,onStorageGetError:n});return e.createElement(t,{...f,className:r(a.StorageImage,i),src:y})};export{m as StorageImage};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Image } from '@aws-amplify/ui-react';
+import { useDeprecationWarning } from '@aws-amplify/ui-react/internal';
+import { useSetUserAgent, useGetUrl } from '@aws-amplify/ui-react-core';
+import { VERSION } from '../../version.mjs';
+
+const MISSING_REQUIRED_PROP_MESSAGE = '`StorageImage` requires either an `imgKey` or `path` prop.';
+const HAS_DEPRECATED_PROPS_MESSAGE = '`imgKey`, `accessLevel`, and `identityId` will be replaced with `path` in a future major version. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props';
+const HAS_PATH_AND_KEY_MESSAGE = '`imgKey` is ignored when both `imgKey` and `path` props are provided.';
+const HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE = '`accessLevel` and `identityId` are ignored when the `path` prop is provided.';
+const getDeprecationMessage = ({ hasImgkey, hasPath, hasDeprecatedOptions, }) => {
+    let message = '';
+    if (hasPath && hasImgkey) {
+        message = HAS_PATH_AND_KEY_MESSAGE;
+    }
+    else if (hasPath && hasDeprecatedOptions) {
+        message = HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE;
+    }
+    else if (hasImgkey) {
+        message = HAS_DEPRECATED_PROPS_MESSAGE;
+    }
+    return message;
+};
+const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, path, onStorageGetError, onGetUrlError, validateObjectExistence = true, ...rest }) => {
+    const hasImgkey = !!imgKey;
+    const hasPath = !!path;
+    const hasDeprecatedOptions = !!accessLevel || !!identityId;
+    const message = getDeprecationMessage({
+        hasDeprecatedOptions,
+        hasImgkey,
+        hasPath,
+    });
+    useDeprecationWarning({ message, shouldWarn: !!message });
+    if (!hasImgkey && !hasPath) {
+        throw new Error(MISSING_REQUIRED_PROP_MESSAGE);
+    }
+    useSetUserAgent({
+        componentName: 'StorageImage',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    const onError = onGetUrlError ?? onStorageGetError;
+    const input = React.useMemo(() => ({
+        ...(path ? { path } : { key: imgKey }),
+        onError,
+        options: {
+            accessLevel,
+            targetIdentityId: identityId,
+            validateObjectExistence,
+        },
+    }), [accessLevel, imgKey, identityId, onError, path, validateObjectExistence]);
+    const { url } = useGetUrl(input);
+    return (React.createElement(Image, { ...rest, className: classNames(ComponentClassName.StorageImage, className), src: url?.toString() ?? fallbackSrc }));
+};
+
+export { HAS_DEPRECATED_PROPS_MESSAGE, HAS_PATH_AND_KEY_MESSAGE, HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE, MISSING_REQUIRED_PROP_MESSAGE, StorageImage };

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

@@ -1 +1,181 @@
-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, useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useDropZone } from '@aws-amplify/ui-react/internal';
+import { useStorageManager } from './hooks/useStorageManager/useStorageManager.mjs';
+import { useUploadFiles } from './hooks/useUploadFiles/useUploadFiles.mjs';
+import { FileStatus } from './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 './utils/checkMaxFileSize.mjs';
+import { defaultStorageManagerDisplayText } from './utils/displayText.mjs';
+import { filterAllowedFiles } from './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, }, ref) {
+    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 = {
+        ...defaultStorageManagerDisplayText,
+        ...overrideDisplayText,
+    };
+    const { getFileSizeErrorText } = displayText;
+    const getMaxFileSizeErrorMessage = (file) => {
+        return checkMaxFileSize({
+            file,
+            maxFileSize,
+            getFileSizeErrorText,
+        });
+    };
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(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,
+    });
+    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) {
+                onFileRemove({ key: file.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/hooks/useStorageManager/actions.mjs

@@ -1 +1,35 @@
-import{StorageManagerActionTypes as s}from"./types.mjs";const e=({files:e,status:t,getFileErrorMessage:p})=>({type:s.ADD_FILES,files:e,status:t,getFileErrorMessage:p}),t=()=>({type:s.CLEAR_FILES}),p=()=>({type:s.QUEUE_FILES}),E=({id:e,uploadTask:t})=>({type:s.SET_STATUS_UPLOADING,id:e,uploadTask:t}),i=({id:e,progress:t})=>({type:s.SET_UPLOAD_PROGRESS,id:e,progress:t}),r=({id:e,status:t})=>({type:s.SET_STATUS,id:e,status:t}),S=({id:e})=>({type:s.REMOVE_UPLOAD,id:e});export{e as addFilesAction,t as clearFilesAction,p as queueFilesAction,S as removeUploadAction,i as setUploadProgressAction,r as setUploadStatusAction,E as setUploadingFileAction};
+import { StorageManagerActionTypes } from './types.mjs';
+
+const addFilesAction = ({ files, status, getFileErrorMessage, }) => ({
+    type: StorageManagerActionTypes.ADD_FILES,
+    files,
+    status,
+    getFileErrorMessage,
+});
+const clearFilesAction = () => ({
+    type: StorageManagerActionTypes.CLEAR_FILES,
+});
+const queueFilesAction = () => ({
+    type: StorageManagerActionTypes.QUEUE_FILES,
+});
+const setUploadingFileAction = ({ id, uploadTask, }) => ({
+    type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
+    id,
+    uploadTask,
+});
+const setUploadProgressAction = ({ id, progress, }) => ({
+    type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
+    id,
+    progress,
+});
+const setUploadStatusAction = ({ id, status, }) => ({
+    type: StorageManagerActionTypes.SET_STATUS,
+    id,
+    status,
+});
+const removeUploadAction = ({ id }) => ({
+    type: StorageManagerActionTypes.REMOVE_UPLOAD,
+    id,
+});
+
+export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };

package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs

@@ -1 +1,132 @@
-import{FileStatus as s}from"../../types.mjs";import{StorageManagerActionTypes as e}from"./types.mjs";function r(r,t){switch(t.type){case e.ADD_FILES:{const{files:e,status:i}=t,a=e.map((e=>{const r=t.getFileErrorMessage(e);return{id:e.name,file:e,error:r,key:e.name,status:r?s.ERROR:i,isImage:e.type.startsWith("image/"),progress:-1}})),o=[...r.files,...a];return{...r,files:o}}case e.CLEAR_FILES:return{...r,files:[]};case e.QUEUE_FILES:{const{files:e}=r,t=e.reduce(((e,r)=>[...e,{...r,status:s.QUEUED}]),[]);return{...r,files:t}}case e.SET_STATUS_UPLOADING:{const{id:e,uploadTask:i}=t,{files:a}=r,o=a.reduce(((r,t)=>t.id===e?[...r,{...t,status:s.UPLOADING,progress:0,uploadTask:i||void 0}]:[...r,t]),[]);return{...r,files:o}}case e.SET_UPLOAD_PROGRESS:{const{id:s,progress:e}=t,{files:i}=r,a=i.reduce(((r,t)=>t.id===s?[...r,{...t,progress:e}]:[...r,t]),[]);return{...r,files:a}}case e.SET_STATUS:{const{id:s,status:e}=t,{files:i}=r,a=i.reduce(((r,t)=>t.id===s?[...r,{...t,status:e}]:[...r,t]),[]);return{...r,files:a}}case e.REMOVE_UPLOAD:{const{id:s}=t,{files:e}=r,i=e.reduce(((e,r)=>r.id===s?[...e]:[...e,r]),[]);return{...r,files:i}}}}export{r as storageManagerStateReducer};
+import { FileStatus } from '../../types.mjs';
+import { StorageManagerActionTypes } from './types.mjs';
+
+function storageManagerStateReducer(state, action) {
+    switch (action.type) {
+        case StorageManagerActionTypes.ADD_FILES: {
+            const { files, status } = action;
+            const newUploads = files.map((file) => {
+                const errorText = action.getFileErrorMessage(file);
+                return {
+                    // make sure id is unique,
+                    // we only use it internally and don't send it to Storage
+                    id: `${Date.now()}-${file.name}`,
+                    file,
+                    error: errorText,
+                    key: file.name,
+                    status: errorText ? FileStatus.ERROR : status,
+                    isImage: file.type.startsWith('image/'),
+                    progress: -1,
+                };
+            });
+            const newFiles = [...state.files, ...newUploads];
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.CLEAR_FILES: {
+            return {
+                ...state,
+                files: [],
+            };
+        }
+        case StorageManagerActionTypes.QUEUE_FILES: {
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                return [
+                    ...files,
+                    {
+                        ...currentFile,
+                        ...(currentFile.status === FileStatus.ADDED
+                            ? { status: FileStatus.QUEUED }
+                            : {}),
+                    },
+                ];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.SET_STATUS_UPLOADING: {
+            const { id, uploadTask } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    return [
+                        ...files,
+                        {
+                            ...currentFile,
+                            status: FileStatus.UPLOADING,
+                            progress: 0,
+                            uploadTask,
+                        },
+                    ];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.SET_UPLOAD_PROGRESS: {
+            const { id, progress } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    return [
+                        ...files,
+                        {
+                            ...currentFile,
+                            progress,
+                        },
+                    ];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.SET_STATUS: {
+            const { id, status } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    return [
+                        ...files,
+                        {
+                            ...currentFile,
+                            status,
+                        },
+                    ];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case StorageManagerActionTypes.REMOVE_UPLOAD: {
+            const { id } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    // remove by not returning currentFile
+                    return [...files];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+    }
+}
+
+export { storageManagerStateReducer };

package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs

@@ -1 +1,12 @@
-var E;!function(E){E.ADD_FILES="ADD_FILES",E.CLEAR_FILES="CLEAR_FILES",E.QUEUE_FILES="QUEUE_FILES",E.SET_STATUS="SET_STATUS",E.SET_STATUS_UPLOADING="SET_STATUS_UPLOADING",E.SET_UPLOAD_PROGRESS="SET_UPLOAD_PROGRESS",E.REMOVE_UPLOAD="REMOVE_UPLOAD"}(E||(E={}));export{E as StorageManagerActionTypes};
+var StorageManagerActionTypes;
+(function (StorageManagerActionTypes) {
+    StorageManagerActionTypes["ADD_FILES"] = "ADD_FILES";
+    StorageManagerActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
+    StorageManagerActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
+    StorageManagerActionTypes["SET_STATUS"] = "SET_STATUS";
+    StorageManagerActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
+    StorageManagerActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
+    StorageManagerActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";
+})(StorageManagerActionTypes || (StorageManagerActionTypes = {}));
+
+export { StorageManagerActionTypes };

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

@@ -1 +1,58 @@
-import s from"react";import{FileStatus as e}from"../../types.mjs";import{storageManagerStateReducer as i}from"./reducer.mjs";import{addFilesAction as r,clearFilesAction as t,queueFilesAction as o,setUploadingFileAction as a,setUploadProgressAction as d,setUploadStatusAction as l,removeUploadAction as p}from"./actions.mjs";import{isObject as u}from"@aws-amplify/ui";const m=s=>(s=>!(!u(s)||!s.key))(s)?{...s,id:s.key,status:e.UPLOADED}:void 0;function f(u=[]){const[{files:f},c]=s.useReducer(i,{files:Array.isArray(u)?u.map(m).filter((s=>!!s)):[]});return{removeUpload:({id:s})=>{c(p({id:s}))},setUploadPaused:({id:s})=>{c(l({id:s,status:e.PAUSED}))},setUploadProgress:({progress:s,id:e})=>{c(d({id:e,progress:s}))},setUploadResumed:({id:s})=>{c(l({id:s,status:e.UPLOADING}))},setUploadSuccess:({id:s})=>{c(l({id:s,status:e.UPLOADED}))},setUploadingFile:({uploadTask:s,id:e})=>{c(a({id:e,uploadTask:s}))},queueFiles:()=>{c(o())},addFiles:({files:s,status:e,getFileErrorMessage:i})=>{c(r({files:s,status:e,getFileErrorMessage:i}))},clearFiles:()=>{c(t())},files:f}}export{f as useStorageManager};
+import React__default from 'react';
+import { isObject } from '@aws-amplify/ui';
+import { FileStatus } from '../../types.mjs';
+import { storageManagerStateReducer } from './reducer.mjs';
+import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
+
+const isDefaultFile = (file) => !!(isObject(file) && file.key);
+const createFileFromDefault = (file) => isDefaultFile(file)
+    ? { ...file, id: file.key, status: FileStatus.UPLOADED }
+    : undefined;
+function useStorageManager(defaultFiles = []) {
+    const [{ files }, dispatch] = React__default.useReducer(storageManagerStateReducer, {
+        files: (Array.isArray(defaultFiles)
+            ? defaultFiles.map(createFileFromDefault).filter((file) => !!file)
+            : []),
+    });
+    const addFiles = ({ files, status, getFileErrorMessage, }) => {
+        dispatch(addFilesAction({ files, status, getFileErrorMessage }));
+    };
+    const clearFiles = () => {
+        dispatch(clearFilesAction());
+    };
+    const queueFiles = () => {
+        dispatch(queueFilesAction());
+    };
+    const setUploadingFile = ({ uploadTask, id, }) => {
+        dispatch(setUploadingFileAction({ id, uploadTask }));
+    };
+    const setUploadProgress = ({ progress, id, }) => {
+        dispatch(setUploadProgressAction({ id, progress }));
+    };
+    const setUploadSuccess = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.UPLOADED }));
+    };
+    const setUploadPaused = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.PAUSED }));
+    };
+    const setUploadResumed = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.UPLOADING }));
+    };
+    const removeUpload = ({ id }) => {
+        dispatch(removeUploadAction({ id }));
+    };
+    return {
+        removeUpload,
+        setUploadPaused,
+        setUploadProgress,
+        setUploadResumed,
+        setUploadSuccess,
+        setUploadingFile,
+        queueFiles,
+        addFiles,
+        clearFiles,
+        files,
+    };
+}
+
+export { useStorageManager };

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

@@ -1 +1,74 @@
-import*as e from"react";import{uploadFile as o}from"../../utils/uploadFile.mjs";import{FileStatus as s}from"../../types.mjs";import{resolveFile as l}from"./resolveFile.mjs";function r({files:r,accessLevel:t,isResumable:a,setUploadProgress:i,setUploadingFile:p,setUploadSuccess:c,onUploadError:d,onUploadSuccess:f,onUploadStart:m,maxFileCount:n,processFile:u,provider:k,path:U=""}){e.useEffect((()=>{const e=r.filter((e=>e.status===s.QUEUED));if(!(e.length>n))for(const{file:s,key:r,id:n}of e){const e=e=>{f?.(e),c({id:n})},y=e=>{const o=0===e.total?100:Math.floor(e.loaded/e.total*100);i({id:n,progress:o})},v=e=>{d?.(e,{key:r})};s&&l({processFile:u,file:s,key:r}).then((({key:s,...l})=>{m?.({key:s});const r=o({...l,isResumable:a,provider:k,key:U+s,level:t,completeCallback:e,progressCallback:y,errorCallback:v});p({id:n,uploadTask:a?r:void 0})}))}}),[r,t,a,i,p,d,f,m,n,c,u,k,U])}export{r as useUploadFiles};
+import * as React from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { getInput } from '../../utils/getInput.mjs';
+import { uploadFile } from '../../utils/uploadFile.mjs';
+import { FileStatus } from '../../types.mjs';
+
+function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
+    React.useEffect(() => {
+        const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
+        if (filesReadyToUpload.length > maxFileCount) {
+            return;
+        }
+        for (const { file, key, id } of filesReadyToUpload) {
+            const onProgress = (event) => {
+                /**
+                 * When a file is zero bytes, the progress.total will equal zero.
+                 * Therefore, this will prevent a divide by zero error.
+                 */
+                const progress = event.totalBytes === undefined || event.totalBytes === 0
+                    ? 100
+                    : Math.floor((event.transferredBytes / event.totalBytes) * 100);
+                setUploadProgress({ id, progress });
+            };
+            if (file) {
+                const input = getInput({
+                    accessLevel,
+                    file,
+                    key,
+                    onProgress,
+                    path,
+                    processFile,
+                });
+                uploadFile({
+                    input,
+                    onComplete: (event) => {
+                        if (isFunction(onUploadSuccess)) {
+                            onUploadSuccess({
+                                key: event.key ??
+                                    event.path,
+                            });
+                        }
+                        setUploadSuccess({ id });
+                    },
+                    onError: ({ key, error }) => {
+                        if (isFunction(onUploadError)) {
+                            onUploadError(error.message, { key });
+                        }
+                    },
+                    onStart: ({ key, uploadTask }) => {
+                        if (isFunction(onUploadStart)) {
+                            onUploadStart({ key });
+                        }
+                        setUploadingFile({ id, uploadTask });
+                    },
+                });
+            }
+        }
+    }, [
+        files,
+        accessLevel,
+        isResumable,
+        setUploadProgress,
+        setUploadingFile,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        maxFileCount,
+        setUploadSuccess,
+        processFile,
+        path,
+    ]);
+}
+
+export { useUploadFiles };

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

@@ -1 +1,11 @@
-var d;!function(d){d.ADDED="added",d.QUEUED="queued",d.UPLOADING="uploading",d.PAUSED="paused",d.ERROR="error",d.UPLOADED="uploaded"}(d||(d={}));export{d as FileStatus};
+var FileStatus;
+(function (FileStatus) {
+    FileStatus["ADDED"] = "added";
+    FileStatus["QUEUED"] = "queued";
+    FileStatus["UPLOADING"] = "uploading";
+    FileStatus["PAUSED"] = "paused";
+    FileStatus["ERROR"] = "error";
+    FileStatus["UPLOADED"] = "uploaded";
+})(FileStatus || (FileStatus = {}));
+
+export { FileStatus };

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 '../../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 };