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

package/dist/index.js

@@ -1 +1,782 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),a=require("react"),t=require("classnames"),s=require("@aws-amplify/ui-react"),l=require("@aws-amplify/ui-react/internal"),r=require("aws-amplify"),n=require("@aws-amplify/ui");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}var c=o(a),u=i(a),d=i(t);var m,g;function p(e,a){switch(a.type){case g.ADD_FILES:{const{files:t,status:s}=a,l=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?m.ERROR:s,isImage:e.type.startsWith("image/"),progress:-1}})),r=[...e.files,...l];return Object.assign(Object.assign({},e),{files:r})}case g.CLEAR_FILES:return Object.assign(Object.assign({},e),{files:[]});case g.QUEUE_FILES:{const{files:a}=e,t=a.reduce(((e,a)=>[...e,Object.assign(Object.assign({},a),{status:m.QUEUED})]),[]);return Object.assign(Object.assign({},e),{files:t})}case g.SET_STATUS_UPLOADING:{const{id:t,uploadTask:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:m.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case g.SET_UPLOAD_PROGRESS:{const{id:t,progress:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{progress:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case g.SET_STATUS:{const{id:t,status:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case g.REMOVE_UPLOAD:{const{id:t}=a,{files:s}=e,l=s.reduce(((e,a)=>a.id===t?[...e]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:l})}}}!function(e){e.ADDED="added",e.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(m||(m={})),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"}(g||(g={}));const f=({files:e,status:a,getFileErrorMessage:t})=>({type:g.ADD_FILES,files:e,status:a,getFileErrorMessage:t}),E=()=>({type:g.CLEAR_FILES}),S=()=>({type:g.QUEUE_FILES}),T=({id:e,uploadTask:a})=>({type:g.SET_STATUS_UPLOADING,id:e,uploadTask:a}),U=({id:e,progress:a})=>({type:g.SET_UPLOAD_PROGRESS,id:e,progress:a}),F=({id:e,status:a})=>({type:g.SET_STATUS,id:e,status:a}),C=({id:e})=>({type:g.REMOVE_UPLOAD,id:e}),b=e=>(e=>!(!n.isObject(e)||!e.key))(e)?Object.assign(Object.assign({},e),{id:e.key,status:m.UPLOADED}):void 0;function D(a){var{file:t,key:s,level:l="private",progressCallback:n,errorCallback:i,completeCallback:o,isResumable:c=!1,provider:u}=a,d=e.__rest(a,["file","key","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const m=t.type||"binary/octet-stream";return!0===c?r.Storage.put(s,t,Object.assign({level:l,resumable:!0,progressCallback:n,errorCallback:i,completeCallback:o,contentType:m,provider:u},d)):r.Storage.put(s,t,Object.assign({level:l,resumable:!1,progressCallback:n,contentType:m,provider:u},d)).then(o,i)}const x=({processFile:e,file:a,key:t})=>new Promise(((s,l)=>{const r=n.isFunction(e)?e({file:a,key:t}):{file:a,key:t};r instanceof Promise?r.then(s).catch(l):s(r)}));function O({children:e,className:a}){return u.default.createElement(s.View,{className:a},e)}function v({children:e,displayText:a,inDropZone:t,onDragEnter:r,onDragLeave:i,onDragOver:o,onDragStart:c,onDrop:m,testId:g}){var p;const{dropFilesText:f}=a,E=l.useIcons("storageManager");return u.default.createElement(s.View,{className:d.default(t&&n.classNameModifier(s.ComponentClassNames.StorageManagerDropZone,"active"),s.ComponentClassNames.StorageManagerDropZone),"data-testid":g,onDragStart:c,onDragEnter:r,onDragLeave:i,onDrop:m,onDragOver:o},u.default.createElement(s.View,{as:"span","aria-hidden":!0,className:s.ComponentClassNames.StorageManagerDropZoneIcon},null!==(p=null==E?void 0:E.upload)&&void 0!==p?p:u.default.createElement(l.IconUpload,null)),u.default.createElement(s.Text,{className:s.ComponentClassNames.StorageManagerDropZoneText},f),e)}const y=({errorMessage:e,getPausedText:a,getUploadingText:t,percentage:r,status:i,uploadSuccessfulText:o})=>{var c,g;const p=l.useIcons("storageManager");switch(i){case m.UPLOADING:return u.default.createElement(s.Text,{className:s.ComponentClassNames.StorageManagerFileStatus},t(r));case m.PAUSED:return u.default.createElement(s.Text,{className:s.ComponentClassNames.StorageManagerFileStatus},a(r));case m.UPLOADED:return u.default.createElement(s.Text,{className:d.default(s.ComponentClassNames.StorageManagerFileStatus,n.classNameModifier(s.ComponentClassNames.StorageManagerFileStatus,"success"))},u.default.createElement(s.View,{as:"span",fontSize:"xl"},null!==(c=null==p?void 0:p.success)&&void 0!==c?c:u.default.createElement(l.IconCheck,null)),o);case m.ERROR:return u.default.createElement(s.Text,{className:d.default(s.ComponentClassNames.StorageManagerFileStatus,n.classNameModifier(s.ComponentClassNames.StorageManagerFileStatus,"error"))},u.default.createElement(s.View,{as:"span",fontSize:"xl"},null!==(g=null==p?void 0:p.error)&&void 0!==g?g:u.default.createElement(l.IconError,null)),e);default:return null}},N=({altText:e,onClick:a})=>{var t;const r=l.useIcons("storageManager");return u.default.createElement(s.Button,{size:"small",onClick:a},u.default.createElement(s.VisuallyHidden,null,e),u.default.createElement(s.View,{as:"span","aria-hidden":!0,fontSize:"medium"},null!==(t=null==r?void 0:r.remove)&&void 0!==t?t:u.default.createElement(l.IconClose,null)))},L=({displayName:e,fileSize:a})=>u.default.createElement(u.default.Fragment,null,u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerFileMain},u.default.createElement(s.Text,{className:s.ComponentClassNames.StorageManagerFileName},e)),u.default.createElement(s.Text,{as:"span",className:s.ComponentClassNames.StorageManagerFileSize},a?n.humanFileSize(a,!0):"")),k=({fileName:e,isImage:a,url:t})=>{var r;const n=l.useIcons("storageManager"),i=a?u.default.createElement(s.Image,{alt:e,src:t}):null!==(r=null==n?void 0:n.file)&&void 0!==r?r:u.default.createElement(l.IconFile,null);return u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerFileImage},i)};function P({onPause:e,onResume:a,displayName:t,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:i,onRemove:o,progress:c,showThumbnails:d=!0,size:g,status:p,displayText:f,thumbnailUrl:E}){const{getPausedText:S,getUploadingText:T,uploadSuccessfulText:U,pauseText:F,resumeText:C}=f;return u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerFile},u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerFileWrapper},d?u.default.createElement(k,{isImage:r,fileName:t,url:E}):null,u.default.createElement(L,{displayName:t,fileSize:g}),p===m.UPLOADING?u.default.createElement(s.Loader,{className:s.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:c,isDeterminate:i,isPercentageTextHidden:!0}):null,!n||p!==m.UPLOADING&&p!==m.PAUSED?null:p===m.PAUSED?u.default.createElement(s.Button,{onClick:a,size:"small",variation:"link"},C):u.default.createElement(s.Button,{onClick:e,size:"small",variation:"link"},F),u.default.createElement(N,{altText:`Remove file ${t}`,onClick:o})),u.default.createElement(y,{uploadSuccessfulText:U,getUploadingText:T,getPausedText:S,status:p,errorMessage:l,percentage:c}))}function A({displayText:e,files:a,hasMaxFilesError:t,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:i,onPause:o,showThumbnails:c,maxFileCount:d}){if(a.length<1)return null;const{getMaxFilesErrorText:g}=e,p=g(d);return u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerFileList},a.map((a=>{const{file:t,status:s,progress:d,error:g,key:p,isImage:f,id:E,uploadTask:S}=a,T=t&&f?URL.createObjectURL(t):"",U=!l||d>0,F=s===m.UPLOADING;return u.default.createElement(P,{displayName:p,errorMessage:g,displayText:e,isImage:f,isUploading:F,isResumable:l,key:E,loaderIsDeterminate:U,onRemove:()=>{l&&(s===m.UPLOADING||s===m.PAUSED)&&S?r({id:E,uploadTask:S}):n({id:E})},onPause:()=>{S&&o({id:E,uploadTask:S})},onResume:()=>{S&&i({id:E,uploadTask:S})},progress:d,showThumbnails:c,size:null==t?void 0:t.size,status:s,thumbnailUrl:T})})),t&&u.default.createElement(s.Alert,{variation:"error",heading:p}))}function M({allUploadsSuccessful:e,displayText:a,fileCount:t,remainingFilesCount:l,selectedFilesCount:r=0}){const{getFilesUploadedText:n,getRemainingFilesText:i,getSelectedFilesText:o}=a;return u.default.createElement(s.Text,{className:s.ComponentClassNames.StorageManagerPreviewerText},r?o(r):e?n(t):i(l))}function h({displayText:e,remainingFilesCount:a,onClearAll:t,onUploadAll:l}){const{clearAllButtonText:r,getUploadButtonText:n}=e;return u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerPreviewerFooter},u.default.createElement(s.View,{className:s.ComponentClassNames.StorageManagerPreviewerActions},u.default.createElement(s.Button,{size:"small",variation:"link",onClick:t},r),u.default.createElement(s.Button,{size:"small",variation:"primary",onClick:l},n(a))))}function R(a){var{children:t,className:l=s.ComponentClassNames.StorageManagerFilePicker,size:r="small"}=a,n=e.__rest(a,["children","className","size"]);return u.default.createElement(s.Button,Object.assign({},n,{className:l,size:r}),t)}const I=({file:e,getFileSizeErrorText:a,maxFileSize:t})=>void 0===t?"":e.size>t?a(function(e,a=!1,t=1){const s=a?1e3:1024;if(Math.abs(e)<s)return`${e} B`;const l=a?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let r=-1;const n=Math.pow(10,t);do{e/=s,++r}while(Math.round(Math.abs(e)*n)/n>=s&&r<l.length-1);return e.toFixed(t)+" "+l[r]}(t,!0)):"",_={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}%`},j=new r.Logger("Storage.StorageManager");const w=Object.assign(c.forwardRef((function({acceptedFileTypes:a=[],accessLevel:t,autoUpload:r=!0,defaultFiles:n,displayText:i,isResumable:o=!1,maxFileCount:d,maxFileSize:g,onUploadError:y,onUploadSuccess:N,onFileRemove:L,onUploadStart:k,showThumbnails:P=!0,processFile:w,components:B,provider:z,path:G},V){t&&d||j.warn("FileUploader requires accessLevel and maxFileCount props");const $=Object.assign({Container:O,DropZone:v,FileList:A,FilePicker:R,FileListHeader:M,FileListFooter:h},B),Z=void 0===d||"number"==typeof d&&d>1,q=Object.assign(Object.assign({},_),i),{getFileSizeErrorText:Q}=q,H=e=>I({file:e,maxFileSize:g,getFileSizeErrorText:Q}),{addFiles:W,clearFiles:K,files:Y,removeUpload:J,queueFiles:X,setUploadingFile:ee,setUploadPaused:ae,setUploadProgress:te,setUploadSuccess:se,setUploadResumed:le}=function(e=[]){const[{files:a},t]=u.default.useReducer(p,{files:Array.isArray(e)?e.map(b).filter((e=>!!e)):[]});return{removeUpload:({id:e})=>{t(C({id:e}))},setUploadPaused:({id:e})=>{t(F({id:e,status:m.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t(U({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(F({id:e,status:m.UPLOADING}))},setUploadSuccess:({id:e})=>{t(F({id:e,status:m.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t(T({id:a,uploadTask:e}))},queueFiles:()=>{t(S())},addFiles:({files:e,status:a,getFileErrorMessage:s})=>{t(f({files:e,status:a,getFileErrorMessage:s}))},clearFiles:()=>{t(E())},files:a}}(n);c.useImperativeHandle(V,(()=>({clearFiles:K})));const re=l.useDropZone({acceptedFileTypes:a,onDropComplete:({acceptedFiles:e,rejectedFiles:t})=>{t&&t.length>0&&j.warn("Rejected files: ",t);const s=((e,a)=>!a||0===a.length||a.includes("*")?e:e.filter((e=>{const t=e.name||"",s=(e.type||"").toLowerCase(),l=s.replace(/\/.*$/,"");return a.some((e=>{const a=e.trim().toLowerCase();return"."===a.charAt(0)?t.toLowerCase().endsWith(a):a.endsWith("/*")?l===a.replace(/\/.*$/,""):s===a}))})))(e,a);W({files:s,status:r?m.QUEUED:m.ADDED,getFileErrorMessage:H})}}),{dragState:ne}=re,ie=e.__rest(re,["dragState"]);!function({files:a,accessLevel:t,isResumable:s,setUploadProgress:l,setUploadingFile:r,setUploadSuccess:n,onUploadError:i,onUploadSuccess:o,onUploadStart:u,maxFileCount:d,processFile:g,provider:p,path:f=""}){c.useEffect((()=>{const c=a.filter((e=>e.status===m.QUEUED));if(!(c.length>d))for(const{file:a,key:d,id:m}of c){const c=e=>{null==o||o(e),n({id:m})},E=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);l({id:m,progress:a})},S=e=>{null==i||i(e,{key:d})};a&&x({processFile:g,file:a,key:d}).then((a=>{var{key:l}=a,n=e.__rest(a,["key"]);null==u||u({key:l});const i=D(Object.assign(Object.assign({},n),{isResumable:s,provider:p,key:f+l,level:t,completeCallback:c,progressCallback:E,errorCallback:S}));r({id:m,uploadTask:s?i:void 0})}))}}),[a,t,s,l,r,i,o,u,d,n,g,p,f])}({accessLevel:t,files:Y,isResumable:o,maxFileCount:d,onUploadError:y,onUploadSuccess:N,onUploadStart:k,setUploadingFile:ee,setUploadProgress:te,setUploadSuccess:se,processFile:w,provider:z,path:G});const oe=0!==Y.length&&Y.every((e=>(null==e?void 0:e.status)===m.UPLOADED)),ce=Y.filter((e=>e.progress<100)).length>d,ue=Y.filter((e=>(null==e?void 0:e.status)===m.UPLOADED)).length,de=Y.length-ue,me=r?0:de,ge=Y.length>0,pe=!r&&de>0,fe=c.useRef(null);return c.createElement($.Container,{className:`${s.ComponentClassNames.StorageManager} ${ge?s.ComponentClassNames.StorageManagerPreviewer:""}`},c.createElement($.DropZone,Object.assign({inDropZone:"inactive"!==ne},ie,{displayText:q}),c.createElement(c.Fragment,null,c.createElement($.FilePicker,{onClick:function(){fe.current&&(fe.current.click(),fe.current.value="")}},q.browseFilesText),c.createElement(s.VisuallyHidden,null,c.createElement("input",{type:"file",tabIndex:-1,ref:fe,onChange:e=>{const{files:a}=e.target;a&&0!==a.length&&W({files:Array.from(a),status:r?m.QUEUED:m.ADDED,getFileErrorMessage:H})},multiple:Z,accept:a.join(",")})))),ge?c.createElement($.FileListHeader,{allUploadsSuccessful:oe,displayText:q,fileCount:Y.length,remainingFilesCount:de,selectedFilesCount:me}):null,c.createElement($.FileList,{displayText:q,files:Y,isResumable:o,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),J({id:e})},onDeleteUpload:({id:e})=>{if(J({id:e}),"function"==typeof L){const a=Y.find((a=>a.id===e));a&&L({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),le({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),ae({id:e})},showThumbnails:P,hasMaxFilesError:ce,maxFileCount:d}),pe?c.createElement($.FileListFooter,{displayText:q,remainingFilesCount:de,onClearAll:()=>{K()},onUploadAll:()=>{X()}}):null)})),{Container:O,DropZone:v,FileList:A,FileListHeader:M,FileListFooter:h,FilePicker:R});exports.StorageImage=a=>{var{accessLevel:t,className:r,fallbackSrc:n,identityId:i,imgKey:o,onStorageGetError:u}=a,m=e.__rest(a,["accessLevel","className","fallbackSrc","identityId","imgKey","onStorageGetError"]);const g=c.useMemo((()=>({level:t,identityId:i})),[t,i]),p=l.useStorageURL({key:o,options:g,fallbackURL:n,onStorageGetError:u});return c.createElement(s.Image,Object.assign({},m,{className:d.default(s.ComponentClassNames.StorageImage,r),src:p}))},exports.StorageManager=w;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@aws-amplify/ui');
+var uiReact = require('@aws-amplify/ui-react');
+var internal = require('@aws-amplify/ui-react/internal');
+var uiReactCore = require('@aws-amplify/ui-react-core');
+var storage = require('aws-amplify/storage');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const VERSION = '2.3.1';
+
+const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, onStorageGetError, validateObjectExistence, ...rest }) => {
+    const resolvedValidateObjectExistence = ui.isUndefined(validateObjectExistence)
+        ? true
+        : validateObjectExistence;
+    const options = React__namespace.useMemo(() => ({
+        accessLevel,
+        identityId,
+        validateObjectExistence: resolvedValidateObjectExistence,
+    }), [accessLevel, identityId, resolvedValidateObjectExistence]);
+    uiReactCore.useSetUserAgent({
+        componentName: 'StorageImage',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    const url = internal.useStorageURL({
+        key: imgKey,
+        options,
+        fallbackURL: fallbackSrc,
+        onStorageGetError,
+    });
+    return (React__namespace.createElement(uiReact.Image, { ...rest, className: ui.classNames(ui.ComponentClassName.StorageImage, className), src: url }));
+};
+
+var FileStatus;
+(function (FileStatus) {
+    FileStatus["ADDED"] = "added";
+    FileStatus["QUEUED"] = "queued";
+    FileStatus["UPLOADING"] = "uploading";
+    FileStatus["PAUSED"] = "paused";
+    FileStatus["ERROR"] = "error";
+    FileStatus["UPLOADED"] = "uploaded";
+})(FileStatus || (FileStatus = {}));
+
+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 = {}));
+
+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,
+                        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: uploadTask ? uploadTask : undefined,
+                        },
+                    ];
+                }
+                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,
+            };
+        }
+    }
+}
+
+const addFilesAction = ({ files, status, getFileErrorMessage, }) => {
+    return {
+        type: StorageManagerActionTypes.ADD_FILES,
+        files,
+        status,
+        getFileErrorMessage,
+    };
+};
+const clearFilesAction = () => {
+    return {
+        type: StorageManagerActionTypes.CLEAR_FILES,
+    };
+};
+const queueFilesAction = () => {
+    return {
+        type: StorageManagerActionTypes.QUEUE_FILES,
+    };
+};
+const setUploadingFileAction = ({ id, uploadTask, }) => {
+    return {
+        type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
+        id,
+        uploadTask,
+    };
+};
+const setUploadProgressAction = ({ id, progress, }) => {
+    return {
+        type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
+        id,
+        progress,
+    };
+};
+const setUploadStatusAction = ({ id, status, }) => {
+    return {
+        type: StorageManagerActionTypes.SET_STATUS,
+        id,
+        status,
+    };
+};
+const removeUploadAction = ({ id }) => {
+    return {
+        type: StorageManagerActionTypes.REMOVE_UPLOAD,
+        id,
+    };
+};
+
+const isDefaultFile = (file) => !!(ui.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["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,
+    };
+}
+
+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 = storage.uploadData(input);
+    output.result
+        .then(() => {
+        if (output.state === 'SUCCESS') {
+            completeCallback?.({ key });
+        }
+    })
+        .catch((e) => {
+        const error = e;
+        errorCallback?.(error.message);
+    });
+    return output;
+}
+
+/**
+ * Utility function that takes the processFile prop, along with a file a key
+ * and returns a Promise that resolves to { file, key, ..rest }
+ * regardless if processFile is defined and if it is sync or async
+ */
+const resolveFile = ({ processFile, file, key, }) => {
+    return new Promise((resolve, reject) => {
+        const result = ui.isFunction(processFile)
+            ? processFile({ file, key })
+            : { file, key };
+        if (result instanceof Promise) {
+            result.then(resolve).catch(reject);
+        }
+        else {
+            resolve(result);
+        }
+    });
+};
+
+function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path = '', }) {
+    React__namespace.useEffect(() => {
+        const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
+        if (filesReadyToUpload.length > maxFileCount) {
+            return;
+        }
+        for (const { file, key, id } of filesReadyToUpload) {
+            const onComplete = (event) => {
+                onUploadSuccess?.(event);
+                setUploadSuccess({ id });
+            };
+            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 progressPercentage = event.totalBytes === undefined || event.totalBytes === 0
+                    ? 100
+                    : Math.floor((event.transferredBytes / event.totalBytes) * 100);
+                setUploadProgress({ id, progress: progressPercentage });
+            };
+            const onError = (error) => {
+                onUploadError?.(error, { key });
+            };
+            if (file) {
+                resolveFile({ processFile, file, key }).then(({ key: processedKey, ...rest }) => {
+                    onUploadStart?.({ key: processedKey });
+                    const uploadTask = uploadFile({
+                        ...rest,
+                        key: processedKey,
+                        level: accessLevel,
+                        progressCallback: onProgress,
+                        errorCallback: onError,
+                        completeCallback: onComplete,
+                    });
+                    setUploadingFile({
+                        id,
+                        uploadTask,
+                    });
+                });
+            }
+        }
+    }, [
+        files,
+        accessLevel,
+        isResumable,
+        setUploadProgress,
+        setUploadingFile,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        maxFileCount,
+        setUploadSuccess,
+        processFile,
+        path,
+    ]);
+}
+
+function Container({ children, className, }) {
+    return React__default["default"].createElement(uiReact.View, { className: className }, children);
+}
+
+function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
+    const { dropFilesText } = displayText;
+    const icons = internal.useIcons('storageManager');
+    return (React__default["default"].createElement(uiReact.View, { className: ui.classNames(inDropZone &&
+            ui.classNameModifier(ui.ComponentClassName.StorageManagerDropZone, 'active'), ui.ComponentClassName.StorageManagerDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
+        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, className: ui.ComponentClassName.StorageManagerDropZoneIcon }, icons?.upload ?? React__default["default"].createElement(internal.IconUpload, null)),
+        React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerDropZoneText }, dropFilesText),
+        children));
+}
+
+const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, percentage, status, uploadSuccessfulText, }) => {
+    const icons = internal.useIcons('storageManager');
+    switch (status) {
+        case FileStatus.UPLOADING: {
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getUploadingText(percentage)));
+        }
+        case FileStatus.PAUSED:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getPausedText(percentage)));
+        case FileStatus.UPLOADED:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'success')) },
+                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.success ?? React__default["default"].createElement(internal.IconCheck, null)),
+                uploadSuccessfulText));
+        case FileStatus.ERROR:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'error')) },
+                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.error ?? React__default["default"].createElement(internal.IconError, null)),
+                errorMessage));
+        default:
+            return null;
+    }
+};
+
+const FileRemoveButton = ({ altText, onClick, }) => {
+    const icons = internal.useIcons('storageManager');
+    return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick },
+        React__default["default"].createElement(uiReact.VisuallyHidden, null, altText),
+        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default["default"].createElement(internal.IconClose, null))));
+};
+
+/**
+ * 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];
+}
+
+const checkMaxFileSize = ({ file, getFileSizeErrorText, maxFileSize, }) => {
+    if (maxFileSize === undefined)
+        return '';
+    if (file.size > maxFileSize) {
+        return getFileSizeErrorText(humanFileSize(maxFileSize, true));
+    }
+    return '';
+};
+
+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}%`;
+    },
+};
+
+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;
+        });
+    });
+};
+
+const UploadDetails = ({ displayName, fileSize, }) => {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileMain },
+            React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileName }, displayName)),
+        React__default["default"].createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.StorageManagerFileSize }, fileSize ? humanFileSize(fileSize, true) : '')));
+};
+
+const FileThumbnail = ({ fileName, isImage, url, }) => {
+    const icons = internal.useIcons('storageManager');
+    const thumbnail = isImage ? (React__default["default"].createElement(uiReact.Image, { alt: fileName, src: url })) : (icons?.file ?? React__default["default"].createElement(internal.IconFile, null));
+    return (React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileImage }, thumbnail));
+};
+
+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["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFile },
+        React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileWrapper },
+            showThumbnails ? (React__default["default"].createElement(FileThumbnail, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
+            React__default["default"].createElement(UploadDetails, { displayName: displayName, fileSize: size }),
+            status === FileStatus.UPLOADING ? (React__default["default"].createElement(uiReact.Loader, { className: ui.ComponentClassName.StorageManagerLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
+            isResumable &&
+                (status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (React__default["default"].createElement(uiReact.Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__default["default"].createElement(uiReact.Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
+            React__default["default"].createElement(FileRemoveButton, { altText: `Remove file ${displayName}`, onClick: onRemove })),
+        React__default["default"].createElement(FileStatusMessage, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
+}
+
+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["default"].createElement(uiReact.View, { className: ui.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["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["default"].createElement(uiReact.Alert, { variation: "error", heading: headingMaxFiles }))));
+}
+
+function FileListHeader({ allUploadsSuccessful, displayText, fileCount, remainingFilesCount, selectedFilesCount = 0, }) {
+    const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } = displayText;
+    return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerPreviewerText }, selectedFilesCount
+        ? getSelectedFilesText(selectedFilesCount)
+        : allUploadsSuccessful
+            ? getFilesUploadedText(fileCount)
+            : getRemainingFilesText(remainingFilesCount)));
+}
+
+function FileListFooter({ displayText, remainingFilesCount, onClearAll, onUploadAll, }) {
+    const { clearAllButtonText, getUploadButtonText } = displayText;
+    return (React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerPreviewerFooter },
+        React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerPreviewerActions },
+            React__default["default"].createElement(uiReact.Button, { size: "small", variation: "link", onClick: onClearAll }, clearAllButtonText),
+            React__default["default"].createElement(uiReact.Button, { size: "small", variation: "primary", onClick: onUploadAll }, getUploadButtonText(remainingFilesCount)))));
+}
+
+function FilePicker({ children, className = ui.ComponentClassName.StorageManagerFilePicker, size = 'small', ...props }) {
+    return (React__default["default"].createElement(uiReact.Button, { ...props, className: className, size: size }, children));
+}
+
+const logger = ui.getLogger('Storage');
+function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload = true, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, onUploadStart, showThumbnails = true, processFile, components, path, }, ref) {
+    if (!accessLevel || !maxFileCount) {
+        logger.warn('StorageManager requires accessLevel and maxFileCount props');
+    }
+    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__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
+    const { dragState, ...dropZoneProps } = internal.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__namespace.useRef(null);
+    function handleClick() {
+        if (hiddenInput.current) {
+            hiddenInput.current.click();
+            hiddenInput.current.value = '';
+        }
+    }
+    uiReactCore.useSetUserAgent({
+        componentName: 'StorageManager',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    return (React__namespace.createElement(Components.Container, { className: `${ui.ComponentClassName.StorageManager} ${hasFiles ? ui.ComponentClassName.StorageManagerPreviewer : ''}` },
+        React__namespace.createElement(Components.DropZone, { inDropZone: dragState !== 'inactive', ...dropZoneProps, displayText: displayText },
+            React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(Components.FilePicker, { onClick: handleClick }, displayText.browseFilesText),
+                React__namespace.createElement(uiReact.VisuallyHidden, null,
+                    React__namespace.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: onFilePickerChange, multiple: allowMultipleFiles, accept: acceptedFileTypes.join(',') })))),
+        hasFiles ? (React__namespace.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
+        React__namespace.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__namespace.createElement(Components.FileListFooter, { displayText: displayText, remainingFilesCount: remainingFilesCount, onClearAll: onClearAll, onUploadAll: onUploadAll })) : null));
+}
+const StorageManager = Object.assign(React__namespace.forwardRef(StorageManagerBase), {
+    Container,
+    DropZone,
+    FileList,
+    FileListHeader,
+    FileListFooter,
+    FilePicker,
+});
+
+exports.StorageImage = StorageImage;
+exports.StorageManager = StorageManager;