@vkzstudio/muza-ui 1.0.18 → 1.0.20

package/dist/components/FileUpload/FileUpload.js

@@ -1,15 +1,15 @@
-import { jsxs as u, jsx as i, Fragment as H } from "react/jsx-runtime";
-import * as M from "react";
-import { cva as T } from "class-variance-authority";
-import { useDropzone as E } from "react-dropzone";
-import { FileItem as C } from "./FileItem.js";
-import { useMuzaTranslations as ee } from "../../translations/TranslationContext.js";
-import { Flex as oe } from "../Flex/Flex.js";
-import { FormField as te } from "../FormField/FormField.js";
-import { cn as P } from "../../utils/cn.js";
-import { CloudUploadOutline as re } from "@solar-icons/react-perf";
-import { Typography as F } from "../Typography/Typography.js";
-const le = T(
+import { jsxs as f, jsx as a, Fragment as ee } from "react/jsx-runtime";
+import * as F from "react";
+import { cva as B } from "class-variance-authority";
+import { useDropzone as oe } from "react-dropzone";
+import { FileItem as K } from "./FileItem.js";
+import { useMuzaTranslations as te } from "../../translations/TranslationContext.js";
+import { Flex as re } from "../Flex/Flex.js";
+import { FormField as le } from "../FormField/FormField.js";
+import { cn as _ } from "../../utils/cn.js";
+import { CloudUploadOutline as se } from "@solar-icons/react-perf";
+import { Typography as S } from "../Typography/Typography.js";
+const ie = B(
   [
     "group relative cursor-pointer rounded-xl border-1 border-dashed transition-colors",
     "p-4xl pt-3xl pr-4xl pb-3xl",
@@ -45,7 +45,7 @@ const le = T(
       }
     }
   }
-), se = T(
+), ae = B(
   [
     "text-center transition-colors",
     "text-comp-file-upload-text-dark-secondary"
@@ -57,166 +57,186 @@ const le = T(
       }
     }
   }
