react-dropzone 11.5.3 → 11.6.0

package/package.json

@@ -5,19 +5,21 @@
   "module": "dist/es/index.js",
   "sideEffects": false,
   "scripts": {
-    "ci": "git-cz",
+    "cz": "git-cz",
     "clean": "rimraf ./dist",
-    "build": "npm run clean && npm run build:umd && npm run build:es",
+    "build": "yarn clean && yarn build:umd && yarn build:es",
     "build:umd": "cross-env NODE_ENV=es rollup -c",
     "build:es": "cross-env BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore '**/*.spec.js'",
     "start": "styleguidist server",
     "styleguide": "styleguidist build",
-    "test": "cross-env NODE_ENV=test npm run eslint:src && jest --coverage && npm run typescript",
+    "test": "cross-env NODE_ENV=test yarn eslint:src && jest --coverage && yarn typescript",
     "test:watch": "cross-env NODE_ENV=test jest --watch",
     "eslint:src": "eslint .",
     "commitmsg": "commitlint -e",
-    "precommit": "lint-staged",
-    "prepublish": "npm run build && npm run size",
+    "prepublish": "yarn build && yarn size",
+    "_postinstall": "husky install",
+    "prepublishOnly": "pinst --disable",
+    "postpublish": "pinst --enable",
     "logo": "cd logo && sketchtool export artboards logo.sketch",
     "imagemin": "imagemin --out-dir=logo --plugin=pngquant --plugin=svgo",
     "size": "size-limit",
@@ -36,18 +38,22 @@
   ],
   "lint-staged": {
     "*.js": [
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ],
     "*.ts": [
-      "tslint"
+      "eslint ."
     ],
     "*.{svg,png}": [
-      "imagemin",
-      "git add"
+      "imagemin"
     ]
   },
