react-dropzone 14.4.0 → 15.0.0

package/package.json

@@ -197,7 +197,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "14.4.0",
+  "version": "15.0.0",
   "engines": {
     "node": ">= 10.13"
   },

package/src/index.js

@@ -85,10 +85,10 @@ Dropzone.propTypes = {
    * @param {boolean} params.isFileDialogActive File dialog is opened
    * @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.isDragReject True only during an active drag when some dragged files would be rejected. After drop, this resets to false. Use fileRejections for post-drop errors.
    * @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
+   * @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected. This persists after drop and is the source of truth for post-drop rejections.
    */
   children: PropTypes.func,
 
@@ -283,7 +283,7 @@ export default Dropzone;
  *
  * @callback dropCb
  * @param {File[]} acceptedFiles List of accepted files
- * @param {FileRejection[]} fileRejections List of rejected files and why they were rejected
+ * @param {FileRejection[]} fileRejections List of rejected files and why they were rejected. This is the authoritative source for post-drop file rejections.
  * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
  */
 
@@ -323,10 +323,10 @@ export default Dropzone;
  * @property {boolean} isFileDialogActive File dialog is opened
  * @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} isDragReject True only during an active drag when some dragged files would be rejected. After drop, this resets to false. Use fileRejections for post-drop errors.
  * @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
+ * @property {FileRejection[]} fileRejections Rejected files and why they were rejected. This persists after drop and is the source of truth for post-drop rejections.
  */
 
 /**
@@ -407,6 +407,10 @@ const initialState = {
  * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
  * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
  *
+ * The second parameter (fileRejections) is the authoritative list of rejected files after a drop.
+ * Use this parameter or the fileRejections state property to handle post-drop file rejections,
+ * as isDragReject only indicates rejection state during active drag operations.
+ *
  * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
  * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
  *
@@ -756,7 +760,6 @@ export function useDropzone(props = {}) {
       dispatch({
         acceptedFiles,
         fileRejections,
-        isDragReject: fileRejections.length > 0,
         type: "setFiles",
       });
 
@@ -1079,7 +1082,7 @@ function reducer(state, action) {
         ...state,
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections,
-        isDragReject: action.isDragReject,
+        isDragReject: false,
       };
     case "setDragGlobal":
       return {

package/src/index.spec.js

@@ -2639,7 +2639,8 @@ describe("useDropzone() hook", () => {
       expect(matchToErrorCode(rejectedFileErrorList, "file-invalid-type")).toBe(
         true
       );
-      expect(dropzone).toHaveTextContent("dragReject");
+      // After drop, isDragReject should be false even if files were rejected
+      expect(dropzone).not.toHaveTextContent("dragReject");
     });
 
     it("resets {isDragActive, isDragAccept, isDragReject}", async () => {
@@ -2678,6 +2679,66 @@ describe("useDropzone() hook", () => {
       expect(dropzone).not.toHaveTextContent("dragReject");
     });
 
+    it("isDragReject is false after rejected drop and updates correctly on new drag", async () => {
+      const { container } = render(
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+        >
+          {({
+            getRootProps,
+            getInputProps,
+            isDragActive,
+            isDragAccept,
+            isDragReject,
+            fileRejections,
+          }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragActive && "dragActive"}
+              {isDragAccept && "dragAccept"}
+              {isDragReject && "dragReject"}
+              {fileRejections.length > 0 && "hasRejections"}
+            </div>
+          )}
+        </Dropzone>
+      );
+      const dropzone = container.querySelector("div");
+
+      // Drop rejected files
+      await act(() => fireEvent.drop(dropzone, createDtWithFiles(files)));
+
+      // After drop, isDragReject should be false but fileRejections should be populated
+      expect(dropzone).not.toHaveTextContent("dragActive");
+      expect(dropzone).not.toHaveTextContent("dragAccept");
+      expect(dropzone).not.toHaveTextContent("dragReject");
+      expect(dropzone).toHaveTextContent("hasRejections");
+
+      // New drag with rejected files should set isDragReject to true
+      await act(() => fireEvent.dragEnter(dropzone, createDtWithFiles(files)));
+
+      expect(dropzone).toHaveTextContent("dragActive");
+      expect(dropzone).not.toHaveTextContent("dragAccept");
+      expect(dropzone).toHaveTextContent("dragReject");
+
+      // Drag leave should reset drag state
+      await act(() => fireEvent.dragLeave(dropzone, createDtWithFiles(files)));
+
+      expect(dropzone).not.toHaveTextContent("dragActive");
+      expect(dropzone).not.toHaveTextContent("dragAccept");
+      expect(dropzone).not.toHaveTextContent("dragReject");
+      // But fileRejections should still be there from the previous drop
+      expect(dropzone).toHaveTextContent("hasRejections");
+
+      // New drag with accepted files should set isDragAccept
+      await act(() => fireEvent.dragEnter(dropzone, createDtWithFiles(images)));
+
+      expect(dropzone).toHaveTextContent("dragActive");
+      expect(dropzone).toHaveTextContent("dragAccept");
+      expect(dropzone).not.toHaveTextContent("dragReject");
+    });
+
     it("sets {isDragGlobal} to true when drag event is detected on document", async () => {
       const { container } = render(
         <Dropzone>