@uploadcare/react-uploader 0.4.0-alpha.1 → 0.4.0-alpha.2

package/dist/react-uploader.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),v=require("@uploadcare/blocks");function j(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const i=j(v),F=new Set(["children","ref","style","className"]),I=(e={})=>Object==null?void 0:Object.keys(e).reduce((n,r)=>{var a,o;const l=e==null?void 0:e[r],c=`on${(o=(a=l==null?void 0:l.split("-"))==null?void 0:a.map(s=>s.charAt(0).toUpperCase()+s.slice(1)))==null?void 0:o.join("")}`;return n[c]=l,n},{}),w=new WeakMap,x=e=>{let n=w.get(e);return n===void 0&&(n=new Map,w.set(e,n)),n},y=({node:e,nameProp:n,valueProp:r,prevValueProp:a,event:o})=>{if(o!==void 0){if(r!==a){const l=x(e),c=l.has(o);let s=l.get(o);r!==void 0?c?s.handleEvent=r:(s={handleEvent:r},l.set(o,s),e.addEventListener(o,u=>s.handleEvent(u.detail))):c&&(l.delete(o),e.removeEventListener(o,s))}return}e[n]=r,r==null&&n in HTMLElement.prototype&&e.removeAttribute(n)},L=(e,n,r)=>{const a={},o={};return Object.entries(e).forEach(([l,c])=>{F.has(l)?a[l==="className"?"class":l]=c:n.has(l)||l in r.prototype?o[l]=c:a[l]=c}),{reactProps:a,customElProps:o}},m=({react:e,tag:n,elClass:r,schemaEvents:a})=>{const o=I(a),l=new Set(Object.keys(o??{})),c=e.forwardRef((s,u)=>{const f=e.useRef(new Map),g=e.useRef(null),{reactProps:A,customElProps:h}=L(s,l,r);return e.useLayoutEffect(()=>{if(g.current===null)return;const p=new Map;for(const d in h)y({node:g.current,nameProp:d,valueProp:h[d],prevValueProp:f.current.get(d),event:o[d]}),f.current.delete(d),p.set(d,s[d]);for(const[d,O]of f.current)y({node:g.current,nameProp:d,valueProp:void 0,prevValueProp:O,event:o[d]});f.current=p}),e.createElement(n??r.__tag,{...A,ref:e.useCallback(p=>{g.current=p,typeof u=="function"?u(p):u!==null&&(u.current=p)},[u])})});return c.displayName=r.name,c},E=m({react:t,tag:"lr-config",elClass:i.Config}),P=m({react:t,tag:"lr-upload-ctx-provider",elClass:i.UploadCtxProvider,schemaEvents:i.UploadCtxProvider.EventType}),M=e=>{const n={},r={};return Object.entries(e).forEach(([a,o])=>{a.startsWith("on")?n[a]=o:r[a]=o}),{eventHandlers:n,config:r}},R="0.4.0-alpha.1",B="React-Uploader",U=()=>`${B}/${R}`,b=({condition:e,fallback:n,children:r,...a})=>e?t.createElement(t.Suspense,{fallback:n,...a},r):t.createElement(t.Fragment,null,n),C=()=>{const[e,n]=t.useState(!1);return t.useEffect(()=>{typeof window<"u"&&n(!0)},[]),e};i.registerBlocks(i);const S=m({react:t,tag:"lr-file-uploader-regular",elClass:i.FileUploaderRegular}),T=({ctxName:e,className:n,classNameUploader:r,apiRef:a,...o})=>{const l=t.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:c,config:s}=t.useMemo(()=>M(o),[o]),u=C();return t.createElement(b,{condition:u,fallback:t.createElement("h1",null,"Loading ...")},t.createElement("div",{className:n},t.createElement(E,{userAgentIntegration:U(),"ctx-name":l,...s}),t.createElement(P,{ref:a,"ctx-name":l,...c}),t.createElement(S,{class:r,"ctx-name":l})))};i.registerBlocks(i);const _=m({react:t,tag:"lr-file-uploader-minimal",elClass:i.FileUploaderMinimal}),k=({ctxName:e,className:n,classNameUploader:r,apiRef:a,...o})=>{const l=t.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:c,config:s}=t.useMemo(()=>M(o),[o]),u=C();return t.createElement(b,{condition:u,fallback:t.createElement("h1",null,"Loading ...")},t.createElement("div",{className:n},t.createElement(E,{userAgentIntegration:U(),"ctx-name":l,...s}),t.createElement(P,{ref:a,"ctx-name":l,...c}),t.createElement(_,{class:r,"ctx-name":l})))};i.registerBlocks(i);const N=m({react:t,tag:"lr-file-uploader-inline",elClass:i.FileUploaderMinimal}),D=({ctxName:e,className:n,classNameUploader:r,apiRef:a,...o})=>{const l=t.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:c,config:s}=t.useMemo(()=>M(o),[o]),u=C();return t.createElement(b,{condition:u,fallback:t.createElement("h1",null,"Loading ...")},t.createElement("div",{className:n},t.createElement(E,{userAgentIntegration:U(),"ctx-name":l,...s}),t.createElement(P,{ref:a,"ctx-name":l,...c}),t.createElement(N,{class:r,"ctx-name":l})))};Object.defineProperty(exports,"UploadCtxProvider",{enumerable:!0,get:()=>v.UploadCtxProvider});Object.defineProperty(exports,"defineLocale",{enumerable:!0,get:()=>v.defineLocale});exports.FileUploaderInline=D;exports.FileUploaderMinimal=k;exports.FileUploaderRegular=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),v=require("@uploadcare/blocks");function j(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const i=j(v),F=new Set(["children","ref","style","className"]),I=(e={})=>Object==null?void 0:Object.keys(e).reduce((t,n)=>{var a,l;const o=e==null?void 0:e[n],c=`on${(l=(a=o==null?void 0:o.split("-"))==null?void 0:a.map(s=>s.charAt(0).toUpperCase()+s.slice(1)))==null?void 0:l.join("")}`;return t[c]=o,t},{}),y=new WeakMap,x=e=>{let t=y.get(e);return t===void 0&&(t=new Map,y.set(e,t)),t},h=({node:e,nameProp:t,valueProp:n,prevValueProp:a,event:l})=>{if(l!==void 0){if(n!==a){const o=x(e),c=o.has(l);let s=o.get(l);n!==void 0?c?s.handleEvent=n:(s={handleEvent:n},o.set(l,s),e.addEventListener(l,u=>s.handleEvent(u.detail))):c&&(o.delete(l),e.removeEventListener(l,s))}return}e[t]=n,n==null&&t in HTMLElement.prototype&&e.removeAttribute(t)},R=(e,t,n)=>{const a={},l={};return Object.entries(e).forEach(([o,c])=>{F.has(o)?a[o==="className"?"class":o]=c:t.has(o)||o in n.prototype?l[o]=c:a[o]=c}),{reactProps:a,customElProps:l}},f=({react:e,tag:t,elClass:n,schemaEvents:a})=>{const l=I(a),o=new Set(Object.keys(l??{})),c=e.forwardRef((s,u)=>{const d=e.useRef(new Map),g=e.useRef(null),{reactProps:A,customElProps:w}=R(s,o,n);return e.useLayoutEffect(()=>{if(g.current===null)return;const m=new Map;for(const p in w)h({node:g.current,nameProp:p,valueProp:w[p],prevValueProp:d.current.get(p),event:l[p]}),d.current.delete(p),m.set(p,s[p]);for(const[p,O]of d.current)h({node:g.current,nameProp:p,valueProp:void 0,prevValueProp:O,event:l[p]});d.current=m}),e.createElement(t??n.__tag,{...A,ref:e.useCallback(m=>{g.current=m,typeof u=="function"?u(m):u!==null&&(u.current=m)},[u])})});return c.displayName=n.name,c},E=f({react:r,tag:"lr-config",elClass:i.Config}),P=f({react:r,tag:"lr-upload-ctx-provider",elClass:i.UploadCtxProvider,schemaEvents:i.UploadCtxProvider.EventType}),M=e=>{const t={},n={};return Object.entries(e).forEach(([a,l])=>{a.startsWith("on")?t[a]=l:n[a]=l}),{eventHandlers:t,config:n}},B="0.4.0-alpha.2",S="React-Uploader",U=()=>`${S}/${B}`,C=({condition:e,fallback:t,children:n,...a})=>e?r.createElement(r.Suspense,{fallback:t,...a},n):r.createElement(r.Fragment,null,t),b=()=>{const[e,t]=r.useState(!1);return r.useEffect(()=>{typeof window<"u"&&t(!0)},[]),e};i.registerBlocks(i);const T=f({react:r,tag:"lr-file-uploader-regular",elClass:i.FileUploaderRegular}),_=({ctxName:e,className:t,classNameUploader:n,apiRef:a,fallback:l,...o})=>{const c=r.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:s,config:u}=r.useMemo(()=>M(o),[o]),d=b();return r.createElement(C,{condition:d,fallback:l},r.createElement("div",{className:t},r.createElement(E,{userAgentIntegration:U(),"ctx-name":c,...u}),r.createElement(P,{ref:a,"ctx-name":c,...s}),r.createElement(T,{class:n,"ctx-name":c})))};i.registerBlocks(i);const L=f({react:r,tag:"lr-file-uploader-minimal",elClass:i.FileUploaderMinimal}),N=({ctxName:e,className:t,classNameUploader:n,apiRef:a,fallback:l,...o})=>{const c=r.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:s,config:u}=r.useMemo(()=>M(o),[o]),d=b();return r.createElement(C,{condition:d,fallback:l},r.createElement("div",{className:t},r.createElement(E,{userAgentIntegration:U(),"ctx-name":c,...u}),r.createElement(P,{ref:a,"ctx-name":c,...s}),r.createElement(L,{class:n,"ctx-name":c})))};i.registerBlocks(i);const k=f({react:r,tag:"lr-file-uploader-inline",elClass:i.FileUploaderMinimal}),D=({ctxName:e,className:t,classNameUploader:n,apiRef:a,fallback:l,...o})=>{const c=r.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:s,config:u}=r.useMemo(()=>M(o),[o]),d=b();return r.createElement(C,{condition:d,fallback:l},r.createElement("div",{className:t},r.createElement(E,{userAgentIntegration:U(),"ctx-name":c,...u}),r.createElement(P,{ref:a,"ctx-name":c,...s}),r.createElement(k,{class:n,"ctx-name":c})))};Object.defineProperty(exports,"UploadCtxProvider",{enumerable:!0,get:()=>v.UploadCtxProvider});Object.defineProperty(exports,"defineLocale",{enumerable:!0,get:()=>v.defineLocale});exports.FileUploaderInline=D;exports.FileUploaderMinimal=N;exports.FileUploaderRegular=_;