+  "config": {
+    "commitizen": {
+      "path": "@commitlint/prompt"
+    }
+  },
   "jest": {
+    "testEnvironment": "jsdom",
     "clearMocks": true,
     "setupFilesAfterEnv": [
       "<rootDir>/testSetup.js"
@@ -91,85 +97,82 @@
     "react": ">= 16.8"
   },
   "dependencies": {
-    "attr-accept": "^2.2.1",
-    "file-selector": "^0.2.2",
-    "prop-types": "^15.7.2"
+    "attr-accept": "^2.2.2",
+    "file-selector": "^0.4.0",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-external-helpers": "^7.10.4",
-    "@babel/plugin-proposal-do-expressions": "^7.10.4",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.10.5",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/register": "^7.11.5",
-    "@commitlint/cli": "^9.1.2",
-    "@commitlint/config-angular": "^9.1.2",
-    "@commitlint/prompt": "^9.1.2",
-    "@commitlint/prompt-cli": "^9.1.2",
-    "@size-limit/preset-small-lib": "^4.5.7",
-    "@testing-library/dom": "^8.0.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.0",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/plugin-external-helpers": "^7.16.7",
+    "@babel/plugin-proposal-do-expressions": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-pipeline-operator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/register": "^7.16.9",
+    "@commitlint/cli": "^16.1.0",
+    "@commitlint/config-angular": "^16.0.0",
+    "@commitlint/prompt": "^16.1.0",
+    "@commitlint/prompt-cli": "^16.1.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@size-limit/preset-small-lib": "^7.0.5",
+    "@size-limit/webpack": "^7.0.5",
+    "@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",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "babel-eslint": "10.x",
-    "babel-jest": "^26.3.0",
-    "babel-plugin-add-module-exports": "^1.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "babel-jest": "^27.4.6",
+    "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "commitizen": "^4.2.1",
-    "cross-env": "^7.0.2",
-    "eslint": "7.x",
-    "eslint-config-okonet": "^7.0.2",
-    "eslint-config-prettier": "6.x",
-    "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-node": "11.x",
-    "eslint-plugin-prettier": "3.x",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "4.x",
-    "husky": "^4.2.5",
-    "imagemin-cli": "^6.0.0",
-    "imagemin-pngquant": "^9.0.0",
-    "jest": "^26.4.2",
-    "lint-staged": "^10.3.0",
-    "markdownlint-cli": "^0.23.2",
-    "prettier": "*",
+    "commitizen": "^4.2.4",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.8.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "imagemin-cli": "^7.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "jest": "^27.4.7",
+    "lint-staged": "^12.3.2",
+    "markdownlint-cli": "^0.30.0",
+    "pinst": "^2.1.6",
+    "prettier": "^2.5.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-styleguidist": "^11.0.10",
+    "react-styleguidist": "^11.2.0",
     "react-test-renderer": "^17.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.26.10",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "sinon": "^9.0.3",
-    "size-limit": "^4.5.7",
-    "style-loader": "^1.2.1",
-    "styled-components": "^5.2.0",
-    "tslint": "^6.1.3",
+    "rollup": "^2.66.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "size-limit": "^7.0.5",
+    "style-loader": "^3.3.1",
+    "styled-components": "^5.3.3",
     "typescript": "^4.0.2",
-    "webpack": "^4.44.1",
+    "webpack": "^5.67.0",
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "config": {
-    "commitizen": {
-      "path": "@commitlint/prompt"
-    }
-  },
-  "version": "11.5.3",
+  "version": "11.6.0",
   "engines": {
-    "node": ">= 10"
+    "node": ">= 10.13"
   },
   "browserslist": [
     "defaults"

package/rollup.config.js

@@ -1,7 +1,7 @@
-const nodeResolve = require('rollup-plugin-node-resolve')
-const commonjs = require('rollup-plugin-commonjs')
-const babel = require('rollup-plugin-babel')
-const { uglify } = require('rollup-plugin-uglify')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const commonjs = require('@rollup/plugin-commonjs')
+const { babel } = require('@rollup/plugin-babel')
+const { terser } = require('rollup-plugin-terser')
 
 const umdGlobals = {
   react: 'React',
@@ -23,8 +23,11 @@ module.exports = [
     plugins: [
       nodeResolve(),
       commonjs({ include: '**/node_modules/**' }),
-      babel({ exclude: '**/node_modules/**' }),
-      uglify()
+      babel({
+        exclude: '**/node_modules/**',
+        babelHelpers: 'bundled',
+      }),
+      terser()
     ]
   }
 ]

package/src/.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2017,
     "sourceType": "module"
@@ -23,12 +23,16 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier",
-    "prettier/react"
+    "prettier"
   ],
   "rules": {
     "react-hooks/rules-of-hooks": 2,
     "react/forbid-prop-types": 0,
     "react/require-default-props": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

package/src/index.js

@@ -10,12 +10,14 @@ import React, {
   useRef
 } from 'react'
 import PropTypes from 'prop-types'
-import { fromEvent } from 'file-selector'
+import {fromEvent} from 'file-selector'
 import {
   allFilesAccepted,
   composeEventHandlers,
   fileAccepted,
   fileMatchSize,
+  filePickerOptionsTypes,
+  canUseFileSystemAccessAPI,
   isEvtWithFiles,
   isIeOrEdge,
   isPropagationStopped,
@@ -37,13 +39,13 @@ import {
  * </Dropzone>
  * ```
  */
-const Dropzone = forwardRef(({ children, ...params }, ref) => {
-  const { open, ...props } = useDropzone(params)
+const Dropzone = forwardRef(({children, ...params}, ref) => {
+  const {open, ...props} = useDropzone(params)
 
-  useImperativeHandle(ref, () => ({ open }), [open])
+  useImperativeHandle(ref, () => ({open}), [open])
 
   // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
-  return <Fragment>{children({ ...props, open })}</Fragment>
+  return <Fragment>{children({...props, open})}</Fragment>
 })
 
 Dropzone.displayName = 'Dropzone'
@@ -158,9 +160,9 @@ Dropzone.propTypes = {
    */
   onFileDialogCancel: PropTypes.func,
 
-    /**
-     * Cb for when opening the file dialog
-     */
+  /**
+   * Cb for when opening the file dialog
+   */
   onFileDialogOpen: PropTypes.func,
 
   /**
@@ -420,23 +422,18 @@ export function useDropzone(options = {}) {
     ...options
   }
 
+  const onFileDialogOpenCb = useMemo(
+    () => typeof onFileDialogOpen === 'function' ? onFileDialogOpen : noop,
+    [onFileDialogOpen])
+  const onFileDialogCancelCb = useMemo(
+    () => typeof onFileDialogCancel === 'function' ? onFileDialogCancel : noop,
+    [onFileDialogCancel])
+
   const rootRef = useRef(null)
   const inputRef = useRef(null)
 
   const [state, dispatch] = useReducer(reducer, initialState)
-  const { isFocused, isFileDialogActive, draggedFiles } = state
-
-  // Fn for opening the file dialog programmatically
-  const openFileDialog = useCallback(() => {
-    if (inputRef.current) {
-      dispatch({ type: 'openDialog' })
-      if (typeof onFileDialogOpen === 'function') {
-        onFileDialogOpen()
-      }
-      inputRef.current.value = null
-      inputRef.current.click()
-    }
-  }, [dispatch, onFileDialogOpen])
+  const {isFocused, isFileDialogActive, draggedFiles} = state
 
   // Update file dialog active state when the window is focused on
   const onWindowFocus = () => {
@@ -444,65 +441,26 @@ export function useDropzone(options = {}) {
     if (isFileDialogActive) {
       setTimeout(() => {
         if (inputRef.current) {
-          const { files } = inputRef.current
+          const {files} = inputRef.current
 
           if (!files.length) {
-            dispatch({ type: 'closeDialog' })
-
-            if (typeof onFileDialogCancel === 'function') {
-              onFileDialogCancel()
-            }
+            dispatch({type: 'closeDialog'})
+            onFileDialogCancelCb()
           }
         }
       }, 300)
     }
   }
   useEffect(() => {
+    if (canUseFileSystemAccessAPI()) {
+      return () => {}
+    }
+
     window.addEventListener('focus', onWindowFocus, false)
     return () => {
       window.removeEventListener('focus', onWindowFocus, false)
     }
-  }, [inputRef, isFileDialogActive, onFileDialogCancel])
-
-  // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
-  const onKeyDownCb = useCallback(
-    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()
-      }
-    },
-    [rootRef, inputRef, openFileDialog]
-  )
-
-  // Update focus state for the dropzone
-  const onFocusCb = useCallback(() => {
-    dispatch({ type: 'focus' })
-  }, [])
-  const onBlurCb = useCallback(() => {
-    dispatch({ type: 'blur' })
-  }, [])
-
-  // Cb to open the file dialog when click occurs on the dropzone
-  const onClickCb = useCallback(() => {
-    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])
+  }, [inputRef, isFileDialogActive, onFileDialogCancelCb])
 
   const dragTargetsRef = useRef([])
   const onDocumentDrop = event => {
@@ -614,6 +572,66 @@ export function useDropzone(options = {}) {
     [rootRef, onDragLeave, noDragEventsBubbling]
   )
 
+  const setFiles = useCallback((files, event) => {
+    const acceptedFiles = []
+    const fileRejections = []
+
+    files.forEach(file => {
+      const [accepted, acceptError] = fileAccepted(file, accept)
+      const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize)
+      const customErrors = validator ? validator(file) : null;
+
+      if (accepted && sizeMatch && !customErrors) {
+        acceptedFiles.push(file)
+      } else {
+        let errors = [acceptError, sizeError];
+
+        if (customErrors) {
+          errors = errors.concat(customErrors);
+        }
+
+        fileRejections.push({file, errors: errors.filter(e => e)})
+      }
+    })
+
+    if ((!multiple && acceptedFiles.length > 1) || (multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles)) {
+      // Reject everything and empty accepted files
+      acceptedFiles.forEach(file => {
+        fileRejections.push({file, errors: [TOO_MANY_FILES_REJECTION]})
+      })
+      acceptedFiles.splice(0)
+    }
+
+    dispatch({
+      acceptedFiles,
+      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
+  ]);
+
   const onDropCb = useCallback(
     event => {
       event.preventDefault()
@@ -628,72 +646,91 @@ export function useDropzone(options = {}) {
           if (isPropagationStopped(event) && !noDragEventsBubbling) {
             return
           }
-
-          const acceptedFiles = []
-          const fileRejections = []
-
-          files.forEach(file => {
-            const [accepted, acceptError] = fileAccepted(file, accept)
-            const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize)
-            const customErrors = validator ? validator(file) : null;
-
-            if (accepted && sizeMatch && !customErrors) {
-              acceptedFiles.push(file)
-            } else {
-              let errors = [acceptError, sizeError];
-
-              if (customErrors) {
-                errors = errors.concat(customErrors);
-              }
-
-              fileRejections.push({ file, errors: errors.filter(e => e) })
-            }
-          })
-
-          if ((!multiple && acceptedFiles.length > 1) || (multiple && maxFiles >= 1 &&  acceptedFiles.length > maxFiles)) {
-            // Reject everything and empty accepted files
-            acceptedFiles.forEach(file => {
-              fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] })
-            })
-            acceptedFiles.splice(0)
-          }
-
-          dispatch({
-            acceptedFiles,
-            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)
-          }
+          setFiles(files, event)
         })
       }
-      dispatch({ type: 'reset' })
+      dispatch({type: 'reset'})
     },
     [
-      multiple,
-      accept,
-      minSize,
-      maxSize,
-      maxFiles,
       getFilesFromEvent,
-      onDrop,
-      onDropAccepted,
-      onDropRejected,
-      noDragEventsBubbling,
-      validator
+      setFiles,
+      noDragEventsBubbling
     ]
   )
 
+  // Fn for opening the file dialog programmatically
+  const openFileDialog = useCallback(() => {
+    if (canUseFileSystemAccessAPI()) {
+      dispatch({type: 'openDialog'})
+      onFileDialogOpenCb()
+      // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+      const opts = {
+        multiple,
+        types: filePickerOptionsTypes(accept)
+      };
+      window.showOpenFilePicker(opts)
+        .then(handles => getFilesFromEvent(handles))
+        .then(files => setFiles(files, null))
+        .catch(e => onFileDialogCancelCb(e))
+        .finally(() => dispatch({type: 'closeDialog'}));
+      return
+    }
+
+    if (inputRef.current) {
+      dispatch({type: 'openDialog'})
+      onFileDialogOpenCb()
+      inputRef.current.value = null
+      inputRef.current.click()
+    }
+  }, [
+    dispatch,
+    onFileDialogOpenCb,
+    onFileDialogCancelCb,
+    setFiles,
+    accept,
+    multiple
+  ])
+
+  // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
+  const onKeyDownCb = useCallback(
+    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()
+      }
+    },
+    [rootRef, inputRef, openFileDialog]
+  )
+
+  // Update focus state for the dropzone
+  const onFocusCb = useCallback(() => {
+    dispatch({type: 'focus'})
+  }, [])
+  const onBlurCb = useCallback(() => {
+    dispatch({type: 'blur'})
+  }, [])
+
+  // Cb to open the file dialog when click occurs on the dropzone
+  const onClickCb = useCallback(() => {
+    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])
+
   const composeHandler = fn => {
     return disabled ? null : fn
   }
@@ -734,7 +771,7 @@ export function useDropzone(options = {}) {
       onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
       onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
       [refKey]: rootRef,
-      ...(!disabled && !noKeyboard ? { tabIndex: 0 } : {}),
+      ...(!disabled && !noKeyboard ? {tabIndex: 0} : {}),
       ...rest
     }),
     [
@@ -758,12 +795,12 @@ export function useDropzone(options = {}) {
   }, [])
 
   const getInputProps = useMemo(
-    () => ({ refKey = 'ref', onChange, onClick, ...rest } = {}) => {
+    () => ({refKey = 'ref', onChange, onClick, ...rest} = {}) => {
       const inputProps = {
         accept,
         multiple,
         type: 'file',
-        style: { display: 'none' },
+        style: {display: 'none'},
         onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
         onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
         autoComplete: 'off',
@@ -780,7 +817,7 @@ export function useDropzone(options = {}) {
   )
 
   const fileCount = draggedFiles.length
-  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles })
+  const isDragAccept = fileCount > 0 && allFilesAccepted({files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles})
   const isDragReject = fileCount > 0 && !isDragAccept
 
   return {
@@ -811,7 +848,7 @@ function reducer(state, action) {
       }
     case 'openDialog':
       return {
-        ...state,
+        ...initialState,
         isFileDialogActive: true
       }
     case 'closeDialog':
@@ -821,7 +858,7 @@ function reducer(state, action) {
       }
     case 'setDraggedFiles':
       /* eslint no-case-declarations: 0 */
-      const { isDragActive, draggedFiles } = action
+      const {isDragActive, draggedFiles} = action
       return {
         ...state,
         draggedFiles,
@@ -842,4 +879,6 @@ function reducer(state, action) {
   }
 }
 
-export { ErrorCode } from './utils'
+function noop() {}
+
+export {ErrorCode} from './utils'