@uploadcare/react-uploader 0.5.0 → 0.5.2

package/README.md

@@ -58,7 +58,8 @@ Each component serves specific use cases and can be easily implemented into your
 ### Regular
 
 ```jsx
-import {FileUploaderRegular} from "@uploadcare/react-uploader";
+import { FileUploaderRegular } from "@uploadcare/react-uploader";
+import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular pubkey="YOUR_PUBLIC_KEY"/>;
 ```
@@ -66,7 +67,8 @@ import {FileUploaderRegular} from "@uploadcare/react-uploader";
 ### Inline
 
 ```jsx
-import {FileUploaderInline} from "@uploadcare/react-uploader";
+import { FileUploaderInline } from "@uploadcare/react-uploader";
+import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderInline pubkey="YOUR_PUBLIC_KEY"/>;
 ```
@@ -74,7 +76,8 @@ import {FileUploaderInline} from "@uploadcare/react-uploader";
 ### Minimal
 
 ```jsx
-import {FileUploaderMinimal} from "@uploadcare/react-uploader";
+import { FileUploaderMinimal } from "@uploadcare/react-uploader";
+import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderMinimal pubkey="YOUR_PUBLIC_KEY"/>;
 ```
@@ -91,7 +94,8 @@ You can customize the appearance of the React uploader using the className prop,
 classes to the uploader `FileUploader[Regular | Minimal | Inline]` wrapper.
 
 ```jsx
-import {FileUploaderRegular} from "@uploadcare/react-uploader";
+import { FileUploaderRegular } from "@uploadcare/react-uploader";
+import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
 ```
@@ -113,6 +117,7 @@ import {
     FileUploaderRegular,
     UploadCtxProvider
 } from "@uploadcare/react-uploader";
+import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
     const uploaderRef = useRef < InstanceType < UploadCtxProvider > | null > (null);
@@ -133,7 +138,8 @@ The principle of converting events from blocks to React Uploader:
 Example:
 
 ```jsx
-import {FileUploaderRegular} from "@uploadcare/react-uploader";
+import { FileUploaderRegular } from "@uploadcare/react-uploader";
+import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular
     pubkey="YOUR_PUBLIC_KEY"

package/dist/react-uploader.cjs

@@ -1 +1 @@
-"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},A=({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:O,customElProps:w}=R(s,o,n);return e.useLayoutEffect(()=>{if(g.current===null)return;const m=new Map;for(const p in w)A({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,h]of d.current)A({node:g.current,nameProp:p,valueProp:void 0,prevValueProp:h,event:l[p]});d.current=m}),e.createElement(t??n.__tag,{...O,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",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=_;
+"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},A=({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:O,customElProps:w}=R(s,o,n);return e.useLayoutEffect(()=>{if(g.current===null)return;const m=new Map;for(const p in w)A({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,h]of d.current)A({node:g.current,nameProp:p,valueProp:void 0,prevValueProp:h,event:l[p]});d.current=m}),e.createElement(t??n.__tag,{...O,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.5.1",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.js

@@ -97,7 +97,7 @@ const b = /* @__PURE__ */ new Set([
     eventHandlers: t,
     config: o
   };
-}, L = "0.4.0", 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), A = () => {
+}, L = "0.5.1", 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), A = () => {
   const [e, t] = B(!1);
   return R(() => {
     typeof window < "u" && t(!0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uploadcare/react-uploader",
   "description": "React component for file uploads using Uploadcare",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "private": false,
   "type": "module",
   "files": [
@@ -81,5 +81,5 @@
     "react hook file upload",
     "front-end"
   ],
-  "gitHead": "1edddd9395d2d73bf92a8b9508c8df2e2aa6a89f"
+  "gitHead": "5bbd4fae95284f9c932ece23a5686d34abfd1416"
 }