@wavv/ui 2.3.7-alpha.1 → 2.3.7

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,12 +150,13 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
                             })
                         ]
                     }),
-                    (errorMessage || sizeValidationError) && /*#__PURE__*/ jsx(ErrorMessageText, {
-                        children: errorMessage || sizeValidationError
+                    displayError && /*#__PURE__*/ jsx(ErrorMessageText, {
+                        children: displayError
                     })
                 ]
             }),
             showFileInfo && /*#__PURE__*/ jsxs(FileInfo, {
+                disabled: disabled,
                 children: [
                     /*#__PURE__*/ jsx(FileInfoLeft, {
                         children: supportedFormats && /*#__PURE__*/ jsxs("div", {
@@ -158,16 +178,17 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileList = true, disabled,
             }),
             showManagedFileList && /*#__PURE__*/ jsx(FileList, {
                 children: files.map((file)=>/*#__PURE__*/ jsxs(FileItem, {
+                        disabled: disabled,
                         children: [
                             /*#__PURE__*/ jsx(FileName, {
                                 title: file.name,
                                 children: file.name
                             }),
-                            !disabled && /*#__PURE__*/ jsx(Button, {
-                                icon: "close",
-                                size: "small",
+                            /*#__PURE__*/ jsx(Button, {
+                                tiny: true,
                                 subtle: true,
                                 secondary: true,
+                                icon: "close",
                                 onClick: ()=>handleRemoveFile(file.id)
                             })
                         ]
@@ -230,10 +251,11 @@ 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 })=>({
+const FileItem = styled.div(({ theme, disabled })=>({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -241,23 +263,27 @@ const FileItem = styled.div(({ theme })=>({
         padding: '4px 8px',
         paddingRight: 4,
         backgroundColor: theme.scale0,
-        borderRadius: 4
+        borderRadius: 4,
+        opacity: disabled ? 0.4 : 1,
+        pointerEvents: disabled ? 'none' : 'auto',
+        userSelect: disabled ? 'none' : 'auto'
     }));
 const FileName = styled.div(({ theme })=>({
         fontSize: theme.font.size.sm,
-        lineHeight: '14px',
+        lineHeight: '12px',
         flex: 1,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
     }));
-const FileInfo = styled.div(({ theme })=>({
+const FileInfo = styled.div(({ theme, disabled })=>({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 16,
         fontSize: theme.font.size.sm,
-        color: theme.scale6
+        userSelect: 'none',
+        color: disabled ? theme.scale4 : theme.scale6
     }));
 const FileInfoLeft = styled.div({});
 const FileInfoRight = styled.div({

package/package.json

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