package/dist/react-uploader.d.ts

@@ -2,6 +2,7 @@ import type { ConfigType } from '@uploadcare/blocks';
 import { defineLocale } from '@uploadcare/blocks';
 import type { EventMap } from '@uploadcare/blocks';
 import { FC } from 'react';
+import { default as React_2 } from 'react';
 import type { Ref } from 'react';
 import { UploadCtxProvider } from '@uploadcare/blocks';
 
@@ -17,7 +18,7 @@ declare type TDefaultProps = {
     className?: string;
     classNameUploader?: string;
     ctxName?: string;
-};
+} & Pick<TProps_2, "fallback">;
 
 export declare type TEventsSchema = {
     [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (event: EventMap[K]["detail"]) => void;
@@ -29,6 +30,12 @@ declare type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCa
 
 export declare type TProps = TDefaultProps & TRefUploadCtxProvider & TPropsWithEvents & TPropsWithConfig;
 
+declare type TProps_2 = {
+    fallback?: React_2.ReactChild | React_2.ReactFragment | React_2.ReactPortal | null;
+    condition: boolean;
+    children: React_2.ReactNode;
+};
+
 declare type TPropsWithConfig = Partial<ConfigType>;
 
 declare type TPropsWithEvents = Partial<TEventsSchema>;

package/dist/react-uploader.js

@@ -1,182 +1,185 @@
-import l, { Suspense as F, useState as y, useEffect as B, useMemo as m } from "react";
+import a, { Suspense as y, useState as B, useEffect as R, useMemo as f } from "react";
 import * as i from "@uploadcare/blocks";
 import { UploadCtxProvider as q, defineLocale as z } from "@uploadcare/blocks";
-const L = /* @__PURE__ */ new Set([
+const b = /* @__PURE__ */ new Set([
   "children",
   "ref",
   "style",
   "className"
-]), R = (e = {}) => Object == null ? void 0 : Object.keys(e).reduce((n, a) => {
-  var o, r;
-  const t = e == null ? void 0 : e[a], c = `on${(r = (o = t == null ? void 0 : t.split("-")) == null ? void 0 : o.map((s) => s.charAt(0).toUpperCase() + s.slice(1))) == null ? void 0 : r.join("")}`;
-  return n[c] = t, n;
-}, {}), M = /* @__PURE__ */ new WeakMap(), k = (e) => {
-  let n = M.get(e);
-  return n === void 0 && (n = /* @__PURE__ */ new Map(), M.set(e, n)), n;
+]), O = (e = {}) => Object == null ? void 0 : Object.keys(e).reduce((t, o) => {
+  var s, n;
+  const r = e == null ? void 0 : e[o], l = `on${(n = (s = r == null ? void 0 : r.split("-")) == null ? void 0 : s.map((c) => c.charAt(0).toUpperCase() + c.slice(1))) == null ? void 0 : n.join("")}`;
+  return t[l] = r, t;
+}, {}), M = /* @__PURE__ */ new WeakMap(), T = (e) => {
+  let t = M.get(e);
+  return t === void 0 && (t = /* @__PURE__ */ new Map(), M.set(e, t)), t;
 }, x = ({
   node: e,
-  nameProp: n,
-  valueProp: a,
-  prevValueProp: o,
-  event: r
+  nameProp: t,
+  valueProp: o,
+  prevValueProp: s,
+  event: n
 }) => {
-  if (r !== void 0) {
-    if (a !== o) {
-      const t = k(e), c = t.has(r);
-      let s = t.get(r);
-      a !== void 0 ? c ? s.handleEvent = a : (s = { handleEvent: a }, t.set(r, s), e.addEventListener(
-        r,
-        (d) => s.handleEvent(d.detail)
-      )) : c && (t.delete(r), e.removeEventListener(r, s));
+  if (n !== void 0) {
+    if (o !== s) {
+      const r = T(e), l = r.has(n);
+      let c = r.get(n);
+      o !== void 0 ? l ? c.handleEvent = o : (c = { handleEvent: o }, r.set(n, c), e.addEventListener(
+        n,
+        (d) => c.handleEvent(d.detail)
+      )) : l && (r.delete(n), e.removeEventListener(n, c));
     }
     return;
   }
-  e[n] = a, a == null && n in HTMLElement.prototype && e.removeAttribute(n);
-}, O = (e, n, a) => {
-  const o = {}, r = {};
-  return Object.entries(e).forEach(([t, c]) => {
-    L.has(t) ? o[t === "className" ? "class" : t] = c : n.has(t) || t in a.prototype ? r[t] = c : o[t] = c;
-  }), { reactProps: o, customElProps: r };
-}, f = ({
+  e[t] = o, o == null && t in HTMLElement.prototype && e.removeAttribute(t);
+}, j = (e, t, o) => {
+  const s = {}, n = {};
+  return Object.entries(e).forEach(([r, l]) => {
+    b.has(r) ? s[r === "className" ? "class" : r] = l : t.has(r) || r in o.prototype ? n[r] = l : s[r] = l;
+  }), { reactProps: s, customElProps: n };
+}, v = ({
   react: e,
   // https://react.dev/warnings/invalid-hook-call-warning
-  tag: n,
-  elClass: a,
-  schemaEvents: o
+  tag: t,
+  elClass: o,
+  schemaEvents: s
 }) => {
-  const r = R(o), t = new Set(Object.keys(r ?? {})), c = e.forwardRef(
-    (s, d) => {
-      const E = e.useRef(/* @__PURE__ */ new Map()), g = e.useRef(null), { reactProps: I, customElProps: A } = O(s, t, a);
+  const n = O(s), r = new Set(Object.keys(n ?? {})), l = e.forwardRef(
+    (c, d) => {
+      const u = e.useRef(/* @__PURE__ */ new Map()), E = e.useRef(null), { reactProps: I, customElProps: A } = j(c, r, o);
       return e.useLayoutEffect(() => {
-        if (g.current === null)
+        if (E.current === null)
           return;
-        const p = /* @__PURE__ */ new Map();
-        for (const u in A)
+        const m = /* @__PURE__ */ new Map();
+        for (const p in A)
           x({
-            node: g.current,
-            nameProp: u,
-            valueProp: A[u],
-            prevValueProp: E.current.get(u),
-            event: r[u]
-          }), E.current.delete(u), p.set(u, s[u]);
-        for (const [u, b] of E.current)
+            node: E.current,
+            nameProp: p,
+            valueProp: A[p],
+            prevValueProp: u.current.get(p),
+            event: n[p]
+          }), u.current.delete(p), m.set(p, c[p]);
+        for (const [p, F] of u.current)
           x({
-            node: g.current,
-            nameProp: u,
+            node: E.current,
+            nameProp: p,
             valueProp: void 0,
-            prevValueProp: b,
-            event: r[u]
+            prevValueProp: F,
+            event: n[p]
           });
-        E.current = p;
-      }), e.createElement(n ?? a.__tag, {
+        u.current = m;
+      }), e.createElement(t ?? o.__tag, {
         ...I,
         ref: e.useCallback(
-          (p) => {
-            g.current = p, typeof d == "function" ? d(p) : d !== null && (d.current = p);
+          (m) => {
+            E.current = m, typeof d == "function" ? d(m) : d !== null && (d.current = m);
           },
           [d]
         )
       });
     }
   );
-  return c.displayName = a.name, c;
-}, v = f({
-  react: l,
+  return l.displayName = o.name, l;
+}, g = v({
+  react: a,
   tag: "lr-config",
   elClass: i.Config
-}), P = f({
-  react: l,
+}), P = v({
+  react: a,
   tag: "lr-upload-ctx-provider",
   elClass: i.UploadCtxProvider,
   schemaEvents: i.UploadCtxProvider.EventType
 }), C = (e) => {
-  const n = {}, a = {};
-  return Object.entries(e).forEach(([o, r]) => {
-    o.startsWith("on") ? n[o] = r : a[o] = r;
+  const t = {}, o = {};
+  return Object.entries(e).forEach(([s, n]) => {
+    s.startsWith("on") ? t[s] = n : o[s] = n;
   }), {
-    eventHandlers: n,
-    config: a
+    eventHandlers: t,
+    config: o
   };
-}, T = "0.4.0-alpha.1", j = "React-Uploader", U = () => `${j}/${T}`, h = ({ condition: e, fallback: n, children: a, ...o }) => e ? /* @__PURE__ */ l.createElement(F, { fallback: n, ...o }, a) : /* @__PURE__ */ l.createElement(l.Fragment, null, n), w = () => {
-  const [e, n] = y(!1);
-  return B(() => {
-    typeof window < "u" && n(!0);
+}, L = "0.4.0-alpha.2", N = "React-Uploader", U = () => `${N}/${L}`, w = ({ condition: e, fallback: t, children: o, ...s }) => e ? /* @__PURE__ */ a.createElement(y, { fallback: t, ...s }, o) : /* @__PURE__ */ a.createElement(a.Fragment, null, t), h = () => {
+  const [e, t] = B(!1);
+  return R(() => {
+    typeof window < "u" && t(!0);
   }, []), e;
 };
 i.registerBlocks(i);
-const N = f({
-  react: l,
+const _ = v({
+  react: a,
   tag: "lr-file-uploader-regular",
   elClass: i.FileUploaderRegular
 }), X = ({
   ctxName: e,
-  className: n,
-  classNameUploader: a,
-  apiRef: o,
+  className: t,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: n,
   ...r
 }) => {
-  const t = m(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: s } = m(
+  const l = f(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: d } = f(
     () => C(r),
     [r]
-  ), d = w();
-  return /* @__PURE__ */ l.createElement(h, { condition: d, fallback: /* @__PURE__ */ l.createElement("h1", null, "Loading ...") }, /* @__PURE__ */ l.createElement("div", { className: n }, /* @__PURE__ */ l.createElement(v, { userAgentIntegration: U(), "ctx-name": t, ...s }), /* @__PURE__ */ l.createElement(
+  ), u = h();
+  return /* @__PURE__ */ a.createElement(w, { condition: u, fallback: n }, /* @__PURE__ */ a.createElement("div", { className: t }, /* @__PURE__ */ a.createElement(g, { userAgentIntegration: U(), "ctx-name": l, ...d }), /* @__PURE__ */ a.createElement(
     P,
     {
-      ref: o,
-      "ctx-name": t,
+      ref: s,
+      "ctx-name": l,
       ...c
     }
-  ), /* @__PURE__ */ l.createElement(N, { class: a, "ctx-name": t })));
+  ), /* @__PURE__ */ a.createElement(_, { class: o, "ctx-name": l })));
 };
 i.registerBlocks(i);
-const _ = f({
-  react: l,
+const H = v({
+  react: a,
   tag: "lr-file-uploader-minimal",
   elClass: i.FileUploaderMinimal
 }), D = ({
   ctxName: e,
-  className: n,
-  classNameUploader: a,
-  apiRef: o,
+  className: t,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: n,
   ...r
 }) => {
-  const t = m(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: s } = m(
+  const l = f(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: d } = f(
     () => C(r),
     [r]
-  ), d = w();
-  return /* @__PURE__ */ l.createElement(h, { condition: d, fallback: /* @__PURE__ */ l.createElement("h1", null, "Loading ...") }, /* @__PURE__ */ l.createElement("div", { className: n }, /* @__PURE__ */ l.createElement(v, { userAgentIntegration: U(), "ctx-name": t, ...s }), /* @__PURE__ */ l.createElement(
+  ), u = h();
+  return /* @__PURE__ */ a.createElement(w, { condition: u, fallback: n }, /* @__PURE__ */ a.createElement("div", { className: t }, /* @__PURE__ */ a.createElement(g, { userAgentIntegration: U(), "ctx-name": l, ...d }), /* @__PURE__ */ a.createElement(
     P,
     {
-      ref: o,
-      "ctx-name": t,
+      ref: s,
+      "ctx-name": l,
       ...c
     }
-  ), /* @__PURE__ */ l.createElement(_, { class: a, "ctx-name": t })));
+  ), /* @__PURE__ */ a.createElement(H, { class: o, "ctx-name": l })));
 };
 i.registerBlocks(i);
-const H = f({
-  react: l,
+const S = v({
+  react: a,
   tag: "lr-file-uploader-inline",
   elClass: i.FileUploaderMinimal
 }), V = ({
   ctxName: e,
-  className: n,
-  classNameUploader: a,
-  apiRef: o,
+  className: t,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: n,
   ...r
 }) => {
-  const t = m(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: s } = m(
+  const l = f(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: d } = f(
     () => C(r),
     [r]
-  ), d = w();
-  return /* @__PURE__ */ l.createElement(h, { condition: d, fallback: /* @__PURE__ */ l.createElement("h1", null, "Loading ...") }, /* @__PURE__ */ l.createElement("div", { className: n }, /* @__PURE__ */ l.createElement(v, { userAgentIntegration: U(), "ctx-name": t, ...s }), /* @__PURE__ */ l.createElement(
+  ), u = h();
+  return /* @__PURE__ */ a.createElement(w, { condition: u, fallback: n }, /* @__PURE__ */ a.createElement("div", { className: t }, /* @__PURE__ */ a.createElement(g, { userAgentIntegration: U(), "ctx-name": l, ...d }), /* @__PURE__ */ a.createElement(
     P,
     {
-      ref: o,
-      "ctx-name": t,
+      ref: s,
+      "ctx-name": l,
       ...c
     }
-  ), /* @__PURE__ */ l.createElement(H, { class: a, "ctx-name": t })));
+  ), /* @__PURE__ */ a.createElement(S, { class: o, "ctx-name": l })));
 };
 export {
   V as FileUploaderInline,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uploadcare/react-uploader",
   "description": "React component for file uploads using Uploadcare",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.2",
   "private": false,
   "type": "module",
   "files": [