@groupeactual/ui-kit 1.8.6 → 1.8.7-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.8.6",
+  "version": "1.8.7-beta.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "main": "dist/cjs/index.js",
@@ -33,7 +33,7 @@
     "@mui/x-date-pickers": "7.15.0",
     "@mui/x-date-pickers-pro": "7.15.0",
     "styled-components": "^6.1.13",
-    "@groupeactual/design-tokens": "1.8.6"
+    "@groupeactual/design-tokens": "1.8.7-beta.0"
   },
   "scripts": {
     "build": "rollup -c",

package/src/components/UploadDocument/FileUploader.tsx

@@ -173,6 +173,51 @@ const FileUploader = ({
     setIsDroppingFile(false);
   };
 
+  const handleDrop = useCallback(
+    (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if ((!isMulti && filesData?.[0]?.name) || disabled) {
+        setIsDroppingFile(false);
+        return;
+      }
+
+      onTouched?.();
+
+      const droppedFiles = event.dataTransfer?.files;
+      if (droppedFiles && droppedFiles.length > 0) {
+        const fileList = Array.from(droppedFiles);
+
+        const newFileData: FileDataType[] = fileList
+          .map((file) => {
+            if (
+              validateFile &&
+              !validateFile(file.size, file.type, accept, setUploadFileError)
+            ) {
+              return null;
+            }
+
+            return {
+              name: file?.name ?? '',
+              size: Math.round(file.size / 1024),
+              type: file.type,
+              url: URL.createObjectURL(file),
+              file: file,
+            };
+          })
+          .filter((file) => file !== null);
+
+        if (newFileData && newFileData.length > 0) {
+          setFilesData([...(filesData || []), ...newFileData]);
+        }
+      }
+
+      setIsDroppingFile(false);
+    },
+    [filesData, isMulti, disabled, validateFile, accept, onTouched],
+  );
+
   // * Handle file change and file deletion
   const handleFileChange = useCallback(
     async (
@@ -426,6 +471,7 @@ const FileUploader = ({
         onDragEnter={handleDragOver}
         onDragLeave={handleDragLeave}
         onDragEnd={handleDragLeave}
+        onDrop={handleDrop}
       >
         <Box
           sx={{