react-dropzone 11.5.3 → 12.0.0

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

@@ -5,19 +5,22 @@
   "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 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",
-    "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 +39,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 +98,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": "12.0.0",
   "engines": {
-    "node": ">= 10"
+    "node": ">= 10.13"
   },
   "browserslist": [
     "defaults"

package/rollup.config.js

@@ -1,30 +1,33 @@
-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',
-  '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/**' }),
-      babel({ exclude: '**/node_modules/**' }),
-      uglify()
-    ]
-  }
-]
+      commonjs({ include: "**/node_modules/**" }),
+      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"
@@ -19,16 +19,19 @@
     "react-hooks"
   ],
   "extends": [
-    //"okonet/react",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier",
-    "prettier/react"
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "react-hooks/rules-of-hooks": 2,
     "react/forbid-prop-types": 0,
     "react/require-default-props": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

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 tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;
+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;\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;