react-dropzone 13.0.0 → 14.1.0

package/package.json

@@ -95,7 +95,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">= 16.8"
+    "react": ">= 16.8 || 18.0.0"
   },
   "dependencies": {
     "attr-accept": "^2.2.2",
@@ -129,8 +129,8 @@
     "@size-limit/webpack-why": "^7.0.5",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
@@ -156,10 +156,10 @@
     "markdownlint-cli": "^0.30.0",
     "pinst": "^2.1.6",
     "prettier": "^2.5.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-styleguidist": "^11.2.0",
-    "react-test-renderer": "^17.0.0",
+    "react-test-renderer": "^18.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.66.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -171,7 +171,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "13.0.0",
+  "version": "14.1.0",
   "engines": {
     "node": ">= 10.13"
   },

package/src/__snapshots__/index.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"button\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" tabindex=\\"-1\\"></div>"`;
+exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"presentation\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" tabindex=\\"-1\\"></div>"`;

package/src/index.js

@@ -68,6 +68,7 @@ const defaultProps = {
   noDragEventsBubbling: false,
   validator: null,
   useFsAccessApi: true,
+  autoFocus: false,
 };
 
 Dropzone.defaultProps = defaultProps;
@@ -85,7 +86,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
    */
@@ -174,6 +174,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.
    *
@@ -310,29 +315,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
+ */
+
 const initialState = {
   isFocused: false,
   isFileDialogActive: false,
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
-  draggedFiles: [],
   acceptedFiles: [],
   fileRejections: [],
 };
@@ -378,6 +387,7 @@ const 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
@@ -410,7 +420,7 @@ const initialState = {
  * @param {dropRejectedCb} [props.onDropRejected]
  * @param {(error: Error) => void} [props.onError]
  *
- * @returns {DropzoneState}
+ * @returns {DropzoneState & DropzoneMethods}
  */
 export function useDropzone(props = {}) {
   const {
@@ -430,6 +440,7 @@ export function useDropzone(props = {}) {
     onFileDialogCancel,
     onFileDialogOpen,
     useFsAccessApi,
+    autoFocus,
     preventDropOnDocument,
     noClick,
     noKeyboard,
@@ -455,11 +466,16 @@ export function useDropzone(props = {}) {
     [onFileDialogCancel]
   );
 
+  /**
+   * @constant
+   * @type {React.MutableRefObject<HTMLElement>}
+   */
   const rootRef = useRef(null);
+
   const inputRef = useRef(null);
 
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { isFocused, isFileDialogActive, draggedFiles } = state;
+  const { isFocused, isFileDialogActive } = state;
 
   const fsAccessApiWorksRef = useRef(
     typeof window !== "undefined" &&
@@ -515,6 +531,14 @@ export function useDropzone(props = {}) {
     };
   }, [rootRef, preventDropOnDocument]);
 
+  // Auto focus the root when autoFocus is true
+  useEffect(() => {
+    if (!disabled && autoFocus && rootRef.current) {
+      rootRef.current.focus();
+    }
+    return () => {};
+  }, [rootRef, autoFocus, disabled]);
+
   const onErrCb = useCallback(
     (e) => {
       if (onError) {
@@ -538,13 +562,27 @@ export function useDropzone(props = {}) {
 
       if (isEvtWithFiles(event)) {
         Promise.resolve(getFilesFromEvent(event))
-          .then((draggedFiles) => {
+          .then((files) => {
             if (isPropagationStopped(event) && !noDragEventsBubbling) {
               return;
             }
 
+            const fileCount = files.length;
+            const isDragAccept =
+              fileCount > 0 &&
+              allFilesAccepted({
+                files,
+                accept: acceptAttr,
+                minSize,
+                maxSize,
+                multiple,
+                maxFiles,
+              });
+            const isDragReject = fileCount > 0 && !isDragAccept;
+
             dispatch({
-              draggedFiles,
+              isDragAccept,
+              isDragReject,
               isDragActive: true,
               type: "setDraggedFiles",
             });
@@ -556,7 +594,17 @@ export function useDropzone(props = {}) {
           .catch((e) => onErrCb(e));
       }
     },
-    [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling]
+    [
+      getFilesFromEvent,
+      onDragEnter,
+      onErrCb,
+      noDragEventsBubbling,
+      acceptAttr,
+      minSize,
+      maxSize,
+      multiple,
+      maxFiles,
+    ]
   );
 
   const onDragOverCb = useCallback(
@@ -603,9 +651,10 @@ export function useDropzone(props = {}) {
       }
 
       dispatch({
-        isDragActive: false,
         type: "setDraggedFiles",
-        draggedFiles: [],
+        isDragActive: false,
+        isDragAccept: false,
+        isDragReject: false,
       });
 
       if (isEvtWithFiles(event) && onDragLeave) {
@@ -857,7 +906,7 @@ export function useDropzone(props = {}) {
           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,
@@ -906,23 +955,8 @@ export function useDropzone(props = {}) {
     [inputRef, accept, multiple, onDropCb, disabled]
   );
 
-  const fileCount = draggedFiles.length;
-  const isDragAccept =
-    fileCount > 0 &&
-    allFilesAccepted({
-      files: draggedFiles,
-      accept: acceptAttr,
-      minSize,
-      maxSize,
-      multiple,
-      maxFiles,
-    });
-  const isDragReject = fileCount > 0 && !isDragAccept;
-
   return {
     ...state,
-    isDragAccept,
-    isDragReject,
     isFocused: isFocused && !disabled,
     getRootProps,
     getInputProps,
@@ -932,6 +966,11 @@ export function useDropzone(props = {}) {
   };
 }
 
+/**
+ * @param {DropzoneState} state
+ * @param {{type: string} & DropzoneState} action
+ * @returns {DropzoneState}
+ */
 function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
@@ -956,12 +995,11 @@ function reducer(state, action) {
         isFileDialogActive: false,
       };
     case "setDraggedFiles":
-      /* eslint no-case-declarations: 0 */
-      const { isDragActive, draggedFiles } = action;
       return {
         ...state,
-        draggedFiles,
-        isDragActive,
+        isDragActive: action.isDragActive,
+        isDragAccept: action.isDragAccept,
+        isDragReject: action.isDragReject,
       };
     case "setFiles":
       return {