react-dropzone 11.5.3 → 12.0.0

package/dist/es/index.js

@@ -1,6 +1,6 @@
 var _excluded = ["children"],
     _excluded2 = ["open"],
-    _excluded3 = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
+    _excluded3 = ["refKey", "role", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
     _excluded4 = ["refKey", "onChange", "onClick"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -23,9 +23,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -34,10 +34,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /* eslint prefer-template: 0 */
-import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { fromEvent } from 'file-selector';
-import { allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, isEvtWithFiles, isIeOrEdge, isPropagationStopped, onDocumentDragOver, TOO_MANY_FILES_REJECTION } from './utils/index';
+import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
+import PropTypes from "prop-types";
+import { fromEvent } from "file-selector";
+import { allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, filePickerOptionsTypes, canUseFileSystemAccessAPI, isEvtWithFiles, isIeOrEdge, isPropagationStopped, onDocumentDragOver, TOO_MANY_FILES_REJECTION } from "./utils/index";
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -71,7 +71,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open: open
   })));
 });
-Dropzone.displayName = 'Dropzone'; // Add default props for react-docgen
+Dropzone.displayName = "Dropzone"; // Add default props for react-docgen
 
 var defaultProps = {
   disabled: false,
@@ -85,7 +85,8 @@ var defaultProps = {
   noKeyboard: false,
   noDrag: false,
   noDragEventsBubbling: false,
-  validator: null
+  validator: null,
+  useFsAccessApi: true
 };
 Dropzone.defaultProps = defaultProps;
 Dropzone.propTypes = {
@@ -186,6 +187,12 @@ Dropzone.propTypes = {
    */
   onFileDialogOpen: PropTypes.func,
 
+  /**
+   * 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.
+   */
+  useFsAccessApi: PropTypes.bool,
+
   /**
    * Cb for when the `dragenter` event occurs.
    *
@@ -379,6 +386,8 @@ var initialState = {
  * @param {boolean} [props.disabled=false] Enable/disable the dropzone
  * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator
  * @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 {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
@@ -432,6 +441,7 @@ export function useDropzone() {
       onDropRejected = _defaultProps$options.onDropRejected,
       onFileDialogCancel = _defaultProps$options.onFileDialogCancel,
       onFileDialogOpen = _defaultProps$options.onFileDialogOpen,
+      useFsAccessApi = _defaultProps$options.useFsAccessApi,
       preventDropOnDocument = _defaultProps$options.preventDropOnDocument,
       noClick = _defaultProps$options.noClick,
       noKeyboard = _defaultProps$options.noKeyboard,
@@ -439,6 +449,12 @@ export function useDropzone() {
       noDragEventsBubbling = _defaultProps$options.noDragEventsBubbling,
       validator = _defaultProps$options.validator;
 
+  var onFileDialogOpenCb = useMemo(function () {
+    return typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop;
+  }, [onFileDialogOpen]);
+  var onFileDialogCancelCb = useMemo(function () {
+    return typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop;
+  }, [onFileDialogCancel]);
   var rootRef = useRef(null);
   var inputRef = useRef(null);
 
@@ -449,22 +465,7 @@ export function useDropzone() {
 
   var isFocused = state.isFocused,
       isFileDialogActive = state.isFileDialogActive,
-      draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically
-
-  var openFileDialog = useCallback(function () {
-    if (inputRef.current) {
-      dispatch({
-        type: 'openDialog'
-      });
-
-      if (typeof onFileDialogOpen === 'function') {
-        onFileDialogOpen();
-      }
-
-      inputRef.current.value = null;
-      inputRef.current.click();
-    }
-  }, [dispatch, onFileDialogOpen]); // Update file dialog active state when the window is focused on
+      draggedFiles = state.draggedFiles; // Update file dialog active state when the window is focused on
 
   var onWindowFocus = function onWindowFocus() {
     // Execute the timeout only if the file dialog is opened in the browser
@@ -475,12 +476,9 @@ export function useDropzone() {
 
           if (!files.length) {
             dispatch({
-              type: 'closeDialog'
+              type: "closeDialog"
             });
-
-            if (typeof onFileDialogCancel === 'function') {
-              onFileDialogCancel();
-            }
+            onFileDialogCancelCb();
           }
         }
       }, 300);
@@ -488,49 +486,15 @@ export function useDropzone() {
   };
 
   useEffect(function () {
-    window.addEventListener('focus', onWindowFocus, false);
-    return function () {
-      window.removeEventListener('focus', onWindowFocus, false);
-    };
-  }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
-
-  var onKeyDownCb = useCallback(function (event) {
-    // Ignore keyboard events bubbling up the DOM tree
-    if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
-      return;
-    }
-
-    if (event.keyCode === 32 || event.keyCode === 13) {
-      event.preventDefault();
-      openFileDialog();
+    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+      return function () {};
     }
-  }, [rootRef, inputRef, openFileDialog]); // Update focus state for the dropzone
-
-  var onFocusCb = useCallback(function () {
-    dispatch({
-      type: 'focus'
-    });
-  }, []);
-  var onBlurCb = useCallback(function () {
-    dispatch({
-      type: 'blur'
-    });
-  }, []); // Cb to open the file dialog when click occurs on the dropzone
 
-  var onClickCb = useCallback(function () {
-    if (noClick) {
-      return;
-    } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
-    // to ensure React can handle state changes
-    // See: https://github.com/react-dropzone/react-dropzone/issues/450
-
-
-    if (isIeOrEdge()) {
-      setTimeout(openFileDialog, 0);
-    } else {
-      openFileDialog();
-    }
-  }, [inputRef, noClick, openFileDialog]);
+    window.addEventListener("focus", onWindowFocus, false);
+    return function () {
+      window.removeEventListener("focus", onWindowFocus, false);
+    };
+  }, [inputRef, isFileDialogActive, onFileDialogCancelCb, useFsAccessApi]);
   var dragTargetsRef = useRef([]);
 
   var onDocumentDrop = function onDocumentDrop(event) {
@@ -545,14 +509,14 @@ export function useDropzone() {
 
   useEffect(function () {
     if (preventDropOnDocument) {
-      document.addEventListener('dragover', onDocumentDragOver, false);
-      document.addEventListener('drop', onDocumentDrop, false);
+      document.addEventListener("dragover", onDocumentDragOver, false);
+      document.addEventListener("drop", onDocumentDrop, false);
     }
 
     return function () {
       if (preventDropOnDocument) {
-        document.removeEventListener('dragover', onDocumentDragOver);
-        document.removeEventListener('drop', onDocumentDrop);
+        document.removeEventListener("dragover", onDocumentDragOver);
+        document.removeEventListener("drop", onDocumentDrop);
       }
     };
   }, [rootRef, preventDropOnDocument]);
@@ -572,7 +536,7 @@ export function useDropzone() {
         dispatch({
           draggedFiles: draggedFiles,
           isDragActive: true,
-          type: 'setDraggedFiles'
+          type: "setDraggedFiles"
         });
 
         if (onDragEnter) {
@@ -589,7 +553,7 @@ export function useDropzone() {
 
     if (hasFiles && event.dataTransfer) {
       try {
-        event.dataTransfer.dropEffect = 'copy';
+        event.dataTransfer.dropEffect = "copy";
       } catch (_unused) {}
       /* eslint-disable-line no-empty */
 
@@ -625,7 +589,7 @@ export function useDropzone() {
 
     dispatch({
       isDragActive: false,
-      type: 'setDraggedFiles',
+      type: "setDraggedFiles",
       draggedFiles: []
     });
 
@@ -633,6 +597,69 @@ export function useDropzone() {
       onDragLeave(event);
     }
   }, [rootRef, onDragLeave, noDragEventsBubbling]);
+  var setFiles = useCallback(function (files, event) {
+    var acceptedFiles = [];
+    var fileRejections = [];
+    files.forEach(function (file) {
+      var _fileAccepted = fileAccepted(file, accept),
+          _fileAccepted2 = _slicedToArray(_fileAccepted, 2),
+          accepted = _fileAccepted2[0],
+          acceptError = _fileAccepted2[1];
+
+      var _fileMatchSize = fileMatchSize(file, minSize, maxSize),
+          _fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),
+          sizeMatch = _fileMatchSize2[0],
+          sizeError = _fileMatchSize2[1];
+
+      var customErrors = validator ? validator(file) : null;
+
+      if (accepted && sizeMatch && !customErrors) {
+        acceptedFiles.push(file);
+      } else {
+        var errors = [acceptError, sizeError];
+
+        if (customErrors) {
+          errors = errors.concat(customErrors);
+        }
+
+        fileRejections.push({
+          file: file,
+          errors: errors.filter(function (e) {
+            return e;
+          })
+        });
+      }
+    });
+
+    if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {
+      // Reject everything and empty accepted files
+      acceptedFiles.forEach(function (file) {
+        fileRejections.push({
+          file: file,
+          errors: [TOO_MANY_FILES_REJECTION]
+        });
+      });
+      acceptedFiles.splice(0);
+    }
+
+    dispatch({
+      acceptedFiles: acceptedFiles,
+      fileRejections: fileRejections,
+      type: "setFiles"
+    });
+
+    if (onDrop) {
+      onDrop(acceptedFiles, fileRejections, event);
+    }
+
+    if (fileRejections.length > 0 && onDropRejected) {
+      onDropRejected(fileRejections, event);
+    }
+
+    if (acceptedFiles.length > 0 && onDropAccepted) {
+      onDropAccepted(acceptedFiles, event);
+    }
+  }, [dispatch, multiple, accept, minSize, maxSize, maxFiles, onDrop, onDropAccepted, onDropRejected, validator]);
   var onDropCb = useCallback(function (event) {
     event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
 
@@ -646,74 +673,87 @@ export function useDropzone() {
           return;
         }
 
-        var acceptedFiles = [];
-        var fileRejections = [];
-        files.forEach(function (file) {
-          var _fileAccepted = fileAccepted(file, accept),
-              _fileAccepted2 = _slicedToArray(_fileAccepted, 2),
-              accepted = _fileAccepted2[0],
-              acceptError = _fileAccepted2[1];
-
-          var _fileMatchSize = fileMatchSize(file, minSize, maxSize),
-              _fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),
-              sizeMatch = _fileMatchSize2[0],
-              sizeError = _fileMatchSize2[1];
-
-          var customErrors = validator ? validator(file) : null;
-
-          if (accepted && sizeMatch && !customErrors) {
-            acceptedFiles.push(file);
-          } else {
-            var errors = [acceptError, sizeError];
-
-            if (customErrors) {
-              errors = errors.concat(customErrors);
-            }
-
-            fileRejections.push({
-              file: file,
-              errors: errors.filter(function (e) {
-                return e;
-              })
-            });
-          }
-        });
+        setFiles(files, event);
+      });
+    }
 
