@aws-amplify/ui-react-storage 0.0.1 → 1.0.1

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

@@ -1 +1 @@
-import*as e from"react";import{Logger as i}from"aws-amplify";import{ComponentClassNames as s}from"@aws-amplify/ui-react";import{useDropZone as o}from"./hooks/useDropZone/useDropZone.mjs";import{useStorageManager as r}from"./hooks/useStorageManager/useStorageManager.mjs";import{useUploadFiles as l}from"./hooks/useUploadFiles/useUploadFiles.mjs";import{FileStatus as t}from"./types.mjs";import{Container as a}from"./ui/Container/Container.mjs";import{DropZone as n}from"./ui/DropZone/DropZone.mjs";import{FilePicker as p}from"./ui/DropZone/FilePicker.mjs";import{FileList as m}from"./ui/FileList/FileList.mjs";import{FileListHeader as d}from"./ui/FileListHeader/FileListHeader.mjs";import{checkMaxFileSize as u}from"./utils/checkMaxFileSize.mjs";import{defaultStorageManagerDisplayText as c}from"./utils/displayText.mjs";import{filterAllowedFiles as F}from"./utils/filterAllowedFiles.mjs";import"tslib";const f=new i("Storage.StorageManager");function g({acceptedFileTypes:i,accessLevel:g,defaultFiles:h,displayText:U,isResumable:y=!1,maxFileCount:x,maxFileSize:T,onUploadError:j,onUploadSuccess:S,onFileRemove:C,showThumbnails:L=!0,processFile:k,components:E,provider:v,path:b}){i&&g&&x||f.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const D=Object.assign({Container:a,DropZone:n,FileList:m,FilePicker:p,FileListHeader:d},E),M=void 0===x||"number"==typeof x&&x>1,P=Object.assign(Object.assign({},c),U),{getFileSizeErrorText:w}=P,Z=e=>u({file:e,maxFileSize:T,getFileSizeErrorText:w}),{addFiles:R,files:z,removeUpload:H,setUploadingFile:O,setUploadPaused:A,setUploadProgress:$,setUploadSuccess:q,setUploadResumed:N}=r(h),B=o({onChange:e=>{const{files:s}=e.dataTransfer;if(!s||0===s.length)return;const o=F(Array.from(s),i);R({files:o,getFileErrorMessage:Z})}});l({accessLevel:g,files:z,isResumable:y,maxFileCount:x,onUploadError:j,onUploadSuccess:S,setUploadingFile:O,setUploadProgress:$,setUploadSuccess:q,processFile:k,provider:v,path:b});const G=0!==z.length&&z.every((e=>100===(null==e?void 0:e.progress))),I=z.filter((e=>e.progress<100)).length>x,J=z.filter((e=>(null==e?void 0:e.status)===t.UPLOADED)).length,K=z.length-J,Q=z.length>0;return e.createElement(D.Container,{className:`${s.StorageManager} ${Q?s.StorageManagerPreviewer:""}`},e.createElement(D.DropZone,Object.assign({},B,{displayText:P}),e.createElement(D.FilePicker,{onFileChange:e=>{const{files:i}=e.target;i&&0!==i.length&&R({files:Array.from(i),getFileErrorMessage:Z})},displayText:P,acceptedFileTypes:i,allowMultipleFiles:M})),Q?e.createElement(D.FileListHeader,{allUploadsSuccessful:G,displayText:P,fileCount:z.length,remainingFilesCount:K}):null,e.createElement(D.FileList,{displayText:P,files:z,isResumable:y,onCancelUpload:({id:e,uploadTask:i})=>{i.pause(),H({id:e})},onDeleteUpload:({id:e})=>{if(H({id:e}),"function"==typeof C){const i=z.find((i=>i.id===e));i&&C({key:i.key})}},onResume:({id:e,uploadTask:i})=>{i.resume(),N({id:e})},onPause:({id:e,uploadTask:i})=>{i.pause(),A({id:e})},showThumbnails:L,hasMaxFilesError:I,maxFileCount:x}))}g.Container=a,g.DropZone=n,g.FileList=m,g.FileListHeader=d,g.FilePicker=p;export{g as StorageManager};
+import*as e from"react";import{Logger as i}from"aws-amplify";import{ComponentClassNames as s,VisuallyHidden as r}from"@aws-amplify/ui-react";import{useDropZone as o}from"./hooks/useDropZone/useDropZone.mjs";import{useStorageManager as l}from"./hooks/useStorageManager/useStorageManager.mjs";import{useUploadFiles as t}from"./hooks/useUploadFiles/useUploadFiles.mjs";import{FileStatus as a}from"./types.mjs";import{Container as n}from"./ui/Container/Container.mjs";import{DropZone as m}from"./ui/DropZone/DropZone.mjs";import{FileList as p}from"./ui/FileList/FileList.mjs";import{FileListHeader as c}from"./ui/FileListHeader/FileListHeader.mjs";import{FilePicker as u}from"./ui/FilePicker/FilePicker.mjs";import{checkMaxFileSize as d}from"./utils/checkMaxFileSize.mjs";import{defaultStorageManagerDisplayText as f}from"./utils/displayText.mjs";import{filterAllowedFiles as F}from"./utils/filterAllowedFiles.mjs";import"tslib";const g=new i("Storage.StorageManager");function h({acceptedFileTypes:i,accessLevel:h,defaultFiles:U,displayText:x,isResumable:y=!1,maxFileCount:j,maxFileSize:k,onUploadError:E,onUploadSuccess:S,onFileRemove:T,showThumbnails:C=!0,processFile:L,components:b,provider:v,path:P}){i&&h&&j||g.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const D=Object.assign({Container:n,DropZone:m,FileList:p,FilePicker:u,FileListHeader:c},b),w=void 0===j||"number"==typeof j&&j>1,M=Object.assign(Object.assign({},f),x),{getFileSizeErrorText:R}=M,Z=e=>d({file:e,maxFileSize:k,getFileSizeErrorText:R}),{addFiles:z,files:H,removeUpload:O,setUploadingFile:A,setUploadPaused:$,setUploadProgress:q,setUploadSuccess:I,setUploadResumed:N}=l(U),B=o({onChange:e=>{const{files:s}=e.dataTransfer;if(!s||0===s.length)return;const r=F(Array.from(s),i);z({files:r,getFileErrorMessage:Z})}});t({accessLevel:h,files:H,isResumable:y,maxFileCount:j,onUploadError:E,onUploadSuccess:S,setUploadingFile:A,setUploadProgress:q,setUploadSuccess:I,processFile:L,provider:v,path:P});const G=0!==H.length&&H.every((e=>100===(null==e?void 0:e.progress))),J=H.filter((e=>e.progress<100)).length>j,K=H.filter((e=>(null==e?void 0:e.status)===a.UPLOADED)).length,Q=H.length-K,V=H.length>0,W=e.useRef(null);return e.createElement(D.Container,{className:`${s.StorageManager} ${V?s.StorageManagerPreviewer:""}`},e.createElement(D.DropZone,Object.assign({},B,{displayText:M}),e.createElement(e.Fragment,null,e.createElement(D.FilePicker,{onClick:function(){W.current&&(W.current.click(),W.current.value="")}},M.browseFilesText),e.createElement(r,null,e.createElement("input",{type:"file",tabIndex:-1,ref:W,onChange:e=>{const{files:i}=e.target;i&&0!==i.length&&z({files:Array.from(i),getFileErrorMessage:Z})},multiple:w,accept:i.join(",")})))),V?e.createElement(D.FileListHeader,{allUploadsSuccessful:G,displayText:M,fileCount:H.length,remainingFilesCount:Q}):null,e.createElement(D.FileList,{displayText:M,files:H,isResumable:y,onCancelUpload:({id:e,uploadTask:i})=>{i.pause(),O({id:e})},onDeleteUpload:({id:e})=>{if(O({id:e}),"function"==typeof T){const i=H.find((i=>i.id===e));i&&T({key:i.key})}},onResume:({id:e,uploadTask:i})=>{i.resume(),N({id:e})},onPause:({id:e,uploadTask:i})=>{i.pause(),$({id:e})},showThumbnails:C,hasMaxFilesError:J,maxFileCount:j}))}h.Container=n,h.DropZone=m,h.FileList=p,h.FileListHeader=c,h.FilePicker=u;export{h as StorageManager};

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

