@appcorp/shadcn 1.1.90 → 1.1.92

package/components/enhanced-dropzone.js

@@ -72,8 +72,8 @@ var EnhancedDropzone = function (_a) {
     var _f = (0, react_1.useState)(false), resizeDialogOpen = _f[0], setResizeDialogOpen = _f[1];
     var _g = (0, react_1.useState)(null), pendingFile = _g[0], setPendingFile = _g[1];
     var _h = (0, react_1.useState)(""), pendingFileUrl = _h[0], setPendingFileUrl = _h[1];
-    // Create object URLs for local files synchronously to avoid loading state
-    var createObjectURLs = (0, react_1.useCallback)(function () {
+    // Create and manage object URLs for local files
+    (0, react_1.useEffect)(function () {
         var map = localPreviewsRef.current;
         // Create URLs for new files
         localFiles.forEach(function (file) {
@@ -97,8 +97,6 @@ var EnhancedDropzone = function (_a) {
             }
         });
     }, [localFiles]);
-    // Run synchronously on every render to avoid "loading" flash
-    createObjectURLs();
     // Cleanup on unmount
     (0, react_1.useEffect)(function () {
         var map = localPreviewsRef.current;
@@ -111,15 +109,38 @@ var EnhancedDropzone = function (_a) {
     }, []);
     // Cleanup pending file URL when dialog closes
     (0, react_1.useEffect)(function () {
-        if (!resizeDialogOpen && pendingFileUrl) {
-            URL.revokeObjectURL(pendingFileUrl);
-            setPendingFileUrl("");
-            setPendingFile(null);
+        return function () {
+            if (pendingFileUrl) {
+                URL.revokeObjectURL(pendingFileUrl);
+            }
+        };
+    }, [pendingFileUrl]);
+    // Check if accept includes image types
+    var isImageOnly = react_1.default.useMemo(function () {
+        if (!accept)
+            return false;
+        var acceptTypes = Array.isArray(accept)
+            ? accept
+            : Object.keys(accept || {});
+        return acceptTypes.some(function (type) { return typeof type === "string" && type.toLowerCase().includes("image"); });
+    }, [accept]);
+    // Convert accept array to react-dropzone format if needed
+    var normalizedAccept = react_1.default.useMemo(function () {
+        if (!accept)
+            return undefined;
+        if (Array.isArray(accept)) {
+            // Convert string array like ['image/*'] to object format { 'image/*': [] }
+            return accept.reduce(function (acc, type) {
+                acc[type] = [];
+                return acc;
+            }, {});
         }
-    }, [resizeDialogOpen, pendingFileUrl]);
-    var dropzoneOptions = {
+        // Already in object format
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        accept: (Array.isArray(accept) ? undefined : accept) || undefined,
+        return accept;
+    }, [accept]);
+    var dropzoneOptions = {
+        accept: normalizedAccept,
         maxFiles: maxFiles,
         maxSize: maxSize,
         minSize: minSize,
@@ -169,6 +190,9 @@ var EnhancedDropzone = function (_a) {
     // Handle resize dialog close
     var handleResizeDialogClose = (0, react_1.useCallback)(function () {
         setResizeDialogOpen(false);
+        // Cleanup will happen via the pendingFileUrl useEffect
+        setPendingFileUrl("");
+        setPendingFile(null);
     }, []);
     // Get all preview URLs (remote + local)
     var allPreviews = __spreadArray(__spreadArray([], value.map(function (url) { return ({ type: "remote", url: url, index: 0 }); }), true), localFiles.map(function (file, index) { return ({
@@ -176,11 +200,36 @@ var EnhancedDropzone = function (_a) {
         url: localPreviewsRef.current.get(file) || "",
         index: index,
     }); }), true);
-    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className), "data-testid": testIdDropzone },
+    // Format bytes to human-readable size
+    var formatBytes = function (bytes) {
+        if (bytes === 0)
+            return "0 B";
+        var k = 1024;
+        var sizes = ["B", "KB", "MB", "GB"];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    // Build constraint text for the note
+    var getConstraintText = function () {
+        var constraints = [];
+        if (maxFiles && maxFiles > 1) {
+            constraints.push("Up to ".concat(maxFiles, " files"));
+        }
+        if (minSize || maxSize) {
+            var sizes = [];
+            if (minSize)
+                sizes.push("min ".concat(formatBytes(minSize)));
+            if (maxSize)
+                sizes.push("max ".concat(formatBytes(maxSize)));
+            constraints.push("".concat(sizes.join(", ")));
+        }
+        return constraints.join(" • ");
+    };
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className), "data-slot": "enhanced-dropzone", "data-testid": testIdDropzone },
         label && (react_1.default.createElement("label", { className: "mb-2 block text-sm font-medium" }, label)),
-        react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center min-h-[280px] flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
+        react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center min-h-70 flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
             react_1.default.createElement("input", __assign({}, getInputProps(), { id: id, "data-testid": testIdInput })),
-            allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full" },
+            isImageOnly && allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full" },
                 react_1.default.createElement("div", { className: "relative w-full max-w-md" },
                     react_1.default.createElement(carousel_1.Carousel, { className: "w-full" },
                         react_1.default.createElement(carousel_1.CarouselPrevious, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, "data-testid": testIdPrev }),
@@ -204,6 +253,31 @@ var EnhancedDropzone = function (_a) {
                     " image",
                     allPreviews.length !== 1 ? "s" : "",
                     " ",
+                    "selected"))) : !isImageOnly && allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full gap-4" },
+                react_1.default.createElement("div", { className: "w-full max-w-md" },
+                    react_1.default.createElement("div", { className: "space-y-2" }, allPreviews.map(function (preview, idx) {
+                        var _a;
+                        return (react_1.default.createElement("div", { key: "".concat(preview.type, "-").concat(preview.url, "-").concat(idx), "data-testid": "".concat(testIdPreviewPrefix !== null && testIdPreviewPrefix !== void 0 ? testIdPreviewPrefix : "dropzone-preview", "-").concat(idx), className: "flex items-center justify-between gap-3 p-3 rounded-lg border bg-muted/50" },
+                            react_1.default.createElement("span", { className: "text-sm truncate flex-1", "data-testid": "".concat(testIdImagePrefix !== null && testIdImagePrefix !== void 0 ? testIdImagePrefix : "dropzone-image", "-").concat(idx) }, preview.type === "remote"
+                                ? new URL(preview.url).pathname.split("/").pop() ||
+                                    "File"
+                                : ((_a = localFiles[preview.index]) === null || _a === void 0 ? void 0 : _a.name) || "File"),
+                            react_1.default.createElement(button_1.Button, { type: "button", size: "icon", variant: "ghost", onClick: function (e) {
+                                    e.stopPropagation();
+                                    if (preview.type === "remote") {
+                                        handleRemoveRemote(preview.url);
+                                    }
+                                    else {
+                                        handleRemoveLocal(preview.index);
+                                    }
+                                }, className: "h-8 w-8 shrink-0", "aria-label": "Remove file", "data-testid": "".concat(testIdRemovePrefix !== null && testIdRemovePrefix !== void 0 ? testIdRemovePrefix : "dropzone-remove", "-").concat(idx) },
+                                react_1.default.createElement(lucide_react_1.XIcon, { className: "h-4 w-4" }))));
+                    }))),
+                react_1.default.createElement("p", { className: "text-sm font-medium text-muted-foreground", "data-testid": testIdCount },
+                    allPreviews.length,
+                    " file",
+                    allPreviews.length !== 1 ? "s" : "",
+                    " ",
                     "selected"))) : (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
                 react_1.default.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", "data-testid": testIdEmptyIcon },
                     react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-image" },
@@ -211,14 +285,11 @@ var EnhancedDropzone = function (_a) {
                         react_1.default.createElement("circle", { cx: "9", cy: "9", r: "2" }),
                         react_1.default.createElement("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }))),
                 react_1.default.createElement("div", { className: "space-y-1 text-center" },
-                    react_1.default.createElement("p", { className: "font-medium text-sm", "data-testid": testIdEmptyTitle },
-                        "Upload ",
-                        maxFiles === 1 ? "an image" : "images"),
+                    react_1.default.createElement("p", { className: "font-medium text-sm", "data-testid": testIdEmptyTitle }, maxFiles === 1
+                        ? "Upload ".concat(isImageOnly ? "an image" : "a file")
+                        : "Upload ".concat(isImageOnly ? "images" : "files")),
                     react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptySubtitle }, "Drag and drop or click to browse"),
-                    maxFiles > 1 && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptyNote },
-                        "Up to ",
-                        maxFiles,
-                        " files")))))),
+                    (maxFiles > 1 || minSize || maxSize) && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptyNote }, getConstraintText())))))),
         (error || info) && (react_1.default.createElement("div", { className: "mt-2", "data-testid": testIdMessage }, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null)),
         resize && pendingFile && (react_1.default.createElement(image_resize_dialog_1.ImageResizeDialog, { open: resizeDialogOpen, onClose: handleResizeDialogClose, imageUrl: pendingFileUrl, onCropComplete: handleCropComplete, fileName: pendingFile.name }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.90",
+  "version": "1.1.92",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "mv ../.pnp.cjs ../.pnp.cjs.bak 2>/dev/null || true && storybook build -c .storybook -o .out && mv ../.pnp.cjs.bak ../.pnp.cjs 2>/dev/null || true",