-        if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {
-          // Reject everything and empty accepted files
-          acceptedFiles.forEach(function (file) {
-            fileRejections.push({
-              file: file,
-              errors: [TOO_MANY_FILES_REJECTION]
-            });
-          });
-          acceptedFiles.splice(0);
-        }
+    dispatch({
+      type: "reset"
+    });
+  }, [getFilesFromEvent, setFiles, noDragEventsBubbling]); // Fn for opening the file dialog programmatically
 
-        dispatch({
-          acceptedFiles: acceptedFiles,
-          fileRejections: fileRejections,
-          type: 'setFiles'
+  var openFileDialog = useCallback(function () {
+    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+      dispatch({
+        type: "openDialog"
+      });
+      onFileDialogOpenCb(); // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+
+      var opts = {
+        multiple: multiple,
+        types: filePickerOptionsTypes(accept)
+      };
+      window.showOpenFilePicker(opts).then(function (handles) {
+        return getFilesFromEvent(handles);
+      }).then(function (files) {
+        return setFiles(files, null);
+      }).catch(function (e) {
+        return onFileDialogCancelCb(e);
+      }).finally(function () {
+        return dispatch({
+          type: "closeDialog"
         });
+      });
+      return;
+    }
 
-        if (onDrop) {
-          onDrop(acceptedFiles, fileRejections, event);
-        }
+    if (inputRef.current) {
+      dispatch({
+        type: "openDialog"
+      });
+      onFileDialogOpenCb();
+      inputRef.current.value = null;
+      inputRef.current.click();
+    }
+  }, [dispatch, onFileDialogOpenCb, onFileDialogCancelCb, useFsAccessApi, setFiles, accept, multiple]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
 
-        if (fileRejections.length > 0 && onDropRejected) {
-          onDropRejected(fileRejections, event);
-        }
+  var onKeyDownCb = useCallback(function (event) {
+    // Ignore keyboard events bubbling up the DOM tree
+    if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
+      return;
+    }
 
-        if (acceptedFiles.length > 0 && onDropAccepted) {
-          onDropAccepted(acceptedFiles, event);
-        }
-      });
+    if (event.keyCode === 32 || event.keyCode === 13) {
+      event.preventDefault();
+      openFileDialog();
     }
+  }, [rootRef, inputRef, openFileDialog]); // Update focus state for the dropzone
 
