@uipath/apollo-wind 0.9.1 → 0.10.0-pr219.61d64eb

package/dist/components/ui/file-upload.cjs

@@ -32,29 +32,53 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false }) {
+function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors }) {
     const [files, setFiles] = external_react_namespaceObject.useState([]);
     const [isDragging, setIsDragging] = external_react_namespaceObject.useState(false);
-    const [error, setError] = external_react_namespaceObject.useState('');
+    const [fileErrors, setFileErrors] = external_react_namespaceObject.useState(new Map());
     const [previews, setPreviews] = external_react_namespaceObject.useState([]);
     const inputRef = external_react_namespaceObject.useRef(null);
-    const validateFiles = (fileList)=>{
-        setError('');
+    const isFileTypeAccepted = (file)=>{
+        if (!accept) return true;
+        const acceptedTypes = accept.split(',').map((type)=>type.trim().toLowerCase());
+        for (const acceptedType of acceptedTypes)if (acceptedType.endsWith('/*')) {
+            const baseType = acceptedType.slice(0, -2);
+            if (file.type.toLowerCase().startsWith(baseType)) return true;
+        } else if (acceptedType.includes('/')) {
+            if (file.type.toLowerCase() === acceptedType) return true;
+        } else if (acceptedType.startsWith('.')) {
+            if (file.name.toLowerCase().endsWith(acceptedType)) return true;
+        }
+        return false;
+    };
+    const validateFiles = (fileList, startIndex, existingErrors)=>{
         const validFiles = [];
+        const errors = multiple ? new Map(existingErrors) : new Map();
         for (const file of fileList){
+            const fileIndex = startIndex + validFiles.length;
+            if (!isFileTypeAccepted(file)) {
+                errors.set(fileIndex, 'File type not accepted');
+                validFiles.push(file);
+                continue;
+            }
             if (maxSize && file.size > maxSize) {
-                setError(`File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`);
+                errors.set(fileIndex, `Exceeds maximum size of ${formatFileSize(maxSize)}`);
+                validFiles.push(file);
                 continue;
             }
             const isDuplicate = files.some((existingFile)=>existingFile.name === file.name && existingFile.size === file.size);
             if (!isDuplicate) validFiles.push(file);
         }
-        return validFiles;
+        return {
+            validFiles,
+            errors
+        };
     };
     const handleFiles = (fileList)=>{
         if (!fileList || 0 === fileList.length) return;
         const filesArray = Array.from(fileList);
-        const validFiles = validateFiles(filesArray);
+        const startIndex = multiple ? files.length : 0;
+        const { validFiles, errors } = validateFiles(filesArray, startIndex, fileErrors);
         if (0 === validFiles.length) return;
         const newFiles = multiple ? [
             ...files,
@@ -62,6 +86,7 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
         ] : validFiles;
         setFiles(newFiles);
         onFilesChange?.(newFiles);
+        setFileErrors(errors);
         if (showPreview) {
             const newPreviews = [];
             validFiles.forEach((file)=>{
@@ -87,7 +112,14 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
             const newPreviews = previews.filter((_, i)=>i !== index);
             setPreviews(newPreviews);
         }
-        setError('');
+        setFileErrors((prev)=>{
+            const updated = new Map();
+            prev.forEach((error, i)=>{
+                if (i < index) updated.set(i, error);
+                else if (i > index) updated.set(i - 1, error);
+            });
+            return updated;
+        });
     };
     const handleDragEnter = (e)=>{
         e.preventDefault();
@@ -132,7 +164,7 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
         className: (0, index_cjs_namespaceObject.cn)('w-full', className),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background', error && 'border-destructive'),
+                className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background'),
                 onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
@@ -175,54 +207,62 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
                     })
                 ]
             }),
-            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                className: "text-sm text-destructive mt-2",
-                children: error
-            }),
             files.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "mt-4 space-y-2",
