@uploadcare/react-uploader 1.10.2 → 1.11.0-alpha.0

package/README.md

@@ -54,7 +54,6 @@ We provide a full set of props that are used in File Uploader. For review we sug
 
 For convenience, we provide the ability to access the File Uploader API using `apiRef`.
 You can see what methods are available in `apiRef` in the [documentation][uc-docs-file-uploader-api].
-It is important to note that we now pass all InstanceType from UploadCtxProvider.
 
 ```jsx
 import React, {useRef, useEffect} from "react";
@@ -65,7 +64,7 @@ import {
 import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
-  const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
+  const uploaderRef = useRef<UploadCtxProvider | null>(null);
 
   <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
 }
@@ -155,4 +154,4 @@ request at [hello@uploadcare.com][uc-email-hello].
 
 [uc-docs-events]: https://uploadcare.com/docs/file-uploader/events/
 [uc-docs-file-uploader-api]: https://uploadcare.com/docs/file-uploader/api
-[uc-docs-file-uploader-options]: https://uploadcare.com/docs/file-uploader/options/
+[uc-docs-file-uploader-options]: https://uploadcare.com/docs/file-uploader/options/

package/dist/AdapterUploadCtxProvider-CXgz9j-S.cjs

@@ -0,0 +1 @@
+"use strict";const f=require("react"),w=require("@uploadcare/file-uploader");function y(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const v=y(w),b=new Set(["children","ref","style","className"]),O=(e={})=>Object==null?void 0:Object.keys(e).reduce((t,n)=>{var s,r;const o=e==null?void 0:e[n],a=`on${(r=(s=o==null?void 0:o.split("-"))==null?void 0:s.map(c=>c.charAt(0).toUpperCase()+c.slice(1)))==null?void 0:r.join("")}`;return t[a]=o,t},{}),m=new WeakMap,j=e=>{let t=m.get(e);return t===void 0&&(t=new Map,m.set(e,t)),t},E=({node:e,nameProp:t,valueProp:n,prevValueProp:s,event:r})=>{if(r!==void 0){if(n!==s){const o=j(e),a=o.has(r);let c=o.get(r);n!==void 0?a?c.handleEvent=n:(c={handleEvent:n},o.set(r,c),e.addEventListener(r,u=>c.handleEvent(u.detail))):a&&(o.delete(r),e.removeEventListener(r,c))}return}e[t]=n,n==null&&t in HTMLElement.prototype&&e.removeAttribute(t)},U=(e,t,n)=>{const s={},r={};return Object.entries(e).forEach(([o,a])=>{b.has(o)?s[o==="className"?"class":o]=a:t.has(o)||o in n.prototype?r[o]=a:s[o]=a}),{reactProps:s,customElProps:r}},g=({react:e,tag:t,elClass:n,schemaEvents:s})=>{const r=O(s),o=new Set(Object.keys(r??{})),a=e.forwardRef((c,u)=>{const p=e.useRef(new Map),d=e.useRef(null),{reactProps:C,customElProps:P}=U(c,o,n);return e.useLayoutEffect(()=>{if(d.current===null)return;const i=new Map;for(const l in P)E({node:d.current,nameProp:l,valueProp:P[l],prevValueProp:p.current.get(l),event:r[l]}),p.current.delete(l),i.set(l,c[l]);for(const[l,h]of p.current)E({node:d.current,nameProp:l,valueProp:void 0,prevValueProp:h,event:r[l]});p.current=i}),e.createElement(t??n.__tag,{...C,ref:e.useCallback(i=>{d.current=i,typeof u=="function"?u(i):u!==null&&(u.current=i)},[u])})});return a.displayName=n.name,a},A=({children:e})=>e,M=()=>{const[e,t]=f.useState(!1);return f.useEffect(()=>{typeof window<"u"&&t(!0)},[]),e},N=e=>{const t={},n={},s={};for(const[r,o]of Object.entries(e)){if(r.startsWith("on")){t[r]=o;continue}if(r==="headless"){s[r]=o;continue}n[r]=o}return{eventHandlers:t,uploader:s,config:n}},S="1.11.0-alpha.0",I="React-Uploader",_=()=>`${I}/${S}`,k=g({react:f,tag:"uc-config",elClass:v.Config}),x=g({react:f,tag:"uc-upload-ctx-provider",elClass:v.UploadCtxProvider,schemaEvents:v.UploadCtxProvider.EventType});exports.AdapterConfig=k;exports.AdapterUploadCtxProvider=x;exports.ConditionalSuspense=A;exports.getCalcPropertyOfProps=N;exports.getUserAgentIntegration=_;exports.j=g;exports.useIsBrowser=M;

package/dist/AdapterUploadCtxProvider-KEFWb73d.js

@@ -0,0 +1,106 @@
+import P, { useState as w, useEffect as y } from "react";
+import * as v from "@uploadcare/file-uploader";
+const b = /* @__PURE__ */ new Set(["children", "ref", "style", "className"]), j = (e = {}) => Object == null ? void 0 : Object.keys(e).reduce((n, o) => {
+  var s, t;
+  const r = e == null ? void 0 : e[o], a = `on${(t = (s = r == null ? void 0 : r.split("-")) == null ? void 0 : s.map((c) => c.charAt(0).toUpperCase() + c.slice(1))) == null ? void 0 : t.join("")}`;
+  return n[a] = r, n;
+}, {}), m = /* @__PURE__ */ new WeakMap(), A = (e) => {
+  let n = m.get(e);
+  return n === void 0 && (n = /* @__PURE__ */ new Map(), m.set(e, n)), n;
+}, E = ({ node: e, nameProp: n, valueProp: o, prevValueProp: s, event: t }) => {
+  if (t !== void 0) {
+    if (o !== s) {
+      const r = A(e), a = r.has(t);
+      let c = r.get(t);
+      o !== void 0 ? a ? c.handleEvent = o : (c = { handleEvent: o }, r.set(t, c), e.addEventListener(t, (u) => c.handleEvent(u.detail))) : a && (r.delete(t), e.removeEventListener(t, c));
+    }
+    return;
+  }
+  e[n] = o, o == null && n in HTMLElement.prototype && e.removeAttribute(n);
+}, M = (e, n, o) => {
+  const s = {}, t = {};
+  return Object.entries(e).forEach(([r, a]) => {
+    b.has(r) ? s[r === "className" ? "class" : r] = a : n.has(r) || r in o.prototype ? t[r] = a : s[r] = a;
+  }), { reactProps: s, customElProps: t };
+}, g = ({
+  react: e,
+  // https://react.dev/warnings/invalid-hook-call-warning
+  tag: n,
+  elClass: o,
+  schemaEvents: s
+}) => {
+  const t = j(s), r = new Set(Object.keys(t ?? {})), a = e.forwardRef((c, u) => {
+    const p = e.useRef(/* @__PURE__ */ new Map()), d = e.useRef(null), { reactProps: h, customElProps: f } = M(c, r, o);
+    return e.useLayoutEffect(() => {
+      if (d.current === null) return;
+      const i = /* @__PURE__ */ new Map();
+      for (const l in f)
+        E({
+          node: d.current,
+          nameProp: l,
+          valueProp: f[l],
+          prevValueProp: p.current.get(l),
+          event: t[l]
+        }), p.current.delete(l), i.set(l, c[l]);
+      for (const [l, C] of p.current)
+        E({
+          node: d.current,
+          nameProp: l,
+          valueProp: void 0,
+          prevValueProp: C,
+          event: t[l]
+        });
+      p.current = i;
+    }), e.createElement(n ?? o.__tag, {
+      ...h,
+      ref: e.useCallback(
+        (i) => {
+          d.current = i, typeof u == "function" ? u(i) : u !== null && (u.current = i);
+        },
+        [u]
+      )
+    });
+  });
+  return a.displayName = o.name, a;
+}, x = ({ children: e }) => e, R = () => {
+  const [e, n] = w(!1);
+  return y(() => {
+    typeof window < "u" && n(!0);
+  }, []), e;
+}, k = (e) => {
+  const n = {}, o = {}, s = {};
+  for (const [t, r] of Object.entries(e)) {
+    if (t.startsWith("on")) {
+      n[t] = r;
+      continue;
+    }
+    if (t === "headless") {
+      s[t] = r;
+      continue;
+    }
+    o[t] = r;
+  }
+  return {
+    eventHandlers: n,
+    uploader: s,
+    config: o
+  };
+}, O = "1.11.0-alpha.0", U = "React-Uploader", I = () => `${U}/${O}`, L = g({
+  react: P,
+  tag: "uc-config",
+  elClass: v.Config
+}), S = g({
+  react: P,
+  tag: "uc-upload-ctx-provider",
+  elClass: v.UploadCtxProvider,
+  schemaEvents: v.UploadCtxProvider.EventType
+});
+export {
+  L as A,
+  x as C,
+  I as a,
+  S as b,
+  k as g,
+  g as j,
+  R as u
+};

package/dist/FileUploaderInline-Be5rZcwa.js

@@ -0,0 +1,42 @@
+import * as t from "@uploadcare/file-uploader";
+import e, { useMemo as d } from "react";
+import { g, u as f, C, A as u, a as A, b as U, j as E } from "./AdapterUploadCtxProvider-KEFWb73d.js";
+t.defineComponents(t);
+const I = E({
+  react: e,
+  tag: "uc-file-uploader-inline",
+  elClass: t.FileUploaderMinimal
+}), F = ({
+  ctxName: r,
+  className: a,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: i,
+  ...l
+}) => {
+  const n = d(() => r ?? t.UID.generate(), [r]), { eventHandlers: c, config: m } = g(l), p = f();
+  return /* @__PURE__ */ e.createElement(C, { condition: p, fallback: i }, /* @__PURE__ */ e.createElement("div", { className: a }, /* @__PURE__ */ e.createElement(
+    u,
+    {
+      userAgentIntegration: A(),
+      "ctx-name": n,
+      ...m
+    }
+  ), /* @__PURE__ */ e.createElement(
+    U,
+    {
+      ref: s,
+      "ctx-name": n,
+      ...c
+    }
+  ), /* @__PURE__ */ e.createElement(
+    I,
+    {
+      class: o,
+      "ctx-name": n
+    }
+  )));
+};
+export {
+  F as FileUploaderInline
+};

package/dist/FileUploaderInline-p5i8fm-m.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("@uploadcare/file-uploader"),t=require("react"),n=require("./AdapterUploadCtxProvider-CXgz9j-S.cjs");function f(e){const o=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(o,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const l=f(g);l.defineComponents(l);const m=n.j({react:t,tag:"uc-file-uploader-inline",elClass:l.FileUploaderMinimal}),C=({ctxName:e,className:o,classNameUploader:r,apiRef:a,fallback:c,...s})=>{const i=t.useMemo(()=>e??l.UID.generate(),[e]),{eventHandlers:d,config:u}=n.getCalcPropertyOfProps(s),p=n.useIsBrowser();return t.createElement(n.ConditionalSuspense,{condition:p,fallback:c},t.createElement("div",{className:o},t.createElement(n.AdapterConfig,{userAgentIntegration:n.getUserAgentIntegration(),"ctx-name":i,...u}),t.createElement(n.AdapterUploadCtxProvider,{ref:a,"ctx-name":i,...d}),t.createElement(m,{class:r,"ctx-name":i})))};exports.FileUploaderInline=C;

package/dist/FileUploaderMinimal-BRC0snXP.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@uploadcare/file-uploader"),t=require("react"),r=require("./AdapterUploadCtxProvider-CXgz9j-S.cjs");function g(e){const o=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(o,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const i=g(m);i.defineComponents(i);const f=r.j({react:t,tag:"uc-file-uploader-minimal",elClass:i.FileUploaderMinimal}),C=({ctxName:e,className:o,classNameUploader:n,apiRef:a,fallback:c,...s})=>{const l=t.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:d,config:u}=r.getCalcPropertyOfProps(s),p=r.useIsBrowser();return t.createElement(r.ConditionalSuspense,{condition:p,fallback:c},t.createElement("div",{className:o},t.createElement(r.AdapterConfig,{userAgentIntegration:r.getUserAgentIntegration(),"ctx-name":l,...u}),t.createElement(r.AdapterUploadCtxProvider,{ref:a,"ctx-name":l,...d}),t.createElement(f,{class:n,"ctx-name":l})))};exports.FileUploaderMinimal=C;

package/dist/FileUploaderMinimal-Ba6hvwTt.js

@@ -0,0 +1,42 @@
+import * as t from "@uploadcare/file-uploader";
+import e, { useMemo as d } from "react";
+import { g, u as f, C, A as u, a as A, b as U, j as E } from "./AdapterUploadCtxProvider-KEFWb73d.js";
+t.defineComponents(t);
+const M = E({
+  react: e,
+  tag: "uc-file-uploader-minimal",
+  elClass: t.FileUploaderMinimal
+}), v = ({
+  ctxName: r,
+  className: n,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: i,
+  ...l
+}) => {
+  const a = d(() => r ?? t.UID.generate(), [r]), { eventHandlers: m, config: c } = g(l), p = f();
+  return /* @__PURE__ */ e.createElement(C, { condition: p, fallback: i }, /* @__PURE__ */ e.createElement("div", { className: n }, /* @__PURE__ */ e.createElement(
+    u,
+    {
+      userAgentIntegration: A(),
+      "ctx-name": a,
+      ...c
+    }
+  ), /* @__PURE__ */ e.createElement(
+    U,
+    {
+      ref: s,
+      "ctx-name": a,
+      ...m
+    }
+  ), /* @__PURE__ */ e.createElement(
+    M,
+    {
+      class: o,
+      "ctx-name": a
+    }
+  )));
+};
+export {
+  v as FileUploaderMinimal
+};

package/dist/FileUploaderRegular-BvY0ea1c.js

@@ -0,0 +1,43 @@
+import * as r from "@uploadcare/file-uploader";
+import e, { useMemo as m } from "react";
+import { g as u, u as f, C, A, a as U, b as E, j as x } from "./AdapterUploadCtxProvider-KEFWb73d.js";
+r.defineComponents(r);
+const I = x({
+  react: e,
+  tag: "uc-file-uploader-regular",
+  elClass: r.FileUploaderRegular
+}), F = ({
+  ctxName: a,
+  className: o,
+  classNameUploader: n,
+  apiRef: s,
+  fallback: l,
+  ...c
+}) => {
+  const t = m(() => a ?? r.UID.generate(), [a]), { eventHandlers: i, config: p, uploader: d } = u(c), g = f();
+  return /* @__PURE__ */ e.createElement(C, { condition: g, fallback: l }, /* @__PURE__ */ e.createElement("div", { className: o }, /* @__PURE__ */ e.createElement(
+    A,
+    {
+      userAgentIntegration: U(),
+      "ctx-name": t,
+      ...p
+    }
+  ), /* @__PURE__ */ e.createElement(
+    E,
+    {
+      ref: s,
+      "ctx-name": t,
+      ...i
+    }
+  ), /* @__PURE__ */ e.createElement(
+    I,
+    {
+      class: n,
+      "ctx-name": t,
+      ...d
+    }
+  )));
+};
+export {
+  F as FileUploaderRegular
+};

package/dist/FileUploaderRegular-DgBSqnYg.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@uploadcare/file-uploader"),t=require("react"),r=require("./AdapterUploadCtxProvider-CXgz9j-S.cjs");function m(e){const o=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(o,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const l=m(f);l.defineComponents(l);const C=r.j({react:t,tag:"uc-file-uploader-regular",elClass:l.FileUploaderRegular}),U=({ctxName:e,className:o,classNameUploader:n,apiRef:a,fallback:s,...i})=>{const c=t.useMemo(()=>e??l.UID.generate(),[e]),{eventHandlers:u,config:d,uploader:p}=r.getCalcPropertyOfProps(i),g=r.useIsBrowser();return t.createElement(r.ConditionalSuspense,{condition:g,fallback:s},t.createElement("div",{className:o},t.createElement(r.AdapterConfig,{userAgentIntegration:r.getUserAgentIntegration(),"ctx-name":c,...d}),t.createElement(r.AdapterUploadCtxProvider,{ref:a,"ctx-name":c,...u}),t.createElement(C,{class:n,"ctx-name":c,...p})))};exports.FileUploaderRegular=U;

package/dist/nextjs.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("next/dynamic"),r=l(()=>Promise.resolve().then(()=>require("./FileUploaderMinimal-PCu1vQTw.cjs")).then(e=>e.FileUploaderMinimal),{ssr:!1}),i=l(()=>Promise.resolve().then(()=>require("./FileUploaderRegular-7siZ0stp.cjs")).then(e=>e.FileUploaderRegular),{ssr:!1}),o=l(()=>Promise.resolve().then(()=>require("./FileUploaderInline-CZAiSm9W.cjs")).then(e=>e.FileUploaderInline),{ssr:!1});exports.FileUploaderInline=o;exports.FileUploaderMinimal=r;exports.FileUploaderRegular=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("next/dynamic"),r=l(()=>Promise.resolve().then(()=>require("./FileUploaderInline-p5i8fm-m.cjs")).then(e=>e.FileUploaderInline),{ssr:!1}),i=l(()=>Promise.resolve().then(()=>require("./FileUploaderMinimal-BRC0snXP.cjs")).then(e=>e.FileUploaderMinimal),{ssr:!1}),o=l(()=>Promise.resolve().then(()=>require("./FileUploaderRegular-DgBSqnYg.cjs")).then(e=>e.FileUploaderRegular),{ssr:!1});exports.FileUploaderInline=r;exports.FileUploaderMinimal=i;exports.FileUploaderRegular=o;

package/dist/nextjs.d.ts

@@ -28,13 +28,13 @@ declare type EventProps = Partial<TEventsSchema>;
 
 export declare const FileUploaderInline: ComponentType<TProps<"Inline">>;
 
-declare type FileUploaderInlineProps = {};
+declare type FileUploaderInlineProps = Record<string, never>;
 
 export declare const FileUploaderMinimal: ComponentType<TProps<"Minimal">>;
 
-declare type FileUploaderMinimalProps = {};
+declare type FileUploaderMinimalProps = Record<string, never>;
 
-declare type FileUploaderModes = 'Regular' | 'Minimal' | 'Inline';
+declare type FileUploaderModes = "Regular" | "Minimal" | "Inline";
 
 export declare const FileUploaderRegular: ComponentType<TProps<"Regular">>;
 
@@ -53,7 +53,7 @@ declare type TExtraPrefixOn<S extends string> = `on${Capitalize<S>}`;
 
 declare type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCase<S>>;
 
-declare type TProps<T extends FileUploaderModes> = CommonProps & ConfigProps & EventProps & UploadCtxPropviderProps & Pick<TProps_2, "fallback"> & (T extends "Regular" ? FileUploaderRegularProps : T extends "Minimal" ? FileUploaderMinimalProps : T extends "Inline" ? FileUploaderInlineProps : never);
+declare type TProps<T extends FileUploaderModes> = CommonProps & ConfigProps & EventProps & UploadCtxProviderProps & Pick<TProps_2, "fallback"> & (T extends "Regular" ? FileUploaderRegularProps : T extends "Minimal" ? FileUploaderMinimalProps : T extends "Inline" ? FileUploaderInlineProps : never);
 
 declare type TProps_2 = {
     fallback?: default_2.ReactNode | default_2.ReactPortal | null;
@@ -63,8 +63,8 @@ declare type TProps_2 = {
 
 declare type TToCamelCase<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Lowercase<Head>}${Capitalize<TToCamelCase<Tail>>}` : Lowercase<S>;
 