+  var onFocusCb = useCallback(function () {
+    dispatch({
+      type: "focus"
+    });
+  }, []);
+  var onBlurCb = useCallback(function () {
     dispatch({
-      type: 'reset'
+      type: "blur"
     });
-  }, [multiple, accept, minSize, maxSize, maxFiles, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected, noDragEventsBubbling, validator]);
+  }, []); // Cb to open the file dialog when click occurs on the dropzone
+
+  var onClickCb = useCallback(function () {
+    if (noClick) {
+      return;
+    } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
+    // to ensure React can handle state changes
+    // See: https://github.com/react-dropzone/react-dropzone/issues/450
+
+
+    if (isIeOrEdge()) {
+      setTimeout(openFileDialog, 0);
+    } else {
+      openFileDialog();
+    }
+  }, [inputRef, noClick, openFileDialog]);
 
   var composeHandler = function composeHandler(fn) {
     return disabled ? null : fn;
@@ -737,7 +777,8 @@ export function useDropzone() {
     return function () {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$refKey = _ref2.refKey,
-          refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
+          refKey = _ref2$refKey === void 0 ? "ref" : _ref2$refKey,
+          role = _ref2.role,
           onKeyDown = _ref2.onKeyDown,
           onFocus = _ref2.onFocus,
           onBlur = _ref2.onBlur,
@@ -756,7 +797,8 @@ export function useDropzone() {
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),
         onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
         onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
-        onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))
+        onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
+        role: typeof role === "string" && role !== "" ? role : "button"
       }, refKey, rootRef), !disabled && !noKeyboard ? {
         tabIndex: 0
       } : {}), rest);
