@aws-amplify/ui-react-storage 2.0.3 → 2.1.0

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

@@ -0,0 +1 @@
+import{__rest as e}from"tslib";import*as r from"react";import a from"classnames";import{Image as t,ComponentClassNames as o}from"@aws-amplify/ui-react";import{useStorageURL as s}from"@aws-amplify/ui-react/internal";const c=c=>{var{accessLevel:i,className:m,fallbackSrc:l,identityId:n,imgKey:f,onStorageGetError:p}=c,g=e(c,["accessLevel","className","fallbackSrc","identityId","imgKey","onStorageGetError"]);const y=r.useMemo((()=>({level:i,identityId:n})),[i,n]),d=s({key:f,options:y,fallbackURL:l,onStorageGetError:p});return r.createElement(t,Object.assign({},g,{className:a(o.StorageImage,m),src:d}))};export{c as StorageImage};

package/dist/esm/index.mjs

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

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

package/dist/styles.css

@@ -397,6 +397,7 @@
   --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
   --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
   --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
   --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
   --amplify-components-fieldgroup-vertical-align-items: center;
@@ -2893,10 +2894,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-liveness-toast {
   background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-small);
+  border-radius: var(--amplify-radii-medium);
 }
 
 .amplify-liveness-toast__message {
   color: var(--amplify-colors-font-primary);
+  text-align: center;
+  flex-direction: column;
 }
 
 .amplify-liveness-toast--large {
@@ -2908,6 +2913,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-liveness-toast--primary .amplify-liveness-toast__message {
   color: var(--amplify-colors-font-inverse);
+  text-align: center;
+  flex-direction: column;
+}
+
+.amplify-liveness-toast__container {
+  gap: var(--amplify-space-xs);
+  flex-direction: column;
+  align-items: center;
 }
 
 .amplify-liveness-toast--error {
@@ -3023,6 +3036,117 @@ html[dir=rtl] .amplify-field-group__inner-start {
   top: 0;
 }
 
+.amplify-liveness-landscape-error-modal {
+  background-color: var(--amplify-colors-background-primary);
+  direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.amplify-liveness-landscape-error-modal__header {
+  font-size: large;
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-landscape-error-modal__button {
+  justify-content: center;
+}
+
+.amplify-liveness-start-screen-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.amplify-liveness-start-screen-header__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-start-screen-header__body {
+  color: var(--amplify-colors-font-primary);
+}
+
+.amplify-liveness-start-screen-warning {
+  color: var(--amplify-colors-orange-80);
+  background-color: var(--amplify-colors-orange-20);
+  align-items: center;
+}
+
+.amplify-liveness-start-screen-instructions__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-overlay-opaque {
+  background-color: var(--amplify-colors-overlay-40);
+}
+
+.amplify-liveness-overlay {
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--amplify-space-xl);
+}
+
+.amplify-liveness-error-modal {
+  gap: var(--amplify-space-xs);
+  align-items: center;
+  justify-content: center;
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-error-modal__heading {
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-hint__text {
+  align-items: center;
+  gap: var(--amplify-space-xs);
+}
+
+.amplify-liveness-popover {
+  position: relative;
+  cursor: pointer;
+}
+
+.amplify-liveness-popover__anchor {
+  position: absolute;
+  top: 26px;
+  left: 3px;
+  z-index: 3;
+  border-style: solid;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent var(--amplify-colors-background-primary) transparent;
+}
+
+.amplify-liveness-popover__anchor-secondary {
+  position: absolute;
+  top: 24px;
+  left: 2px;
+  z-index: 2;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent var(--amplify-colors-border-secondary) transparent;
+}
+
+.amplify-liveness-popover__container {
+  position: absolute;
+  background-color: var(--amplify-colors-background-primary);
+  color: var(--amplify-colors-font-primary);
+  flex-direction: row;
+  font-size: var(--amplify-font-sizes-xs);
+  padding: var(--amplify-space-small);
+  top: 33px;
+  width: 240px;
+  border: 1px solid var(--amplify-colors-border-secondary);
+  border-radius: 2px;
+}
+
 .amplify-fileuploader__dropzone {
   background-color: var(--amplify-components-fileuploader-dropzone-background-color);
   border-color: var(--amplify-components-fileuploader-dropzone-border-color);
@@ -3323,6 +3447,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   );
 }
 
+.amplify-field__show-password--error {
+  color: var(--amplify-components-fieldcontrol-error-color);
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+
 .amplify-phonenumberfield select:not(:focus) {
   border-right: none;
 }

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { StorageImageProps } from './types';
+export declare const StorageImage: ({ accessLevel, className, fallbackSrc, identityId, imgKey, onStorageGetError, ...rest }: StorageImageProps) => JSX.Element;

package/dist/types/components/StorageImage/_tests_/StorageImage.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { StorageImage } from './StorageImage';
+export { StorageImageProps } from './types';

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

@@ -0,0 +1,9 @@
+import type { StorageAccessLevel } from '@aws-amplify/storage';
+import type { ImageProps } from '@aws-amplify/ui-react';
+export interface StorageImageProps extends Omit<ImageProps, 'src'> {
+    imgKey: string;
+    accessLevel: StorageAccessLevel;
+    identityId?: string;
+    fallbackSrc?: string;
+    onStorageGetError?: (error: Error) => void;
+}

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

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

package/dist/types/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,9 +40,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.6",
-    "@aws-amplify/ui-react": "5.0.3",
-    "@aws-amplify/ui-react-core": "2.1.25",
+    "@aws-amplify/ui": "5.6.7",
+    "@aws-amplify/ui-react": "5.0.5",
+    "@aws-amplify/ui-react-core": "2.1.26",
     "classnames": "2.3.1",
     "lodash": "4.17.21",
     "tslib": "2.4.1"
@@ -60,7 +60,7 @@
   "devDependencies": {
     "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
     "@rollup/plugin-typescript": "^8.3.1",
-    "@size-limit/preset-big-lib": "^7.0.8",
+    "@size-limit/preset-big-lib": "^8.2.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
@@ -68,7 +68,7 @@
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.2",
     "@types/testing-library__jest-dom": "^5.14.1",
-    "eslint": "^8.13.0",
+    "eslint": "^8.44.0",
     "jest": "^27.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -77,7 +77,7 @@
     "rollup-plugin-node-externals": "^4.1.1",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "size-limit": "^7.0.8",
+    "size-limit": "^8.2.6",
     "ts-jest": "^27.0.3",
     "ts-morph": "^12.0.0"
   },