@s_mart/dropzone 11.0.1 → 11.0.2

package/dist/index.d.mts

@@ -1,20 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes, HtmlHTMLAttributes } from 'react';
-import { Theme, ButtonProps, TypographyProps } from '@mui/material';
 import { StyledComponent } from '@emotion/styled';
+import { ButtonProps, TypographyProps, Theme } from '@mui/material';
 import { MUIStyledCommonProps } from '@mui/system';
+import { HtmlHTMLAttributes, HTMLAttributes } from 'react';
 import { FileValidated } from '@dropzone-ui/react';
 import { DropzoneProps } from '@dropzone-ui/react/build/components/dropzone/components/Dropzone/DropzoneProps';
 import { FileItemProps } from '@dropzone-ui/react/build/components/file-item/components/FileItem/FileItemProps';
 
-type DropzoneComponent<Element extends HTMLAttributes<unknown>, Props extends Record<string, unknown> = Record<string, unknown>> = StyledComponent<MUIStyledCommonProps<Theme>, Element, Props>;
 declare const DropzoneRoot: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
 declare const DropzoneOverlay: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>, DropzoneOverlayAttrs>;
 declare const DropzoneLabelContainer: DropzoneComponent<ButtonProps, DropzoneLabelContainerAttrs>;
-declare const DropzoneFilesContainer: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
-declare const DropzoneListItem: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
-declare const DropzoneFilesListRoot: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
-declare const DropzoneFilesListContainer: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
 
 type DropzoneHeaderTitleSlotProps = {
     headerTitle?: DropzoneHeaderTitleBaseProps & TypographyProps;
@@ -28,16 +23,22 @@ type DropzoneHeaderTitleBaseProps = {
     showFilesSize?: boolean;
 };
 
+declare const FilesContainer: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
+declare const FileItemContent: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
+declare const ScrollableFileList: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
+declare const FileListContent: DropzoneComponent<HtmlHTMLAttributes<HTMLDivElement>>;
+
 type DropzoneV2SlotProps = Partial<{
     root: Parameters<typeof DropzoneRoot>[0];
     overlay: Parameters<typeof DropzoneOverlay>[0];
-    labelContainer: Parameters<typeof DropzoneLabelContainer>[0];
-    filesContainer: Parameters<typeof DropzoneFilesContainer>[0];
-    filesListRoot: Parameters<typeof DropzoneFilesListRoot>[0];
-    filesListContainer: Parameters<typeof DropzoneFilesListContainer>[0];
-    listItem: Parameters<typeof DropzoneListItem>[0];
     header: DropzoneHeaderTitleSlotProps;
+    labelContainer: Parameters<typeof DropzoneLabelContainer>[0];
+    filesContainer: Parameters<typeof FilesContainer>[0];
+    scrollableFileList: Parameters<typeof ScrollableFileList>[0];
+    listContent: Parameters<typeof FileListContent>[0];
+    itemContent: Parameters<typeof FileItemContent>[0];
 }>;
+type DropzoneComponent<Element extends HTMLAttributes<unknown>, Props extends Record<string, unknown> = Record<string, unknown>> = StyledComponent<MUIStyledCommonProps<Theme>, Element, Props>;
 type DropzoneV2Slots = DropzoneHeaderTitleSlots;
 type DropzoneV2Props = Pick<DropzoneHeaderTitleBaseProps, 'showFilesSize'> & {
     files: File[];

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import{Button as be,styled as F,Typography as He}from"@mui/material";import{colorPalette as I}from"@s_mart/tokens";var j=F("div")`
+import{Button as He,styled as $}from"@mui/material";import{colorPalette as we}from"@s_mart/tokens";var G=$("div")`
   min-width: 300px;
   align-items: center;
   display: flex;
@@ -6,7 +6,7 @@ import{Button as be,styled as F,Typography as He}from"@mui/material";import{colo
   justify-content: center;
   gap: 8px;
   padding: 16px;
-`,G=F("div")`
+`,K=$("div")`
   display: none;
   position: absolute;
   z-index: 20;
@@ -14,7 +14,7 @@ import{Button as be,styled as F,Typography as He}from"@mui/material";import{colo
   left: 0;
   height: 0;
   width: 0;
-  border: 0px dashed ${I.neutral[500]};
+  border: 0px dashed ${we.neutral[500]};
   border-radius: 8px;
   display: flex;
   justify-content: center;
@@ -27,7 +27,7 @@ import{Button as be,styled as F,Typography as He}from"@mui/material";import{colo
     width: 99.3%;
     border-width: 2px;
   }
-`,K=F(be)(({theme:e})=>({width:"100%",pointerEvents:"all",minHeight:"40px",backgroundColor:e.palette.primary.main,borderRadius:Number.parseFloat(e.shape.borderRadius.toString())*2,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:"8px",padding:".5rem 1rem",cursor:"pointer",transition:"all 0.5s ease",'&[data-max-files="1"]':{minHeight:0},'&[data-has-files="true"]':{height:"40px"},'&[data-has-files="true"][data-max-files="1"]':{height:0},'&[data-has-files="true"] #dropzone-upload-info':{display:"none"},'&:not([data-has-files="true"]) #dropzone-upload-more-label, &[data-max-files="1"] #dropzone-upload-more-label':{display:"none"},"& #dropzone-upload-more-label":{pointerEvents:"all",color:"white"},'&[data-is-processing-zip="true"], &[data-is-processing-zip="true"] #dropzone-upload-more-label':{pointerEvents:"none"},"&:hover":{backgroundColor:({theme:t})=>t.palette.primary.dark}})),Q=F("div")(({theme:e})=>({width:"100%",maxHeight:"300px",backgroundColor:I.neutral[20],borderRadius:Number.parseFloat(e.shape.borderRadius.toString())*2,display:"flex",flexDirection:"column",border:`1px solid ${I.neutral[20]}`,padding:"8px",gap:"8px"})),Y=F("div")({backgroundColor:"white",borderRadius:"16px",padding:"8px",gap:"24px",display:"grid",gridTemplateColumns:"min-content min-content 1fr min-content",alignItems:"center",justifyContent:"space-between"}),J=F("div")({height:300,overflow:"auto"}),W=F("div")({position:"relative",width:"100%"}),ee=F("div")({top:0,left:0,width:"100%",position:"absolute",paddingBottom:"8px",boxSizing:"border-box"}),oe=F(He)({color:I.neutral[600],overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",textAlign:"start"});import{Tooltip as Ze,Typography as Ne}from"@mui/material";import{IconButton as _e,LIcon as se}from"@s_mart/core";import{lineTimes as je}from"@s_mart/regular-icons";import{colorPalette as Ge}from"@s_mart/tokens";import{useMemo as re}from"react";import{lineFile as we,linePicture as Pe,lineXMLFile as Ee}from"@s_mart/light-icons";import{lineFileCertificate as Se}from"@s_mart/regular-icons";var te=e=>{switch(e){case"application/xml":case"text/xml":return Ee;case"image/gif":case"image/jpeg":case"image/png":case"image/svg":case"image/webp":return Pe;case"application/pkcs12":return Se;default:return we}},H=e=>{let t="";return e<1024?t=`${e} Bytes`:e<1024*1024?t=`${(e/1024).toFixed(2)} KB`:e<1024*1024*1024&&(t=`${(e/1024/1024).toFixed(2)} MB`),t};var ne=({filesInfo:e})=>{let t=re(()=>e.map(o=>({name:o.name,fileSize:H(o.size),icon:te(o.type)})),[e]),r=re(()=>({totalSize:H(e.reduce((o,n)=>o+n.size,0)),totalFilesLabel:e.length===1?"1 arquivo":`${e.length} arquivos`}),[e]);return{files:t,headerInfo:r}};import{Tooltip as Ie}from"@mui/material";import V from"@mui/utils/deepmerge";import{IconButton as Me,LIcon as Re}from"@s_mart/core";import{lineTimes as Ae}from"@s_mart/regular-icons";import{jsx as O}from"react/jsx-runtime";var U={headerCleartooltip:{title:"Remover todos"},headerClearIconButton:{variant:"text",color:"neutral",sx:{borderRadius:50}},headerClearLicon:{icon:Ae,removeMargin:!0}},q={clone:!1},ie=({onClick:e,slotProps:t})=>{let r=V(U.headerCleartooltip,t?.headerCleartooltip,q),o=V(U.headerClearIconButton,t?.headerClearIconButton,q),n=V(U.headerClearLicon,t?.headerClearLicon,q);return O(Ie,{...r,children:O(Me,{...o,onClick:e,children:O(Re,{...n})})})};import{styled as ke}from"@mui/material";var ae=ke("div")({display:"flex",justifyContent:"space-between",alignItems:"center",paddingBlock:"0.5rem"});import{Typography as Be}from"@mui/material";import $e from"@mui/utils/deepmerge";import{useMemo as Ve}from"react";import{Fragment as Xe,jsx as M}from"react/jsx-runtime";var Ue={headerTitle:{variant:"titleXXS"}},qe={headerTitleContent:e=>M(Oe,{...e})},Oe=e=>{let t=`${e.filesLengthLabel}`;return e.showFilesSize&&(t+=` - ${e.filesTotalSize}`),M(Xe,{children:t})},le=e=>{let t=e.slots?.headerTitleContent??qe.headerTitleContent,r=Ve(()=>$e(Ue.headerTitle,{...e,...e.slotProps?.headerTitle}),[e.filesLengthLabel,e.filesTotalSize,e]);return M(Be,{...r,children:M(t,{...r})})};var R={Container:ae,Title:le,ClearButton:ie};import{useRef as Ke}from"react";import{useVirtualizer as Qe}from"@tanstack/react-virtual";import{jsx as h,jsxs as X}from"react/jsx-runtime";var pe=({filesInfo:e,onRemoveFile:t,onRemoveAllFiles:r,slotProps:o,slots:n,showFilesSize:p})=>{let{files:l,headerInfo:i}=ne({filesInfo:e}),u=Ke(null),d=Qe({count:l.length,getScrollElement:()=>u.current,estimateSize:()=>60,overscan:5});return l.length===0?null:X(Q,{...o?.filesContainer,children:[X(R.Container,{children:[h(R.Title,{slots:n,slotProps:o?.header,filesLengthLabel:i.totalFilesLabel,filesTotalSize:i.totalSize,showFilesSize:p}),h(R.ClearButton,{onClick:r})]}),h(J,{ref:u,...o?.filesListRoot,children:h(W,{...o?.filesListContainer,sx:{height:`${d.getTotalSize()}px`,...o?.filesListContainer},children:d.getVirtualItems().map(m=>{let g=l[m.index];return h(ee,{sx:{height:`${m.size}px`,transform:`translateY(${m.start}px)`},children:h(Ze,{title:g.name,arrow:!0,placement:"top",children:X(Y,{...o?.listItem,children:[h(se,{icon:g.icon,removeMargin:!0,size:"24px"}),h(Ne,{variant:"titleXXS",color:Ge.neutral[600],whiteSpace:"nowrap",children:p&&g.fileSize}),h(oe,{variant:"titleXXS",children:g.name}),h(_e,{variant:"text",color:"neutral",sx:{borderRadius:50},onClick:()=>t(m.index),children:h(se,{icon:je,removeMargin:!0})})]})})},m.key)})})})]})};import{CircularProgress as de,Stack as Z,Typography as A}from"@mui/material";import{LIcon as Ye}from"@s_mart/core";import{lineFileUpload as Je}from"@s_mart/regular-icons";import{jsx as T,jsxs as w}from"react/jsx-runtime";var ce=({placeholder:e,isProcessingZip:t})=>t?w("div",{children:[w(Z,{id:"dropzone-upload-info",sx:{gap:1,alignItems:"center",direction:"row"},children:[T(de,{sx:{color:"white"},size:24}),T(A,{variant:"titleSM",color:"white",children:"Descompactando zip..."})]}),w(Z,{id:"dropzone-upload-more-label",sx:{gap:1,alignItems:"center",direction:"row"},children:[T(de,{sx:{color:"white"},size:12}),T(A,{variant:"bodySM",sx:{fontWeight:700},children:"Descompactando zip..."})]})]}):w("div",{children:[w(Z,{id:"dropzone-upload-info",sx:{gap:1,alignItems:"center",direction:"row"},children:[T(Ye,{icon:Je,size:"48px",color:"white",removeMargin:!0}),T(A,{variant:"titleSM",color:"white",children:e})]}),T(A,{id:"dropzone-upload-more-label",variant:"bodySM",sx:{fontWeight:700},children:"Carregar mais arquivos"})]});import{useCallback as P,useMemo as ro,useRef as ue,useState as fe}from"react";var me=async(e,t)=>{let r=[];for(let o of e.items){if(o.kind!=="file")continue;if(typeof o.webkitGetAsEntry=="function"){let p=o.webkitGetAsEntry();if(p===null)continue;let l=await We(p);r.push(...l);continue}let n=o.getAsFile();n&&r.push(n)}return t!==void 0&&(r=to(r,t)),r},We=e=>new Promise((t,r)=>{let o=0,n=[];p(e);function p(i){oo(i)?(o++,i.file(u=>{o--,n.push(u),o===0&&t(n)})):eo(i)&&l(i.createReader())}function l(i){o++,i.readEntries(function(u){o--;for(let d of u)p(d);o===0&&t(n)})}}),eo=e=>e.isDirectory,oo=e=>e.isFile,to=(e,t)=>{let r=[],o=t.split(",");for(let n of e){let p=`.${n.name.split(".").pop()?.toLowerCase()}`;o.includes(p)&&r.push(n)}return r};var N=e=>{e.stopPropagation(),e.preventDefault()},_=e=>{e.dataTransfer.dropEffect="link",N(e)};var ge=({onChange:e,filterOnDrop:t,maxSize:r,maxFiles:o,accept:n,onError:p,onWarning:l,files:i})=>{let[u,d]=fe(!1),[m,g]=fe(!1),y=ue(null),B=ue(!1),s=P(async a=>{g(!0);let f=[],{BlobReader:D,BlobWriter:b,ZipReader:E}=await import("@zip.js/zip.js").catch(()=>{throw new Error("Fa\xE7a a instala\xE7\xE3o da biblioteca @zip.js/zip.js para utilizar o Dropzone com exporta\xE7\xE3o de .zip")}),x=new D(a),v=new E(x);try{let $=await v.getEntries();for(let S of $){if(S.directory||S.getData===void 0)continue;let Te=await S.getData(new b),Le=new File([Te],S.filename);f.push(Le)}}catch($){p?.("Ocorreu um erro ao processar o arquivo compactado.",$)}finally{g(!1),await v.close()}return f},[p]),z=P(async a=>{if(!n)return a;let f=[];for(let D of a){let b=`.${D.name.split(".").pop()?.toLocaleLowerCase()}`;if(!n.split(",").includes(b)){l?.(`O arquivo "${D.name}" n\xE3o \xE9 valido, extens\xF5es aceitas ${n}`);continue}if(b===".zip"){let x=await s(D);if(!x.length)continue;let v=await z(x);v.length&&f.push(...v);continue}f.push(D)}return f},[n,l,s]),c=P(async a=>{let f=await t?.(a)??a,D=await z(f);if(o!==void 0&&i.length+D.length>o)return l?.(`Quantidade m\xE1xima de arquivos ${o} alcan\xE7ada`),i;if(r!==void 0){let b=i.reduce((x,v)=>x+v.size,0),E=D.reduce((x,v)=>x+v.size,0);if(b+E>r)return l?.(`O arquivo \xE9 muito grande, O tamanho m\xE1ximo permitido \xE9 ${H(r)}`),i}return B.current=!0,[...i,...D]},[i,t,o,r,l,z]),L=async a=>{if(a.target.files){let f=[...a.target.files];e(await c(f))}},ve=P(a=>{y.current?.value&&(y.current.value=""),e(i.filter((f,D)=>D!==a))},[e,i]),Fe=P(()=>{y.current?.value&&(y.current.value=""),e([])},[e]),xe=ro(()=>i?.map(a=>({size:a.size,type:a.type,name:a.name}))??[],[i]),Ce=n?`${n.toUpperCase()},${n.toLowerCase()}`:void 0;return{inputRef:y,isDragging:u,filesInfo:xe,treatedAccept:Ce,isProcessingZip:m,handleRemoveFile:ve,handleRemoveAllFiles:Fe,handleChangeFiles:L,handleDragEnter:a=>{_(a),d(!0)},handleDragLeave:a=>{_(a),d(!1)},handleDrop:async a=>{N(a),d(!1);let f=await me(a.dataTransfer,n);c(f)}}};import{jsx as k,jsxs as ze}from"react/jsx-runtime";var no=e=>{let{inputRef:t,filesInfo:r,treatedAccept:o,handleChangeFiles:n,handleRemoveFile:p,handleRemoveAllFiles:l,handleDragEnter:i,handleDragLeave:u,handleDrop:d,isDragging:m,isProcessingZip:g}=ge(e),y=e.placeholder??"Pressione para carregar os arquivos";return ze(j,{onDragOver:i,...e.slotProps?.root,children:[k(G,{"data-is-dragging":m,onDrop:d,onDragLeave:u,...e.slotProps?.overlay}),k(pe,{filesInfo:r,onRemoveFile:p,onRemoveAllFiles:l,showFilesSize:e.showFilesSize,slotProps:e.slotProps,slots:e.slots}),ze(K,{onClick:()=>t.current?.click(),"data-max-files":e.maxFiles,"data-has-files":!!r.length,"data-is-processing-zip":g,...e.slotProps?.labelContainer,children:[k(ce,{placeholder:y,isProcessingZip:g}),k("input",{ref:t,type:"file",accept:o,hidden:!0,onChange:n,multiple:e.maxFiles===void 0||e.maxFiles>1})]})]})};import{useEffect as ao,useState as lo}from"react";import{Dropzone as so,FileItem as po}from"@dropzone-ui/react";import{LIcon as co}from"@s_mart/core";import{Tooltip as mo,Typography as uo}from"@mui/material";import{lineTimes as fo}from"@s_mart/regular-icons";import{styled as io}from"@mui/material";import{colorPalette as De}from"@s_mart/tokens";var he=io("button")`
+`,Q=$(He)(({theme:e})=>({width:"100%",pointerEvents:"all",minHeight:"40px",backgroundColor:e.palette.primary.main,borderRadius:Number.parseFloat(e.shape.borderRadius.toString())*2,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:"8px",padding:".5rem 1rem",cursor:"pointer",transition:"all 0.5s ease",'&[data-max-files="1"]':{minHeight:0},'&[data-has-files="true"]':{height:"40px"},'&[data-has-files="true"][data-max-files="1"]':{height:0},'&[data-has-files="true"] #dropzone-upload-info':{display:"none"},'&:not([data-has-files="true"]) #dropzone-upload-more-label, &[data-max-files="1"] #dropzone-upload-more-label':{display:"none"},"& #dropzone-upload-more-label":{pointerEvents:"all",color:"white"},'&[data-is-processing-zip="true"], &[data-is-processing-zip="true"] #dropzone-upload-more-label':{pointerEvents:"none"},"&:hover":{backgroundColor:({theme:t})=>t.palette.primary.dark}}));import{Tooltip as _e,Typography as je}from"@mui/material";import{IconButton as Ge,LIcon as pe}from"@s_mart/core";import{lineTimes as Ke}from"@s_mart/regular-icons";import{colorPalette as Qe}from"@s_mart/tokens";import{useVirtualizer as Ye}from"@tanstack/react-virtual";import{useRef as Je}from"react";import{Tooltip as Pe}from"@mui/material";import V from"@mui/utils/deepmerge";import{IconButton as Se,LIcon as Ee}from"@s_mart/core";import{lineTimes as Me}from"@s_mart/regular-icons";import{jsx as O}from"react/jsx-runtime";var q={headerCleartooltip:{title:"Remover todos"},headerClearIconButton:{variant:"text",color:"neutral",sx:{borderRadius:50}},headerClearLicon:{icon:Me,removeMargin:!0}},U={clone:!1},Y=({onClick:e,slotProps:t})=>{let r=V(q.headerCleartooltip,t?.headerCleartooltip,U),o=V(q.headerClearIconButton,t?.headerClearIconButton,U),n=V(q.headerClearLicon,t?.headerClearLicon,U);return O(Pe,{...r,children:O(Se,{...o,onClick:e,children:O(Ee,{...n})})})};import{styled as Re}from"@mui/material";var J=Re("div")({display:"flex",justifyContent:"space-between",alignItems:"center",paddingBlock:"0.5rem"});import{Typography as Ie}from"@mui/material";import Ae from"@mui/utils/deepmerge";import{useMemo as ke}from"react";import{Fragment as qe,jsx as M}from"react/jsx-runtime";var Be={headerTitle:{variant:"titleXXS"}},$e={headerTitleContent:e=>M(Ve,{...e})},Ve=e=>{let t=`${e.filesLengthLabel}`;return e.showFilesSize&&(t+=` - ${e.filesTotalSize}`),M(qe,{children:t})},W=e=>{let t=e.slots?.headerTitleContent??$e.headerTitleContent,r=ke(()=>Ae(Be.headerTitle,{...e,...e.slotProps?.headerTitle}),[e.filesLengthLabel,e.filesTotalSize,e]);return M(Ie,{...r,children:M(t,{...r})})};var R={Container:J,Title:W,ClearButton:Y};import{styled as L,Typography as Ue}from"@mui/material";import{colorPalette as X}from"@s_mart/tokens";var ee=L("div")(({theme:e})=>({width:"100%",maxHeight:"300px",backgroundColor:X.neutral[20],borderRadius:Number.parseFloat(e.shape.borderRadius.toString())*2,display:"flex",flexDirection:"column",border:`1px solid ${X.neutral[20]}`,padding:"8px",gap:"8px"})),oe=L("div")({backgroundColor:"white",borderRadius:"16px",padding:"8px",gap:"24px",display:"grid",gridTemplateColumns:"min-content min-content 1fr min-content",alignItems:"center",justifyContent:"space-between"}),te=L("div")({height:"auto",overflow:"auto"}),re=L("div")({position:"relative",width:"100%"}),ne=L("div")({top:0,left:0,width:"100%",position:"absolute",paddingBottom:"8px",boxSizing:"border-box"}),ie=L(Ue)({color:X.neutral[600],overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",textAlign:"start"});import{useMemo as le}from"react";import{lineFile as Oe,linePicture as Xe,lineXMLFile as Ze}from"@s_mart/light-icons";import{lineFileCertificate as Ne}from"@s_mart/regular-icons";var ae=e=>{switch(e){case"application/xml":case"text/xml":return Ze;case"image/gif":case"image/jpeg":case"image/png":case"image/svg":case"image/webp":return Xe;case"application/pkcs12":return Ne;default:return Oe}},H=e=>{let t="";return e<1024?t=`${e} Bytes`:e<1024*1024?t=`${(e/1024).toFixed(2)} KB`:e<1024*1024*1024&&(t=`${(e/1024/1024).toFixed(2)} MB`),t};var se=({filesInfo:e})=>{let t=le(()=>e.map(o=>({name:o.name,fileSize:H(o.size),icon:ae(o.type)})),[e]),r=le(()=>({totalSize:H(e.reduce((o,n)=>o+n.size,0)),totalFilesLabel:e.length===1?"1 arquivo":`${e.length} arquivos`}),[e]);return{files:t,headerInfo:r}};import{jsx as D,jsxs as Z}from"react/jsx-runtime";var de=({filesInfo:e,onRemoveFile:t,onRemoveAllFiles:r,slotProps:o,slots:n,showFilesSize:p})=>{let{files:l,headerInfo:i}=se({filesInfo:e}),u=Je(null),d=Ye({count:l.length,getScrollElement:()=>u.current,estimateSize:()=>60,overscan:5});return l.length===0?null:Z(ee,{...o?.filesContainer,children:[Z(R.Container,{children:[D(R.Title,{slots:n,slotProps:o?.header,filesLengthLabel:i.totalFilesLabel,filesTotalSize:i.totalSize,showFilesSize:p}),D(R.ClearButton,{onClick:r})]}),D(te,{ref:u,...o?.scrollableFileList,children:D(re,{...o?.listContent,sx:{height:`${d.getTotalSize()}px`,...o?.listContent},children:d.getVirtualItems().map(m=>{let g=l[m.index];return D(ne,{sx:{height:`${m.size}px`,transform:`translateY(${m.start}px)`},children:D(_e,{title:g.name,arrow:!0,placement:"top",children:Z(oe,{...o?.itemContent,children:[D(pe,{icon:g.icon,removeMargin:!0,size:"24px"}),D(je,{variant:"titleXXS",color:Qe.neutral[600],whiteSpace:"nowrap",children:p&&g.fileSize}),D(ie,{variant:"titleXXS",children:g.name}),D(Ge,{variant:"text",color:"neutral",sx:{borderRadius:50},onClick:()=>t(m.index),children:D(pe,{icon:Ke,removeMargin:!0})})]})})},m.key)})})})]})};import{CircularProgress as ce,Stack as N,Typography as I}from"@mui/material";import{LIcon as We}from"@s_mart/core";import{lineFileUpload as eo}from"@s_mart/regular-icons";import{jsx as C,jsxs as w}from"react/jsx-runtime";var me=({placeholder:e,isProcessingZip:t})=>t?w("div",{children:[w(N,{id:"dropzone-upload-info",sx:{gap:1,alignItems:"center",direction:"row"},children:[C(ce,{sx:{color:"white"},size:24}),C(I,{variant:"titleSM",color:"white",children:"Descompactando zip..."})]}),w(N,{id:"dropzone-upload-more-label",sx:{gap:1,alignItems:"center",direction:"row"},children:[C(ce,{sx:{color:"white"},size:12}),C(I,{variant:"bodySM",sx:{fontWeight:700},children:"Descompactando zip..."})]})]}):w("div",{children:[w(N,{id:"dropzone-upload-info",sx:{gap:1,alignItems:"center",direction:"row"},children:[C(We,{icon:eo,size:"48px",color:"white",removeMargin:!0}),C(I,{variant:"titleSM",color:"white",children:e})]}),C(I,{id:"dropzone-upload-more-label",variant:"bodySM",sx:{fontWeight:700},children:"Carregar mais arquivos"})]});import{useCallback as P,useMemo as io,useRef as fe,useState as ge}from"react";var ue=async(e,t)=>{let r=[];for(let o of e.items){if(o.kind!=="file")continue;if(typeof o.webkitGetAsEntry=="function"){let p=o.webkitGetAsEntry();if(p===null)continue;let l=await oo(p);r.push(...l);continue}let n=o.getAsFile();n&&r.push(n)}return t!==void 0&&(r=no(r,t)),r},oo=e=>new Promise((t,r)=>{let o=0,n=[];p(e);function p(i){ro(i)?(o++,i.file(u=>{o--,n.push(u),o===0&&t(n)})):to(i)&&l(i.createReader())}function l(i){o++,i.readEntries(function(u){o--;for(let d of u)p(d);o===0&&t(n)})}}),to=e=>e.isDirectory,ro=e=>e.isFile,no=(e,t)=>{let r=[],o=t.split(",");for(let n of e){let p=`.${n.name.split(".").pop()?.toLowerCase()}`;o.includes(p)&&r.push(n)}return r};var _=e=>{e.stopPropagation(),e.preventDefault()},j=e=>{e.dataTransfer.dropEffect="link",_(e)};var he=({onChange:e,filterOnDrop:t,maxSize:r,maxFiles:o,accept:n,onError:p,onWarning:l,files:i})=>{let[u,d]=ge(!1),[m,g]=ge(!1),y=fe(null),k=fe(!1),s=P(async a=>{g(!0);let f=[],{BlobReader:z,BlobWriter:T,ZipReader:S}=await import("@zip.js/zip.js").catch(()=>{throw new Error("Fa\xE7a a instala\xE7\xE3o da biblioteca @zip.js/zip.js para utilizar o Dropzone com exporta\xE7\xE3o de .zip")}),F=new z(a),v=new S(F);try{let B=await v.getEntries();for(let E of B){if(E.directory||E.getData===void 0)continue;let Te=await E.getData(new T),Le=new File([Te],E.filename);f.push(Le)}}catch(B){p?.("Ocorreu um erro ao processar o arquivo compactado.",B)}finally{g(!1),await v.close()}return f},[p]),h=P(async a=>{if(!n)return a;let f=[];for(let z of a){let T=`.${z.name.split(".").pop()?.toLocaleLowerCase()}`;if(!n.split(",").includes(T)){l?.(`O arquivo "${z.name}" n\xE3o \xE9 valido, extens\xF5es aceitas ${n}`);continue}if(T===".zip"){let F=await s(z);if(!F.length)continue;let v=await h(F);v.length&&f.push(...v);continue}f.push(z)}return f},[n,l,s]),c=P(async a=>{let f=await t?.(a)??a,z=await h(f);if(o!==void 0&&i.length+z.length>o)return l?.(`Quantidade m\xE1xima de arquivos ${o} alcan\xE7ada`),i;if(r!==void 0){let T=i.reduce((F,v)=>F+v.size,0),S=z.reduce((F,v)=>F+v.size,0);if(T+S>r)return l?.(`O arquivo \xE9 muito grande, O tamanho m\xE1ximo permitido \xE9 ${H(r)}`),i}return k.current=!0,[...i,...z]},[i,t,o,r,l,h]),b=async a=>{if(a.target.files){let f=[...a.target.files];e(await c(f))}},Fe=P(a=>{y.current?.value&&(y.current.value=""),e(i.filter((f,z)=>z!==a))},[e,i]),xe=P(()=>{y.current?.value&&(y.current.value=""),e([])},[e]),Ce=io(()=>i?.map(a=>({size:a.size,type:a.type,name:a.name}))??[],[i]),be=n?`${n.toUpperCase()},${n.toLowerCase()}`:void 0;return{inputRef:y,isDragging:u,filesInfo:Ce,treatedAccept:be,isProcessingZip:m,handleRemoveFile:Fe,handleRemoveAllFiles:xe,handleChangeFiles:b,handleDragEnter:a=>{j(a),d(!0)},handleDragLeave:a=>{j(a),d(!1)},handleDrop:async a=>{_(a),d(!1);let f=await ue(a.dataTransfer,n);c(f)}}};import{jsx as A,jsxs as ze}from"react/jsx-runtime";var ao=e=>{let{inputRef:t,filesInfo:r,treatedAccept:o,handleChangeFiles:n,handleRemoveFile:p,handleRemoveAllFiles:l,handleDragEnter:i,handleDragLeave:u,handleDrop:d,isDragging:m,isProcessingZip:g}=he(e),y=e.placeholder??"Pressione para carregar os arquivos";return ze(G,{onDragOver:i,...e.slotProps?.root,children:[A(K,{"data-is-dragging":m,onDrop:d,onDragLeave:u,...e.slotProps?.overlay}),A(de,{filesInfo:r,onRemoveFile:p,onRemoveAllFiles:l,showFilesSize:e.showFilesSize,slotProps:e.slotProps,slots:e.slots}),ze(Q,{onClick:()=>t.current?.click(),"data-max-files":e.maxFiles,"data-has-files":!!r.length,"data-is-processing-zip":g,...e.slotProps?.labelContainer,children:[A(me,{placeholder:y,isProcessingZip:g}),A("input",{ref:t,type:"file",accept:o,hidden:!0,onChange:n,multiple:e.maxFiles===void 0||e.maxFiles>1})]})]})};import{useEffect as so,useState as po}from"react";import{Dropzone as co,FileItem as mo}from"@dropzone-ui/react";import{LIcon as uo}from"@s_mart/core";import{Tooltip as fo,Typography as go}from"@mui/material";import{lineTimes as ho}from"@s_mart/regular-icons";import{styled as lo}from"@mui/material";import{colorPalette as De}from"@s_mart/tokens";var ye=lo("button")`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -53,4 +53,4 @@ import{Button as be,styled as F,Typography as He}from"@mui/material";import{colo
     background-color: ${De.neutral[40]};
     transition: all 0.3s ease;
   }
-`;import{Fragment as go,jsx as C,jsxs as zo}from"react/jsx-runtime";var ye=({showDeleteAllFilesButton:e=!0,placeholder:t,fileItemProps:r,initialValue:o=[],onClean:n,onReset:p,tratamentoFilesOnChange:l,onNotification:i,...u})=>{let[d,m]=lo(o),g=s=>{let z=s.filter(c=>c.valid===!0);if(m(z),s.length>0){let c=s.filter(L=>L.valid===!1);c.length===1?i({variant:"warning",duration:5e3,title:`Arquivo ${c[0].file.name} inv\xE1lido`,message:c[0].errors?.[0]}):c.length>1&&c.forEach(L=>{i({variant:"warning",duration:5e3,title:`Arquivo ${L.file.name} inv\xE1lido`,message:L.errors?.[0]})})}},y=()=>{m([]),p?.()},B=s=>{let z=d.filter(c=>c.id!==s.id);m(z),n?.(z)};return ao(()=>{o.length&&m(o)},[o]),C(so,{localization:"PT-pt",header:!1,footer:!1,headerClassName:"header",view:"grid",value:d,...u,onChange:async s=>{let z=s;if(l){let c=await l(s);c&&(z=c)}g(z),u.onChange?.(z)},children:d.length===0?C("div",{children:t||"Arraste os arquivos aqui ou clique para selecionar"}):zo(go,{children:[e&&C(mo,{title:C(uo,{variant:"bodyMD",children:"Remover"}),children:C(he,{onClick:s=>{s.preventDefault(),s.stopPropagation(),y()},children:C(co,{icon:fo,size:"24px"})})}),C("div",{style:{display:"flex"},children:d?.map(s=>C(po,{info:!0,localization:"PT-pt",preview:!0,...s,...r,onDelete:()=>B(s)},s.id))})]})})};export{ye as Dropzone,ye as DropzoneV1,no as DropzoneV2};
+`;import{Fragment as zo,jsx as x,jsxs as Do}from"react/jsx-runtime";var ve=({showDeleteAllFilesButton:e=!0,placeholder:t,fileItemProps:r,initialValue:o=[],onClean:n,onReset:p,tratamentoFilesOnChange:l,onNotification:i,...u})=>{let[d,m]=po(o),g=s=>{let h=s.filter(c=>c.valid===!0);if(m(h),s.length>0){let c=s.filter(b=>b.valid===!1);c.length===1?i({variant:"warning",duration:5e3,title:`Arquivo ${c[0].file.name} inv\xE1lido`,message:c[0].errors?.[0]}):c.length>1&&c.forEach(b=>{i({variant:"warning",duration:5e3,title:`Arquivo ${b.file.name} inv\xE1lido`,message:b.errors?.[0]})})}},y=()=>{m([]),p?.()},k=s=>{let h=d.filter(c=>c.id!==s.id);m(h),n?.(h)};return so(()=>{o.length&&m(o)},[o]),x(co,{localization:"PT-pt",header:!1,footer:!1,headerClassName:"header",view:"grid",value:d,...u,onChange:async s=>{let h=s;if(l){let c=await l(s);c&&(h=c)}g(h),u.onChange?.(h)},children:d.length===0?x("div",{children:t||"Arraste os arquivos aqui ou clique para selecionar"}):Do(zo,{children:[e&&x(fo,{title:x(go,{variant:"bodyMD",children:"Remover"}),children:x(ye,{onClick:s=>{s.preventDefault(),s.stopPropagation(),y()},children:x(uo,{icon:ho,size:"24px"})})}),x("div",{style:{display:"flex"},children:d?.map(s=>x(mo,{info:!0,localization:"PT-pt",preview:!0,...s,...r,onDelete:()=>k(s)},s.id))})]})})};export{ve as Dropzone,ve as DropzoneV1,ao as DropzoneV2};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_mart/dropzone",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",