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

package/dist/react-uploader.js

@@ -1,217 +1,190 @@
-import React, { Suspense, useState, useEffect, useMemo } from "react";
-import * as LR from "@uploadcare/blocks";
-import { UploadCtxProvider, defineLocale } from "@uploadcare/blocks";
-const P = /* @__PURE__ */ new Set([
+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 b = /* @__PURE__ */ new Set([
   "children",
   "ref",
   "style",
   "className"
-]), w = (e = {}) => Object == null ? void 0 : Object.keys(e).reduce((r, s) => {
-  var t, c;
-  const o = e == null ? void 0 : e[s], n = `on${(c = (t = o == null ? void 0 : o.split("-")) == null ? void 0 : t.map((i) => i.charAt(0).toUpperCase() + i.slice(1))) == null ? void 0 : c.join("")}`;
-  return r[n] = o, r;
-}, {}), m = /* @__PURE__ */ new WeakMap(), g = (e) => {
-  let r = m.get(e);
-  return r === void 0 && (r = /* @__PURE__ */ new Map(), m.set(e, r)), r;
-}, E = ({
+]), 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: r,
-  valueProp: s,
-  prevValueProp: o,
+  nameProp: t,
+  valueProp: o,
+  prevValueProp: s,
   event: n
 }) => {
   if (n !== void 0) {
-    if (s !== o) {
-      const t = g(e), c = t.has(n);
-      let i = t.get(n);
-      s !== void 0 ? c ? i.handleEvent = s : (i = { handleEvent: s }, t.set(n, i), e.addEventListener(
+    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,
-        (a) => i.handleEvent(a.detail)
-      )) : c && (t.delete(n), e.removeEventListener(n, i));
+        (d) => c.handleEvent(d.detail)
+      )) : l && (r.delete(n), e.removeEventListener(n, c));
     }
     return;
   }
-  e[r] = s, s == null && r in HTMLElement.prototype && e.removeAttribute(r);
-}, M = (e, r, s) => {
-  const o = {}, n = {};
-  return Object.entries(e).forEach(([t, c]) => {
-    P.has(t) ? o[t === "className" ? "class" : t] = c : r.has(t) || t in s.prototype ? n[t] = c : o[t] = c;
-  }), { reactProps: o, customElProps: n };
-}, b = ({
+  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: r,
-  elClass: s,
-  schemaEvents: o
+  tag: t,
+  elClass: o,
+  schemaEvents: s
 }) => {
-  const n = w(o), t = new Set(Object.keys(n ?? {})), c = e.forwardRef(
-    (i, a) => {
-      const f = e.useRef(/* @__PURE__ */ new Map()), p = e.useRef(null), { reactProps: h, customElProps: d } = M(i, t, s);
+  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 (p.current === null)
+        if (E.current === null)
           return;
-        const u = /* @__PURE__ */ new Map();
-        for (const l in d)
-          E({
-            node: p.current,
-            nameProp: l,
-            valueProp: d[l],
-            prevValueProp: f.current.get(l),
-            event: n[l]
-          }), f.current.delete(l), u.set(l, i[l]);
-        for (const [l, v] of f.current)
-          E({
-            node: p.current,
-            nameProp: l,
+        const m = /* @__PURE__ */ new Map();
+        for (const p in A)
+          x({
+            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: E.current,
+            nameProp: p,
             valueProp: void 0,
-            prevValueProp: v,
-            event: n[l]
+            prevValueProp: F,
+            event: n[p]
           });
-        f.current = u;
-      }), e.createElement(r ?? s.__tag, {
-        ...h,
+        u.current = m;
+      }), e.createElement(t ?? o.__tag, {
+        ...I,
         ref: e.useCallback(
-          (u) => {
-            p.current = u, typeof a == "function" ? a(u) : a !== null && (a.current = u);
+          (m) => {
+            E.current = m, typeof d == "function" ? d(m) : d !== null && (d.current = m);
           },
-          [a]
+          [d]
         )
       });
     }
   );
-  return c.displayName = s.name, c;
-};
-const AdapterConfig = b({
-  react: React,
+  return l.displayName = o.name, l;
+}, g = v({
+  react: a,
   tag: "lr-config",
-  elClass: LR.Config
-});
-const AdapterUploadCtxProvider = b({
-  react: React,
+  elClass: i.Config
+}), P = v({
+  react: a,
   tag: "lr-upload-ctx-provider",
-  elClass: LR.UploadCtxProvider,
-  schemaEvents: LR.UploadCtxProvider.EventType
-});
-const getCalcPropertyOfProps = (props) => {
-  const eventHandlers = {};
-  const config = {};
-  Object.entries(props).forEach(([key, value]) => {
-    if (key.startsWith("on")) {
-      eventHandlers[key] = value;
-    } else {
-      config[key] = value;
-    }
-  });
-  return {
-    eventHandlers,
-    config
+  elClass: i.UploadCtxProvider,
+  schemaEvents: i.UploadCtxProvider.EventType
+}), C = (e) => {
+  const t = {}, o = {};
+  return Object.entries(e).forEach(([s, n]) => {
+    s.startsWith("on") ? t[s] = n : o[s] = n;
+  }), {
+    eventHandlers: t,
+    config: o
   };
+}, 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;
 };
-const version = "0.4.0-alpha.0";
-const NAME_EXTENTION = "React-Uploader";
-const getUserAgentIntegration = () => {
-  return `${NAME_EXTENTION}/${version}`;
-};
-const ConditionalSuspense = ({ condition, fallback, children, ...rest }) => {
-  return condition ? /* @__PURE__ */ React.createElement(Suspense, { fallback, ...rest }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, fallback);
-};
-const useIsBrowser = () => {
-  const [isBrowser, setIsBrowser] = useState(false);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      setIsBrowser(true);
-    }
-  }, []);
-  return isBrowser;
-};
-LR.registerBlocks(LR);
-const AdapterFileUploaderRegular = b({
-  react: React,
+i.registerBlocks(i);
+const _ = v({
+  react: a,
   tag: "lr-file-uploader-regular",
-  elClass: LR.FileUploaderRegular
-});
-const FileUploaderRegular = ({
-  ctxName,
-  className,
-  classNameUploader,
-  apiRef,
-  ...props
+  elClass: i.FileUploaderRegular
+}), X = ({
+  ctxName: e,
+  className: t,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: n,
+  ...r
 }) => {
-  const CTX_NAME = useMemo(() => ctxName ?? LR.UID.generate(), [ctxName]);
-  const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps(props),
-    [props]
-  );
-  const isBrowser = useIsBrowser();
-  return /* @__PURE__ */ React.createElement(ConditionalSuspense, { condition: isBrowser, fallback: /* @__PURE__ */ React.createElement("h1", null, "Loading ...") }, /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(AdapterConfig, { userAgentIntegration: getUserAgentIntegration(), "ctx-name": CTX_NAME, ...config }), /* @__PURE__ */ React.createElement(
-    AdapterUploadCtxProvider,
+  const l = f(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: d } = f(
+    () => C(r),
+    [r]
+  ), 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: apiRef,
-      "ctx-name": CTX_NAME,
-      ...eventHandlers
+      ref: s,
+      "ctx-name": l,
+      ...c
     }
-  ), /* @__PURE__ */ React.createElement(AdapterFileUploaderRegular, { class: classNameUploader, "ctx-name": CTX_NAME })));
+  ), /* @__PURE__ */ a.createElement(_, { class: o, "ctx-name": l })));
 };