@@ -1 +1 @@
-import*as e from"react";import{uploadFile as l}from"../../utils/uploadFile.mjs";import{FileStatus as o}from"../../types.mjs";function s({files:s,accessLevel:i,isResumable:a,setUploadProgress:r,setUploadingFile:t,setUploadSuccess:c,onUploadError:f,onUploadSuccess:p,maxFileCount:d,processFile:n,provider:m,path:u=""}){e.useEffect((()=>{const e=s.filter((e=>e.status===o.QUEUED));if(!(e.length>d))for(const{file:o,key:s,id:d}of e){const e=e=>{null==p||p(e),c({id:d})},k=e=>{const l=0===e.total?100:Math.floor(e.loaded/e.total*100);r({id:d,progress:l})},b=e=>{null==f||f(e)};if(o){const r="function"==typeof n?n({file:o,key:s}):{file:o,key:s};if(a){const o=l({file:r.file,fileName:u+r.key,isResumable:!0,level:i,completeCallback:e,progressCallback:k,errorCallback:b,provider:m});t({id:d,uploadTask:o})}else l({file:r.file,fileName:u+r.key,isResumable:!1,level:i,completeCallback:e,progressCallback:k,errorCallback:b,provider:m}),t({id:d})}}}),[s,i,a,r,t,f,p,d,c,n,m])}export{s as useUploadFiles};
+import*as e from"react";import{uploadFile as l}from"../../utils/uploadFile.mjs";import{FileStatus as o}from"../../types.mjs";function s({files:s,accessLevel:i,isResumable:a,setUploadProgress:r,setUploadingFile:t,setUploadSuccess:c,onUploadError:f,onUploadSuccess:p,maxFileCount:d,processFile:n,provider:m,path:u=""}){e.useEffect((()=>{const e=s.filter((e=>e.status===o.QUEUED));if(!(e.length>d))for(const{file:o,key:s,id:d}of e){const e=e=>{null==p||p(e),c({id:d})},k=e=>{const l=0===e.total?100:Math.floor(e.loaded/e.total*100);r({id:d,progress:l})},b=e=>{null==f||f(e)};if(o){const r="function"==typeof n?n({file:o,key:s}):{file:o,key:s};if(a){const o=l({file:r.file,fileName:u+r.key,isResumable:!0,level:i,completeCallback:e,progressCallback:k,errorCallback:b,provider:m});t({id:d,uploadTask:o})}else l({file:r.file,fileName:u+r.key,isResumable:!1,level:i,completeCallback:e,progressCallback:k,errorCallback:b,provider:m}),t({id:d})}}}),[s,i,a,r,t,f,p,d,c,n,m,u])}export{s as useUploadFiles};

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

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

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

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

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("aws-amplify"),t=require("@aws-amplify/ui-react"),s=require("tslib"),l=require("classnames"),r=require("@aws-amplify/ui"),n=require("@aws-amplify/ui-react/internal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 u,c,d=o(e),p=i(e),m=o(l);function g(e,a){switch(a.type){case c.ADD_FILES:{const{files:t}=a,s=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?u.ERROR:u.QUEUED,isImage:e.type.startsWith("image/"),progress:-1}})),l=[...e.files,...s];return Object.assign(Object.assign({},e),{files:l})}case c.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:u.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.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 c.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 c.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.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(u||(u={})),function(e){e.ADD_FILES="ADD_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"}(c||(c={}));const f=({id:e,status:a})=>({type:c.SET_STATUS,id:e,status:a});function E(e=[]){const[{files:a},t]=d.default.useReducer(g,{files:e.map((e=>Object.assign(Object.assign({},e),{id:e.key,key:e.key,status:u.UPLOADED})))});return{removeUpload:({id:e})=>{t((({id:e})=>({type:c.REMOVE_UPLOAD,id:e}))({id:e}))},setUploadPaused:({id:e})=>{t(f({id:e,status:u.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t((({id:e,progress:a})=>({type:c.SET_UPLOAD_PROGRESS,id:e,progress:a}))({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(f({id:e,status:u.UPLOADING}))},setUploadSuccess:({id:e})=>{t(f({id:e,status:u.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t((({id:e,uploadTask:a})=>({type:c.SET_STATUS_UPLOADING,id:e,uploadTask:a}))({id:a,uploadTask:e}))},addFiles:({files:e,getFileErrorMessage:a})=>{t((({files:e,getFileErrorMessage:a})=>({type:c.ADD_FILES,files:e,getFileErrorMessage:a}))({files:e,getFileErrorMessage:a}))},files:a}}function T(e){var{file:t,fileName:l,level:r="private",progressCallback:n,errorCallback:o,completeCallback:i,isResumable:u=!1,provider:c}=e,d=s.__rest(e,["file","fileName","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const p=t.type||"binary/octet-stream";return!0===u?a.Storage.put(l,t,Object.assign({level:r,resumable:!0,progressCallback:n,errorCallback:o,completeCallback:i,contentType:p,provider:c},d)):a.Storage.put(l,t,Object.assign({level:r,resumable:!1,progressCallback:n,contentType:p,provider:c},d)).then(i,o)}function S({children:e,className:a}){return d.default.createElement(t.View,{className:a},e)}function U({children:e,displayText:a,inDropZone:s,onDragEnter:l,onDragLeave:o,onDragOver:i,onDragStart:u,onDrop:c,testId:p}){const{dropFilesText:g}=a;return d.default.createElement(t.View,{className:m.default(s&&r.classNameModifier(t.ComponentClassNames.StorageManagerDropZone,"active"),t.ComponentClassNames.StorageManagerDropZone),"data-testid":p,onDragStart:u,onDragEnter:l,onDragLeave:o,onDrop:c,onDragOver:i},d.default.createElement(n.IconUpload,{"aria-hidden":!0,className:t.ComponentClassNames.StorageManagerDropZoneIcon}),d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerDropZoneText},g),e)}function C({acceptedFileTypes:e,allowMultipleFiles:a,displayText:s,onFileChange:l}){const r=d.default.useRef(null),{browseFilesText:n}=s;return d.default.createElement(t.View,null,d.default.createElement(t.Button,{className:t.ComponentClassNames.StorageManagerDropZoneButton,onClick:function(){r.current&&(r.current.click(),r.current.value="")},size:"small"},n),d.default.createElement(t.VisuallyHidden,null,d.default.createElement("input",{type:"file",tabIndex:-1,ref:r,onChange:l,multiple:a,accept:e.join(",")})))}const D=({errorMessage:e,getPausedText:a,getUploadingText:s,percentage:l,status:o,uploadSuccessfulText:i})=>{switch(o){case u.UPLOADING:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},s(l));case u.PAUSED:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},a(l));case u.UPLOADED:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,r.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"success"))},d.default.createElement(n.IconCheck,{fontSize:"xl"})," ",i);case u.ERROR:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,r.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"error"))},d.default.createElement(n.IconError,{fontSize:"xl"})," ",e);default:return null}},F=({altText:e,onClick:a})=>d.default.createElement(t.Button,{size:"small",onClick:a},d.default.createElement(t.VisuallyHidden,null,e),d.default.createElement(n.IconClose,{"aria-hidden":!0,fontSize:"medium"})),b=({displayName:e,fileSize:a})=>d.default.createElement(d.default.Fragment,null,d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileMain},d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileName},e)),d.default.createElement(t.Text,{as:"span",className:t.ComponentClassNames.StorageManagerFileSize},a?r.humanFileSize(a,!0):"")),x=({fileName:e,isImage:a,url:s})=>{const l=a?d.default.createElement(t.Image,{alt:e,src:s}):d.default.createElement(n.IconFile,null);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileImage},l)};function O({onPause:e,onResume:a,displayName:s,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:o,onRemove:i,progress:c,showThumbnails:p=!0,size:m,status:g,displayText:f,thumbnailUrl:E}){const{getPausedText:T,getUploadingText:S,uploadSuccessfulText:U,pauseText:C,resumeText:O}=f;return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFile},d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileWrapper},p?d.default.createElement(x,{isImage:r,fileName:s,url:E}):null,d.default.createElement(b,{displayName:s,fileSize:m}),g===u.UPLOADING?d.default.createElement(t.Loader,{className:t.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:c,isDeterminate:o,isPercentageTextHidden:!0}):null,!n||g!==u.UPLOADING&&g!==u.PAUSED?null:g===u.PAUSED?d.default.createElement(t.Button,{onClick:a,size:"small",variation:"link"},O):d.default.createElement(t.Button,{onClick:e,size:"small",variation:"link"},C),d.default.createElement(F,{altText:`Remove file ${s}`,onClick:i})),d.default.createElement(D,{uploadSuccessfulText:U,getUploadingText:S,getPausedText:T,status:g,errorMessage:l,percentage:c}))}function N({displayText:e,files:a,hasMaxFilesError:s,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:o,onPause:i,showThumbnails:c,maxFileCount:p}){if(a.length<1)return null;const{getMaxFilesErrorText:m}=e,g=m(p);return d.default.createElement(t.View,{className:"amplify-storagemanager--filelist"},a.map((a=>{const{file:t,status:s,progress:p,error:m,key:g,isImage:f,id:E,uploadTask:T}=a,S=t&&f?URL.createObjectURL(t):"",U=!l||p>0,C=s===u.UPLOADING;return d.default.createElement(O,{displayName:g,errorMessage:m,displayText:e,isImage:f,isUploading:C,isResumable:l,key:E,loaderIsDeterminate:U,onRemove:()=>{l&&(s===u.UPLOADING||s===u.PAUSED)&&T?r({id:E,uploadTask:T}):n({id:E})},onPause:()=>{T&&i({id:E,uploadTask:T})},onResume:()=>{T&&o({id:E,uploadTask:T})},progress:p,showThumbnails:c,size:null==t?void 0:t.size,status:s,thumbnailUrl:S})})),s&&d.default.createElement(t.Alert,{variation:"error",heading:g}))}function P({fileCount:e,remainingFilesCount:a,displayText:s,allUploadsSuccessful:l}){const{getFilesUploadedText:r,getRemainingFilesText:n}=s;return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerPreviewerText},l?r(e):n(a))}const y=({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)):"",k={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`,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 successfully",getPausedText:e=>`Paused: ${e}%`},v=new a.Logger("Storage.StorageManager");function h({acceptedFileTypes:a,accessLevel:s,defaultFiles:l,displayText:r,isResumable:n=!1,maxFileCount:o,maxFileSize:i,onUploadError:c,onUploadSuccess:d,onFileRemove:m,showThumbnails:g=!0,processFile:f,components:D,provider:F,path:b}){a&&s&&o||v.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const x=Object.assign({Container:S,DropZone:U,FileList:N,FilePicker:C,FileListHeader:P},D),O=void 0===o||"number"==typeof o&&o>1,h=Object.assign(Object.assign({},k),r),{getFileSizeErrorText:M}=h,L=e=>y({file:e,maxFileSize:i,getFileSizeErrorText:M}),{addFiles:R,files:A,removeUpload:w,setUploadingFile:I,setUploadPaused:_,setUploadProgress:j,setUploadSuccess:B,setUploadResumed:z}=E(l),G=function({onChange:a}){const[t,s]=e.useState(!1);return{onDragStart:e=>{e.dataTransfer.clearData()},onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),s(!1)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",s(!0)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),s(!1),a(e)},inDropZone:t}}({onChange:e=>{const{files:t}=e.dataTransfer;if(!t||0===t.length)return;const s=((e,a)=>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}))})))(Array.from(t),a);R({files:s,getFileErrorMessage:L})}});!function({files:e,accessLevel:a,isResumable:t,setUploadProgress:s,setUploadingFile:l,setUploadSuccess:r,onUploadError:n,onUploadSuccess:o,maxFileCount:i,processFile:c,provider:d,path:m=""}){p.useEffect((()=>{const p=e.filter((e=>e.status===u.QUEUED));if(!(p.length>i))for(const{file:e,key:i,id:u}of p){const p=e=>{null==o||o(e),r({id:u})},g=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);s({id:u,progress:a})},f=e=>{null==n||n(e)};if(e){const s="function"==typeof c?c({file:e,key:i}):{file:e,key:i};if(t){const e=T({file:s.file,fileName:m+s.key,isResumable:!0,level:a,completeCallback:p,progressCallback:g,errorCallback:f,provider:d});l({id:u,uploadTask:e})}else T({file:s.file,fileName:m+s.key,isResumable:!1,level:a,completeCallback:p,progressCallback:g,errorCallback:f,provider:d}),l({id:u})}}}),[e,a,t,s,l,n,o,i,r,c,d])}({accessLevel:s,files:A,isResumable:n,maxFileCount:o,onUploadError:c,onUploadSuccess:d,setUploadingFile:I,setUploadProgress:j,setUploadSuccess:B,processFile:f,provider:F,path:b});const $=0!==A.length&&A.every((e=>100===(null==e?void 0:e.progress))),V=A.filter((e=>e.progress<100)).length>o,Z=A.filter((e=>(null==e?void 0:e.status)===u.UPLOADED)).length,q=A.length-Z,H=A.length>0;return p.createElement(x.Container,{className:`${t.ComponentClassNames.StorageManager} ${H?t.ComponentClassNames.StorageManagerPreviewer:""}`},p.createElement(x.DropZone,Object.assign({},G,{displayText:h}),p.createElement(x.FilePicker,{onFileChange:e=>{const{files:a}=e.target;a&&0!==a.length&&R({files:Array.from(a),getFileErrorMessage:L})},displayText:h,acceptedFileTypes:a,allowMultipleFiles:O})),H?p.createElement(x.FileListHeader,{allUploadsSuccessful:$,displayText:h,fileCount:A.length,remainingFilesCount:q}):null,p.createElement(x.FileList,{displayText:h,files:A,isResumable:n,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),w({id:e})},onDeleteUpload:({id:e})=>{if(w({id:e}),"function"==typeof m){const a=A.find((a=>a.id===e));a&&m({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),z({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),_({id:e})},showThumbnails:g,hasMaxFilesError:V,maxFileCount:o}))}h.Container=S,h.DropZone=U,h.FileList=N,h.FileListHeader=P,h.FilePicker=C,exports.StorageManager=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("aws-amplify"),t=require("@aws-amplify/ui-react"),s=require("tslib"),l=require("classnames"),r=require("@aws-amplify/ui"),n=require("@aws-amplify/ui-react/internal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 u,c,d=o(e),p=i(e),m=o(l);function g(e,a){switch(a.type){case c.ADD_FILES:{const{files:t}=a,s=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?u.ERROR:u.QUEUED,isImage:e.type.startsWith("image/"),progress:-1}})),l=[...e.files,...s];return Object.assign(Object.assign({},e),{files:l})}case c.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:u.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.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 c.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 c.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.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(u||(u={})),function(e){e.ADD_FILES="ADD_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"}(c||(c={}));const f=({id:e,status:a})=>({type:c.SET_STATUS,id:e,status:a});function E(e=[]){const[{files:a},t]=d.default.useReducer(g,{files:e.map((e=>Object.assign(Object.assign({},e),{id:e.key,key:e.key,status:u.UPLOADED})))});return{removeUpload:({id:e})=>{t((({id:e})=>({type:c.REMOVE_UPLOAD,id:e}))({id:e}))},setUploadPaused:({id:e})=>{t(f({id:e,status:u.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t((({id:e,progress:a})=>({type:c.SET_UPLOAD_PROGRESS,id:e,progress:a}))({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(f({id:e,status:u.UPLOADING}))},setUploadSuccess:({id:e})=>{t(f({id:e,status:u.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t((({id:e,uploadTask:a})=>({type:c.SET_STATUS_UPLOADING,id:e,uploadTask:a}))({id:a,uploadTask:e}))},addFiles:({files:e,getFileErrorMessage:a})=>{t((({files:e,getFileErrorMessage:a})=>({type:c.ADD_FILES,files:e,getFileErrorMessage:a}))({files:e,getFileErrorMessage:a}))},files:a}}function T(e){var{file:t,fileName:l,level:r="private",progressCallback:n,errorCallback:o,completeCallback:i,isResumable:u=!1,provider:c}=e,d=s.__rest(e,["file","fileName","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const p=t.type||"binary/octet-stream";return!0===u?a.Storage.put(l,t,Object.assign({level:r,resumable:!0,progressCallback:n,errorCallback:o,completeCallback:i,contentType:p,provider:c},d)):a.Storage.put(l,t,Object.assign({level:r,resumable:!1,progressCallback:n,contentType:p,provider:c},d)).then(i,o)}function S({children:e,className:a}){return d.default.createElement(t.View,{className:a},e)}function U({children:e,displayText:a,inDropZone:s,onDragEnter:l,onDragLeave:o,onDragOver:i,onDragStart:u,onDrop:c,testId:p}){const{dropFilesText:g}=a;return d.default.createElement(t.View,{className:m.default(s&&r.classNameModifier(t.ComponentClassNames.StorageManagerDropZone,"active"),t.ComponentClassNames.StorageManagerDropZone),"data-testid":p,onDragStart:u,onDragEnter:l,onDragLeave:o,onDrop:c,onDragOver:i},d.default.createElement(n.IconUpload,{"aria-hidden":!0,className:t.ComponentClassNames.StorageManagerDropZoneIcon}),d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerDropZoneText},g),e)}const C=({errorMessage:e,getPausedText:a,getUploadingText:s,percentage:l,status:o,uploadSuccessfulText:i})=>{switch(o){case u.UPLOADING:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},s(l));case u.PAUSED:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},a(l));case u.UPLOADED:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,r.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"success"))},d.default.createElement(n.IconCheck,{fontSize:"xl"})," ",i);case u.ERROR:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,r.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"error"))},d.default.createElement(n.IconError,{fontSize:"xl"})," ",e);default:return null}},D=({altText:e,onClick:a})=>d.default.createElement(t.Button,{size:"small",onClick:a},d.default.createElement(t.VisuallyHidden,null,e),d.default.createElement(n.IconClose,{"aria-hidden":!0,fontSize:"medium"})),b=({displayName:e,fileSize:a})=>d.default.createElement(d.default.Fragment,null,d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileMain},d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileName},e)),d.default.createElement(t.Text,{as:"span",className:t.ComponentClassNames.StorageManagerFileSize},a?r.humanFileSize(a,!0):"")),F=({fileName:e,isImage:a,url:s})=>{const l=a?d.default.createElement(t.Image,{alt:e,src:s}):d.default.createElement(n.IconFile,null);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileImage},l)};function x({onPause:e,onResume:a,displayName:s,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:o,onRemove:i,progress:c,showThumbnails:p=!0,size:m,status:g,displayText:f,thumbnailUrl:E}){const{getPausedText:T,getUploadingText:S,uploadSuccessfulText:U,pauseText:x,resumeText:O}=f;return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFile},d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileWrapper},p?d.default.createElement(F,{isImage:r,fileName:s,url:E}):null,d.default.createElement(b,{displayName:s,fileSize:m}),g===u.UPLOADING?d.default.createElement(t.Loader,{className:t.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:c,isDeterminate:o,isPercentageTextHidden:!0}):null,!n||g!==u.UPLOADING&&g!==u.PAUSED?null:g===u.PAUSED?d.default.createElement(t.Button,{onClick:a,size:"small",variation:"link"},O):d.default.createElement(t.Button,{onClick:e,size:"small",variation:"link"},x),d.default.createElement(D,{altText:`Remove file ${s}`,onClick:i})),d.default.createElement(C,{uploadSuccessfulText:U,getUploadingText:S,getPausedText:T,status:g,errorMessage:l,percentage:c}))}function O({displayText:e,files:a,hasMaxFilesError:s,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:o,onPause:i,showThumbnails:c,maxFileCount:p}){if(a.length<1)return null;const{getMaxFilesErrorText:m}=e,g=m(p);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileList},a.map((a=>{const{file:t,status:s,progress:p,error:m,key:g,isImage:f,id:E,uploadTask:T}=a,S=t&&f?URL.createObjectURL(t):"",U=!l||p>0,C=s===u.UPLOADING;return d.default.createElement(x,{displayName:g,errorMessage:m,displayText:e,isImage:f,isUploading:C,isResumable:l,key:E,loaderIsDeterminate:U,onRemove:()=>{l&&(s===u.UPLOADING||s===u.PAUSED)&&T?r({id:E,uploadTask:T}):n({id:E})},onPause:()=>{T&&i({id:E,uploadTask:T})},onResume:()=>{T&&o({id:E,uploadTask:T})},progress:p,showThumbnails:c,size:null==t?void 0:t.size,status:s,thumbnailUrl:S})})),s&&d.default.createElement(t.Alert,{variation:"error",heading:g}))}function N({fileCount:e,remainingFilesCount:a,displayText:s,allUploadsSuccessful:l}){const{getFilesUploadedText:r,getRemainingFilesText:n}=s;return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerPreviewerText},l?r(e):n(a))}function P(e){var{children:a,className:l=t.ComponentClassNames.StorageManagerFilePicker,size:r="small"}=e,n=s.__rest(e,["children","className","size"]);return d.default.createElement(t.Button,Object.assign({},n,{className:l,size:r}),a)}const y=({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)):"",k={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`,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 successfully",getPausedText:e=>`Paused: ${e}%`},v=new a.Logger("Storage.StorageManager");function h({acceptedFileTypes:a,accessLevel:s,defaultFiles:l,displayText:r,isResumable:n=!1,maxFileCount:o,maxFileSize:i,onUploadError:c,onUploadSuccess:d,onFileRemove:m,showThumbnails:g=!0,processFile:f,components:C,provider:D,path:b}){a&&s&&o||v.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const F=Object.assign({Container:S,DropZone:U,FileList:O,FilePicker:P,FileListHeader:N},C),x=void 0===o||"number"==typeof o&&o>1,h=Object.assign(Object.assign({},k),r),{getFileSizeErrorText:M}=h,L=e=>y({file:e,maxFileSize:i,getFileSizeErrorText:M}),{addFiles:R,files:A,removeUpload:_,setUploadingFile:j,setUploadPaused:w,setUploadProgress:I,setUploadSuccess:z,setUploadResumed:B}=E(l),G=function({onChange:a}){const[t,s]=e.useState(!1);return{onDragStart:e=>{e.dataTransfer.clearData()},onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),s(!1)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",s(!0)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),s(!1),a(e)},inDropZone:t}}({onChange:e=>{const{files:t}=e.dataTransfer;if(!t||0===t.length)return;const s=((e,a)=>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}))})))(Array.from(t),a);R({files:s,getFileErrorMessage:L})}});!function({files:e,accessLevel:a,isResumable:t,setUploadProgress:s,setUploadingFile:l,setUploadSuccess:r,onUploadError:n,onUploadSuccess:o,maxFileCount:i,processFile:c,provider:d,path:m=""}){p.useEffect((()=>{const p=e.filter((e=>e.status===u.QUEUED));if(!(p.length>i))for(const{file:e,key:i,id:u}of p){const p=e=>{null==o||o(e),r({id:u})},g=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);s({id:u,progress:a})},f=e=>{null==n||n(e)};if(e){const s="function"==typeof c?c({file:e,key:i}):{file:e,key:i};if(t){const e=T({file:s.file,fileName:m+s.key,isResumable:!0,level:a,completeCallback:p,progressCallback:g,errorCallback:f,provider:d});l({id:u,uploadTask:e})}else T({file:s.file,fileName:m+s.key,isResumable:!1,level:a,completeCallback:p,progressCallback:g,errorCallback:f,provider:d}),l({id:u})}}}),[e,a,t,s,l,n,o,i,r,c,d,m])}({accessLevel:s,files:A,isResumable:n,maxFileCount:o,onUploadError:c,onUploadSuccess:d,setUploadingFile:j,setUploadProgress:I,setUploadSuccess:z,processFile:f,provider:D,path:b});const $=0!==A.length&&A.every((e=>100===(null==e?void 0:e.progress))),V=A.filter((e=>e.progress<100)).length>o,Z=A.filter((e=>(null==e?void 0:e.status)===u.UPLOADED)).length,q=A.length-Z,H=A.length>0,W=p.useRef(null);return p.createElement(F.Container,{className:`${t.ComponentClassNames.StorageManager} ${H?t.ComponentClassNames.StorageManagerPreviewer:""}`},p.createElement(F.DropZone,Object.assign({},G,{displayText:h}),p.createElement(p.Fragment,null,p.createElement(F.FilePicker,{onClick:function(){W.current&&(W.current.click(),W.current.value="")}},h.browseFilesText),p.createElement(t.VisuallyHidden,null,p.createElement("input",{type:"file",tabIndex:-1,ref:W,onChange:e=>{const{files:a}=e.target;a&&0!==a.length&&R({files:Array.from(a),getFileErrorMessage:L})},multiple:x,accept:a.join(",")})))),H?p.createElement(F.FileListHeader,{allUploadsSuccessful:$,displayText:h,fileCount:A.length,remainingFilesCount:q}):null,p.createElement(F.FileList,{displayText:h,files:A,isResumable:n,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),_({id:e})},onDeleteUpload:({id:e})=>{if(_({id:e}),"function"==typeof m){const a=A.find((a=>a.id===e));a&&m({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),B({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),w({id:e})},showThumbnails:g,hasMaxFilesError:V,maxFileCount:o}))}h.Container=S,h.DropZone=U,h.FileList=O,h.FileListHeader=N,h.FilePicker=P,exports.StorageManager=h;

