react-dropzone 14.3.8 → 14.4.0

package/.nvmrc

@@ -1 +1 @@
-20.17.0
+22

package/.releaserc.json

@@ -0,0 +1,28 @@
+{
+  "branches": ["master"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": true,
+        "pkgRoot": ".",
+        "tarballDir": "dist",
+        "provenance": true
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "assets": [
+          {
+            "path": "dist/*.tgz",
+            "label": "Distribution"
+          }
+        ]
+      }
+    ]
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# [14.4.0](https://github.com/react-dropzone/react-dropzone/compare/v14.3.8...v14.4.0) (2026-01-29)
+
+
+### Bug Fixes
+
+* accept files with empty type during drag events ([eaa8ba5](https://github.com/react-dropzone/react-dropzone/commit/eaa8ba54963480afbba50415b1dd792514fefac1))
+* correct dragLeave filter logic and add dragend test ([273aff4](https://github.com/react-dropzone/react-dropzone/commit/273aff4a151aba05ddd473cbc49dc3db59132f2f))
+
+
+### Features
+
+* add isDragGlobal state for document-level drag detection ([f0874b0](https://github.com/react-dropzone/react-dropzone/commit/f0874b0ad8e94dbf662b16bc82d0aa2b082ec8ee))

package/dist/es/index.js

@@ -103,6 +103,7 @@ Dropzone.propTypes = {
    * @param {boolean} params.isDragActive Active drag is in progress
    * @param {boolean} params.isDragAccept Dragged files are accepted
    * @param {boolean} params.isDragReject Some dragged files are rejected
+   * @param {boolean} params.isDragGlobal Files are being dragged anywhere on the document
    * @param {File[]} params.acceptedFiles Accepted files
    * @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected
    */
@@ -339,6 +340,7 @@ export default Dropzone;
  * @property {boolean} isDragActive Active drag is in progress
  * @property {boolean} isDragAccept Dragged files are accepted
  * @property {boolean} isDragReject Some dragged files are rejected
+ * @property {boolean} isDragGlobal Files are being dragged anywhere on the document
  * @property {File[]} acceptedFiles Accepted files
  * @property {FileRejection[]} fileRejections Rejected files and why they were rejected
  */
@@ -358,6 +360,7 @@ var initialState = {
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
+  isDragGlobal: false,
   acceptedFiles: [],
   fileRejections: []
 };
@@ -521,6 +524,7 @@ export function useDropzone() {
     };
   }, [inputRef, isFileDialogActive, onFileDialogCancelCb, fsAccessApiWorksRef]);
   var dragTargetsRef = useRef([]);
+  var globalDragTargetsRef = useRef([]);
 
   var onDocumentDrop = function onDocumentDrop(event) {
     if (rootRef.current && rootRef.current.contains(event.target)) {
@@ -544,7 +548,63 @@ export function useDropzone() {
         document.removeEventListener("drop", onDocumentDrop);
       }
     };
-  }, [rootRef, preventDropOnDocument]); // Auto focus the root when autoFocus is true
+  }, [rootRef, preventDropOnDocument]); // Track global drag state for document-level drag events
+
+  useEffect(function () {
+    var onDocumentDragEnter = function onDocumentDragEnter(event) {
+      globalDragTargetsRef.current = [].concat(_toConsumableArray(globalDragTargetsRef.current), [event.target]);
+
+      if (isEvtWithFiles(event)) {
+        dispatch({
+          isDragGlobal: true,
+          type: "setDragGlobal"
+        });
+      }
+    };
+
+    var onDocumentDragLeave = function onDocumentDragLeave(event) {
+      // Only deactivate once we've left all children
+      globalDragTargetsRef.current = globalDragTargetsRef.current.filter(function (el) {
+        return el !== event.target && el !== null;
+      });
+
+      if (globalDragTargetsRef.current.length > 0) {
+        return;
+      }
+
+      dispatch({
+        isDragGlobal: false,
+        type: "setDragGlobal"
+      });
+    };
+
+    var onDocumentDragEnd = function onDocumentDragEnd() {
+      globalDragTargetsRef.current = [];
+      dispatch({
+        isDragGlobal: false,
+        type: "setDragGlobal"
+      });
+    };
+
+    var onDocumentDropGlobal = function onDocumentDropGlobal() {
+      globalDragTargetsRef.current = [];
+      dispatch({
+        isDragGlobal: false,
+        type: "setDragGlobal"
+      });
+    };
+
+    document.addEventListener("dragenter", onDocumentDragEnter, false);
+    document.addEventListener("dragleave", onDocumentDragLeave, false);
+    document.addEventListener("dragend", onDocumentDragEnd, false);
+    document.addEventListener("drop", onDocumentDropGlobal, false);
+    return function () {
+      document.removeEventListener("dragenter", onDocumentDragEnter);
+      document.removeEventListener("dragleave", onDocumentDragLeave);
+      document.removeEventListener("dragend", onDocumentDragEnd);
+      document.removeEventListener("drop", onDocumentDropGlobal);
+    };
+  }, [rootRef]); // Auto focus the root when autoFocus is true
 
   useEffect(function () {
     if (!disabled && autoFocus && rootRef.current) {
@@ -970,6 +1030,11 @@ function reducer(state, action) {
         isDragReject: action.isDragReject
       });
 
+    case "setDragGlobal":
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isDragGlobal: action.isDragGlobal
+      });
+
     case "reset":
       return _objectSpread({}, initialState);
 

package/dist/es/utils/index.js

@@ -69,19 +69,43 @@ export var TOO_MANY_FILES_REJECTION = {
   code: TOO_MANY_FILES,
   message: "Too many files"
 };
+/**
+ * Check if the given file is a DataTransferItem with an empty type.
+ *
+ * During drag events, browsers may return DataTransferItem objects instead of File objects.
+ * Some browsers (e.g., Chrome) return an empty MIME type for certain file types (like .md files)
+ * on DataTransferItem during drag events, even though the type is correctly set during drop.
+ *
+ * This function detects such cases by checking for:
+ * 1. Empty type string
+ * 2. Presence of getAsFile method (indicates it's a DataTransferItem, not a File)
+ *
+ * We accept these during drag to provide proper UI feedback, while maintaining
+ * strict validation during drop when real File objects are available.
+ *
+ * @param {File | DataTransferItem} file
+ * @returns {boolean}
+ */
+
+export function isDataTransferItemWithEmptyType(file) {
+  return file.type === "" && typeof file.getAsFile === "function";
+}
 /**
  * Check if file is accepted.
  *
  * Firefox versions prior to 53 return a bogus MIME type for every file drag,
  * so dragovers with that MIME type will always be accepted.
  *
+ * Chrome/other browsers may return an empty MIME type for files during drag events,
+ * so we accept those as well (we'll validate properly on drop).
+ *
  * @param {File} file
  * @param {string} accept
  * @returns
  */
 
 export function fileAccepted(file, accept) {
-  var isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept);
+  var isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept) || isDataTransferItemWithEmptyType(file);
   return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];
 }
 export function fileMatchSize(file, minSize, maxSize) {