-LR.registerBlocks(LR);
-const AdapterFileUploaderMinimal = b({
-  react: React,
+i.registerBlocks(i);
+const H = v({
+  react: a,
   tag: "lr-file-uploader-minimal",
-  elClass: LR.FileUploaderMinimal
-});
-const FileUploaderMinimal = ({
-  ctxName,
-  className,
-  classNameUploader,
-  apiRef,
-  ...props
+  elClass: i.FileUploaderMinimal
+}), D = ({
+  ctxName: e,
+  className: t,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: n,
+  ...r
 }) => {
-  const CTX_NAME = useMemo(() => ctxName ?? LR.UID.generate(), [ctxName]);
-  const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps(props),
-    [props]
-  );
-  const isBrowser = useIsBrowser();
-  return /* @__PURE__ */ React.createElement(ConditionalSuspense, { condition: isBrowser, fallback: /* @__PURE__ */ React.createElement("h1", null, "Loading ...") }, /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(AdapterConfig, { userAgentIntegration: getUserAgentIntegration(), "ctx-name": CTX_NAME, ...config }), /* @__PURE__ */ React.createElement(
-    AdapterUploadCtxProvider,
+  const l = f(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: d } = f(
+    () => C(r),
+    [r]
+  ), 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: apiRef,
-      "ctx-name": CTX_NAME,
-      ...eventHandlers
+      ref: s,
+      "ctx-name": l,
+      ...c
     }
-  ), /* @__PURE__ */ React.createElement(AdapterFileUploaderMinimal, { class: classNameUploader, "ctx-name": CTX_NAME })));
+  ), /* @__PURE__ */ a.createElement(H, { class: o, "ctx-name": l })));
 };
-LR.registerBlocks(LR);
-const AdapterFileUploaderInline = b({
-  react: React,
+i.registerBlocks(i);
+const S = v({
+  react: a,
   tag: "lr-file-uploader-inline",
-  elClass: LR.FileUploaderMinimal
-});
-const FileUploaderInline = ({
-  ctxName,
-  className,
-  classNameUploader,
-  apiRef,
-  ...props
+  elClass: i.FileUploaderMinimal
+}), V = ({
+  ctxName: e,
+  className: t,
+  classNameUploader: o,
+  apiRef: s,
+  fallback: n,
+  ...r
 }) => {
-  const CTX_NAME = useMemo(() => ctxName ?? LR.UID.generate(), [ctxName]);
-  const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps(props),
-    [props]
-  );
-  const isBrowser = useIsBrowser();
-  return /* @__PURE__ */ React.createElement(ConditionalSuspense, { condition: isBrowser, fallback: /* @__PURE__ */ React.createElement("h1", null, "Loading ...") }, /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(AdapterConfig, { userAgentIntegration: getUserAgentIntegration(), "ctx-name": CTX_NAME, ...config }), /* @__PURE__ */ React.createElement(
-    AdapterUploadCtxProvider,
+  const l = f(() => e ?? i.UID.generate(), [e]), { eventHandlers: c, config: d } = f(
+    () => C(r),
+    [r]
+  ), 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: apiRef,
-      "ctx-name": CTX_NAME,
-      ...eventHandlers
+      ref: s,
+      "ctx-name": l,
+      ...c
     }
-  ), /* @__PURE__ */ React.createElement(AdapterFileUploaderInline, { class: classNameUploader, "ctx-name": CTX_NAME })));
+  ), /* @__PURE__ */ a.createElement(S, { class: o, "ctx-name": l })));
 };
 export {
-  FileUploaderInline,
-  FileUploaderMinimal,
-  FileUploaderRegular,
-  UploadCtxProvider,
-  defineLocale
+  V as FileUploaderInline,
+  D as FileUploaderMinimal,
+  X as FileUploaderRegular,
+  q as UploadCtxProvider,
+  z as defineLocale
 };

package/package.json

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