react-dropzone 13.0.0 → 14.0.0

package/README.md

@@ -230,7 +230,7 @@ dropzoneRef.open()
 ```js static
 import React from 'react'
 import Dropzone from 'react-dropzone'
-import {act, fireEvent, render, waitFor} from '@testing-library/react'
+import {act, fireEvent, render} from '@testing-library/react'
 
 test('invoke onDragEnter when dragenter event occurs', async () => {
   const file = new File([
@@ -248,25 +248,17 @@ test('invoke onDragEnter when dragenter event occurs', async () => {
       )}
     </Dropzone>
   )
-  const { container, rerender } = render(ui)
-  const dropzone = container.querySelector('div')
-
-  dispatchEvt(dropzone, 'dragenter', data)
-  await flushPromises(rerender, ui)
-
+  const { container } = render(ui)
+
+  await act(
+    () => fireEvent.dragEnter(
+      container.querySelector('div'),
+      data,
+    )
+  );
   expect(onDragEnter).toHaveBeenCalled()
 })
 
-async function flushPromises(rerender, ui) {
-  await act(() => waitFor(() => rerender(ui)))
-}
-
-function dispatchEvt(node, type, data) {
-  const event = new Event(type, { bubbles: true })
-  Object.assign(event, data)
-  fireEvent(node, event)
-}
-
 function mockData(files) {
   return {
     dataTransfer: {

package/dist/es/index.js

@@ -102,7 +102,6 @@ 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 {File[]} params.draggedFiles Files in active drag
    * @param {File[]} params.acceptedFiles Accepted files
    * @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected
    */
@@ -326,29 +325,33 @@ export default Dropzone;
  */
 
 /**
- * An object with the current dropzone state and some helper functions.
+ * An object with the current dropzone state.
  *
  * @typedef {object} DropzoneState
- * @property {Function} getRootProps Returns the props you should apply to the root drop container you render
- * @property {Function} getInputProps Returns the props you should apply to hidden file input you render
- * @property {Function} open Open the native file selection dialog
  * @property {boolean} isFocused Dropzone area is in focus
  * @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 {File[]} draggedFiles Files in active drag
  * @property {File[]} acceptedFiles Accepted files
  * @property {FileRejection[]} fileRejections Rejected files and why they were rejected
  */
 
+/**
+ * An object with the dropzone methods.
+ *
+ * @typedef {object} DropzoneMethods
+ * @property {Function} getRootProps Returns the props you should apply to the root drop container you render
+ * @property {Function} getInputProps Returns the props you should apply to hidden file input you render
+ * @property {Function} open Open the native file selection dialog
+ */
+
 var initialState = {
   isFocused: false,
   isFileDialogActive: false,
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
-  draggedFiles: [],
   acceptedFiles: [],
   fileRejections: []
 };
@@ -425,7 +428,7 @@ var initialState = {
  * @param {dropRejectedCb} [props.onDropRejected]
  * @param {(error: Error) => void} [props.onError]
  *
- * @returns {DropzoneState}
+ * @returns {DropzoneState & DropzoneMethods}
  */
 
 export function useDropzone() {
@@ -477,8 +480,7 @@ export function useDropzone() {
       dispatch = _useReducer2[1];
 
   var isFocused = state.isFocused,
-      isFileDialogActive = state.isFileDialogActive,
-      draggedFiles = state.draggedFiles;
+      isFileDialogActive = state.isFileDialogActive;
   var fsAccessApiWorksRef = useRef(typeof window !== "undefined" && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()); // Update file dialog active state when the window is focused on
 
   var onWindowFocus = function onWindowFocus() {
@@ -546,13 +548,24 @@ export function useDropzone() {
     dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);
 
     if (isEvtWithFiles(event)) {
-      Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {
+      Promise.resolve(getFilesFromEvent(event)).then(function (files) {
         if (isPropagationStopped(event) && !noDragEventsBubbling) {
           return;
         }
 
+        var fileCount = files.length;
+        var isDragAccept = fileCount > 0 && allFilesAccepted({
+          files: files,
+          accept: acceptAttr,
+          minSize: minSize,
+          maxSize: maxSize,
+          multiple: multiple,
+          maxFiles: maxFiles
+        });
+        var isDragReject = fileCount > 0 && !isDragAccept;
         dispatch({
-          draggedFiles: draggedFiles,
+          isDragAccept: isDragAccept,
+          isDragReject: isDragReject,
           isDragActive: true,
           type: "setDraggedFiles"
         });
@@ -564,7 +577,7 @@ export function useDropzone() {
         return onErrCb(e);
       });
     }
-  }, [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling]);
+  }, [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling, acceptAttr, minSize, maxSize, multiple, maxFiles]);
   var onDragOverCb = useCallback(function (event) {
     event.preventDefault();
     event.persist();
@@ -608,9 +621,10 @@ export function useDropzone() {
     }
 
     dispatch({
-      isDragActive: false,
       type: "setDraggedFiles",
-      draggedFiles: []
+      isDragActive: false,
+      isDragAccept: false,
+      isDragReject: false
     });
 
     if (isEvtWithFiles(event) && onDragLeave) {
@@ -870,19 +884,7 @@ export function useDropzone() {
       return _objectSpread(_objectSpread({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
-  var fileCount = draggedFiles.length;
-  var isDragAccept = fileCount > 0 && allFilesAccepted({
-    files: draggedFiles,
-    accept: acceptAttr,
-    minSize: minSize,
-    maxSize: maxSize,
-    multiple: multiple,
-    maxFiles: maxFiles
-  });
-  var isDragReject = fileCount > 0 && !isDragAccept;
   return _objectSpread(_objectSpread({}, state), {}, {
-    isDragAccept: isDragAccept,
-    isDragReject: isDragReject,
     isFocused: isFocused && !disabled,
     getRootProps: getRootProps,
     getInputProps: getInputProps,
@@ -891,6 +893,11 @@ export function useDropzone() {
     open: composeHandler(openFileDialog)
   });
 }
+/**
+ * @param {DropzoneState} state
+ * @param {{type: string} & DropzoneState} action
+ * @returns {DropzoneState}
+ */
 
 function reducer(state, action) {
   /* istanbul ignore next */
@@ -916,12 +923,10 @@ function reducer(state, action) {
       });
 
     case "setDraggedFiles":
-      /* eslint no-case-declarations: 0 */
-      var isDragActive = action.isDragActive,
-          draggedFiles = action.draggedFiles;
       return _objectSpread(_objectSpread({}, state), {}, {
-        draggedFiles: draggedFiles,
-        isDragActive: isDragActive
+        isDragActive: action.isDragActive,
+        isDragAccept: action.isDragAccept,
+        isDragReject: action.isDragReject
       });
 
     case "setFiles":