-declare type UploadCtxPropviderProps = {
-    apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+declare type UploadCtxProviderProps = {
+    apiRef?: Ref<UploadCtxProvider>;
 };
 
 export { }

package/dist/nextjs.js

@@ -1,16 +1,16 @@
 import l from "next/dynamic";
 const r = l(
-  () => import("./FileUploaderMinimal-Br6g5xIZ.js").then((e) => e.FileUploaderMinimal),
+  () => import("./FileUploaderInline-Be5rZcwa.js").then((e) => e.FileUploaderInline),
   { ssr: !1 }
 ), o = l(
-  () => import("./FileUploaderRegular-DOI7Lze6.js").then((e) => e.FileUploaderRegular),
+  () => import("./FileUploaderMinimal-Ba6hvwTt.js").then((e) => e.FileUploaderMinimal),
   { ssr: !1 }
 ), a = l(
-  () => import("./FileUploaderInline-vnUbJRWK.js").then((e) => e.FileUploaderInline),
+  () => import("./FileUploaderRegular-BvY0ea1c.js").then((e) => e.FileUploaderRegular),
   { ssr: !1 }
 );
 export {
-  a as FileUploaderInline,
-  r as FileUploaderMinimal,
-  o as FileUploaderRegular
+  r as FileUploaderInline,
+  o as FileUploaderMinimal,
+  a as FileUploaderRegular
 };

package/dist/react-uploader.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./FileUploaderRegular-7siZ0stp.cjs"),r=require("./FileUploaderMinimal-PCu1vQTw.cjs"),i=require("./FileUploaderInline-CZAiSm9W.cjs"),e=require("@uploadcare/file-uploader");exports.FileUploaderRegular=l.FileUploaderRegular;exports.FileUploaderMinimal=r.FileUploaderMinimal;exports.FileUploaderInline=i.FileUploaderInline;Object.defineProperty(exports,"UploadCtxProvider",{enumerable:!0,get:()=>e.UploadCtxProvider});Object.defineProperty(exports,"defineLocale",{enumerable:!0,get:()=>e.defineLocale});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@uploadcare/file-uploader"),l=require("./FileUploaderInline-p5i8fm-m.cjs"),r=require("./FileUploaderMinimal-BRC0snXP.cjs"),i=require("./FileUploaderRegular-DgBSqnYg.cjs");Object.defineProperty(exports,"UploadCtxProvider",{enumerable:!0,get:()=>e.UploadCtxProvider});Object.defineProperty(exports,"defineLocale",{enumerable:!0,get:()=>e.defineLocale});exports.FileUploaderInline=l.FileUploaderInline;exports.FileUploaderMinimal=r.FileUploaderMinimal;exports.FileUploaderRegular=i.FileUploaderRegular;