-                children: files.map((file, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex items-center justify-between p-3 bg-accent/50 rounded-md",
+                children: files.map((file, index)=>{
+                    const fileError = errors?.[file.name] ?? fileErrors.get(index);
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: (0, index_cjs_namespaceObject.cn)('flex flex-col p-3 rounded-md', fileError ? 'bg-destructive/10 border border-destructive/20' : 'bg-accent/50'),
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "flex items-center gap-3 flex-1 min-w-0",
+                                className: "flex items-center justify-between",
                                 children: [
-                                    showPreview && previews[index] && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-                                        src: previews[index],
-                                        alt: file.name,
-                                        className: "w-10 h-10 object-cover rounded"
-                                    }),
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                        className: "flex-1 min-w-0",
+                                        className: "flex items-center gap-3 flex-1 min-w-0",
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-sm font-medium truncate",
-                                                children: file.name
+                                            showPreview && previews[index] && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                src: previews[index],
+                                                alt: file.name,
+                                                className: "w-10 h-10 object-cover rounded"
                                             }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                                className: "text-xs text-muted-foreground",
-                                                children: formatFileSize(file.size)
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "flex-1 min-w-0",
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                        className: "text-sm font-medium truncate",
+                                                        children: file.name
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                        className: "text-xs text-muted-foreground",
+                                                        children: formatFileSize(file.size)
+                                                    })
+                                                ]
                                             })
                                         ]
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                        variant: "ghost",
+                                        size: "icon",
+                                        className: "h-8 w-8",
+                                        "aria-label": `Remove ${file.name}`,
+                                        onClick: (e)=>{
+                                            e.stopPropagation();
+                                            removeFile(index);
+                                        },
+                                        disabled: disabled,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                            className: "h-4 w-4"
+                                        })
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                                variant: "ghost",
-                                size: "icon",
-                                className: "h-8 w-8",
-                                "aria-label": `Remove ${file.name}`,
-                                onClick: (e)=>{
-                                    e.stopPropagation();
-                                    removeFile(index);
-                                },
-                                disabled: disabled,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                    className: "h-4 w-4"
-                                })
+                            fileError && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                className: "text-xs text-destructive mt-2",
+                                children: fileError
                             })
                         ]
-                    }, index))
+                    }, index);
+                })
             })
         ]
     });

package/dist/components/ui/file-upload.d.ts

@@ -6,5 +6,7 @@ export interface FileUploadProps {
     maxSize?: number;
     className?: string;
     showPreview?: boolean;
+    /** External errors keyed by filename. Use this to set errors from outside (e.g., upload failures). */
+    errors?: Record<string, string>;
 }