-), ie = M.forwardRef(
+), de = F.forwardRef(
   ({
-    className: S,
-    onDrop: n,
-    accept: f,
-    multiple: U = !0,
-    maxSize: x,
-    maxSizeErrorMessage: V,
-    size: K = "base",
-    disabled: c = !1,
-    readOnly: g = !1,
-    dropzoneOptions: _,
-    label: k,
-    title: B,
-    subtitle: y,
-    preselectedFiles: G = [],
-    fileStatus: J = [],
+    className: y,
+    onDrop: x,
+    accept: u,
+    multiple: k = !0,
+    maxSize: g,
+    maxSizeErrorMessage: G,
+    size: $ = "base",
+    disabled: p = !1,
+    readOnly: m = !1,
+    dropzoneOptions: J,
+    label: w,
+    title: L,
+    subtitle: N,
+    preselectedFiles: Q = [],
+    fileStatus: W = [],
     itemErrors: b,
     itemHints: h,
-    error: L,
+    error: X,
     required: v,
-    disableRequiredAsterisk: O,
+    disableRequiredAsterisk: Y,
     onError: t,
     onDelete: z,
-    onChange: p,
-    ...Q
-  }, W) => {
-    const m = ee(), [w, $] = M.useState(G), [N, I] = M.useState(!1), X = B ?? m.fileUpload.title, R = x ? m.fileUpload.maxSizeError.replace(
+    onChange: c,
+    preselectedUrls: U = [],
+    onDeleteUrl: M,
+    ...Z
+  }, q) => {
+    const n = te(), [I, R] = F.useState(Q), [j, A] = F.useState(!1), O = L ?? n.fileUpload.title, P = g ? n.fileUpload.maxSizeError.replace(
       "{size}",
-      (x / (1024 * 1024)).toFixed(0)
-    ) : "", j = V ?? R, { getRootProps: Y, getInputProps: Z, isDragActive: q } = E({
-      onDrop: (o, a) => {
+      (g / (1024 * 1024)).toFixed(0)
+    ) : "", T = G ?? P, { getRootProps: H, getInputProps: D, isDragActive: E } = oe({
+      onDrop: (e, l) => {
         try {
-          if (I(!1), a.length > 0 && a.some(
-            (r) => r.errors.some((l) => l.code === "file-too-large")
+          if (A(!1), l.length > 0 && l.some(
+            (r) => r.errors.some((s) => s.code === "file-too-large")
           )) {
-            I(!0);
-            const r = j || R;
-            t == null || t(r, a[0].file);
+            A(!0);
+            const r = T || P;
+            t == null || t(r, l[0].file);
             return;
           }
-          $((e) => {
+          R((o) => {
             const r = new Set(
-              e.map((s) => `${s.name}-${s.size}-${s.lastModified}`)
-            ), l = o.filter(
-              (s) => !r.has(`${s.name}-${s.size}-${s.lastModified}`)
-            ), d = [...e, ...l];
-            return p == null || p(d), d;
-          }), n == null || n(o);
-        } catch (e) {
-          const r = e instanceof Error ? e.message : m.fileUpload.processingError;
+              o.map((i) => `${i.name}-${i.size}-${i.lastModified}`)
+            ), s = e.filter(
+              (i) => !r.has(`${i.name}-${i.size}-${i.lastModified}`)
+            ), d = [...o, ...s];
+            return c == null || c(d), d;
+          }), x == null || x(e);
+        } catch (o) {
+          const r = o instanceof Error ? o.message : n.fileUpload.processingError;
           t == null || t(r);
         }
       },
-      accept: typeof f == "string" ? { [f]: [] } : f ? Object.fromEntries(f.map((o) => [o, []])) : void 0,
-      multiple: U,
-      maxSize: x,
-      disabled: c,
-      ..._
-    }), A = g || !U && w.length > 0;
-    return /* @__PURE__ */ u(oe, { direction: "column", gap: "lg", children: [
-      (!A || k) && /* @__PURE__ */ i(
-        te,
+      accept: typeof u == "string" ? { [u]: [] } : u ? Object.fromEntries(u.map((e) => [e, []])) : void 0,
+      multiple: k,
+      maxSize: g,
+      disabled: p,
+      ...J
+    }), V = m || !k && (I.length > 0 || U.length > 0);
+    return /* @__PURE__ */ f(re, { direction: "column", gap: "lg", children: [
+      (!V || w) && /* @__PURE__ */ a(
+        le,
         {
-          label: k,
+          label: w,
           required: v,
-          disableRequiredAsterisk: O,
-          children: !A && /* @__PURE__ */ u(H, { children: [
-            /* @__PURE__ */ u(
+          disableRequiredAsterisk: Y,
+          children: !V && /* @__PURE__ */ f(ee, { children: [
+            /* @__PURE__ */ f(
               "div",
               {
-                ref: W,
-                tabIndex: c ? void 0 : 0,
-                className: P(
-                  le({
-                    error: L || N,
-                    disabled: c,
-                    className: S,
-                    isDragActive: q
+                ref: q,
+                tabIndex: p ? void 0 : 0,
+                className: _(
+                  ie({
+                    error: X || j,
+                    disabled: p,
+                    className: y,
+                    isDragActive: E
                   })
                 ),
-                ...Y(),
-                ...Q,
+                ...H(),
+                ...Z,
                 children: [
-                  /* @__PURE__ */ i(
+                  /* @__PURE__ */ a(
                     "input",
                     {
-                      ...Z({ required: v }),
+                      ...D({ required: v }),
                       "aria-required": v
                     }
                   ),
-                  /* @__PURE__ */ i(re, { className: "inline size-comp-file-upload-ico-size" }),
-                  /* @__PURE__ */ u("div", { children: [
-                    /* @__PURE__ */ i(F, { size: "base", component: "p", weight: "medium", children: X }),
-                    y && /* @__PURE__ */ i(
-                      F,
+                  /* @__PURE__ */ a(se, { className: "inline size-comp-file-upload-ico-size" }),
+                  /* @__PURE__ */ f("div", { children: [
+                    /* @__PURE__ */ a(S, { size: "base", component: "p", weight: "medium", children: O }),
+                    N && /* @__PURE__ */ a(
+                      S,
                       {
                         size: "sm",
                         component: "p",
                         weight: "regular",
-                        className: P(
-                          se({
-                            disabled: c,
-                            className: S
+                        className: _(
+                          ae({
+                            disabled: p,
+                            className: y
                           })
                         ),
-                        children: y
+                        children: N
                       }
                     )
                   ] })
                 ]
               }
             ),
-            N && /* @__PURE__ */ i(
-              F,
+            j && /* @__PURE__ */ a(
+              S,
               {
                 size: "sm",
                 variant: "body",
                 component: "p",
                 weight: "regular",
                 className: "text-comp-file-upload-text-error-def",
-                children: j
+                children: T
               }
             )
           ] })
         }
       ),
-      /* @__PURE__ */ i("ul", { className: "flex flex-col gap-md", children: w.map((o, a) => {
-        const e = J[a], r = e == null ? void 0 : e.uploaded;
-        return g && !r ? null : /* @__PURE__ */ i(
-          C,
+      /* @__PURE__ */ f("ul", { className: "flex flex-col gap-md", children: [
+        U.map((e, l) => /* @__PURE__ */ a(
+          K,
           {
-            file: o,
-            uploaded: r,
-            progress: e == null ? void 0 : e.progress,
-            disabled: c,
-            readOnly: g,
-            error: b == null ? void 0 : b.get(o),
-            note: h == null ? void 0 : h.get(o),
-            onError: t,
-            size: K,
-            onDelete: () => {
-              try {
-                $((l) => {
-                  const d = l.filter((s, D) => D !== a);
-                  return p == null || p(d), d;
-                }), z == null || z(o, a);
-              } catch (l) {
-                const d = l instanceof Error ? l.message : m.fileUpload.deleteError;
-                t == null || t(d, o);
-              }
-            }
+            source: "url",
+            url: e.url,
+            name: e.name,
+            type: e.type,
+            uploaded: !0,
+            disabled: p,
+            readOnly: m,
+            size: $,
+            onDelete: () => M == null ? void 0 : M(e, l)
           },
-          o.name
-        );
-      }) })
+          `url-${e.url}`
+        )),
+        I.map((e, l) => {
+          const o = W[l], r = o == null ? void 0 : o.uploaded;
+          return m && !r ? null : /* @__PURE__ */ a(
+            K,
+            {
+              source: "file",
+              file: e,
+              uploaded: r,
+              progress: o == null ? void 0 : o.progress,
+              disabled: p,
+              readOnly: m,
+              error: b == null ? void 0 : b.get(e),
+              note: h == null ? void 0 : h.get(e),
+              onError: t,
+              size: $,
+              onDelete: () => {
+                try {
+                  R((s) => {
+                    const d = s.filter((i, C) => C !== l);
+                    return c == null || c(d), d;
+                  }), z == null || z(e, l);
+                } catch (s) {
+                  const d = s instanceof Error ? s.message : n.fileUpload.deleteError;
+                  t == null || t(d, e);
+                }
+              }
+            },
+            e.name
+          );
+        })
+      ] })
     ] });
   }
 );
-ie.displayName = "FileUpload";
+de.displayName = "FileUpload";
 export {
-  ie as FileUpload
+  de as FileUpload
 };

package/dist/components/FileUpload/FileUpload.stories.d.ts

@@ -17,4 +17,7 @@ export declare const Disabled: Story;
 export declare const WithErrorsAndHints: Story;
 export declare const ReadOnly: Story;
 export declare const UploadSimulation: Story;
+export declare const PreselectedUrls: Story;
+export declare const MixedFilesAndUrls: Story;
+export declare const SingleFileWithUrl: Story;
 //# sourceMappingURL=FileUpload.stories.d.ts.map

package/dist/components/FileUpload/FileUpload.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkKjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0ChC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0F9B,CAAA"}
+{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAuB,MAAM,cAAc,CAAA;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA8KjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0ChC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0F9B,CAAA;AAmBD,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAA"}

package/dist/components/FileUpload/index.d.ts

@@ -1,2 +1,2 @@
-export { FileUpload, type FileUploadProps } from './FileUpload';
+export { FileUpload, type FileUploadProps, type PreselectedUrl, } from './FileUpload';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/FileUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,cAAc,CAAA"}