package/dist/styles.css

@@ -731,6 +731,72 @@
   --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
   --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
   --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+  --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-dropzone-border-style: dashed;
+  --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small);
+  --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
+  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
+  --amplify-components-storagemanager-dropzone-text-align: center;
+  --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
+  --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+  --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+  --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-file-border-style: solid;
+  --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs);
+  --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small);
+  --amplify-components-storagemanager-file-gap: var(--amplify-space-small);
+  --amplify-components-storagemanager-file-align-items: baseline;
+  --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary);
+  --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal);
+  --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl);
+  --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl);
+  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-loader-stroke-linecap: round;
+  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
+  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+  --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large);
+  --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-storagemanager-previewer-border-style: solid;
+  --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small);
+  --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero);
+  --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero);
+  --amplify-components-storagemanager-previewer-max-height: 40rem;
+  --amplify-components-storagemanager-previewer-max-width: auto;
+  --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary);
+  --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
+  --amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
+  --amplify-components-storagemanager-previewer-footer-border-style: solid;
+  --amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
+  --amplify-components-storagemanager-previewer-footer-justify-content: space-between;
+  --amplify-components-storagemanager-filelist-flex-direction: column;
+  --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
   --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
   --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
   --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
@@ -4403,67 +4469,72 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-storagemanager__dropzone {
-  background-color: var(--amplify-components-fileuploader-dropzone-background-color);
-  border-color: var(--amplify-components-fileuploader-dropzone-border-color);
-  border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
-  border-style: var(--amplify-components-fileuploader-dropzone-border-style);
-  border-width: var(--amplify-components-fileuploader-dropzone-border-width);
-  text-align: var(--amplify-components-fileuploader-dropzone-text-align);
-  padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
-  padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
+  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
+  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
+  border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
+  border-style: var(--amplify-components-storagemanager-dropzone-border-style);
+  border-width: var(--amplify-components-storagemanager-dropzone-border-width);
+  text-align: var(--amplify-components-storagemanager-dropzone-text-align);
+  padding-block: var(--amplify-components-storagemanager-dropzone-padding-block);
+  padding-inline: var(--amplify-components-storagemanager-dropzone-padding-inline);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--amplify-components-fileuploader-dropzone-gap);
+  gap: var(--amplify-components-storagemanager-dropzone-gap);
 }
 .amplify-storagemanager__dropzone--small {
   flex-direction: row;
   justify-content: center;
 }
 .amplify-storagemanager__dropzone--active {
-  border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
-  border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
-  background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
+  border-color: var(--amplify-components-storagemanager-dropzone-active-border-color);
+  border-width: var(--amplify-components-storagemanager-dropzone-active-border-width);
+  background-color: var(--amplify-components-storagemanager-dropzone-active-background-color);
 }
 .amplify-storagemanager__dropzone__icon {
-  font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
-  color: var(--amplify-components-fileuploader-dropzone-icon-color);
+  font-size: var(--amplify-components-storagemanager-dropzone-icon-font-size);
+  color: var(--amplify-components-storagemanager-dropzone-icon-color);
 }
 .amplify-storagemanager__dropzone__text {
-  color: var(--amplify-components-fileuploader-dropzone-text-color);
-  font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
-  font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
+  color: var(--amplify-components-storagemanager-dropzone-text-color);
+  font-size: var(--amplify-components-storagemanager-dropzone-text-font-size);
+  font-weight: var(--amplify-components-storagemanager-dropzone-text-font-weight);
+}
+.amplify-storagemanager__file__list {
+  display: flex;
+  flex-direction: var(--amplify-components-storagemanager-filelist-flex-direction);
+  gap: var(--amplify-components-storagemanager-filelist-gap);
 }
 .amplify-storagemanager__file {
   position: relative;
-  border-width: var(--amplify-components-fileuploader-file-border-width);
-  border-style: var(--amplify-components-fileuploader-file-border-style);
-  border-color: var(--amplify-components-fileuploader-file-border-color);
-  border-radius: var(--amplify-components-fileuploader-file-border-radius);
+  border-width: var(--amplify-components-storagemanager-file-border-width);
+  border-style: var(--amplify-components-storagemanager-file-border-style);
+  border-color: var(--amplify-components-storagemanager-file-border-color);
+  border-radius: var(--amplify-components-storagemanager-file-border-radius);
   display: flex;
   flex-direction: column;
-  padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
-  padding-block: var(--amplify-components-fileuploader-file-padding-block);
-  align-items: var(--amplify-components-fileuploader-file-align-items);
+  padding-inline: var(--amplify-components-storagemanager-file-padding-inline);
+  padding-block: var(--amplify-components-storagemanager-file-padding-block);
+  align-items: var(--amplify-components-storagemanager-file-align-items);
 }
 .amplify-storagemanager__file__wrapper {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--amplify-components-fileuploader-file-gap);
