react-dropzone 13.0.0 → 14.0.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.0.0",
   "engines": {
     "node": ">= 10.13"
   },

package/src/index.js

@@ -85,7 +85,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
    */
@@ -310,29 +309,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: [],
 };
@@ -410,7 +413,7 @@ const initialState = {
  * @param {dropRejectedCb} [props.onDropRejected]
  * @param {(error: Error) => void} [props.onError]
  *
- * @returns {DropzoneState}
+ * @returns {DropzoneState & DropzoneMethods}
  */
 export function useDropzone(props = {}) {
   const {
@@ -459,7 +462,7 @@ export function useDropzone(props = {}) {
   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" &&
@@ -538,13 +541,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 +573,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 +630,10 @@ export function useDropzone(props = {}) {
       }
 
       dispatch({
-        isDragActive: false,
         type: "setDraggedFiles",
-        draggedFiles: [],
+        isDragActive: false,
+        isDragAccept: false,
+        isDragReject: false,
       });
 
       if (isEvtWithFiles(event) && onDragLeave) {
@@ -906,23 +934,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 +945,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 +974,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 {