@wavv/ui 2.3.7-alpha.1 → 2.3.7-alpha.2

package/build/components/DropZone.js

@@ -9,6 +9,7 @@ import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledPro
 const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled, invalid, errorMessage, supportedFormats, maxFileSize, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onFilesAdded, onFilesRemoved, width, margin, marginTop, marginRight, marginBottom, marginLeft, ...rest })=>{
     const [files, setFiles] = useState([]);
     const [sizeValidationError, setSizeValidationError] = useState(null);
+    const [typeValidationError, setTypeValidationError] = useState(null);
     const instanceId = useId();
     const hasFileCallbacks = !!onFilesAdded || !!onFilesRemoved;
     const shouldManageFiles = showFileList || hasFileCallbacks;
@@ -51,7 +52,7 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
         const { valid, oversized } = validateFileSizes(newFileList);
         if (oversized.length > 0) {
             const oversizedNames = oversized.map((file)=>file.name).join(', ');
-            setSizeValidationError(`Error: ${oversizedNames} ${1 === oversized.length ? 'exceeds' : 'exceed'} maximum file size of ${maxFileSize}`);
+            setSizeValidationError(`${oversizedNames} ${1 === oversized.length ? 'exceeds' : 'exceed'} maximum file size of ${maxFileSize}`);
         } else setSizeValidationError(null);
         if (0 === valid.length) return;
         const newEntries = valid.map((file, index)=>({
@@ -68,7 +69,17 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
     };
     const handleFileDrop = async (event)=>{
         let fileItems = event.items.filter((file)=>'file' === file.kind);
-        if (acceptedFileTypes && acceptedFileTypes.length > 0) fileItems = fileItems.filter((file)=>matchesFileTypes(file, acceptedFileTypes));
+        if (acceptedFileTypes && acceptedFileTypes.length > 0) {
+            const allFileItems = [
+                ...fileItems
+            ];
+            fileItems = fileItems.filter((file)=>matchesFileTypes(file, acceptedFileTypes));
+            const unsupportedItems = allFileItems.filter((file)=>!matchesFileTypes(file, acceptedFileTypes));
+            if (unsupportedItems.length > 0 && shouldManageFiles) {
+                const unsupportedNames = unsupportedItems.map((item)=>item.name || 'Unknown file').join(', ');
+                setTypeValidationError(`${unsupportedNames} ${1 === unsupportedItems.length ? 'is not a supported file type' : 'are not supported file types'}`);
+            } else setTypeValidationError(null);
+        } else setTypeValidationError(null);
         if (!allowsMultiple && fileItems.length > 1) fileItems = fileItems.slice(0, 1);
         if (shouldManageFiles) {
             const filePromises = fileItems.map((item)=>{
@@ -103,6 +114,14 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
     };
     const showManagedFileList = showFileList && files.length > 0;
     const showFileInfo = !!supportedFormats || !!maxFileSize;
+    const getErrorMessage = ()=>{
+        if (errorMessage) return errorMessage;
+        const errors = [];
+        if (typeValidationError) errors.push(typeValidationError);
+        if (sizeValidationError) errors.push(sizeValidationError);
+        return errors.length > 0 ? errors.join('. ') : null;
+    };
+    const displayError = getErrorMessage();
     return /*#__PURE__*/ jsxs(Container, {
         ...containerProps,
         children: [
@@ -131,8 +150,8 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
                             })
                         ]
                     }),
-                    (errorMessage || sizeValidationError) && /*#__PURE__*/ jsx(ErrorMessageText, {
-                        children: errorMessage || sizeValidationError
+                    displayError && /*#__PURE__*/ jsx(ErrorMessageText, {
+                        children: displayError
                     })
                 ]
             }),
@@ -164,10 +183,10 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
                                 children: file.name
                             }),
                             !disabled && /*#__PURE__*/ jsx(Button, {
-                                icon: "close",
-                                size: "small",
+                                tiny: true,
                                 subtle: true,
                                 secondary: true,
+                                icon: "close",
                                 onClick: ()=>handleRemoveFile(file.id)
                             })
                         ]
@@ -230,7 +249,8 @@ const ErrorMessageText = styled(StyledText)(({ theme })=>({
     }));
 const FileList = styled.div(({ theme })=>({
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
         gap: theme.size.xs
     }));
 const FileItem = styled.div(({ theme })=>({
@@ -245,7 +265,7 @@ const FileItem = styled.div(({ theme })=>({
     }));
 const FileName = styled.div(({ theme })=>({
         fontSize: theme.font.size.sm,
-        lineHeight: '14px',
+        lineHeight: '12px',
         flex: 1,
         overflow: 'hidden',
         textOverflow: 'ellipsis',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.3.7-alpha.1",
+	"version": "2.3.7-alpha.2",
 	"type": "module",
 	"exports": {
 		".": {