@leancodepl/image-uploader 10.5.1 → 10.5.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.5.2](https://github.com/leancodepl/js_corelibrary/compare/v10.5.1...v10.5.2) (2026-07-02)
+
+### Bug Fixes
+
+- **image-uploader:** turn FileWithId into a union with all file states
+  ([4db50e9](https://github.com/leancodepl/js_corelibrary/commit/4db50e92a3bf9a65fc4b5099be1e9e179c8d1840))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [10.5.1](https://github.com/leancodepl/js_corelibrary/compare/v10.4.0...v10.5.1) (2026-07-01)
 
 **Note:** Version bump only for package @leancodepl/image-uploader

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ErrorCode as I, useDropzone as O } from "react-dropzone";
-import { useContext as Y, createContext as B, useCallback as m, useState as x, useEffect as V } from "react";
+import { useContext as Y, createContext as B, useCallback as f, useState as x, useEffect as V } from "react";
 import { jsx as h, jsxs as _ } from "react/jsx-runtime";
 import X from "react-easy-crop";
 import { v4 as $ } from "uuid";
@@ -52,42 +52,42 @@ function ne({ children: e }) {
     editorImage: n,
     acceptImage: i,
     closeImage: r,
-    config: c,
-    cropArea: a,
-    zoom: f,
+    config: a,
+    cropArea: s,
+    zoom: u,
     rotation: g,
     setCropArea: F,
     setCrop: w,
     setZoom: v,
     setRotation: y
-  } = o, p = m(() => {
+  } = o, d = f(() => {
     r(), w(N), v(Z), y(b), F(void 0);
-  }, [r, w, F, y, v]), l = m(() => {
+  }, [r, w, F, y, v]), c = f(() => {
     if (!n) return;
-    const d = document.createElement("canvas"), u = document.createElement("canvas"), s = d.getContext("2d"), R = u.getContext("2d"), D = new Image();
+    const p = document.createElement("canvas"), m = document.createElement("canvas"), l = p.getContext("2d"), R = m.getContext("2d"), D = new Image();
     D.onload = function() {
       const { naturalWidth: M, naturalHeight: P } = D, S = g * (Math.PI / 180), A = Math.abs(Math.sin(S)), z = Math.abs(Math.cos(S)), T = M * z + P * A, U = P * z + M * A;
-      d.width = T, d.height = U, s.fillStyle = "#fff", s.fillRect(0, 0, T, U);
+      p.width = T, p.height = U, l.fillStyle = "#fff", l.fillRect(0, 0, T, U);
       const H = T / 2, L = U / 2;
-      s.translate(H, L), s.rotate(S), s.translate(-H, -L);
+      l.translate(H, L), l.rotate(S), l.translate(-H, -L);
       const W = (T - M) / 2, j = (U - P) / 2;
-      s.drawImage(D, 0, 0, M, P, W, j, M, P), u.width = Math.min(
-        (a?.width ?? 100) / 100 * T,
-        c.maxWidth ?? Number.POSITIVE_INFINITY
-      ), u.height = Math.min(
-        (a?.height ?? 100) / 100 * U,
-        c.maxHeight ?? Number.POSITIVE_INFINITY
+      l.drawImage(D, 0, 0, M, P, W, j, M, P), m.width = Math.min(
+        (s?.width ?? 100) / 100 * T,
+        a.maxWidth ?? Number.POSITIVE_INFINITY
+      ), m.height = Math.min(
+        (s?.height ?? 100) / 100 * U,
+        a.maxHeight ?? Number.POSITIVE_INFINITY
       ), R.drawImage(
-        d,
-        (a?.x ?? 0) / 100 * T,
-        (a?.y ?? 0) / 100 * U,
-        (a?.width ?? 100) / 100 * T,
-        (a?.height ?? 100) / 100 * U,
+        p,
+        (s?.x ?? 0) / 100 * T,
+        (s?.y ?? 0) / 100 * U,
+        (s?.width ?? 100) / 100 * T,
+        (s?.height ?? 100) / 100 * U,
         0,
         0,
-        u.width,
-        u.height
-      ), u.toBlob((k) => {
+        m.width,
+        m.height
+      ), m.toBlob((k) => {
         if (!t)
           return;
         const Q = {
@@ -97,16 +97,16 @@ function ne({ children: e }) {
           id: t.id
         };
         i(Q);
-      }), p();
+      }), d();
     }, D.src = n;
-  }, [p, c, a, t, n, g, i]);
-  return typeof e == "function" ? e({ zoom: f, rotation: g, setZoom: v, setRotation: y, accept: l, close: p }) : e;
+  }, [d, a, s, t, n, g, i]);
+  return typeof e == "function" ? e({ zoom: u, rotation: g, setZoom: v, setRotation: y, accept: c, close: d }) : e;
 }
 function ie({ style: e, ...o }) {
   const { cropper: t } = C();
   if (!t)
     throw new Error("Cropper config is not defined");
-  const { editorImage: n, config: i, zoom: r, rotation: c, crop: a, setCropArea: f, setCrop: g, setZoom: F, setRotation: w } = t;
+  const { editorImage: n, config: i, zoom: r, rotation: a, crop: s, setCropArea: u, setCrop: g, setZoom: F, setRotation: w } = t;
   return /* @__PURE__ */ h(
     "div",
     {
@@ -121,12 +121,12 @@ function ie({ style: e, ...o }) {
         X,
         {
           aspect: i.aspect,
-          crop: a,
+          crop: s,
           image: n,
-          rotation: c,
+          rotation: a,
           zoom: r,
           onCropChange: g,
-          onCropComplete: f,
+          onCropComplete: u,
           onRotationChange: w,
           onZoomChange: F
         }
@@ -142,13 +142,15 @@ const ae = (e) => new Promise((o, t) => {
   n.readAsDataURL(e), n.onload = () => o(String(n.result)), n.onerror = (i) => t(i);
 });
 function se({ children: e, file: o, ...t }) {
-  const { removeFile: n } = C(), [i, r] = x();
+  const { removeFile: n } = C(), [i, r] = x(), a = "url" in o ? o.url : void 0;
   return V(() => {
+    if (a)
+      return;
     (async () => {
-      const a = await re(o.originalFile);
-      r(a);
+      const u = await re(o.originalFile);
+      r(u);
     })();
-  }, [o.originalFile]), /* @__PURE__ */ h("div", { ...t, children: typeof e == "function" ? e({ file: o, preview: i, remove: () => n(o.id) }) : e });
+  }, [a, o.originalFile]), /* @__PURE__ */ h("div", { ...t, children: typeof e == "function" ? e({ file: o, preview: a ?? i, remove: () => n(o.id) }) : e });
 }
 function le({ children: e, ...o }) {
   const { value: t } = C();
@@ -157,56 +159,56 @@ function le({ children: e, ...o }) {
 function ce({ uploader: e, ...o }) {
   return /* @__PURE__ */ h(te, { uploader: e, children: /* @__PURE__ */ h("div", { ...o }) });
 }
-function pe({ children: e, ...o }) {
+function de({ children: e, ...o }) {
   const {
-    dropzone: { getRootProps: t, getInputProps: n, isDragActive: i, isFocused: r, isFileDialogActive: c }
+    dropzone: { getRootProps: t, getInputProps: n, isDragActive: i, isFocused: r, isFileDialogActive: a }
   } = C();
   return /* @__PURE__ */ _("div", { ...t(), ...o, children: [
     /* @__PURE__ */ h("input", { ...n() }),
-    typeof e == "function" ? e({ isDragActive: i, isFocused: r, isFileDialogActive: c }) : e
+    typeof e == "function" ? e({ isDragActive: i, isFocused: r, isFileDialogActive: a }) : e
   ] });
 }
 const ye = {
   Root: ce,
-  Zone: pe,
+  Zone: de,
   Files: le,
   File: se,
   Cropper: ne,
   CropperEditor: ie
 };
-function de(e, o) {
+function pe(e, o) {
   return e.name === o.name && e.size === o.size && e.lastModified === o.lastModified;
 }
 function ue({ value: e, onChange: o }) {
-  const [t, n] = x([]), [i, r] = x(), [c, a] = x(), [f, g] = x(N), [F, w] = x(Z), [v, y] = x(b), p = t.at(0), l = !!p;
-  G(p, (s) => {
-    if (r(void 0), !s)
+  const [t, n] = x([]), [i, r] = x(), [a, s] = x(), [u, g] = x(N), [F, w] = x(Z), [v, y] = x(b), d = t.at(0), c = !!d;
+  G(d, (l) => {
+    if (r(void 0), !l)
       return;
     const R = new FileReader();
     R.addEventListener("load", () => {
       typeof R.result == "string" && r(R.result);
-    }), R.readAsDataURL(s.originalFile);
+    }), R.readAsDataURL(l.originalFile);
   });
-  const d = m(() => {
-    n(t.filter(({ id: s }) => s !== p?.id));
-  }, [t, p?.id]), u = m((s) => o?.([...e ?? [], s]), [o, e]);
+  const p = f(() => {
+    n(t.filter(({ id: l }) => l !== d?.id));
+  }, [t, d?.id]), m = f((l) => o?.([...e ?? [], l]), [o, e]);
   return {
     fileQueue: t,
-    file: p,
+    file: d,
     editorImage: i,
-    cropArea: c,
-    crop: f,
+    cropArea: a,
+    crop: u,
     zoom: F,
     rotation: v,
-    isOpen: l,
+    isOpen: c,
     setFileQueue: n,
     setEditorImage: r,
-    setCropArea: a,
+    setCropArea: s,
     setCrop: g,
     setZoom: w,
     setRotation: y,
-    closeImage: d,
-    acceptImage: u
+    closeImage: p,
+    acceptImage: m
   };
 }
 function Te({
@@ -216,54 +218,54 @@ function Te({
   onError: n,
   onChange: i
 }) {
-  const { setFileQueue: r, ...c } = ue({ value: e, onChange: i }), a = m(
-    (l) => {
-      t ? r(l) : i?.([...e ?? [], ...l]);
+  const { setFileQueue: r, ...a } = ue({ value: e, onChange: i }), s = f(
+    (c) => {
+      t ? r(c) : i?.([...e ?? [], ...c]);
     },
     [t, i, e, r]
-  ), f = m(
-    (l) => {
-      const d = l.filter(
-        (u) => !e?.some((s) => de(s.originalFile, u.originalFile))
+  ), u = f(
+    (c) => {
+      const p = c.filter(
+        (m) => !e?.some((l) => pe(l.originalFile, m.originalFile))
       );
-      a(d);
+      s(p);
     },
-    [a, e]
-  ), g = m(
-    (l) => {
-      i?.(e?.filter((d) => d.id !== l) ?? []);
+    [s, e]
+  ), g = f(
+    (c) => {
+      i?.(e?.filter((p) => p.id !== c) ?? []);
     },
     [e, i]
-  ), F = m(() => {
+  ), F = f(() => {
     i?.([]);
-  }, [i]), w = m(
-    (l) => {
-      f(l.map((d) => ({ originalFile: d, id: $() })));
+  }, [i]), w = f(
+    (c) => {
+      u(c.map((p) => ({ originalFile: p, id: $() })));
     },
-    [f]
-  ), v = m(
-    (l) => {
-      n?.(ee(l));
+    [u]
+  ), v = f(
+    (c) => {
+      n?.(ee(c));
     },
     [n]
   ), y = O({
     onDrop: w,
     onDropRejected: v,
     accept: o
-  }), p = {
+  }), d = {
     value: e,
     dropzone: y,
-    addFiles: f,
+    addFiles: u,
     removeFile: g,
     clearFiles: F,
     cropper: t && {
       config: t,
-      ...c
+      ...a
     }
   };
   return {
-    ...p,
-    uploader: p
+    ...d,
+    uploader: d
   };
 }
 export {

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(l,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react-dropzone"),require("react"),require("react/jsx-runtime"),require("react-easy-crop"),require("uuid"),require("@leancodepl/utils")):typeof define=="function"&&define.amd?define(["exports","react-dropzone","react","react/jsx-runtime","react-easy-crop","uuid","@leancodepl/utils"],u):(l=typeof globalThis<"u"?globalThis:l||self,u(l["@leancodepl/image-uploader"]={},l.reactDropzone,l.react,l.jsxRuntime,l.EasyCrop,l.uuid,l.utils))})(this,(function(l,u,a,F,Z,D,O){"use strict";var E=(e=>(e[e.FileTooLarge=u.ErrorCode.FileTooLarge]="FileTooLarge",e[e.FileTooSmall=u.ErrorCode.FileTooSmall]="FileTooSmall",e[e.FileInvalidType=u.ErrorCode.FileInvalidType]="FileInvalidType",e[e.TooManyFiles=u.ErrorCode.TooManyFiles]="TooManyFiles",e.Unknown="unknown",e))(E||{});function Q(e){return e.flatMap(o=>o.errors.map(t=>t.code))}function z(e){return e.includes(u.ErrorCode.FileTooLarge)?E.FileTooLarge:e.includes(u.ErrorCode.FileTooSmall)?E.FileTooSmall:e.includes(u.ErrorCode.FileInvalidType)?E.FileInvalidType:e.includes(u.ErrorCode.TooManyFiles)?E.TooManyFiles:"unknown"}function Y(e){return z(Q(e))}async function B(e,o){if("url"in e)return e;if(!e.originalFile)throw new Error("Image is not defined");try{const t=await o(e);if(!t)throw new Error("Upload params are not defined");const{uri:i,method:n,requiredHeaders:r}=t;if(!(await fetch(i,{method:n,headers:r,body:e.originalFile})).ok)throw new Error("Failed to upload image");return{...e,url:i}}catch{throw new Error("Failed to upload image")}}const V={"image/*":[]},q={x:0,y:0},A=1,R=0,j=a.createContext(void 0);function _({children:e,uploader:o}){return F.jsx(j.Provider,{value:o,children:e})}function x(){const e=a.useContext(j);if(!e)throw new Error("All UploadImages components must be wrapped in an UploadImages.Root component");return e}function X({children:e}){const{cropper:o}=x();if(!o)throw new Error("Cropper config is not defined");const{file:t,editorImage:i,acceptImage:n,closeImage:r,config:p,cropArea:s,zoom:h,rotation:I,setCropArea:w,setCrop:y,setZoom:v,setRotation:C}=o,f=a.useCallback(()=>{r(),y(q),v(A),C(R),w(void 0)},[r,y,w,C,v]),d=a.useCallback(()=>{if(!i)return;const m=document.createElement("canvas"),g=document.createElement("canvas"),c=m.getContext("2d"),S=g.getContext("2d"),k=new Image;k.onload=function(){const{naturalWidth:P,naturalHeight:M}=k,b=I*(Math.PI/180),H=Math.abs(Math.sin(b)),L=Math.abs(Math.cos(b)),T=P*L+M*H,U=M*L+P*H;m.width=T,m.height=U,c.fillStyle="#fff",c.fillRect(0,0,T,U);const N=T/2,W=U/2;c.translate(N,W),c.rotate(b),c.translate(-N,-W);const se=(T-P)/2,le=(U-M)/2;c.drawImage(k,0,0,P,M,se,le,P,M),g.width=Math.min((s?.width??100)/100*T,p.maxWidth??Number.POSITIVE_INFINITY),g.height=Math.min((s?.height??100)/100*U,p.maxHeight??Number.POSITIVE_INFINITY),S.drawImage(m,(s?.x??0)/100*T,(s?.y??0)/100*U,(s?.width??100)/100*T,(s?.height??100)/100*U,0,0,g.width,g.height),g.toBlob(ce=>{if(!t)return;const de={originalFile:new File([ce],t.originalFile.name??"image.png",{type:t.originalFile.type??"image/png"}),id:t.id};n(de)}),f()},k.src=i},[f,p,s,t,i,I,n]);return typeof e=="function"?e({zoom:h,rotation:I,setZoom:v,setRotation:C,accept:d,close:f}):e}function G({style:e,...o}){const{cropper:t}=x();if(!t)throw new Error("Cropper config is not defined");const{editorImage:i,config:n,zoom:r,rotation:p,crop:s,setCropArea:h,setCrop:I,setZoom:w,setRotation:y}=t;return F.jsx("div",{...o,style:{position:"relative",width:"100%",height:"300px",...e},children:F.jsx(Z,{aspect:n.aspect,crop:s,image:i,rotation:p,zoom:r,onCropChange:I,onCropComplete:h,onRotationChange:y,onZoomChange:w})})}async function J(e){return e?await K(e):""}const K=e=>new Promise((o,t)=>{const i=new FileReader;i.readAsDataURL(e),i.onload=()=>o(String(i.result)),i.onerror=n=>t(n)});function $({children:e,file:o,...t}){const{removeFile:i}=x(),[n,r]=a.useState();return a.useEffect(()=>{(async()=>{const s=await J(o.originalFile);r(s)})()},[o.originalFile]),F.jsx("div",{...t,children:typeof e=="function"?e({file:o,preview:n,remove:()=>i(o.id)}):e})}function ee({children:e,...o}){const{value:t}=x();return F.jsx("div",{...o,children:typeof e=="function"?e({files:t}):e})}function oe({uploader:e,...o}){return F.jsx(_,{uploader:e,children:F.jsx("div",{...o})})}function te({children:e,...o}){const{dropzone:{getRootProps:t,getInputProps:i,isDragActive:n,isFocused:r,isFileDialogActive:p}}=x();return F.jsxs("div",{...t(),...o,children:[F.jsx("input",{...i()}),typeof e=="function"?e({isDragActive:n,isFocused:r,isFileDialogActive:p}):e]})}const ie={Root:oe,Zone:te,Files:ee,File:$,Cropper:X,CropperEditor:G};function ne(e,o){return e.name===o.name&&e.size===o.size&&e.lastModified===o.lastModified}function ae({value:e,onChange:o}){const[t,i]=a.useState([]),[n,r]=a.useState(),[p,s]=a.useState(),[h,I]=a.useState(q),[w,y]=a.useState(A),[v,C]=a.useState(R),f=t.at(0),d=!!f;O.useSyncState(f,c=>{if(r(void 0),!c)return;const S=new FileReader;S.addEventListener("load",()=>{typeof S.result=="string"&&r(S.result)}),S.readAsDataURL(c.originalFile)});const m=a.useCallback(()=>{i(t.filter(({id:c})=>c!==f?.id))},[t,f?.id]),g=a.useCallback(c=>o?.([...e??[],c]),[o,e]);return{fileQueue:t,file:f,editorImage:n,cropArea:p,crop:h,zoom:w,rotation:v,isOpen:d,setFileQueue:i,setEditorImage:r,setCropArea:s,setCrop:I,setZoom:y,setRotation:C,closeImage:m,acceptImage:g}}function re({value:e,accept:o=V,cropper:t,onError:i,onChange:n}){const{setFileQueue:r,...p}=ae({value:e,onChange:n}),s=a.useCallback(d=>{t?r(d):n?.([...e??[],...d])},[t,n,e,r]),h=a.useCallback(d=>{const m=d.filter(g=>!e?.some(c=>ne(c.originalFile,g.originalFile)));s(m)},[s,e]),I=a.useCallback(d=>{n?.(e?.filter(m=>m.id!==d)??[])},[e,n]),w=a.useCallback(()=>{n?.([])},[n]),y=a.useCallback(d=>{h(d.map(m=>({originalFile:m,id:D.v4()})))},[h]),v=a.useCallback(d=>{i?.(Y(d))},[i]),C=u.useDropzone({onDrop:y,onDropRejected:v,accept:o}),f={value:e,dropzone:C,addFiles:h,removeFile:I,clearFiles:w,cropper:t&&{config:t,...p}};return{...f,uploader:f}}l.ErrorCode=E,l.UploadImages=ie,l.tryUploadWithUploadParams=B,l.useUploadImages=re,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+(function(l,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react-dropzone"),require("react"),require("react/jsx-runtime"),require("react-easy-crop"),require("uuid"),require("@leancodepl/utils")):typeof define=="function"&&define.amd?define(["exports","react-dropzone","react","react/jsx-runtime","react-easy-crop","uuid","@leancodepl/utils"],p):(l=typeof globalThis<"u"?globalThis:l||self,p(l["@leancodepl/image-uploader"]={},l.reactDropzone,l.react,l.jsxRuntime,l.EasyCrop,l.uuid,l.utils))})(this,(function(l,p,r,h,Z,D,O){"use strict";var E=(e=>(e[e.FileTooLarge=p.ErrorCode.FileTooLarge]="FileTooLarge",e[e.FileTooSmall=p.ErrorCode.FileTooSmall]="FileTooSmall",e[e.FileInvalidType=p.ErrorCode.FileInvalidType]="FileInvalidType",e[e.TooManyFiles=p.ErrorCode.TooManyFiles]="TooManyFiles",e.Unknown="unknown",e))(E||{});function Q(e){return e.flatMap(o=>o.errors.map(t=>t.code))}function z(e){return e.includes(p.ErrorCode.FileTooLarge)?E.FileTooLarge:e.includes(p.ErrorCode.FileTooSmall)?E.FileTooSmall:e.includes(p.ErrorCode.FileInvalidType)?E.FileInvalidType:e.includes(p.ErrorCode.TooManyFiles)?E.TooManyFiles:"unknown"}function Y(e){return z(Q(e))}async function B(e,o){if("url"in e)return e;if(!e.originalFile)throw new Error("Image is not defined");try{const t=await o(e);if(!t)throw new Error("Upload params are not defined");const{uri:i,method:n,requiredHeaders:a}=t;if(!(await fetch(i,{method:n,headers:a,body:e.originalFile})).ok)throw new Error("Failed to upload image");return{...e,url:i}}catch{throw new Error("Failed to upload image")}}const V={"image/*":[]},q={x:0,y:0},A=1,R=0,j=r.createContext(void 0);function _({children:e,uploader:o}){return h.jsx(j.Provider,{value:o,children:e})}function x(){const e=r.useContext(j);if(!e)throw new Error("All UploadImages components must be wrapped in an UploadImages.Root component");return e}function X({children:e}){const{cropper:o}=x();if(!o)throw new Error("Cropper config is not defined");const{file:t,editorImage:i,acceptImage:n,closeImage:a,config:s,cropArea:c,zoom:g,rotation:I,setCropArea:w,setCrop:y,setZoom:v,setRotation:C}=o,f=r.useCallback(()=>{a(),y(q),v(A),C(R),w(void 0)},[a,y,w,C,v]),u=r.useCallback(()=>{if(!i)return;const m=document.createElement("canvas"),F=document.createElement("canvas"),d=m.getContext("2d"),S=F.getContext("2d"),k=new Image;k.onload=function(){const{naturalWidth:P,naturalHeight:M}=k,b=I*(Math.PI/180),H=Math.abs(Math.sin(b)),L=Math.abs(Math.cos(b)),T=P*L+M*H,U=M*L+P*H;m.width=T,m.height=U,d.fillStyle="#fff",d.fillRect(0,0,T,U);const N=T/2,W=U/2;d.translate(N,W),d.rotate(b),d.translate(-N,-W);const se=(T-P)/2,le=(U-M)/2;d.drawImage(k,0,0,P,M,se,le,P,M),F.width=Math.min((c?.width??100)/100*T,s.maxWidth??Number.POSITIVE_INFINITY),F.height=Math.min((c?.height??100)/100*U,s.maxHeight??Number.POSITIVE_INFINITY),S.drawImage(m,(c?.x??0)/100*T,(c?.y??0)/100*U,(c?.width??100)/100*T,(c?.height??100)/100*U,0,0,F.width,F.height),F.toBlob(ce=>{if(!t)return;const de={originalFile:new File([ce],t.originalFile.name??"image.png",{type:t.originalFile.type??"image/png"}),id:t.id};n(de)}),f()},k.src=i},[f,s,c,t,i,I,n]);return typeof e=="function"?e({zoom:g,rotation:I,setZoom:v,setRotation:C,accept:u,close:f}):e}function G({style:e,...o}){const{cropper:t}=x();if(!t)throw new Error("Cropper config is not defined");const{editorImage:i,config:n,zoom:a,rotation:s,crop:c,setCropArea:g,setCrop:I,setZoom:w,setRotation:y}=t;return h.jsx("div",{...o,style:{position:"relative",width:"100%",height:"300px",...e},children:h.jsx(Z,{aspect:n.aspect,crop:c,image:i,rotation:s,zoom:a,onCropChange:I,onCropComplete:g,onRotationChange:y,onZoomChange:w})})}async function J(e){return e?await K(e):""}const K=e=>new Promise((o,t)=>{const i=new FileReader;i.readAsDataURL(e),i.onload=()=>o(String(i.result)),i.onerror=n=>t(n)});function $({children:e,file:o,...t}){const{removeFile:i}=x(),[n,a]=r.useState(),s="url"in o?o.url:void 0;return r.useEffect(()=>{if(s)return;(async()=>{const g=await J(o.originalFile);a(g)})()},[s,o.originalFile]),h.jsx("div",{...t,children:typeof e=="function"?e({file:o,preview:s??n,remove:()=>i(o.id)}):e})}function ee({children:e,...o}){const{value:t}=x();return h.jsx("div",{...o,children:typeof e=="function"?e({files:t}):e})}function oe({uploader:e,...o}){return h.jsx(_,{uploader:e,children:h.jsx("div",{...o})})}function te({children:e,...o}){const{dropzone:{getRootProps:t,getInputProps:i,isDragActive:n,isFocused:a,isFileDialogActive:s}}=x();return h.jsxs("div",{...t(),...o,children:[h.jsx("input",{...i()}),typeof e=="function"?e({isDragActive:n,isFocused:a,isFileDialogActive:s}):e]})}const ie={Root:oe,Zone:te,Files:ee,File:$,Cropper:X,CropperEditor:G};function ne(e,o){return e.name===o.name&&e.size===o.size&&e.lastModified===o.lastModified}function re({value:e,onChange:o}){const[t,i]=r.useState([]),[n,a]=r.useState(),[s,c]=r.useState(),[g,I]=r.useState(q),[w,y]=r.useState(A),[v,C]=r.useState(R),f=t.at(0),u=!!f;O.useSyncState(f,d=>{if(a(void 0),!d)return;const S=new FileReader;S.addEventListener("load",()=>{typeof S.result=="string"&&a(S.result)}),S.readAsDataURL(d.originalFile)});const m=r.useCallback(()=>{i(t.filter(({id:d})=>d!==f?.id))},[t,f?.id]),F=r.useCallback(d=>o?.([...e??[],d]),[o,e]);return{fileQueue:t,file:f,editorImage:n,cropArea:s,crop:g,zoom:w,rotation:v,isOpen:u,setFileQueue:i,setEditorImage:a,setCropArea:c,setCrop:I,setZoom:y,setRotation:C,closeImage:m,acceptImage:F}}function ae({value:e,accept:o=V,cropper:t,onError:i,onChange:n}){const{setFileQueue:a,...s}=re({value:e,onChange:n}),c=r.useCallback(u=>{t?a(u):n?.([...e??[],...u])},[t,n,e,a]),g=r.useCallback(u=>{const m=u.filter(F=>!e?.some(d=>ne(d.originalFile,F.originalFile)));c(m)},[c,e]),I=r.useCallback(u=>{n?.(e?.filter(m=>m.id!==u)??[])},[e,n]),w=r.useCallback(()=>{n?.([])},[n]),y=r.useCallback(u=>{g(u.map(m=>({originalFile:m,id:D.v4()})))},[g]),v=r.useCallback(u=>{i?.(Y(u))},[i]),C=p.useDropzone({onDrop:y,onDropRejected:v,accept:o}),f={value:e,dropzone:C,addFiles:g,removeFile:I,clearFiles:w,cropper:t&&{config:t,...s}};return{...f,uploader:f}}l.ErrorCode=E,l.UploadImages=ie,l.tryUploadWithUploadParams=B,l.useUploadImages=ae,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/lib/UploadImages/File.d.ts

@@ -1,11 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { FileWithId, UploadFileItemChildProps } from '../types';
+import { UploadFileItemChildProps } from '../types';
 /**
  * Props for individual file item component.
  */
 export type UploadImagesFileItemProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     children: ((props: UploadFileItemChildProps) => ReactNode) | ReactNode;
-    file: FileWithId;
+    file: UploadFileItemChildProps["file"];
 };
 /**
  * Individual file item component with preview and removal functionality.

package/dist/lib/UploadImages/File.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../src/lib/UploadImages/File.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAG/D;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACzF,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IACtE,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,+BAqB3F"}
+{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../src/lib/UploadImages/File.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAGnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACzF,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IACtE,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;CACvC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,+BA2B3F"}

package/dist/lib/_utils/tryUploadWithUploadParams.d.ts

@@ -21,5 +21,5 @@ import { FileWithId, UploadedFileWithId, UploadParams } from '../types';
  * }));
  * ```
  */
-export declare function tryUploadWithUploadParams(image: FileWithId | UploadedFileWithId, getUploadParams: (image: FileWithId) => Promise<UploadParams | null | undefined>): Promise<UploadedFileWithId>;
+export declare function tryUploadWithUploadParams(image: FileWithId, getUploadParams: (image: FileWithId) => Promise<UploadParams | null | undefined>): Promise<UploadedFileWithId>;
 //# sourceMappingURL=tryUploadWithUploadParams.d.ts.map

package/dist/lib/_utils/tryUploadWithUploadParams.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tryUploadWithUploadParams.d.ts","sourceRoot":"","sources":["../../../src/lib/_utils/tryUploadWithUploadParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,yBAAyB,CAC7C,KAAK,EAAE,UAAU,GAAG,kBAAkB,EACtC,eAAe,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,GAC/E,OAAO,CAAC,kBAAkB,CAAC,CA4B7B"}
+{"version":3,"file":"tryUploadWithUploadParams.d.ts","sourceRoot":"","sources":["../../../src/lib/_utils/tryUploadWithUploadParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,yBAAyB,CAC7C,KAAK,EAAE,UAAU,EACjB,eAAe,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,GAC/E,OAAO,CAAC,kBAAkB,CAAC,CA4B7B"}

package/dist/lib/types.d.ts

@@ -1,11 +1,12 @@
 export type { Accept, FileRejection } from 'react-dropzone';
-export type FileWithId = {
+type BaseFileWithId = {
     originalFile: File;
     id: string;
 };
-export type UploadedFileWithId = FileWithId & {
+export type UploadedFileWithId = BaseFileWithId & {
     url: string;
 };
+export type FileWithId = BaseFileWithId | UploadedFileWithId;
 export type UploadParams = {
     uri: string;
     method: string;

package/dist/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE3D,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,IAAI,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG;IAC5C,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,OAAO,CAAA;IACrB,kBAAkB,EAAE,OAAO,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,mCAAmC,GAAG;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE3D,KAAK,cAAc,GAAG;IACpB,YAAY,EAAE,IAAI,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAA;AAE5D,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,OAAO,CAAA;IACrB,kBAAkB,EAAE,OAAO,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,mCAAmC,GAAG;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leancodepl/image-uploader",
-  "version": "10.5.1",
+  "version": "10.5.2",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
-    "@leancodepl/utils": "10.5.1",
+    "@leancodepl/utils": "10.5.2",
     "react-dropzone": "^15.0.0",
     "react-easy-crop": "^6.0.0",
     "uuid": "^14.0.1"