react-dropzone 13.0.0 → 14.1.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

@@ -86,7 +86,8 @@ var defaultProps = {
   noDrag: false,
   noDragEventsBubbling: false,
   validator: null,
-  useFsAccessApi: true
+  useFsAccessApi: true,
+  autoFocus: false
 };
 Dropzone.defaultProps = defaultProps;
 Dropzone.propTypes = {
@@ -102,7 +103,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
    */
@@ -192,6 +192,11 @@ Dropzone.propTypes = {
    */
   useFsAccessApi: PropTypes.bool,
 
+  /**
+   * Set to true to focus the root element on render
+   */
+  autoFocus: PropTypes.bool,
+
   /**
    * Cb for when the `dragenter` event occurs.
    *
@@ -326,29 +331,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: []
 };
@@ -393,6 +402,7 @@ var initialState = {
  * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection
  * @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
  * to open the file picker instead of using an `<input type="file">` click event.
+ * @param {boolean} autoFocus Set to true to auto focus the root element.
  * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog
  * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
  * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs
@@ -425,7 +435,7 @@ var initialState = {
  * @param {dropRejectedCb} [props.onDropRejected]
  * @param {(error: Error) => void} [props.onError]
  *
- * @returns {DropzoneState}
+ * @returns {DropzoneState & DropzoneMethods}
  */
 
 export function useDropzone() {
@@ -448,6 +458,7 @@ export function useDropzone() {
       onFileDialogCancel = _defaultProps$props.onFileDialogCancel,
       onFileDialogOpen = _defaultProps$props.onFileDialogOpen,
       useFsAccessApi = _defaultProps$props.useFsAccessApi,
+      autoFocus = _defaultProps$props.autoFocus,
       preventDropOnDocument = _defaultProps$props.preventDropOnDocument,
       noClick = _defaultProps$props.noClick,
       noKeyboard = _defaultProps$props.noKeyboard,
@@ -468,6 +479,11 @@ export function useDropzone() {
   var onFileDialogCancelCb = useMemo(function () {
     return typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop;
   }, [onFileDialogCancel]);
+  /**
+   * @constant
+   * @type {React.MutableRefObject<HTMLElement>}
+   */
+
   var rootRef = useRef(null);
   var inputRef = useRef(null);
 
@@ -477,8 +493,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() {
@@ -529,7 +544,15 @@ export function useDropzone() {
         document.removeEventListener("drop", onDocumentDrop);
       }
     };
-  }, [rootRef, preventDropOnDocument]);
+  }, [rootRef, preventDropOnDocument]); // Auto focus the root when autoFocus is true
+
+  useEffect(function () {
+    if (!disabled && autoFocus && rootRef.current) {
+      rootRef.current.focus();
+    }
+
+    return function () {};
+  }, [rootRef, autoFocus, disabled]);
   var onErrCb = useCallback(function (e) {
     if (onError) {
       onError(e);
@@ -546,13 +569,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 +598,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 +642,10 @@ export function useDropzone() {
     }
 
     dispatch({
-      isDragActive: false,
       type: "setDraggedFiles",
-      draggedFiles: []
+      isDragActive: false,
+      isDragAccept: false,
+      isDragReject: false
     });
 
     if (isEvtWithFiles(event) && onDragLeave) {
@@ -837,7 +872,7 @@ export function useDropzone() {
         onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
         onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
         onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
-        role: typeof role === "string" && role !== "" ? role : "button"
+        role: typeof role === "string" && role !== "" ? role : "presentation"
       }, refKey, rootRef), !disabled && !noKeyboard ? {
         tabIndex: 0
       } : {}), rest);
@@ -870,19 +905,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 +914,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 +944,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":