+  gap: var(--amplify-components-storagemanager-file-gap);
 }
 .amplify-storagemanager__file__name {
   text-overflow: ellipsis;
   overflow: hidden;
-  font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
-  font-size: var(--amplify-components-fileuploader-file-name-font-size);
-  color: var(--amplify-components-fileuploader-file-name-color);
+  font-weight: var(--amplify-components-storagemanager-file-name-font-weight);
+  font-size: var(--amplify-components-storagemanager-file-name-font-size);
+  color: var(--amplify-components-storagemanager-file-name-color);
 }
 .amplify-storagemanager__file__size {
-  font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
-  font-size: var(--amplify-components-fileuploader-file-size-font-size);
-  color: var(--amplify-components-fileuploader-file-size-color);
+  font-weight: var(--amplify-components-storagemanager-file-size-font-weight);
+  font-size: var(--amplify-components-storagemanager-file-size-font-size);
+  color: var(--amplify-components-storagemanager-file-size-color);
 }
 .amplify-storagemanager__file__main {
   flex: 1;
@@ -4475,29 +4546,29 @@ html[dir=rtl] .amplify-field-group__inner-start {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--amplify-components-fileuploader-file-image-width);
-  height: var(--amplify-components-fileuploader-file-image-height);
-  background-color: var(--amplify-components-fileuploader-file-image-background-color);
-  border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
-  color: var(--amplify-components-fileuploader-file-image-color);
+  width: var(--amplify-components-storagemanager-file-image-width);
+  height: var(--amplify-components-storagemanager-file-image-height);
+  background-color: var(--amplify-components-storagemanager-file-image-background-color);
+  border-radius: var(--amplify-components-storagemanager-file-image-border-radius);
+  color: var(--amplify-components-storagemanager-file-image-color);
 }
 .amplify-storagemanager__file__image img {
   max-height: 100%;
 }
 .amplify-storagemanager__file__status--error {
   color: var(--amplify-colors-font-error);
-  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+  font-size: var(--amplify-components-storagemanager-file-size-font-size);
 }
 .amplify-storagemanager__file__status--success {
   color: var(--amplify-colors-font-success);
 }
 .amplify-storagemanager__loader {
-  stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
-  stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
-  stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
-  height: var(--amplify-components-fileuploader-loader-stroke-width);
+  stroke-linecap: var(--amplify-components-storagemanager-loader-stroke-linecap);
+  stroke: var(--amplify-components-storagemanager-loader-stroke-empty);
+  stroke-width: var(--amplify-components-storagemanager-loader-stroke-width);
+  height: var(--amplify-components-storagemanager-loader-stroke-width);
   --amplify-components-loader-linear-stroke-filled: var(
-    --amplify-components-fileuploader-loader-stroke-filled
+    --amplify-components-storagemanager-loader-stroke-filled
   );
   overflow: hidden;
   position: absolute;
@@ -4508,22 +4579,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-storagemanager__previewer {
   display: flex;
   flex-direction: column;
-  max-width: var(--amplify-components-fileuploader-previewer-max-width);
-  max-height: var(--amplify-components-fileuploader-previewer-max-height);
+  max-width: var(--amplify-components-storagemanager-previewer-max-width);
+  max-height: var(--amplify-components-storagemanager-previewer-max-height);
   overflow: auto;
-  gap: var(--amplify-components-fileuploader-previewer-body-gap);
-  padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
-  padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
-  background-color: var(--amplify-components-fileuploader-previewer-background-color);
-  border-width: var(--amplify-components-fileuploader-previewer-border-width);
-  border-style: var(--amplify-components-fileuploader-previewer-border-style);
-  border-color: var(--amplify-components-fileuploader-previewer-border-color);
-  border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
+  gap: var(--amplify-components-storagemanager-previewer-body-gap);
+  padding-inline: var(--amplify-components-storagemanager-previewer-body-padding-inline);
+  padding-block: var(--amplify-components-storagemanager-previewer-body-padding-block);
+  background-color: var(--amplify-components-storagemanager-previewer-background-color);
+  border-width: var(--amplify-components-storagemanager-previewer-border-width);
+  border-style: var(--amplify-components-storagemanager-previewer-border-style);
+  border-color: var(--amplify-components-storagemanager-previewer-border-color);
+  border-radius: var(--amplify-components-storagemanager-previewer-border-radius);
 }
 .amplify-storagemanager__previewer__text {
-  font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
-  font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
-  color: var(--amplify-components-fileuploader-previewer-text-color);
+  font-weight: var(--amplify-components-storagemanager-previewer-text-font-weight);
+  font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
+  color: var(--amplify-components-storagemanager-previewer-text-color);
 }
 
 [data-label-position=start] {

package/dist/types/components/StorageManager/StorageManager.d.ts

@@ -2,10 +2,10 @@
 import { StorageManagerProps } from './types';
 declare function StorageManager({ acceptedFileTypes, accessLevel, defaultFiles, displayText: overrideDisplayText, isResumable, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, showThumbnails, processFile, components, provider, path, }: StorageManagerProps): JSX.Element;
 declare namespace StorageManager {
-    var Container: typeof import("./ui/").Container;
-    var DropZone: typeof import("./ui/").DropZone;
-    var FileList: typeof import("./ui/").FileList;
-    var FileListHeader: typeof import("./ui/").FileListHeader;
-    var FilePicker: typeof import("./ui/").FilePicker;
+    var Container: typeof import("./ui").Container;
+    var DropZone: typeof import("./ui").DropZone;
+    var FileList: typeof import("./ui").FileList;
+    var FileListHeader: typeof import("./ui").FileListHeader;
+    var FilePicker: typeof import("./ui").FilePicker;
 }
 export { StorageManager };

package/dist/types/components/StorageManager/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export { useDropZone } from './useDropZone';
-export { useStorageManager } from './useStorageManager';
+export { useStorageManager, UseStorageManager } from './useStorageManager';
 export { useUploadFiles } from './useUploadFiles';

package/dist/types/components/StorageManager/index.d.ts

@@ -1,2 +1,3 @@
 export { StorageManager } from './StorageManager';
 export { StorageManagerProps } from './types';
+export { DropZoneProps, ContainerProps, FileListProps, FilePickerProps, FileListHeaderProps, } from './ui';

package/dist/types/components/StorageManager/types.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 import type { StorageAccessLevel, UploadTask } from '@aws-amplify/storage';
-import { DropZoneProps, FilePickerProps } from './ui/DropZone';
-import { FileListProps } from './ui/FileList';
-import { ContainerProps } from './ui/Container';
-import { FileListHeaderProps } from './ui/FileListHeader';
+import { ContainerProps, DropZoneProps, FileListHeaderProps, FileListProps, FilePickerProps } from './ui';
 import { StorageManagerDisplayText } from './utils';
 export declare enum FileStatus {
     QUEUED = "queued",
@@ -39,11 +36,11 @@ export interface StorageManagerProps {
      * Component overrides
      */
     components?: {
-        Container?: (props: ContainerProps) => JSX.Element;
-        DropZone?: (props: DropZoneProps) => JSX.Element;
-        FileList?: (props: FileListProps) => JSX.Element;
-        FilePicker?: (props: FilePickerProps) => JSX.Element;
-        FileListHeader?: (props: FileListHeaderProps) => JSX.Element;
+        Container?: React.ComponentType<ContainerProps>;
+        DropZone?: React.ComponentType<DropZoneProps>;
+        FileList?: React.ComponentType<FileListProps>;
+        FilePicker?: React.ComponentType<FilePickerProps>;
+        FileListHeader?: React.ComponentType<FileListHeaderProps>;
     };
     /**
      * List of default files already uploaded

package/dist/types/components/StorageManager/ui/DropZone/index.d.ts

@@ -1,3 +1,2 @@
 export { DropZone } from './DropZone';
-export { FilePicker } from './FilePicker';
-export { DropZoneProps, FilePickerProps } from './types';
+export { DropZoneProps } from './types';

package/dist/types/components/StorageManager/ui/DropZone/types.d.ts

@@ -11,9 +11,3 @@ export interface DropZoneProps {
     onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
     testId?: string;
 }
-export interface FilePickerProps {
-    acceptedFileTypes: string[];
-    displayText: StorageManagerDisplayText;
-    allowMultipleFiles: boolean;
-    onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}

package/dist/types/components/StorageManager/ui/FilePicker/FilePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Button } from '@aws-amplify/ui-react';
+export declare type FilePickerProps = Parameters<typeof Button>[0] & {
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+};
+export declare function FilePicker({ children, className, size, ...props }: FilePickerProps): JSX.Element;

package/dist/types/components/StorageManager/ui/FilePicker/index.d.ts

@@ -0,0 +1 @@
+export { FilePicker, FilePickerProps } from './FilePicker';

package/dist/types/components/StorageManager/ui/index.d.ts

@@ -1,4 +1,5 @@
 export { Container, ContainerProps } from './Container';
-export { DropZone, DropZoneProps, FilePicker, FilePickerProps, } from './DropZone';
+export { DropZone, DropZoneProps } from './DropZone';
 export { FileList, FileListProps } from './FileList';
 export { FileListHeader, FileListHeaderProps } from './FileListHeader';
+export { FilePicker, FilePickerProps } from './FilePicker';

package/dist/types/components/index.d.ts

@@ -1 +1 @@
-export { StorageManager, StorageManagerProps } from './StorageManager';
+export { StorageManager, StorageManagerProps, DropZoneProps, ContainerProps, FileListProps, FilePickerProps, FileListHeaderProps, } from './StorageManager';

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { StorageManager, StorageManagerProps } from './components';
+export { StorageManager, StorageManagerProps, DropZoneProps, ContainerProps, FileListProps, FilePickerProps, FileListHeaderProps, } from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,8 +40,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.5.8",
-    "@aws-amplify/ui-react-core": "2.1.16",
+    "@aws-amplify/ui": "5.5.10",
+    "@aws-amplify/ui-react": "4.5.1",
+    "@aws-amplify/ui-react-core": "2.1.18",
     "classnames": "2.3.1",
     "lodash": "4.17.21",
     "tslib": "2.4.1"

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

@@ -1 +0,0 @@
-import e from"react";import{View as t,Button as l,ComponentClassNames as n,VisuallyHidden as r}from"@aws-amplify/ui-react";function a({acceptedFileTypes:a,allowMultipleFiles:c,displayText:i,onFileChange:o}){const u=e.useRef(null),{browseFilesText:p}=i;return e.createElement(t,null,e.createElement(l,{className:n.StorageManagerDropZoneButton,onClick:function(){u.current&&(u.current.click(),u.current.value="")},size:"small"},p),e.createElement(r,null,e.createElement("input",{type:"file",tabIndex:-1,ref:u,onChange:o,multiple:c,accept:a.join(",")})))}export{a as FilePicker};

package/dist/types/components/StorageManager/ui/DropZone/FilePicker.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { FilePickerProps } from './types';
-export declare function FilePicker({ acceptedFileTypes, allowMultipleFiles, displayText, onFileChange, }: FilePickerProps): JSX.Element;