@@ -769,7 +811,7 @@ export function useDropzone() {
     return function () {
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref3$refKey = _ref3.refKey,
-          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
+          refKey = _ref3$refKey === void 0 ? "ref" : _ref3$refKey,
           onChange = _ref3.onChange,
           onClick = _ref3.onClick,
           rest = _objectWithoutProperties(_ref3, _excluded4);
@@ -777,13 +819,13 @@ export function useDropzone() {
       var inputProps = _defineProperty({
         accept: accept,
         multiple: multiple,
-        type: 'file',
+        type: "file",
         style: {
-          display: 'none'
+          display: "none"
         },
         onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
         onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
-        autoComplete: 'off',
+        autoComplete: "off",
         tabIndex: -1
       }, refKey, inputRef);
 
@@ -815,27 +857,27 @@ export function useDropzone() {
 function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
-    case 'focus':
+    case "focus":
       return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: true
       });
 
-    case 'blur':
+    case "blur":
       return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: false
       });
 
-    case 'openDialog':
-      return _objectSpread(_objectSpread({}, state), {}, {
+    case "openDialog":
+      return _objectSpread(_objectSpread({}, initialState), {}, {
         isFileDialogActive: true
       });
 
-    case 'closeDialog':
+    case "closeDialog":
       return _objectSpread(_objectSpread({}, state), {}, {
         isFileDialogActive: false
       });
 
-    case 'setDraggedFiles':
+    case "setDraggedFiles":
       /* eslint no-case-declarations: 0 */
       var isDragActive = action.isDragActive,
           draggedFiles = action.draggedFiles;
@@ -844,13 +886,13 @@ function reducer(state, action) {
         isDragActive: isDragActive
       });
 
-    case 'setFiles':
+    case "setFiles":
       return _objectSpread(_objectSpread({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
-    case 'reset':
+    case "reset":
       return _objectSpread({}, initialState);
 
     default:
@@ -858,4 +900,6 @@ function reducer(state, action) {
   }
 }
 
-export { ErrorCode } from './utils';
+function noop() {}
+
+export { ErrorCode } from "./utils";