@react-magma/dropzone 0.1.2-next.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/fileuploader.js +1 -1
  2. package/dist/fileuploader.js.map +1 -1
  3. package/dist/fileuploader.modern.js +1 -1
  4. package/dist/fileuploader.modern.js.map +1 -1
  5. package/dist/fileuploader.modern.module.js +1 -1
  6. package/dist/fileuploader.modern.module.js.map +1 -1
  7. package/dist/fileuploader.umd.js +1 -1
  8. package/dist/fileuploader.umd.js.map +1 -1
  9. package/dist/src/components/dropzone/Dropzone.stories.d.ts +3 -3
  10. package/package.json +2 -2
  11. package/src/components/dropzone/Dropzone.stories.tsx +142 -84
  12. package/src/components/dropzone/Preview.tsx +7 -7
package/dist/fileuploader.js CHANGED
@@ -1,2 +1,2 @@
1
- var e=require("react-magma-icons"),n=require("react-magma-dom"),r=require("react/jsx-runtime"),t=require("react"),o=require("react-dropzone");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t),l={default:{Icon:e.InsertDriveFileIcon,style:{color:"#707070"}},word:{Icon:e.FileWordIcon,style:{color:"#006298"}},excel:{Icon:e.FileExcelIcon,style:{color:"#3A8200"}},powerpoint:{Icon:e.FilePowerpointIcon,style:{color:"#FC4C02"}},pdf:{Icon:e.FilePdfIcon,style:{color:"#C61D23"}},image:{Icon:e.ImageIcon,style:{color:"#707070"}},video:{Icon:e.VideocamIcon,style:{color:"#707070"}},audio:{Icon:e.AudiotrackIcon,style:{color:"#707070"}},archive:{Icon:e.FileZipIcon,style:{color:"#707070"}}},a={default:l.default,xlsx:l.excel,xlsm:l.excel,xlsb:l.excel,xltx:l.excel,xls:l.excel,xlt:l.excel,doc:l.word,docx:l.word,docm:l.word,dotx:l.word,dotm:l.word,docb:l.word,pptx:l.powerpoint,pptm:l.powerpoint,ppt:l.powerpoint,pdf:l.pdf,png:l.image,svg:l.image,image:l.image,audio:l.audio,video:l.video,zip:l.archive},c=function(e){var t=e.file,o=e.isInverse,i=t.path,s=void 0===i?"":i,l=t.type,c=(void 0===l?"":l).split("/")[0],u=s.split(".").pop()||"default",d=a[u]||a[c]||a.default;return r.jsx(d.Icon,{size:n.magma.iconSizes.medium,style:o?{}:d.style})};function u(){return u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},u.apply(this,arguments)}function d(e,n){if(null==e)return{};var r,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n.indexOf(r=i[t])>=0||(o[r]=e[r]);return o}function p(e,n){return n||(n=e.slice(0)),e.raw=n,e}var f,m,x,g,h,v,y,I,b,F,j,z=function(e,n,r){if(void 0===n&&(n=2),void 0===r&&(r="Bytes"),void 0!==e){if(0==e)return"0 "+r;var t=[r,"KB","MB","GB","TB","PB","EB","ZB","YB"],o=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,o)).toFixed(n))+" "+t[o]}},S=["accept","file","isInverse","maxSize","minSize","onDeleteFile","onRemoveFile","testId","thumbnails"],w=["code"],C=n.styled.div(f||(f=p(["\n background-image: ",";\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n"])),function(e){var n=e.file;return"url('"+("preview"in n&&n.preview)+"')"}),B=n.styled.div(m||(m=p(["\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n"]))),D={marginRight:"12px",display:"flex"},k=n.styled.div(x||(x=p(["\n border-top: 1px solid ",";\n padding: 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.colors.neutral06},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),O=n.styled(n.Flex)(g||(g=p(["\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),R=n.styled(n.Flex)(h||(h=p(["\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),A=n.styled(n.Card)(v||(v=p(["\n background-color: ",";\n border-color: ",";\n border-width: ",";\n margin: 10px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.foundation02:n.colors.neutral08},function(e){var n=e.theme;return e.file.errors?e.isInverse?n.colors.dangerInverse:n.colors.danger:n.colors.neutral06},function(e){return e.file.errors?"2px":"1px"}),E=n.styled.span(y||(y=p(["\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n"]))),T=n.styled.span(I||(I=p(["\n display: block;\n"]))),M=t.forwardRef(function(o,i){var l,a=o.accept,p=o.file,f=o.isInverse,m=o.maxSize,x=o.minSize,g=o.onDeleteFile,h=o.onRemoveFile,v=o.thumbnails,y=d(o,S),I=t.useContext(n.ThemeContext),b=s.default.useContext(n.I18nContext),F=n.useIsInverse(f),j=t.useState(r.jsx(e.CloseIcon,{})),M=j[0],P=j[1],H=function(){h&&"function"==typeof h&&h(p)},L=function(){g&&"function"==typeof g&&g(p)},V=function(o){var i=o.status,s=void 0===i?"ready":i,l=t.useState(!1),a=l[0],c=l[1];return t.useEffect(function(){var e=!0;return setTimeout(function(){e&&c(!0)},1e3),function(){e=!1}},[s]),"error"===s||"ready"===s?r.jsx(B,{children:r.jsx(n.IconButton,{onClick:H,variant:n.ButtonVariant.link,color:n.ButtonColor.secondary,"aria-label":b.dropzone.removeFile,icon:r.jsx(e.CloseIcon,{})})}):"pending"===s?r.jsx(B,{children:r.jsx(n.Spinner,{color:F?I.colors.foundation04:I.colors.primary})}):r.jsxs(B,{children:[r.jsx(n.Transition,{isOpen:!a,unmountOnExit:!0,fade:!0,children:r.jsx(e.CheckCircleIcon,{color:F?I.colors.successInverse:I.colors.success,style:{marginTop:"4px"}})}),r.jsx(n.Transition,{isOpen:a,unmountOnExit:!0,fade:!0,children:r.jsx(n.IconButton,{onClick:L,variant:n.ButtonVariant.link,color:n.ButtonColor.secondary,"aria-label":b.dropzone.deleteFile,icon:r.jsx(e.DeleteIcon,{})})})]})};return t.useEffect(function(){var e;P(r.jsx(V,{status:null==p||null==(e=p.processor)?void 0:e.status}))},[null==p||null==(l=p.processor)?void 0:l.status]),r.jsx(n.InverseContext.Provider,{value:{isInverse:F},children:r.jsxs(A,{isInverse:F,theme:I,file:p,"data-testid":o.testId,ref:i,role:p.errors?"alert":"",children:[r.jsxs(O,u({theme:I,behavior:n.FlexBehavior.container,alignItems:n.FlexAlignItems.center},y,{children:[r.jsx(n.Flex,{behavior:n.FlexBehavior.item,alignItems:n.FlexAlignItems.center,style:D,children:p.errors?r.jsx(e.ErrorIcon,{color:F?I.colors.dangerInverse:I.colors.danger,size:24}):p.preview&&v&&p.type&&p.type.startsWith("image")?r.jsx(C,{role:"img",file:p}):r.jsx(c,{isInverse:F,file:p})}),r.jsx(R,{xs:!0,behavior:n.FlexBehavior.item,theme:I,children:p.name}),p.processor&&"pending"===p.processor.status&&r.jsx(n.Flex,{role:"progressbar",style:{marginLeft:"auto"},behavior:n.FlexBehavior.item,children:p.processor.percent}),r.jsx(n.Flex,{behavior:n.FlexBehavior.item,children:M})]})),p.errors&&r.jsx(k,{theme:I,children:p.errors.slice(0,1).map(function(e){var n=e.code,t=function(e,n,r){switch(e.code){case"file-too-large":return u({},e,{message:e.message+" "+z(n.maxSize,2,r)+"."});case"file-too-small":return u({},e,{message:e.message+" "+z(n.minSize,2,r)+"."});case"file-invalid-type":var t=Array.isArray(n.accept)&&1===n.accept.length?n.accept[0]:n.accept,o=Array.isArray(t)?"one of "+t.join(", "):t;return u({},e,{message:e.message+": "+o});default:return e}}(u({code:n},d(e,w),b.dropzone.errors[n]),{accept:a,minSize:x,maxSize:m},b.dropzone.bytes),o=t.header,i=t.message;return r.jsxs(s.default.Fragment,{children:[r.jsx(E,{style:{color:F?I.colors.dangerInverse:I.colors.danger},children:void 0===o?"":o}),r.jsx(T,{children:i})]},n)})})]})})}),P=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"],H=n.styled(n.Flex)(b||(b=p(["\n flex-direction: column;\n align-items: ",";\n justify-content: ",";\n text-align: ",";\n padding: ",";\n border-radius: ",";\n border: ",";\n\n border-style: ",";\n background-color: ",";\n outline: none;\n transition: ",";\n"])),function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"0px":"24px"},function(e){return e.noDrag?"0px":"4px"},function(e){var n=e.dragState,r=void 0===n?"default":n,t=e.theme;return e.noDrag?"0px":"dragReject"===r||"error"===r?e.isInverse?"2px dashed "+t.colors.dangerInverse:"2px dashed "+t.colors.danger:"dragActive"===r?"2px dashed "+t.colors.primary:"dragAccept"===r?"2px dashed "+t.colors.success:"2px dashed "+t.colors.neutral05},function(e){var n=e.dragState;return"error"===(void 0===n?"default":n)?"solid":"dashed"},function(e){var n=e.theme;return e.noDrag?"transparent":e.isInverse?n.colors.foundation:n.colors.neutral07},function(e){return"border "+(e.noDrag?0:".24s")+" ease-in-out"}),L=n.styled.span(F||(F=p(["\n color: ",";\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral08:n.colors.neutral03}),V=n.styled.div(j||(j=p(["\n color: ",";\n margin: 0 0 24px 0;\n font-size: ",";\n line-height: ",";\n font-weight: 600;\n padding: ",";\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral07:n.colors.neutral02},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight},function(e){return e.theme.spaceScale.spacing01});exports.Dropzone=s.default.forwardRef(function(t,i){var l=t.accept,a=t.containerStyle,c=t.disabled,p=t.helperMessage,f=t.id,m=t.inputSize,x=t.isInverse,g=t.isLabelVisuallyHidden,h=t.labelStyle,v=t.labelText,y=t.maxFiles,I=t.minFiles,b=t.maxSize,F=t.minSize,j=t.multiple,z=void 0===j||j,S=t.noDrag,w=void 0!==S&&S,C=t.onSendFile,B=t.onDeleteFile,D=t.onRemoveFile,k=t.sendFiles,O=void 0!==k&&k,R=t.testId,A=t.thumbnails,E=void 0===A||A,T=d(t,P),q=s.default.useState([]),U=q[0],G=q[1],W=s.default.useState(null),Z=W[0],K=W[1],Y=n.useIsInverse(x),J=s.default.useContext(n.ThemeContext),N=s.default.useContext(n.I18nContext),Q=n.useGenerateId(f),X=s.default.useCallback(function(e,n){G(function(r){return[].concat(r,e.map(function(e){return Object.assign(e,{preview:URL.createObjectURL(e)})}),n.map(function(e){return Object.assign(e.file,{errors:e.errors})}))})},[]),$=o.useDropzone({noClick:!0,disabled:c,multiple:z,maxSize:b,minSize:F,accept:l,onDrop:X,noDrag:w}),_=$.getInputProps,ee=$.getRootProps,ne=$.open,re=Z?"error":$.isDragAccept?"dragAccept":$.isDragReject?"dragReject":$.isDragActive?"dragActive":"default",te=function(e){G(function(n){return n.filter(function(n){return n!==e})}),D&&"function"==typeof D&&D(e)},oe=function(e){G(function(n){return n.filter(function(n){return n!==e})}),B&&"function"==typeof B&&B(e)},ie=function(e){G(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:u({},n.processor,{percent:e.percent+"%",status:"pending"})}):n})})},se=function(e){G(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:u({},n.processor,{percent:"",status:"finished"})}):n})})},le=function(e){G(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{errors:e.errors,processor:u({},n.processor,{status:"error"})}):n})})};return s.default.useEffect(function(){return function(){U.forEach(function(e){return e.preview&&URL.revokeObjectURL(e.preview)})}},[U]),s.default.useEffect(function(){var e=I&&U.length<I,n=y&&U.length>y;K(function(e,n){if(null===e)return null;var r=N.dropzone.errors[e];switch(e){case"too-many-files":return r.message+" "+n.maxFiles+" "+N.dropzone.files+".";case"too-few-files":return r.message+" "+n.minFiles+" "+N.dropzone.files+".";default:return r.message}}(n?"too-many-files":e?"too-few-files":null,{minFiles:I,maxFiles:y})),O&&U.length>0&&!n&&!e&&G(function(e){return e.map(function(e){return!e.errors&&!e.processor&&C&&C({file:e,onError:le,onFinish:se,onProgress:ie}),e})})},[O,U.length,C]),r.jsxs(n.InverseContext.Provider,{value:{isInverse:Y},children:[r.jsxs(n.FormFieldContainer,{actionable:!1,containerStyle:a,errorMessage:Z,fieldId:Q,inputSize:m,isInverse:Y,isLabelVisuallyHidden:g,labelStyle:h,labelText:v,messageStyle:{minHeight:0},"data-testid":R,children:[r.jsx(L,{theme:J,isInverse:Y,children:p}),r.jsxs(H,u({behavior:n.FlexBehavior.container,dragState:re,isInverse:Y,noDrag:w,theme:J},ee(),T,{testId:R,tabIndex:-1,children:[r.jsx("input",u({ref:i},_({id:Q}))),w?r.jsx(n.Flex,{xs:!0,behavior:n.FlexBehavior.item,children:r.jsx(n.Button,{color:n.ButtonColor.primary,disabled:c,isInverse:Y,onClick:ne,style:{margin:0},children:N.dropzone.browseFiles})}):r.jsxs(n.Flex,{behavior:n.FlexBehavior.item,children:[r.jsx(e.CloudUploadIcon,{"aria-hidden":"true",color:Y?J.colors.neutral07:J.colors.neutral02,size:48}),r.jsx(V,{isInverse:Y,theme:J,children:N.dropzone.dragMessage}),r.jsx(n.Button,{color:n.ButtonColor.secondary,disabled:c,isInverse:Y,onClick:ne,style:{margin:0},variant:n.ButtonVariant.solid,children:N.dropzone.browseFiles})]})]}))]}),U.map(function(e){return r.jsx(M,{accept:l,file:e,isInverse:Y,maxSize:b,minSize:F,onDeleteFile:oe,onRemoveFile:te,thumbnails:E},e.name)})]})}),exports.FileIcon=c;
1
+ var e=require("react-magma-icons"),n=require("react-magma-dom"),r=require("react/jsx-runtime"),t=require("react"),o=require("react-dropzone");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t),l={default:{Icon:e.InsertDriveFileIcon,style:{color:"#707070"}},word:{Icon:e.FileWordIcon,style:{color:"#006298"}},excel:{Icon:e.FileExcelIcon,style:{color:"#3A8200"}},powerpoint:{Icon:e.FilePowerpointIcon,style:{color:"#FC4C02"}},pdf:{Icon:e.FilePdfIcon,style:{color:"#C61D23"}},image:{Icon:e.ImageIcon,style:{color:"#707070"}},video:{Icon:e.VideocamIcon,style:{color:"#707070"}},audio:{Icon:e.AudiotrackIcon,style:{color:"#707070"}},archive:{Icon:e.FileZipIcon,style:{color:"#707070"}}},a={default:l.default,xlsx:l.excel,xlsm:l.excel,xlsb:l.excel,xltx:l.excel,xls:l.excel,xlt:l.excel,doc:l.word,docx:l.word,docm:l.word,dotx:l.word,dotm:l.word,docb:l.word,pptx:l.powerpoint,pptm:l.powerpoint,ppt:l.powerpoint,pdf:l.pdf,png:l.image,svg:l.image,image:l.image,audio:l.audio,video:l.video,zip:l.archive},c=function(e){var t=e.file,o=e.isInverse,i=t.path,s=void 0===i?"":i,l=t.type,c=(void 0===l?"":l).split("/")[0],u=s.split(".").pop()||"default",d=a[u]||a[c]||a.default;return r.jsx(d.Icon,{size:n.magma.iconSizes.medium,style:o?{}:d.style})};function u(){return u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},u.apply(this,arguments)}function d(e,n){if(null==e)return{};var r,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n.indexOf(r=i[t])>=0||(o[r]=e[r]);return o}function p(e,n){return n||(n=e.slice(0)),e.raw=n,e}var f,m,x,g,h,v,y,I,b,F,j,z=function(e,n,r){if(void 0===n&&(n=2),void 0===r&&(r="Bytes"),void 0!==e){if(0==e)return"0 "+r;var t=[r,"KB","MB","GB","TB","PB","EB","ZB","YB"],o=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,o)).toFixed(n))+" "+t[o]}},S=["accept","file","isInverse","maxSize","minSize","onDeleteFile","onRemoveFile","testId","thumbnails"],w=["code"],C=n.styled.div(f||(f=p(["\n background-image: ",";\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n"])),function(e){var n=e.file;return"url('"+("preview"in n&&n.preview)+"')"}),B=n.styled.div(m||(m=p(["\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n"]))),D={marginRight:"12px",display:"flex"},k=n.styled.div(x||(x=p(["\n border-top: 1px solid ",";\n padding: 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.colors.neutral06},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),O=n.styled(n.Flex)(g||(g=p(["\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),R=n.styled(n.Flex)(h||(h=p(["\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),A=n.styled(n.Card)(v||(v=p(["\n background-color: ",";\n border-color: ",";\n border-width: ",";\n margin: 10px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.foundation02:n.colors.neutral08},function(e){var n=e.theme;return e.file.errors?e.isInverse?n.colors.dangerInverse:n.colors.danger:n.colors.neutral06},function(e){return e.file.errors?"2px":"1px"}),E=n.styled.span(y||(y=p(["\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n"]))),T=n.styled.span(I||(I=p(["\n display: block;\n"]))),M=t.forwardRef(function(o,i){var l,a=o.accept,p=o.file,f=o.isInverse,m=o.maxSize,x=o.minSize,g=o.onDeleteFile,h=o.onRemoveFile,v=o.thumbnails,y=d(o,S),I=t.useContext(n.ThemeContext),b=s.default.useContext(n.I18nContext),F=n.useIsInverse(f),j=t.useState(r.jsx(e.CloseIcon,{})),M=j[0],P=j[1],H=function(){h&&"function"==typeof h&&h(p)},L=function(){g&&"function"==typeof g&&g(p)},V=function(o){var i=o.status,s=void 0===i?"ready":i,l=t.useState(!1),a=l[0],c=l[1];return t.useEffect(function(){var e=!0;return setTimeout(function(){e&&c(!0)},1e3),function(){e=!1}},[s]),"error"===s||"ready"===s?r.jsx(B,{children:r.jsx(n.IconButton,{onClick:H,variant:n.ButtonVariant.link,color:n.ButtonColor.secondary,"aria-label":b.dropzone.removeFile,icon:r.jsx(e.CloseIcon,{})})}):"pending"===s?r.jsx(B,{children:r.jsx(n.Spinner,{color:F?I.colors.foundation04:I.colors.primary})}):r.jsxs(B,{children:[r.jsx(n.Transition,{isOpen:!a,unmountOnExit:!0,fade:!0,children:r.jsx(e.CheckCircleIcon,{color:F?I.colors.successInverse:I.colors.success,style:{marginTop:"4px"}})}),r.jsx(n.Transition,{isOpen:a,unmountOnExit:!0,fade:!0,children:r.jsx(n.IconButton,{onClick:L,variant:n.ButtonVariant.link,color:n.ButtonColor.secondary,"aria-label":b.dropzone.deleteFile,icon:r.jsx(e.DeleteIcon,{})})})]})};return t.useEffect(function(){var e;P(r.jsx(V,{status:null==p||null==(e=p.processor)?void 0:e.status}))},[null==p||null==(l=p.processor)?void 0:l.status]),r.jsx(n.InverseContext.Provider,{value:{isInverse:F},children:r.jsxs(A,{isInverse:F,theme:I,file:p,"data-testid":o.testId,ref:i,role:p.errors?"alert":"",children:[r.jsxs(O,u({theme:I,behavior:n.FlexBehavior.container,alignItems:n.FlexAlignItems.center},y,{children:[r.jsx(n.Flex,{behavior:n.FlexBehavior.item,alignItems:n.FlexAlignItems.center,style:D,children:p.errors?r.jsx(e.ErrorIcon,{color:F?I.colors.dangerInverse:I.colors.danger,size:24}):p.preview&&v&&p.type&&p.type.startsWith("image")?r.jsx(C,{role:"img",file:p}):r.jsx(c,{isInverse:F,file:p})}),r.jsx(R,{xs:!0,behavior:n.FlexBehavior.item,theme:I,children:p.name}),p.processor&&"pending"===p.processor.status&&r.jsx(n.Flex,{role:"progressbar",style:{marginLeft:"auto"},behavior:n.FlexBehavior.item,children:p.processor.percent}),r.jsx(n.Flex,{behavior:n.FlexBehavior.item,children:M})]})),p.errors&&r.jsx(k,{theme:I,children:p.errors.slice(0,1).map(function(e){var n=e.code,t=function(e,n,r){var t=Array.isArray(n.accept)&&1===n.accept.length?n.accept[0]:n.accept,o=Array.isArray(t)?"one of "+t.join(", "):t;switch(e.code){case"file-too-large":return u({},e,{message:e.message+" "+z(n.maxSize,2,r)+"."});case"file-too-small":return u({},e,{message:e.message+" "+z(n.minSize,2,r)+"."});case"file-invalid-type":return u({},e,{message:e.message+": "+o});default:return e}}(u({code:n},d(e,w),b.dropzone.errors[n]),{accept:a,minSize:x,maxSize:m},b.dropzone.bytes),o=t.header,i=t.message;return r.jsxs(s.default.Fragment,{children:[r.jsx(E,{style:{color:F?I.colors.dangerInverse:I.colors.danger},children:void 0===o?"":o}),r.jsx(T,{children:i})]},n)})})]})})}),P=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"],H=n.styled(n.Flex)(b||(b=p(["\n flex-direction: column;\n align-items: ",";\n justify-content: ",";\n text-align: ",";\n padding: ",";\n border-radius: ",";\n border: ",";\n\n border-style: ",";\n background-color: ",";\n outline: none;\n transition: ",";\n"])),function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"0px":"24px"},function(e){return e.noDrag?"0px":"4px"},function(e){var n=e.dragState,r=void 0===n?"default":n,t=e.theme;return e.noDrag?"0px":"dragReject"===r||"error"===r?e.isInverse?"2px dashed "+t.colors.dangerInverse:"2px dashed "+t.colors.danger:"dragActive"===r?"2px dashed "+t.colors.primary:"dragAccept"===r?"2px dashed "+t.colors.success:"2px dashed "+t.colors.neutral05},function(e){var n=e.dragState;return"error"===(void 0===n?"default":n)?"solid":"dashed"},function(e){var n=e.theme;return e.noDrag?"transparent":e.isInverse?n.colors.foundation:n.colors.neutral07},function(e){return"border "+(e.noDrag?0:".24s")+" ease-in-out"}),L=n.styled.span(F||(F=p(["\n color: ",";\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral08:n.colors.neutral03}),V=n.styled.div(j||(j=p(["\n color: ",";\n margin: 0 0 24px 0;\n font-size: ",";\n line-height: ",";\n font-weight: 600;\n padding: ",";\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral07:n.colors.neutral02},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight},function(e){return e.theme.spaceScale.spacing01});exports.Dropzone=s.default.forwardRef(function(t,i){var l=t.accept,a=t.containerStyle,c=t.disabled,p=t.helperMessage,f=t.id,m=t.inputSize,x=t.isInverse,g=t.isLabelVisuallyHidden,h=t.labelStyle,v=t.labelText,y=t.maxFiles,I=t.minFiles,b=t.maxSize,F=t.minSize,j=t.multiple,z=void 0===j||j,S=t.noDrag,w=void 0!==S&&S,C=t.onSendFile,B=t.onDeleteFile,D=t.onRemoveFile,k=t.sendFiles,O=void 0!==k&&k,R=t.testId,A=t.thumbnails,E=void 0===A||A,T=d(t,P),q=s.default.useState([]),U=q[0],G=q[1],W=s.default.useState(null),Z=W[0],K=W[1],Y=n.useIsInverse(x),J=s.default.useContext(n.ThemeContext),N=s.default.useContext(n.I18nContext),Q=n.useGenerateId(f),X=s.default.useCallback(function(e,n){G(function(r){return[].concat(r,e.map(function(e){return Object.assign(e,{preview:URL.createObjectURL(e)})}),n.map(function(e){return Object.assign(e.file,{errors:e.errors})}))})},[]),$=o.useDropzone({noClick:!0,disabled:c,multiple:z,maxSize:b,minSize:F,accept:l,onDrop:X,noDrag:w}),_=$.getInputProps,ee=$.getRootProps,ne=$.open,re=Z?"error":$.isDragAccept?"dragAccept":$.isDragReject?"dragReject":$.isDragActive?"dragActive":"default",te=function(e){G(function(n){return n.filter(function(n){return n!==e})}),D&&"function"==typeof D&&D(e)},oe=function(e){G(function(n){return n.filter(function(n){return n!==e})}),B&&"function"==typeof B&&B(e)},ie=function(e){G(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:u({},n.processor,{percent:e.percent+"%",status:"pending"})}):n})})},se=function(e){G(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:u({},n.processor,{percent:"",status:"finished"})}):n})})},le=function(e){G(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{errors:e.errors,processor:u({},n.processor,{status:"error"})}):n})})};return s.default.useEffect(function(){return function(){U.forEach(function(e){return e.preview&&URL.revokeObjectURL(e.preview)})}},[U]),s.default.useEffect(function(){var e=I&&U.length<I,n=y&&U.length>y;K(function(e,n){if(null===e)return null;var r=N.dropzone.errors[e];switch(e){case"too-many-files":return r.message+" "+n.maxFiles+" "+N.dropzone.files+".";case"too-few-files":return r.message+" "+n.minFiles+" "+N.dropzone.files+".";default:return r.message}}(n?"too-many-files":e?"too-few-files":null,{minFiles:I,maxFiles:y})),O&&U.length>0&&!n&&!e&&G(function(e){return e.map(function(e){return!e.errors&&!e.processor&&C&&C({file:e,onError:le,onFinish:se,onProgress:ie}),e})})},[O,U.length,C]),r.jsxs(n.InverseContext.Provider,{value:{isInverse:Y},children:[r.jsxs(n.FormFieldContainer,{actionable:!1,containerStyle:a,errorMessage:Z,fieldId:Q,inputSize:m,isInverse:Y,isLabelVisuallyHidden:g,labelStyle:h,labelText:v,messageStyle:{minHeight:0},"data-testid":R,children:[r.jsx(L,{theme:J,isInverse:Y,children:p}),r.jsxs(H,u({behavior:n.FlexBehavior.container,dragState:re,isInverse:Y,noDrag:w,theme:J},ee(),T,{testId:R,tabIndex:-1,children:[r.jsx("input",u({ref:i},_({id:Q}))),w?r.jsx(n.Flex,{xs:!0,behavior:n.FlexBehavior.item,children:r.jsx(n.Button,{color:n.ButtonColor.primary,disabled:c,isInverse:Y,onClick:ne,style:{margin:0},children:N.dropzone.browseFiles})}):r.jsxs(n.Flex,{behavior:n.FlexBehavior.item,children:[r.jsx(e.CloudUploadIcon,{"aria-hidden":"true",color:Y?J.colors.neutral07:J.colors.neutral02,size:48}),r.jsx(V,{isInverse:Y,theme:J,children:N.dropzone.dragMessage}),r.jsx(n.Button,{color:n.ButtonColor.secondary,disabled:c,isInverse:Y,onClick:ne,style:{margin:0},variant:n.ButtonVariant.solid,children:N.dropzone.browseFiles})]})]}))]}),U.map(function(e){return r.jsx(M,{accept:l,file:e,isInverse:Y,maxSize:b,minSize:F,onDeleteFile:oe,onRemoveFile:te,thumbnails:E},e.name)})]})}),exports.FileIcon=c;
2
2
  //# sourceMappingURL=fileuploader.js.map
package/dist/fileuploader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fileuploader.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: '#707070',\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: '#006298',\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: '#3A8200',\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: '#FC4C02',\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: '#C61D23',\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: '#707070',\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: '#707070',\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: '#707070',\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: '#707070',\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() || 'default';\n const { Icon, style } =\n iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number | undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, {\n forwardRef,\n useContext,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string | string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral06};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: ${({ isInverse, theme }) =>\n isInverse ? theme.colors.foundation02 : theme.colors.neutral08};\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger\n : theme.colors.neutral06};\n border-width: ${({ file }) => (file.errors ? '2px' : '1px')};\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string | string[];\n },\n byteLabel: string\n) => {\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.maxSize, 2, byteLabel)}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.minSize, 2, byteLabel)}.`,\n };\n case 'file-invalid-type':\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if(mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' || status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={\n isInverse ? theme.colors.foundation04 : theme.colors.primary\n }\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={\n isInverse ? theme.colors.successInverse : theme.colors.success\n }\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.dangerInverse : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && <Flex role=\"progressbar\" style={{ marginLeft: 'auto' }} behavior={FlexBehavior.item}>\n {file.processor.percent}\n </Flex>}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n | 'error'\n | 'dragAccept'\n | 'dragReject'\n | 'dragActive'\n | 'default';\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n /**\n * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n */\n accept?: string | string[];\n /**\n * Enable/Disable the input\n */\n disabled?: boolean;\n /**\n * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n */\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /**\n * Content of the helper message.\n */\n helperMessage?: string;\n /**\n * @internal\n */\n id?: string;\n /**\n * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n */\n maxFiles?: number;\n /**\n * Minimum accepted number of files.\n */\n minFiles?: number;\n /**\n * Maximum file size (in bytes)\n * @default Infinity\n */\n maxSize?: number;\n /**\n * Minimum file size (in bytes)\n * @default 0\n */\n minSize?: number;\n /**\n * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n */\n multiple?: boolean;\n /**\n * If true, disables drag 'n' drop\n * @default false\n */\n noDrag?: boolean;\n /**\n * Callback for when a file is deleted\n */\n onDeleteFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is deleted\n */\n onRemoveFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n */\n onSendFile?: (props: OnSendFileProps) => void;\n /**\n * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n */\n sendFiles?: boolean;\n testId?: string;\n /**\n * Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' || dragState === 'error'\n ? isInverse\n ? `2px dashed ${theme.colors.dangerInverse}`\n : `2px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `2px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `2px dashed ${theme.colors.success}`\n : `2px dashed ${theme.colors.neutral05}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? theme.colors.foundation\n : theme.colors.neutral07};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral08 : theme.colors.neutral03};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 600;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<\n HTMLInputElement,\n DropzoneProps\n>((props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending'\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: { ...file.processor, percent: '', status: 'finished' },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string | null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(file => file.preview && URL.revokeObjectURL(file.preview));\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors && ! file.processor && onSendFile && onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n })\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({id})} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.secondary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n});\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","word","FileWordIcon","excel","FileExcelIcon","powerpoint","FilePowerpointIcon","pdf","FilePdfIcon","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","magma","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","colors","neutral06","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","foundation02","neutral08","errors","dangerInverse","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","foundation04","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","successInverse","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","message","Array","isArray","length","messageSuffix","join","formatError","header","Fragment","Container","noDrag","dragState","neutral05","foundation","neutral07","HelperMessage","neutral03","Wrapper","neutral02","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
1
+ {"version":3,"file":"fileuploader.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: '#707070',\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: '#006298',\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: '#3A8200',\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: '#FC4C02',\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: '#C61D23',\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: '#707070',\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: '#707070',\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: '#707070',\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: '#707070',\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() || 'default';\n const { Icon, style } =\n iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number | undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, {\n forwardRef,\n useContext,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string | string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral06};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: ${({ isInverse, theme }) =>\n isInverse ? theme.colors.foundation02 : theme.colors.neutral08};\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger\n : theme.colors.neutral06};\n border-width: ${({ file }) => (file.errors ? '2px' : '1px')};\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string | string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.maxSize, 2, byteLabel)}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.minSize, 2, byteLabel)}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if(mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' || status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={\n isInverse ? theme.colors.foundation04 : theme.colors.primary\n }\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={\n isInverse ? theme.colors.successInverse : theme.colors.success\n }\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.dangerInverse : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && <Flex role=\"progressbar\" style={{ marginLeft: 'auto' }} behavior={FlexBehavior.item}>\n {file.processor.percent}\n </Flex>}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n | 'error'\n | 'dragAccept'\n | 'dragReject'\n | 'dragActive'\n | 'default';\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n /**\n * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n */\n accept?: string | string[];\n /**\n * Enable/Disable the input\n */\n disabled?: boolean;\n /**\n * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n */\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /**\n * Content of the helper message.\n */\n helperMessage?: string;\n /**\n * @internal\n */\n id?: string;\n /**\n * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n */\n maxFiles?: number;\n /**\n * Minimum accepted number of files.\n */\n minFiles?: number;\n /**\n * Maximum file size (in bytes)\n * @default Infinity\n */\n maxSize?: number;\n /**\n * Minimum file size (in bytes)\n * @default 0\n */\n minSize?: number;\n /**\n * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n */\n multiple?: boolean;\n /**\n * If true, disables drag 'n' drop\n * @default false\n */\n noDrag?: boolean;\n /**\n * Callback for when a file is deleted\n */\n onDeleteFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is deleted\n */\n onRemoveFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n */\n onSendFile?: (props: OnSendFileProps) => void;\n /**\n * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n */\n sendFiles?: boolean;\n testId?: string;\n /**\n * Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' || dragState === 'error'\n ? isInverse\n ? `2px dashed ${theme.colors.dangerInverse}`\n : `2px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `2px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `2px dashed ${theme.colors.success}`\n : `2px dashed ${theme.colors.neutral05}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? theme.colors.foundation\n : theme.colors.neutral07};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral08 : theme.colors.neutral03};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 600;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<\n HTMLInputElement,\n DropzoneProps\n>((props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending'\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: { ...file.processor, percent: '', status: 'finished' },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string | null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(file => file.preview && URL.revokeObjectURL(file.preview));\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors && ! file.processor && onSendFile && onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n })\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({id})} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.secondary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n});\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","word","FileWordIcon","excel","FileExcelIcon","powerpoint","FilePowerpointIcon","pdf","FilePdfIcon","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","magma","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","colors","neutral06","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","foundation02","neutral08","errors","dangerInverse","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","foundation04","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","successInverse","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral05","foundation","neutral07","HelperMessage","neutral03","Wrapper","neutral02","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
package/dist/fileuploader.modern.js CHANGED
@@ -51,7 +51,7 @@ import{InsertDriveFileIcon as e,FileWordIcon as r,FileExcelIcon as o,FilePowerpo
51
51
  }
52
52
  `)),pe=h.span(re||(re=oe`
53
53
  display: block;
54
- `)),me=M((e,r)=>{var o;const{accept:i,file:t,isInverse:n,maxSize:s,minSize:l,onDeleteFile:a,onRemoveFile:g,thumbnails:u}=e,h=K(e,Y),v=H(x),O=B.useContext(y),j=b(n),[R,M]=L(C(c,{})),P=()=>{g&&"function"==typeof g&&g(t)},T=()=>{a&&"function"==typeof a&&a(t)},U=({status:e="ready"})=>{const[r,o]=L(!1);return E(()=>{let e=!0;return setTimeout(()=>{e&&o(!0)},1e3),()=>{e=!1}},[e]),"error"===e||"ready"===e?C(te,{children:C($,{onClick:P,variant:w.link,color:F.secondary,"aria-label":O.dropzone.removeFile,icon:C(c,{})})}):"pending"===e?C(te,{children:C(D,{color:j?v.colors.foundation04:v.colors.primary})}):A(te,{children:[C(k,{isOpen:!r,unmountOnExit:!0,fade:!0,children:C(p,{color:j?v.colors.successInverse:v.colors.success,style:{marginTop:"4px"}})}),C(k,{isOpen:r,unmountOnExit:!0,fade:!0,children:C($,{onClick:T,variant:w.link,color:F.secondary,"aria-label":O.dropzone.deleteFile,icon:C(m,{})})})]})};return E(()=>{var e;M(C(U,{status:null==t||null==(e=t.processor)?void 0:e.status}))},[null==t||null==(o=t.processor)?void 0:o.status]),C(z.Provider,{value:{isInverse:j},children:A(ce,{isInverse:j,theme:v,file:t,"data-testid":e.testId,ref:r,role:t.errors?"alert":"",children:[A(le,G({theme:v,behavior:I.container,alignItems:S.center},h,{children:[C(f,{behavior:I.item,alignItems:S.center,style:ne,children:t.errors?C(d,{color:j?v.colors.dangerInverse:v.colors.danger,size:24}):t.preview&&u&&t.type&&t.type.startsWith("image")?C(ie,{role:"img",file:t}):C(V,{isInverse:j,file:t})}),C(ae,{xs:!0,behavior:I.item,theme:v,children:t.name}),t.processor&&"pending"===t.processor.status&&C(f,{role:"progressbar",style:{marginLeft:"auto"},behavior:I.item,children:t.processor.percent}),C(f,{behavior:I.item,children:R})]})),t.errors&&C(se,{theme:v,children:t.errors.slice(0,1).map(e=>{let{code:r}=e,o=K(e,Z);const{header:t="",message:n}=((e,r,o)=>{switch(e.code){case"file-too-large":return G({},e,{message:`${e.message} ${W(r.maxSize,2,o)}.`});case"file-too-small":return G({},e,{message:`${e.message} ${W(r.minSize,2,o)}.`});case"file-invalid-type":const i=Array.isArray(r.accept)&&1===r.accept.length?r.accept[0]:r.accept,t=Array.isArray(i)?`one of ${i.join(", ")}`:i;return G({},e,{message:`${e.message}: ${t}`});default:return e}})(G({code:r},o,O.dropzone.errors[r]),{accept:i,minSize:l,maxSize:s},O.dropzone.bytes);return A(B.Fragment,{children:[C(de,{style:{color:j?v.colors.dangerInverse:v.colors.danger},children:t}),C(pe,{children:n})]},r)})})]})})}),ge=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"];let ue,he,fe,ve=e=>e;const xe=h(f)(ue||(ue=ve`
54
+ `)),me=M((e,r)=>{var o;const{accept:i,file:t,isInverse:n,maxSize:s,minSize:l,onDeleteFile:a,onRemoveFile:g,thumbnails:u}=e,h=K(e,Y),v=H(x),O=B.useContext(y),j=b(n),[R,M]=L(C(c,{})),P=()=>{g&&"function"==typeof g&&g(t)},T=()=>{a&&"function"==typeof a&&a(t)},U=({status:e="ready"})=>{const[r,o]=L(!1);return E(()=>{let e=!0;return setTimeout(()=>{e&&o(!0)},1e3),()=>{e=!1}},[e]),"error"===e||"ready"===e?C(te,{children:C($,{onClick:P,variant:w.link,color:F.secondary,"aria-label":O.dropzone.removeFile,icon:C(c,{})})}):"pending"===e?C(te,{children:C(D,{color:j?v.colors.foundation04:v.colors.primary})}):A(te,{children:[C(k,{isOpen:!r,unmountOnExit:!0,fade:!0,children:C(p,{color:j?v.colors.successInverse:v.colors.success,style:{marginTop:"4px"}})}),C(k,{isOpen:r,unmountOnExit:!0,fade:!0,children:C($,{onClick:T,variant:w.link,color:F.secondary,"aria-label":O.dropzone.deleteFile,icon:C(m,{})})})]})};return E(()=>{var e;M(C(U,{status:null==t||null==(e=t.processor)?void 0:e.status}))},[null==t||null==(o=t.processor)?void 0:o.status]),C(z.Provider,{value:{isInverse:j},children:A(ce,{isInverse:j,theme:v,file:t,"data-testid":e.testId,ref:r,role:t.errors?"alert":"",children:[A(le,G({theme:v,behavior:I.container,alignItems:S.center},h,{children:[C(f,{behavior:I.item,alignItems:S.center,style:ne,children:t.errors?C(d,{color:j?v.colors.dangerInverse:v.colors.danger,size:24}):t.preview&&u&&t.type&&t.type.startsWith("image")?C(ie,{role:"img",file:t}):C(V,{isInverse:j,file:t})}),C(ae,{xs:!0,behavior:I.item,theme:v,children:t.name}),t.processor&&"pending"===t.processor.status&&C(f,{role:"progressbar",style:{marginLeft:"auto"},behavior:I.item,children:t.processor.percent}),C(f,{behavior:I.item,children:R})]})),t.errors&&C(se,{theme:v,children:t.errors.slice(0,1).map(e=>{let{code:r}=e,o=K(e,Z);const{header:t="",message:n}=((e,r,o)=>{const i=Array.isArray(r.accept)&&1===r.accept.length?r.accept[0]:r.accept,t=Array.isArray(i)?`one of ${i.join(", ")}`:i;switch(e.code){case"file-too-large":return G({},e,{message:`${e.message} ${W(r.maxSize,2,o)}.`});case"file-too-small":return G({},e,{message:`${e.message} ${W(r.minSize,2,o)}.`});case"file-invalid-type":return G({},e,{message:`${e.message}: ${t}`});default:return e}})(G({code:r},o,O.dropzone.errors[r]),{accept:i,minSize:l,maxSize:s},O.dropzone.bytes);return A(B.Fragment,{children:[C(de,{style:{color:j?v.colors.dangerInverse:v.colors.danger},children:t}),C(pe,{children:n})]},r)})})]})})}),ge=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"];let ue,he,fe,ve=e=>e;const xe=h(f)(ue||(ue=ve`
55
55
  flex-direction: column;
56
56
  align-items: ${0};
57
57
  justify-content: ${0};
package/dist/fileuploader.modern.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fileuploader.modern.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: '#707070',\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: '#006298',\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: '#3A8200',\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: '#FC4C02',\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: '#C61D23',\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: '#707070',\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: '#707070',\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: '#707070',\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: '#707070',\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() || 'default';\n const { Icon, style } =\n iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number | undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, {\n forwardRef,\n useContext,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string | string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral06};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: ${({ isInverse, theme }) =>\n isInverse ? theme.colors.foundation02 : theme.colors.neutral08};\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger\n : theme.colors.neutral06};\n border-width: ${({ file }) => (file.errors ? '2px' : '1px')};\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string | string[];\n },\n byteLabel: string\n) => {\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.maxSize, 2, byteLabel)}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.minSize, 2, byteLabel)}.`,\n };\n case 'file-invalid-type':\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if(mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' || status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={\n isInverse ? theme.colors.foundation04 : theme.colors.primary\n }\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={\n isInverse ? theme.colors.successInverse : theme.colors.success\n }\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.dangerInverse : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && <Flex role=\"progressbar\" style={{ marginLeft: 'auto' }} behavior={FlexBehavior.item}>\n {file.processor.percent}\n </Flex>}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n | 'error'\n | 'dragAccept'\n | 'dragReject'\n | 'dragActive'\n | 'default';\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n /**\n * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n */\n accept?: string | string[];\n /**\n * Enable/Disable the input\n */\n disabled?: boolean;\n /**\n * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n */\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /**\n * Content of the helper message.\n */\n helperMessage?: string;\n /**\n * @internal\n */\n id?: string;\n /**\n * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n */\n maxFiles?: number;\n /**\n * Minimum accepted number of files.\n */\n minFiles?: number;\n /**\n * Maximum file size (in bytes)\n * @default Infinity\n */\n maxSize?: number;\n /**\n * Minimum file size (in bytes)\n * @default 0\n */\n minSize?: number;\n /**\n * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n */\n multiple?: boolean;\n /**\n * If true, disables drag 'n' drop\n * @default false\n */\n noDrag?: boolean;\n /**\n * Callback for when a file is deleted\n */\n onDeleteFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is deleted\n */\n onRemoveFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n */\n onSendFile?: (props: OnSendFileProps) => void;\n /**\n * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n */\n sendFiles?: boolean;\n testId?: string;\n /**\n * Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' || dragState === 'error'\n ? isInverse\n ? `2px dashed ${theme.colors.dangerInverse}`\n : `2px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `2px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `2px dashed ${theme.colors.success}`\n : `2px dashed ${theme.colors.neutral05}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? theme.colors.foundation\n : theme.colors.neutral07};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral08 : theme.colors.neutral03};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 600;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<\n HTMLInputElement,\n DropzoneProps\n>((props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending'\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: { ...file.processor, percent: '', status: 'finished' },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string | null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(file => file.preview && URL.revokeObjectURL(file.preview));\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors && ! file.processor && onSendFile && onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n })\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({id})} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.secondary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n});\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","word","FileWordIcon","excel","FileExcelIcon","powerpoint","FilePowerpointIcon","pdf","FilePdfIcon","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","magma","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","colors","neutral06","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","foundation02","neutral08","errors","dangerInverse","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","actions","setActions","useState","CloseIcon","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","foundation04","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","successInverse","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","_ref","code","header","message","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","formatError","Fragment","Container","noDrag","dragState","neutral05","foundation","neutral07","HelperMessage","neutral03","Wrapper","neutral02","spaceScale","spacing01","Dropzone","containerStyle","disabled","dropzoneOptions","multiple","helperMessage","id","defaultId","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","getInputProps","getRootProps","isDragAccept","isDragActive","isDragReject","open","useDropzone","noClick","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
1
+ {"version":3,"file":"fileuploader.modern.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: '#707070',\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: '#006298',\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: '#3A8200',\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: '#FC4C02',\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: '#C61D23',\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: '#707070',\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: '#707070',\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: '#707070',\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: '#707070',\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() || 'default';\n const { Icon, style } =\n iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number | undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, {\n forwardRef,\n useContext,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string | string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral06};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: ${({ isInverse, theme }) =>\n isInverse ? theme.colors.foundation02 : theme.colors.neutral08};\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger\n : theme.colors.neutral06};\n border-width: ${({ file }) => (file.errors ? '2px' : '1px')};\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string | string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.maxSize, 2, byteLabel)}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(constraints.minSize, 2, byteLabel)}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if(mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' || status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={\n isInverse ? theme.colors.foundation04 : theme.colors.primary\n }\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={\n isInverse ? theme.colors.successInverse : theme.colors.success\n }\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.dangerInverse : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && <Flex role=\"progressbar\" style={{ marginLeft: 'auto' }} behavior={FlexBehavior.item}>\n {file.processor.percent}\n </Flex>}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.dangerInverse\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n | 'error'\n | 'dragAccept'\n | 'dragReject'\n | 'dragActive'\n | 'default';\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n /**\n * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n */\n accept?: string | string[];\n /**\n * Enable/Disable the input\n */\n disabled?: boolean;\n /**\n * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n */\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /**\n * Content of the helper message.\n */\n helperMessage?: string;\n /**\n * @internal\n */\n id?: string;\n /**\n * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n */\n maxFiles?: number;\n /**\n * Minimum accepted number of files.\n */\n minFiles?: number;\n /**\n * Maximum file size (in bytes)\n * @default Infinity\n */\n maxSize?: number;\n /**\n * Minimum file size (in bytes)\n * @default 0\n */\n minSize?: number;\n /**\n * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n */\n multiple?: boolean;\n /**\n * If true, disables drag 'n' drop\n * @default false\n */\n noDrag?: boolean;\n /**\n * Callback for when a file is deleted\n */\n onDeleteFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is deleted\n */\n onRemoveFile?: (file: FilePreview) => void;\n /**\n * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n */\n onSendFile?: (props: OnSendFileProps) => void;\n /**\n * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n */\n sendFiles?: boolean;\n testId?: string;\n /**\n * Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' || dragState === 'error'\n ? isInverse\n ? `2px dashed ${theme.colors.dangerInverse}`\n : `2px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `2px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `2px dashed ${theme.colors.success}`\n : `2px dashed ${theme.colors.neutral05}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? theme.colors.foundation\n : theme.colors.neutral07};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral08 : theme.colors.neutral03};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 600;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<\n HTMLInputElement,\n DropzoneProps\n>((props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending'\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: { ...file.processor, percent: '', status: 'finished' },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string | null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(file => file.preview && URL.revokeObjectURL(file.preview));\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors && ! file.processor && onSendFile && onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n })\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({id})} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse ? theme.colors.neutral07 : theme.colors.neutral02\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.secondary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n});\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","word","FileWordIcon","excel","FileExcelIcon","powerpoint","FilePowerpointIcon","pdf","FilePdfIcon","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","magma","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","colors","neutral06","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","foundation02","neutral08","errors","dangerInverse","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","actions","setActions","useState","CloseIcon","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","foundation04","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","successInverse","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","_ref","code","header","message","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","formatError","Fragment","Container","noDrag","dragState","neutral05","foundation","neutral07","HelperMessage","neutral03","Wrapper","neutral02","spaceScale","spacing01","Dropzone","containerStyle","disabled","dropzoneOptions","multiple","helperMessage","id","defaultId","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","getInputProps","getRootProps","isDragAccept","isDragActive","isDragReject","open","useDropzone","noClick","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
package/dist/fileuploader.modern.module.js CHANGED
@@ -1,2 +1,2 @@
1
- import{InsertDriveFileIcon as e,FileWordIcon as n,FileExcelIcon as r,FilePowerpointIcon as i,FilePdfIcon as t,ImageIcon as o,VideocamIcon as s,AudiotrackIcon as l,FileZipIcon as a,CloseIcon as c,ErrorIcon as d,CheckCircleIcon as u,DeleteIcon as p,CloudUploadIcon as f}from"react-magma-icons";import{magma as m,styled as g,Flex as h,Card as v,ThemeContext as x,I18nContext as y,useIsInverse as b,InverseContext as z,FlexBehavior as I,FlexAlignItems as S,IconButton as w,ButtonVariant as F,ButtonColor as D,Spinner as k,Transition as O,useGenerateId as j,FormFieldContainer as R,Button as C}from"react-magma-dom";import{jsx as A,jsxs as B}from"react/jsx-runtime";import M,{forwardRef as H,useContext as L,useState as E,useEffect as P}from"react";import{useDropzone as T}from"react-dropzone";var U={default:{Icon:e,style:{color:"#707070"}},word:{Icon:n,style:{color:"#006298"}},excel:{Icon:r,style:{color:"#3A8200"}},powerpoint:{Icon:i,style:{color:"#FC4C02"}},pdf:{Icon:t,style:{color:"#C61D23"}},image:{Icon:o,style:{color:"#707070"}},video:{Icon:s,style:{color:"#707070"}},audio:{Icon:l,style:{color:"#707070"}},archive:{Icon:a,style:{color:"#707070"}}},V={default:U.default,xlsx:U.excel,xlsm:U.excel,xlsb:U.excel,xltx:U.excel,xls:U.excel,xlt:U.excel,doc:U.word,docx:U.word,docm:U.word,dotx:U.word,dotm:U.word,docb:U.word,pptx:U.powerpoint,pptm:U.powerpoint,ppt:U.powerpoint,pdf:U.pdf,png:U.image,svg:U.image,image:U.image,audio:U.audio,video:U.video,zip:U.archive},G=function(e){var n=e.file,r=e.isInverse,i=n.path,t=void 0===i?"":i,o=n.type,s=(void 0===o?"":o).split("/")[0],l=t.split(".").pop()||"default",a=V[l]||V[s]||V.default;return A(a.Icon,{size:m.iconSizes.medium,style:r?{}:a.style})};function K(){return K=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},K.apply(this,arguments)}function W(e,n){if(null==e)return{};var r,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n.indexOf(r=o[i])>=0||(t[r]=e[r]);return t}function Y(e,n){return n||(n=e.slice(0)),e.raw=n,e}var Z,q,J,N,Q,X,$,_,ee,ne,re,ie=function(e,n,r){if(void 0===n&&(n=2),void 0===r&&(r="Bytes"),void 0!==e){if(0==e)return"0 "+r;var i=[r,"KB","MB","GB","TB","PB","EB","ZB","YB"],t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(n))+" "+i[t]}},te=["accept","file","isInverse","maxSize","minSize","onDeleteFile","onRemoveFile","testId","thumbnails"],oe=["code"],se=g.div(Z||(Z=Y(["\n background-image: ",";\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n"])),function(e){var n=e.file;return"url('"+("preview"in n&&n.preview)+"')"}),le=g.div(q||(q=Y(["\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n"]))),ae={marginRight:"12px",display:"flex"},ce=g.div(J||(J=Y(["\n border-top: 1px solid ",";\n padding: 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.colors.neutral06},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),de=g(h)(N||(N=Y(["\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),ue=g(h)(Q||(Q=Y(["\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),pe=g(v)(X||(X=Y(["\n background-color: ",";\n border-color: ",";\n border-width: ",";\n margin: 10px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.foundation02:n.colors.neutral08},function(e){var n=e.theme;return e.file.errors?e.isInverse?n.colors.dangerInverse:n.colors.danger:n.colors.neutral06},function(e){return e.file.errors?"2px":"1px"}),fe=g.span($||($=Y(["\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n"]))),me=g.span(_||(_=Y(["\n display: block;\n"]))),ge=H(function(e,n){var r,i=e.accept,t=e.file,o=e.isInverse,s=e.maxSize,l=e.minSize,a=e.onDeleteFile,f=e.onRemoveFile,m=e.thumbnails,g=W(e,te),v=L(x),j=M.useContext(y),R=b(o),C=E(A(c,{})),H=C[0],T=C[1],U=function(){f&&"function"==typeof f&&f(t)},V=function(){a&&"function"==typeof a&&a(t)},Y=function(e){var n=e.status,r=void 0===n?"ready":n,i=E(!1),t=i[0],o=i[1];return P(function(){var e=!0;return setTimeout(function(){e&&o(!0)},1e3),function(){e=!1}},[r]),"error"===r||"ready"===r?A(le,{children:A(w,{onClick:U,variant:F.link,color:D.secondary,"aria-label":j.dropzone.removeFile,icon:A(c,{})})}):"pending"===r?A(le,{children:A(k,{color:R?v.colors.foundation04:v.colors.primary})}):B(le,{children:[A(O,{isOpen:!t,unmountOnExit:!0,fade:!0,children:A(u,{color:R?v.colors.successInverse:v.colors.success,style:{marginTop:"4px"}})}),A(O,{isOpen:t,unmountOnExit:!0,fade:!0,children:A(w,{onClick:V,variant:F.link,color:D.secondary,"aria-label":j.dropzone.deleteFile,icon:A(p,{})})})]})};return P(function(){var e;T(A(Y,{status:null==t||null==(e=t.processor)?void 0:e.status}))},[null==t||null==(r=t.processor)?void 0:r.status]),A(z.Provider,{value:{isInverse:R},children:B(pe,{isInverse:R,theme:v,file:t,"data-testid":e.testId,ref:n,role:t.errors?"alert":"",children:[B(de,K({theme:v,behavior:I.container,alignItems:S.center},g,{children:[A(h,{behavior:I.item,alignItems:S.center,style:ae,children:t.errors?A(d,{color:R?v.colors.dangerInverse:v.colors.danger,size:24}):t.preview&&m&&t.type&&t.type.startsWith("image")?A(se,{role:"img",file:t}):A(G,{isInverse:R,file:t})}),A(ue,{xs:!0,behavior:I.item,theme:v,children:t.name}),t.processor&&"pending"===t.processor.status&&A(h,{role:"progressbar",style:{marginLeft:"auto"},behavior:I.item,children:t.processor.percent}),A(h,{behavior:I.item,children:H})]})),t.errors&&A(ce,{theme:v,children:t.errors.slice(0,1).map(function(e){var n=e.code,r=function(e,n,r){switch(e.code){case"file-too-large":return K({},e,{message:e.message+" "+ie(n.maxSize,2,r)+"."});case"file-too-small":return K({},e,{message:e.message+" "+ie(n.minSize,2,r)+"."});case"file-invalid-type":var i=Array.isArray(n.accept)&&1===n.accept.length?n.accept[0]:n.accept,t=Array.isArray(i)?"one of "+i.join(", "):i;return K({},e,{message:e.message+": "+t});default:return e}}(K({code:n},W(e,oe),j.dropzone.errors[n]),{accept:i,minSize:l,maxSize:s},j.dropzone.bytes),t=r.header,o=r.message;return B(M.Fragment,{children:[A(fe,{style:{color:R?v.colors.dangerInverse:v.colors.danger},children:void 0===t?"":t}),A(me,{children:o})]},n)})})]})})}),he=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"],ve=g(h)(ee||(ee=Y(["\n flex-direction: column;\n align-items: ",";\n justify-content: ",";\n text-align: ",";\n padding: ",";\n border-radius: ",";\n border: ",";\n\n border-style: ",";\n background-color: ",";\n outline: none;\n transition: ",";\n"])),function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"0px":"24px"},function(e){return e.noDrag?"0px":"4px"},function(e){var n=e.dragState,r=void 0===n?"default":n,i=e.theme;return e.noDrag?"0px":"dragReject"===r||"error"===r?e.isInverse?"2px dashed "+i.colors.dangerInverse:"2px dashed "+i.colors.danger:"dragActive"===r?"2px dashed "+i.colors.primary:"dragAccept"===r?"2px dashed "+i.colors.success:"2px dashed "+i.colors.neutral05},function(e){var n=e.dragState;return"error"===(void 0===n?"default":n)?"solid":"dashed"},function(e){var n=e.theme;return e.noDrag?"transparent":e.isInverse?n.colors.foundation:n.colors.neutral07},function(e){return"border "+(e.noDrag?0:".24s")+" ease-in-out"}),xe=g.span(ne||(ne=Y(["\n color: ",";\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral08:n.colors.neutral03}),ye=g.div(re||(re=Y(["\n color: ",";\n margin: 0 0 24px 0;\n font-size: ",";\n line-height: ",";\n font-weight: 600;\n padding: ",";\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral07:n.colors.neutral02},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight},function(e){return e.theme.spaceScale.spacing01}),be=M.forwardRef(function(e,n){var r=e.accept,i=e.containerStyle,t=e.disabled,o=e.helperMessage,s=e.id,l=e.inputSize,a=e.isInverse,c=e.isLabelVisuallyHidden,d=e.labelStyle,u=e.labelText,p=e.maxFiles,m=e.minFiles,g=e.maxSize,v=e.minSize,S=e.multiple,w=void 0===S||S,k=e.noDrag,O=void 0!==k&&k,H=e.onSendFile,L=e.onDeleteFile,E=e.onRemoveFile,P=e.sendFiles,U=void 0!==P&&P,V=e.testId,G=e.thumbnails,Y=void 0===G||G,Z=W(e,he),q=M.useState([]),J=q[0],N=q[1],Q=M.useState(null),X=Q[0],$=Q[1],_=b(a),ee=M.useContext(x),ne=M.useContext(y),re=j(s),ie=M.useCallback(function(e,n){N(function(r){return[].concat(r,e.map(function(e){return Object.assign(e,{preview:URL.createObjectURL(e)})}),n.map(function(e){return Object.assign(e.file,{errors:e.errors})}))})},[]),te=T({noClick:!0,disabled:t,multiple:w,maxSize:g,minSize:v,accept:r,onDrop:ie,noDrag:O}),oe=te.getInputProps,se=te.getRootProps,le=te.open,ae=X?"error":te.isDragAccept?"dragAccept":te.isDragReject?"dragReject":te.isDragActive?"dragActive":"default",ce=function(e){N(function(n){return n.filter(function(n){return n!==e})}),E&&"function"==typeof E&&E(e)},de=function(e){N(function(n){return n.filter(function(n){return n!==e})}),L&&"function"==typeof L&&L(e)},ue=function(e){N(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:K({},n.processor,{percent:e.percent+"%",status:"pending"})}):n})})},pe=function(e){N(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:K({},n.processor,{percent:"",status:"finished"})}):n})})},fe=function(e){N(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{errors:e.errors,processor:K({},n.processor,{status:"error"})}):n})})};return M.useEffect(function(){return function(){J.forEach(function(e){return e.preview&&URL.revokeObjectURL(e.preview)})}},[J]),M.useEffect(function(){var e=m&&J.length<m,n=p&&J.length>p;$(function(e,n){if(null===e)return null;var r=ne.dropzone.errors[e];switch(e){case"too-many-files":return r.message+" "+n.maxFiles+" "+ne.dropzone.files+".";case"too-few-files":return r.message+" "+n.minFiles+" "+ne.dropzone.files+".";default:return r.message}}(n?"too-many-files":e?"too-few-files":null,{minFiles:m,maxFiles:p})),U&&J.length>0&&!n&&!e&&N(function(e){return e.map(function(e){return!e.errors&&!e.processor&&H&&H({file:e,onError:fe,onFinish:pe,onProgress:ue}),e})})},[U,J.length,H]),B(z.Provider,{value:{isInverse:_},children:[B(R,{actionable:!1,containerStyle:i,errorMessage:X,fieldId:re,inputSize:l,isInverse:_,isLabelVisuallyHidden:c,labelStyle:d,labelText:u,messageStyle:{minHeight:0},"data-testid":V,children:[A(xe,{theme:ee,isInverse:_,children:o}),B(ve,K({behavior:I.container,dragState:ae,isInverse:_,noDrag:O,theme:ee},se(),Z,{testId:V,tabIndex:-1,children:[A("input",K({ref:n},oe({id:re}))),O?A(h,{xs:!0,behavior:I.item,children:A(C,{color:D.primary,disabled:t,isInverse:_,onClick:le,style:{margin:0},children:ne.dropzone.browseFiles})}):B(h,{behavior:I.item,children:[A(f,{"aria-hidden":"true",color:_?ee.colors.neutral07:ee.colors.neutral02,size:48}),A(ye,{isInverse:_,theme:ee,children:ne.dropzone.dragMessage}),A(C,{color:D.secondary,disabled:t,isInverse:_,onClick:le,style:{margin:0},variant:F.solid,children:ne.dropzone.browseFiles})]})]}))]}),J.map(function(e){return A(ge,{accept:r,file:e,isInverse:_,maxSize:g,minSize:v,onDeleteFile:de,onRemoveFile:ce,thumbnails:Y},e.name)})]})});export{be as Dropzone,G as FileIcon};
1
+ import{InsertDriveFileIcon as e,FileWordIcon as n,FileExcelIcon as r,FilePowerpointIcon as i,FilePdfIcon as t,ImageIcon as o,VideocamIcon as s,AudiotrackIcon as l,FileZipIcon as a,CloseIcon as c,ErrorIcon as d,CheckCircleIcon as u,DeleteIcon as p,CloudUploadIcon as f}from"react-magma-icons";import{magma as m,styled as g,Flex as h,Card as v,ThemeContext as x,I18nContext as y,useIsInverse as b,InverseContext as z,FlexBehavior as I,FlexAlignItems as S,IconButton as w,ButtonVariant as F,ButtonColor as D,Spinner as k,Transition as O,useGenerateId as j,FormFieldContainer as R,Button as C}from"react-magma-dom";import{jsx as A,jsxs as B}from"react/jsx-runtime";import M,{forwardRef as H,useContext as L,useState as E,useEffect as P}from"react";import{useDropzone as T}from"react-dropzone";var U={default:{Icon:e,style:{color:"#707070"}},word:{Icon:n,style:{color:"#006298"}},excel:{Icon:r,style:{color:"#3A8200"}},powerpoint:{Icon:i,style:{color:"#FC4C02"}},pdf:{Icon:t,style:{color:"#C61D23"}},image:{Icon:o,style:{color:"#707070"}},video:{Icon:s,style:{color:"#707070"}},audio:{Icon:l,style:{color:"#707070"}},archive:{Icon:a,style:{color:"#707070"}}},V={default:U.default,xlsx:U.excel,xlsm:U.excel,xlsb:U.excel,xltx:U.excel,xls:U.excel,xlt:U.excel,doc:U.word,docx:U.word,docm:U.word,dotx:U.word,dotm:U.word,docb:U.word,pptx:U.powerpoint,pptm:U.powerpoint,ppt:U.powerpoint,pdf:U.pdf,png:U.image,svg:U.image,image:U.image,audio:U.audio,video:U.video,zip:U.archive},G=function(e){var n=e.file,r=e.isInverse,i=n.path,t=void 0===i?"":i,o=n.type,s=(void 0===o?"":o).split("/")[0],l=t.split(".").pop()||"default",a=V[l]||V[s]||V.default;return A(a.Icon,{size:m.iconSizes.medium,style:r?{}:a.style})};function K(){return K=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},K.apply(this,arguments)}function W(e,n){if(null==e)return{};var r,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n.indexOf(r=o[i])>=0||(t[r]=e[r]);return t}function Y(e,n){return n||(n=e.slice(0)),e.raw=n,e}var Z,q,J,N,Q,X,$,_,ee,ne,re,ie=function(e,n,r){if(void 0===n&&(n=2),void 0===r&&(r="Bytes"),void 0!==e){if(0==e)return"0 "+r;var i=[r,"KB","MB","GB","TB","PB","EB","ZB","YB"],t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(n))+" "+i[t]}},te=["accept","file","isInverse","maxSize","minSize","onDeleteFile","onRemoveFile","testId","thumbnails"],oe=["code"],se=g.div(Z||(Z=Y(["\n background-image: ",";\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n"])),function(e){var n=e.file;return"url('"+("preview"in n&&n.preview)+"')"}),le=g.div(q||(q=Y(["\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n"]))),ae={marginRight:"12px",display:"flex"},ce=g.div(J||(J=Y(["\n border-top: 1px solid ",";\n padding: 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.colors.neutral06},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),de=g(h)(N||(N=Y(["\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),ue=g(h)(Q||(Q=Y(["\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ",";\n line-height: ",";\n"])),function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),pe=g(v)(X||(X=Y(["\n background-color: ",";\n border-color: ",";\n border-width: ",";\n margin: 10px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.foundation02:n.colors.neutral08},function(e){var n=e.theme;return e.file.errors?e.isInverse?n.colors.dangerInverse:n.colors.danger:n.colors.neutral06},function(e){return e.file.errors?"2px":"1px"}),fe=g.span($||($=Y(["\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n"]))),me=g.span(_||(_=Y(["\n display: block;\n"]))),ge=H(function(e,n){var r,i=e.accept,t=e.file,o=e.isInverse,s=e.maxSize,l=e.minSize,a=e.onDeleteFile,f=e.onRemoveFile,m=e.thumbnails,g=W(e,te),v=L(x),j=M.useContext(y),R=b(o),C=E(A(c,{})),H=C[0],T=C[1],U=function(){f&&"function"==typeof f&&f(t)},V=function(){a&&"function"==typeof a&&a(t)},Y=function(e){var n=e.status,r=void 0===n?"ready":n,i=E(!1),t=i[0],o=i[1];return P(function(){var e=!0;return setTimeout(function(){e&&o(!0)},1e3),function(){e=!1}},[r]),"error"===r||"ready"===r?A(le,{children:A(w,{onClick:U,variant:F.link,color:D.secondary,"aria-label":j.dropzone.removeFile,icon:A(c,{})})}):"pending"===r?A(le,{children:A(k,{color:R?v.colors.foundation04:v.colors.primary})}):B(le,{children:[A(O,{isOpen:!t,unmountOnExit:!0,fade:!0,children:A(u,{color:R?v.colors.successInverse:v.colors.success,style:{marginTop:"4px"}})}),A(O,{isOpen:t,unmountOnExit:!0,fade:!0,children:A(w,{onClick:V,variant:F.link,color:D.secondary,"aria-label":j.dropzone.deleteFile,icon:A(p,{})})})]})};return P(function(){var e;T(A(Y,{status:null==t||null==(e=t.processor)?void 0:e.status}))},[null==t||null==(r=t.processor)?void 0:r.status]),A(z.Provider,{value:{isInverse:R},children:B(pe,{isInverse:R,theme:v,file:t,"data-testid":e.testId,ref:n,role:t.errors?"alert":"",children:[B(de,K({theme:v,behavior:I.container,alignItems:S.center},g,{children:[A(h,{behavior:I.item,alignItems:S.center,style:ae,children:t.errors?A(d,{color:R?v.colors.dangerInverse:v.colors.danger,size:24}):t.preview&&m&&t.type&&t.type.startsWith("image")?A(se,{role:"img",file:t}):A(G,{isInverse:R,file:t})}),A(ue,{xs:!0,behavior:I.item,theme:v,children:t.name}),t.processor&&"pending"===t.processor.status&&A(h,{role:"progressbar",style:{marginLeft:"auto"},behavior:I.item,children:t.processor.percent}),A(h,{behavior:I.item,children:H})]})),t.errors&&A(ce,{theme:v,children:t.errors.slice(0,1).map(function(e){var n=e.code,r=function(e,n,r){var i=Array.isArray(n.accept)&&1===n.accept.length?n.accept[0]:n.accept,t=Array.isArray(i)?"one of "+i.join(", "):i;switch(e.code){case"file-too-large":return K({},e,{message:e.message+" "+ie(n.maxSize,2,r)+"."});case"file-too-small":return K({},e,{message:e.message+" "+ie(n.minSize,2,r)+"."});case"file-invalid-type":return K({},e,{message:e.message+": "+t});default:return e}}(K({code:n},W(e,oe),j.dropzone.errors[n]),{accept:i,minSize:l,maxSize:s},j.dropzone.bytes),t=r.header,o=r.message;return B(M.Fragment,{children:[A(fe,{style:{color:R?v.colors.dangerInverse:v.colors.danger},children:void 0===t?"":t}),A(me,{children:o})]},n)})})]})})}),he=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"],ve=g(h)(ee||(ee=Y(["\n flex-direction: column;\n align-items: ",";\n justify-content: ",";\n text-align: ",";\n padding: ",";\n border-radius: ",";\n border: ",";\n\n border-style: ",";\n background-color: ",";\n outline: none;\n transition: ",";\n"])),function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"left":"center"},function(e){return e.noDrag?"0px":"24px"},function(e){return e.noDrag?"0px":"4px"},function(e){var n=e.dragState,r=void 0===n?"default":n,i=e.theme;return e.noDrag?"0px":"dragReject"===r||"error"===r?e.isInverse?"2px dashed "+i.colors.dangerInverse:"2px dashed "+i.colors.danger:"dragActive"===r?"2px dashed "+i.colors.primary:"dragAccept"===r?"2px dashed "+i.colors.success:"2px dashed "+i.colors.neutral05},function(e){var n=e.dragState;return"error"===(void 0===n?"default":n)?"solid":"dashed"},function(e){var n=e.theme;return e.noDrag?"transparent":e.isInverse?n.colors.foundation:n.colors.neutral07},function(e){return"border "+(e.noDrag?0:".24s")+" ease-in-out"}),xe=g.span(ne||(ne=Y(["\n color: ",";\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral08:n.colors.neutral03}),ye=g.div(re||(re=Y(["\n color: ",";\n margin: 0 0 24px 0;\n font-size: ",";\n line-height: ",";\n font-weight: 600;\n padding: ",";\n"])),function(e){var n=e.theme;return e.isInverse?n.colors.neutral07:n.colors.neutral02},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight},function(e){return e.theme.spaceScale.spacing01}),be=M.forwardRef(function(e,n){var r=e.accept,i=e.containerStyle,t=e.disabled,o=e.helperMessage,s=e.id,l=e.inputSize,a=e.isInverse,c=e.isLabelVisuallyHidden,d=e.labelStyle,u=e.labelText,p=e.maxFiles,m=e.minFiles,g=e.maxSize,v=e.minSize,S=e.multiple,w=void 0===S||S,k=e.noDrag,O=void 0!==k&&k,H=e.onSendFile,L=e.onDeleteFile,E=e.onRemoveFile,P=e.sendFiles,U=void 0!==P&&P,V=e.testId,G=e.thumbnails,Y=void 0===G||G,Z=W(e,he),q=M.useState([]),J=q[0],N=q[1],Q=M.useState(null),X=Q[0],$=Q[1],_=b(a),ee=M.useContext(x),ne=M.useContext(y),re=j(s),ie=M.useCallback(function(e,n){N(function(r){return[].concat(r,e.map(function(e){return Object.assign(e,{preview:URL.createObjectURL(e)})}),n.map(function(e){return Object.assign(e.file,{errors:e.errors})}))})},[]),te=T({noClick:!0,disabled:t,multiple:w,maxSize:g,minSize:v,accept:r,onDrop:ie,noDrag:O}),oe=te.getInputProps,se=te.getRootProps,le=te.open,ae=X?"error":te.isDragAccept?"dragAccept":te.isDragReject?"dragReject":te.isDragActive?"dragActive":"default",ce=function(e){N(function(n){return n.filter(function(n){return n!==e})}),E&&"function"==typeof E&&E(e)},de=function(e){N(function(n){return n.filter(function(n){return n!==e})}),L&&"function"==typeof L&&L(e)},ue=function(e){N(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:K({},n.processor,{percent:e.percent+"%",status:"pending"})}):n})})},pe=function(e){N(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{processor:K({},n.processor,{percent:"",status:"finished"})}):n})})},fe=function(e){N(function(n){return n.map(function(n){return n===e.file?Object.assign(n,{errors:e.errors,processor:K({},n.processor,{status:"error"})}):n})})};return M.useEffect(function(){return function(){J.forEach(function(e){return e.preview&&URL.revokeObjectURL(e.preview)})}},[J]),M.useEffect(function(){var e=m&&J.length<m,n=p&&J.length>p;$(function(e,n){if(null===e)return null;var r=ne.dropzone.errors[e];switch(e){case"too-many-files":return r.message+" "+n.maxFiles+" "+ne.dropzone.files+".";case"too-few-files":return r.message+" "+n.minFiles+" "+ne.dropzone.files+".";default:return r.message}}(n?"too-many-files":e?"too-few-files":null,{minFiles:m,maxFiles:p})),U&&J.length>0&&!n&&!e&&N(function(e){return e.map(function(e){return!e.errors&&!e.processor&&H&&H({file:e,onError:fe,onFinish:pe,onProgress:ue}),e})})},[U,J.length,H]),B(z.Provider,{value:{isInverse:_},children:[B(R,{actionable:!1,containerStyle:i,errorMessage:X,fieldId:re,inputSize:l,isInverse:_,isLabelVisuallyHidden:c,labelStyle:d,labelText:u,messageStyle:{minHeight:0},"data-testid":V,children:[A(xe,{theme:ee,isInverse:_,children:o}),B(ve,K({behavior:I.container,dragState:ae,isInverse:_,noDrag:O,theme:ee},se(),Z,{testId:V,tabIndex:-1,children:[A("input",K({ref:n},oe({id:re}))),O?A(h,{xs:!0,behavior:I.item,children:A(C,{color:D.primary,disabled:t,isInverse:_,onClick:le,style:{margin:0},children:ne.dropzone.browseFiles})}):B(h,{behavior:I.item,children:[A(f,{"aria-hidden":"true",color:_?ee.colors.neutral07:ee.colors.neutral02,size:48}),A(ye,{isInverse:_,theme:ee,children:ne.dropzone.dragMessage}),A(C,{color:D.secondary,disabled:t,isInverse:_,onClick:le,style:{margin:0},variant:F.solid,children:ne.dropzone.browseFiles})]})]}))]}),J.map(function(e){return A(ge,{accept:r,file:e,isInverse:_,maxSize:g,minSize:v,onDeleteFile:de,onRemoveFile:ce,thumbnails:Y},e.name)})]})});export{be as Dropzone,G as FileIcon};
2
2
  //# sourceMappingURL=fileuploader.modern.module.js.map