-export declare function FileUpload({ onFilesChange, accept, multiple, disabled, maxSize, className, showPreview, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileUpload({ onFilesChange, accept, multiple, disabled, maxSize, className, showPreview, errors, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/file-upload.js

@@ -4,29 +4,53 @@ import { Upload, X } from "lucide-react";
 import { useRef, useState } from "react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/index.js";
-function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false }) {
+function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors }) {
     const [files, setFiles] = useState([]);
     const [isDragging, setIsDragging] = useState(false);
-    const [error, setError] = useState('');
+    const [fileErrors, setFileErrors] = useState(new Map());
     const [previews, setPreviews] = useState([]);
     const inputRef = useRef(null);
-    const validateFiles = (fileList)=>{
-        setError('');
+    const isFileTypeAccepted = (file)=>{
+        if (!accept) return true;
+        const acceptedTypes = accept.split(',').map((type)=>type.trim().toLowerCase());
+        for (const acceptedType of acceptedTypes)if (acceptedType.endsWith('/*')) {
+            const baseType = acceptedType.slice(0, -2);
+            if (file.type.toLowerCase().startsWith(baseType)) return true;
+        } else if (acceptedType.includes('/')) {
+            if (file.type.toLowerCase() === acceptedType) return true;
+        } else if (acceptedType.startsWith('.')) {
+            if (file.name.toLowerCase().endsWith(acceptedType)) return true;
+        }
+        return false;
+    };
+    const validateFiles = (fileList, startIndex, existingErrors)=>{
         const validFiles = [];
+        const errors = multiple ? new Map(existingErrors) : new Map();
         for (const file of fileList){
+            const fileIndex = startIndex + validFiles.length;
+            if (!isFileTypeAccepted(file)) {
+                errors.set(fileIndex, 'File type not accepted');
+                validFiles.push(file);
+                continue;
+            }
             if (maxSize && file.size > maxSize) {
-                setError(`File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`);
+                errors.set(fileIndex, `Exceeds maximum size of ${formatFileSize(maxSize)}`);
+                validFiles.push(file);
                 continue;
             }
             const isDuplicate = files.some((existingFile)=>existingFile.name === file.name && existingFile.size === file.size);
             if (!isDuplicate) validFiles.push(file);
         }
-        return validFiles;
+        return {
+            validFiles,
+            errors
+        };
     };
     const handleFiles = (fileList)=>{
         if (!fileList || 0 === fileList.length) return;
         const filesArray = Array.from(fileList);
-        const validFiles = validateFiles(filesArray);
+        const startIndex = multiple ? files.length : 0;
+        const { validFiles, errors } = validateFiles(filesArray, startIndex, fileErrors);
         if (0 === validFiles.length) return;
         const newFiles = multiple ? [
             ...files,
@@ -34,6 +58,7 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
         ] : validFiles;
         setFiles(newFiles);
         onFilesChange?.(newFiles);
+        setFileErrors(errors);
         if (showPreview) {
             const newPreviews = [];
             validFiles.forEach((file)=>{
@@ -59,7 +84,14 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
             const newPreviews = previews.filter((_, i)=>i !== index);
             setPreviews(newPreviews);
         }
-        setError('');
+        setFileErrors((prev)=>{
+            const updated = new Map();
+            prev.forEach((error, i)=>{
+                if (i < index) updated.set(i, error);
+                else if (i > index) updated.set(i - 1, error);
+            });
+            return updated;
+        });
     };
     const handleDragEnter = (e)=>{
         e.preventDefault();
@@ -104,7 +136,7 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
         className: cn('w-full', className),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: cn('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background', error && 'border-destructive'),
+                className: cn('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background'),
                 onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
@@ -147,54 +179,62 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
                     })
                 ]
             }),
-            error && /*#__PURE__*/ jsx("p", {
-                className: "text-sm text-destructive mt-2",
-                children: error
-            }),
             files.length > 0 && /*#__PURE__*/ jsx("div", {
                 className: "mt-4 space-y-2",
-                children: files.map((file, index)=>/*#__PURE__*/ jsxs("div", {
-                        className: "flex items-center justify-between p-3 bg-accent/50 rounded-md",
+                children: files.map((file, index)=>{
+                    const fileError = errors?.[file.name] ?? fileErrors.get(index);
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: cn('flex flex-col p-3 rounded-md', fileError ? 'bg-destructive/10 border border-destructive/20' : 'bg-accent/50'),
                         children: [
                             /*#__PURE__*/ jsxs("div", {
-                                className: "flex items-center gap-3 flex-1 min-w-0",
+                                className: "flex items-center justify-between",
                                 children: [
-                                    showPreview && previews[index] && /*#__PURE__*/ jsx("img", {
-                                        src: previews[index],
-                                        alt: file.name,
-                                        className: "w-10 h-10 object-cover rounded"
-                                    }),
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: "flex-1 min-w-0",
+                                        className: "flex items-center gap-3 flex-1 min-w-0",
                                         children: [
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-sm font-medium truncate",
-                                                children: file.name
+                                            showPreview && previews[index] && /*#__PURE__*/ jsx("img", {
+                                                src: previews[index],
+                                                alt: file.name,
+                                                className: "w-10 h-10 object-cover rounded"
                                             }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-xs text-muted-foreground",
-                                                children: formatFileSize(file.size)
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "flex-1 min-w-0",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        className: "text-sm font-medium truncate",
+                                                        children: file.name
+                                                    }),
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        className: "text-xs text-muted-foreground",
+                                                        children: formatFileSize(file.size)
+                                                    })
+                                                ]
                                             })
                                         ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "icon",
+                                        className: "h-8 w-8",
+                                        "aria-label": `Remove ${file.name}`,
+                                        onClick: (e)=>{
+                                            e.stopPropagation();
+                                            removeFile(index);
+                                        },
+                                        disabled: disabled,
+                                        children: /*#__PURE__*/ jsx(X, {
+                                            className: "h-4 w-4"
+                                        })
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ jsx(Button, {
-                                variant: "ghost",
-                                size: "icon",
-                                className: "h-8 w-8",
-                                "aria-label": `Remove ${file.name}`,
-                                onClick: (e)=>{
-                                    e.stopPropagation();
-                                    removeFile(index);
-                                },
-                                disabled: disabled,
-                                children: /*#__PURE__*/ jsx(X, {
-                                    className: "h-4 w-4"
-                                })
+                            fileError && /*#__PURE__*/ jsx("p", {
+                                className: "text-xs text-destructive mt-2",
+                                children: fileError
                             })
                         ]
-                    }, index))
+                    }, index);
+                })
             })
         ]
     });