react-dropzone 11.7.0 → 12.0.2

package/examples/accept/README.md

@@ -7,7 +7,14 @@ The value must be a comma-separated list of unique content type specifiers:
 * video/* representing video files.
 * image/* representing image files.
 
-For more information see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
+For more information see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input.
+
+**IMPORTANT** As of [v12.0.0](https://github.com/react-dropzone/react-dropzone/releases/tag/v12.0.0), there has been some changes that affect how `accept` works.
+See [file dialog cancel callback](../../README.md#file-dialog-cancel-callback) to read more about why this change was introduced. In summary:
+1. In browsers that **do not support** the FS access API, the `accept` attr works exactly the same as in previous versions of react-dropozone, for both file picker and dag 'n' drop
+2. In browsers that **support** the FS access API, when passing file extensions to `accept` (e.g `".jpg,.png"`), the file picker will not apply those filters, but drag 'n' drop will - though, the [browser limitations](#browser-limitations) described in this document still apply
+3. If you want the same behaviour in all browsers, regardless of using the FS access API or not, you need to use MIME types - [browser limitations](#browser-limitations) still apply
+4. The use of FS access API can be turned off via `useDropzone({useFsAccessApi: false})`
 
 ```jsx harmony
 import React from 'react';
@@ -20,7 +27,7 @@ function Accept(props) {
     getRootProps,
     getInputProps
   } = useDropzone({
-    accept: 'image/jpeg, image/png'
+    accept: 'image/jpeg,image/png'
   });
 
   const acceptedFileItems = acceptedFiles.map(file => (
@@ -110,7 +117,7 @@ function Accept(props) {
     isDragAccept,
     isDragReject
   } = useDropzone({
-    accept: 'image/jpeg, image/png'
+    accept: 'image/jpeg,image/png'
   });
 
   return (

package/examples/no-jsx/README.md

@@ -0,0 +1,32 @@
+If you'd like to use [react without JSX](https://reactjs.org/docs/react-without-jsx.html) you can:
+
+```js harmony
+import React, {useCallback, useState} from 'react';
+import {useDropzone} from 'react-dropzone';
+
+const e = React.createElement
+
+function Basic () {
+  const [files, setFiles] = useState([]);
+  const onDrop = useCallback(files => setFiles(files), [setFiles]);
+
+  const {getRootProps, getInputProps} = useDropzone({onDrop});
+
+  const fileList = files.map(
+    file => React.createElement('li', {key: file.name}, `${file.name} - ${file.size} bytes`)
+  );
+
+  return e('section', {className: 'container'}, [
+    e('div', getRootProps({className: 'dropzone', key: 'dropzone'}), [
+      e('input', getInputProps({key: 'input'})),
+      e('p', {key: 'desc'}, "Drag 'n' drop some files here, or click to select files")
+    ]),
+    e('aside', {key: 'filesContainer'}, [
+      e('h4', {key: 'title'}, 'Files'),
+      e('ul', {key: 'fileList'}, fileList)
+    ])
+  ]);
+}
+
+Basic()
+```

package/package.json

@@ -12,9 +12,10 @@
     "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 yarn eslint:src && jest --coverage && yarn typescript",
+    "test": "cross-env NODE_ENV=test yarn lint && jest --coverage && yarn typescript",
     "test:watch": "cross-env NODE_ENV=test jest --watch",
-    "eslint:src": "eslint .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "commitmsg": "commitlint -e",
     "prepublish": "yarn build && yarn size",
     "_postinstall": "husky install",
@@ -29,16 +30,16 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "7 KB"
+      "limit": "7.5 KB"
     },
     {
       "path": "dist/es/index.js",
-      "limit": "7 KB"
+      "limit": "7.5 KB"
     }
   ],
   "lint-staged": {
     "*.js": [
-      "eslint --fix"
+      "eslint . --fix"
     ],
     "*.ts": [
       "eslint ."
@@ -170,7 +171,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "11.7.0",
+  "version": "12.0.2",
   "engines": {
     "node": ">= 10.13"
   },

package/rollup.config.js

@@ -1,33 +1,33 @@
-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 { 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',
-  'prop-types': 'PropTypes'
-}
+  react: "React",
+  "prop-types": "PropTypes",
+};
 
 module.exports = [
   {
-    input: './src/index.js',
+    input: "./src/index.js",
     output: {
-      file: 'dist/index.js',
-      format: 'umd',
-      name: 'reactDropzone',
+      file: "dist/index.js",
+      format: "umd",
+      name: "reactDropzone",
       globals: umdGlobals,
-      sourcemap: 'inline',
-      exports: 'named'
+      sourcemap: "inline",
+      exports: "named",
     },
     external: Object.keys(umdGlobals),
     plugins: [
       nodeResolve(),
-      commonjs({ include: '**/node_modules/**' }),
+      commonjs({ include: "**/node_modules/**" }),
       babel({
-        exclude: '**/node_modules/**',
-        babelHelpers: 'bundled',
+        exclude: "**/node_modules/**",
+        babelHelpers: "bundled",
       }),
-      terser()
-    ]
-  }
-]
+      terser(),
+    ],
+  },
+];

package/src/.eslintrc

@@ -19,11 +19,10 @@
     "react-hooks"
   ],
   "extends": [
-    //"okonet/react",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "react-hooks/rules-of-hooks": 2,