react-dropzone 11.7.0 → 12.0.2

package/styleguide.config.js

@@ -1,92 +1,99 @@
 /* eslint import/no-extraneous-dependencies: 0 */
-const path = require('path')
-const { createConfig, babel, css, devServer } = require('webpack-blocks')
+const path = require("path");
+const { createConfig, babel, css, devServer } = require("webpack-blocks");
 
 // https://react-styleguidist.js.org/docs/configuration.html
 module.exports = {
-  title: 'react-dropzone',
-  styleguideDir: path.join(__dirname, 'styleguide'),
+  title: "react-dropzone",
+  styleguideDir: path.join(__dirname, "styleguide"),
   template: {
-    favicon: 'https://github.com/react-dropzone/react-dropzone/raw/master/logo/logo.png'
+    favicon:
+      "https://github.com/react-dropzone/react-dropzone/raw/master/logo/logo.png",
   },
-  webpackConfig: createConfig([babel(), css(), devServer({
-    disableHostCheck: true,
-    host: '0.0.0.0',
-  })]),
-  exampleMode: 'expand',
-  usageMode: 'expand',
+  webpackConfig: createConfig([
+    babel(),
+    css(),
+    devServer({
+      disableHostCheck: true,
+      host: "0.0.0.0",
+    }),
+  ]),
+  exampleMode: "expand",
+  usageMode: "expand",
   showSidebar: true,
   serverPort: 8080,
   moduleAliases: {
-    'react-dropzone': path.resolve(__dirname, './src'),
+    "react-dropzone": path.resolve(__dirname, "./src"),
   },
-  require: [
-    path.join(__dirname, 'examples/theme.css'),
-  ],
+  require: [path.join(__dirname, "examples/theme.css")],
   sections: [
     {
-      name: '',
-      content: 'README.md'
+      name: "",
+      content: "README.md",
     },
     // TODO: Figure out how to document the hook
     // See https://github.com/reactjs/react-docgen/issues/332
     {
-      name: 'Components',
-      components: './src/index.js'
+      name: "Components",
+      components: "./src/index.js",
     },
     {
-      name: 'Examples',
+      name: "Examples",
       sections: [
         {
-          name: 'Basic example',
-          content: 'examples/basic/README.md'
+          name: "Basic example",
+          content: "examples/basic/README.md",
+        },
+        {
+          name: "Event Propagation",
+          content: "examples/events/README.md",
         },
         {
-          name: 'Event Propagation',
-          content: 'examples/events/README.md'
+          name: "Styling Dropzone",
+          content: "examples/styling/README.md",
         },
         {
-          name: 'Styling Dropzone',
-          content: 'examples/styling/README.md'
+          name: "Accepting specific file types",
+          content: "examples/accept/README.md",
         },
         {
-          name: 'Accepting specific file types',
-          content: 'examples/accept/README.md'
+          name: "Accepting specific number of files",
+          content: "examples/maxFiles/README.md",
         },
         {
-          name: 'Accepting specific number of files',
-          content: 'examples/maxFiles/README.md'
+          name: "Custom validation",
+          content: "examples/validator/README.md",
         },
         {
-          name: 'Custom validation',
-          content: 'examples/validator/README.md'
+          name: "Opening File Dialog Programmatically",
+          content: "examples/file-dialog/README.md",
         },
         {
-          name: 'Opening File Dialog Programmatically',
-          content: 'examples/file-dialog/README.md'
+          name: "Previews",
+          content: "examples/previews/README.md",
         },
         {
-          name: 'Previews',
-          content: 'examples/previews/README.md'
+          name: "Class Components",
+          content: "examples/class-component/README.md",
         },
         {
-          name: 'Class Components',
-          content: 'examples/class-component/README.md'
+          name: "No JSX",
+          content: "examples/no-jsx/README.md",
         },
         {
-          name: 'Extending Dropzone',
-          content: 'examples/plugins/README.md'
-        }
-      ]
+          name: "Extending Dropzone",
+          content: "examples/plugins/README.md",
+        },
+      ],
     },
     {
-      name: 'Integrations',
+      name: "Integrations",
       sections: [
         {
-          name: 'Pintura',
-          content: 'examples/pintura/README.md'
-        }
-      ]
-    }
-  ]
-}
+          name: "Pintura",
+          content: "examples/pintura/README.md",
+        },
+      ],
+    },
+  ],
+};

package/testSetup.js

@@ -1,2 +1,8 @@
 // https://www.npmjs.com/package/jest-dom
-require('@testing-library/jest-dom/extend-expect')
+require("@testing-library/jest-dom/extend-expect");
+
+Object.defineProperty(global, "isSecureContext", {
+  value: true,
+  writable: true,
+  enumerable: true,
+});

package/typings/.eslintrc

@@ -15,7 +15,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "settings": {
     "react": {

package/typings/react-dropzone.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
 
 export { FileWithPath } from "file-selector";
-export default function Dropzone(props: DropzoneProps & React.RefAttributes<DropzoneRef>): JSX.Element;
+export default function Dropzone(
+  props: DropzoneProps & React.RefAttributes<DropzoneRef>
+): JSX.Element;
 export function useDropzone(options?: DropzoneOptions): DropzoneState;
 
 export interface DropzoneProps extends DropzoneOptions {
@@ -9,10 +11,10 @@ export interface DropzoneProps extends DropzoneOptions {
 }
 
 export enum ErrorCode {
-  FileInvalidType = 'file-invalid-type',
-  FileTooLarge = 'file-too-large',
-  FileTooSmall = 'file-too-small',
-  TooManyFiles = 'too-many-files',
+  FileInvalidType = "file-invalid-type",
+  FileTooLarge = "file-too-large",
+  FileTooSmall = "file-too-small",
+  TooManyFiles = "too-many-files",
 }
 
 export interface FileError {
@@ -36,16 +38,27 @@ export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
   noDrag?: boolean;
   noDragEventsBubbling?: boolean;
   disabled?: boolean;
-  onDrop?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  onDrop?: <T extends File>(
+    acceptedFiles: T[],
+    fileRejections: FileRejection[],
+    event: DropEvent
+  ) => void;
   onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
   onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
-  getFilesFromEvent?: (event: DropEvent) => Promise<Array<File | DataTransferItem>>;
+  getFilesFromEvent?: (
+    event: DropEvent
+  ) => Promise<Array<File | DataTransferItem>>;
   onFileDialogCancel?: () => void;
-  onFileDialogOpen?: ()=> void;
+  onFileDialogOpen?: () => void;
   validator?: <T extends File>(file: T) => FileError | FileError[] | null;
+  useFsAccessApi?: boolean;
 };
 
-export type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;
+export type DropEvent =
+  | React.DragEvent<HTMLElement>
+  | React.ChangeEvent<HTMLInputElement>
+  | DragEvent
+  | Event;
 
 export type DropzoneState = DropzoneRef & {
   isFocused: boolean;
@@ -71,11 +84,9 @@ export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
 }
 
-export interface DropzoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface DropzoneInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   refKey?: string;
 }
 
-type PropTypes = "multiple"
-  | "onDragEnter"
-  | "onDragOver"
-  | "onDragLeave";
+type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";

package/typings/tests/accept.tsx

@@ -4,7 +4,7 @@ import Dropzone from "../../";
 export default class Accept extends React.Component {
   state = {
     accepted: [],
-    rejected: []
+    rejected: [],
   };
 
   render() {
@@ -17,10 +17,11 @@ export default class Accept extends React.Component {
               this.setState({ accepted, rejected });
             }}
           >
-            {({getRootProps}) => (
+            {({ getRootProps }) => (
               <div {...getRootProps()}>
                 <p>
-                  Try dropping some files here, or click to select files to upload.
+                  Try dropping some files here, or click to select files to
+                  upload.
                 </p>
                 <p>Only *.jpeg and *.png images will be accepted</p>
               </div>
@@ -30,7 +31,7 @@ export default class Accept extends React.Component {
         <aside>
           <h2>Accepted files</h2>
           <ul>
-            {this.state.accepted.map(f => (
+            {this.state.accepted.map((f) => (
               <li key={f.name}>
                 {f.name} - {f.size} bytes
               </li>
@@ -38,7 +39,7 @@ export default class Accept extends React.Component {
           </ul>
           <h2>Rejected files</h2>
           <ul>
-            {this.state.rejected.map(f => (
+            {this.state.rejected.map((f) => (
               <li key={f.name}>
                 {f.name} - {f.size} bytes
               </li>
@@ -52,7 +53,7 @@ export default class Accept extends React.Component {
 
 export const acceptExt = (
   <Dropzone accept=".jpeg,.png">
-    {({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
+    {({ getRootProps, isDragActive, isDragAccept, isDragReject }) => (
       <div {...getRootProps()}>
         {isDragAccept && "All files will be accepted"}
         {isDragReject && "Some files will be rejected"}
@@ -64,7 +65,7 @@ export const acceptExt = (
 
 export const acceptMime = (
   <Dropzone accept="image/jpeg, image/png">
-    {({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
+    {({ getRootProps, isDragActive, isDragAccept, isDragReject }) => (
       <div {...getRootProps()}>
         {isDragAccept && "All files will be accepted"}
         {isDragReject && "Some files will be rejected"}
@@ -75,8 +76,8 @@ export const acceptMime = (
 );
 
 export const acceptArray = (
-  <Dropzone accept={['image/jpeg', 'image/png']}>
-    {({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
+  <Dropzone accept={["image/jpeg", "image/png"]}>
+    {({ getRootProps, isDragActive, isDragAccept, isDragReject }) => (
       <div {...getRootProps()}>
         {isDragAccept && "All files will be accepted"}
         {isDragReject && "Some files will be rejected"}

package/typings/tests/all.tsx

@@ -7,10 +7,11 @@ export default class Test extends React.Component {
       <div>
         <Dropzone
           onDrop={(acceptedFiles, fileRejections, event) =>
-            console.log(acceptedFiles, fileRejections, event)}
-          onDragEnter={event => console.log(event)}
-          onDragOver={event => console.log(event)}
-          onDragLeave={event => console.log(event)}
+            console.log(acceptedFiles, fileRejections, event)
+          }
+          onDragEnter={(event) => console.log(event)}
+          onDragOver={(event) => console.log(event)}
+          onDragLeave={(event) => console.log(event)}
           onDropAccepted={(files, event) => console.log(files, event)}
           onDropRejected={(files, event) => console.log(files, event)}
           onFileDialogCancel={() => console.log("onFileDialogCancel invoked")}
@@ -25,8 +26,9 @@ export default class Test extends React.Component {
           disabled
           multiple={false}
           accept="*.png"
+          useFsAccessApi={false}
         >
-          {({getRootProps, getInputProps}) => (
+          {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
             </div>

package/typings/tests/basic.tsx

@@ -7,20 +7,21 @@ export default class Basic extends React.Component {
 
   onDrop = (files: FileWithPath[]) => {
     this.setState({
-      files
+      files,
     });
-  }
+  };
 
   render() {
     return (
       <section>
         <div className="dropzone">
           <Dropzone onDrop={this.onDrop}>
-            {({getRootProps, getInputProps}) => (
+            {({ getRootProps, getInputProps }) => (
               <div {...getRootProps()}>
                 <input {...getInputProps()} />
                 <p>
-                  Try dropping some files here, or click to select files to upload.
+                  Try dropping some files here, or click to select files to
+                  upload.
                 </p>
               </div>
             )}
@@ -29,7 +30,7 @@ export default class Basic extends React.Component {
         <aside>
           <h2>Dropped files</h2>
           <ul>
-            {this.state.files.map(f => (
+            {this.state.files.map((f) => (
               <li key={f.name}>
                 {f.name} - {f.size} bytes
               </li>
@@ -43,10 +44,10 @@ export default class Basic extends React.Component {
 
 export const optional = (
   <Dropzone>
-    {({getRootProps, getInputProps}) => (
+    {({ getRootProps, getInputProps }) => (
       <div {...getRootProps()}>
         <input {...getInputProps()} />
       </div>
     )}
   </Dropzone>
-)
+);

package/typings/tests/events.tsx

@@ -8,16 +8,18 @@ export class Events extends React.Component {
         <div className="dropzone">
           <Dropzone
             onDrop={(acceptedFiles, fileRejections, event) =>
-              console.log(acceptedFiles, fileRejections, event)}
-            onDragEnter={event => console.log(event)}
-            onDragOver={event => console.log(event)}
-            onDragLeave={event => console.log(event)}
+              console.log(acceptedFiles, fileRejections, event)
+            }
+            onDragEnter={(event) => console.log(event)}
+            onDragOver={(event) => console.log(event)}
+            onDragLeave={(event) => console.log(event)}
           >
-            {({getRootProps, getInputProps}) => (
+            {({ getRootProps, getInputProps }) => (
               <div {...getRootProps()}>
                 <input {...getInputProps()} />
                 <p>
-                  Try dropping some files here, or click to select files to upload.
+                  Try dropping some files here, or click to select files to
+                  upload.
                 </p>
               </div>
             )}

package/typings/tests/file-dialog.tsx

@@ -3,10 +3,11 @@ import Dropzone from "../../";
 
 export const dropzone = (
   <Dropzone
-    onDrop={files => console.log(files)}
+    onDrop={(files) => console.log(files)}
     onFileDialogCancel={() => console.log("onFileDialogCancel invoked")}
-    onFileDialogOpen={() => console.log("onFileDialogOpen invoked")}>
-    {({getRootProps, getInputProps, open}) => (
+    onFileDialogOpen={() => console.log("onFileDialogOpen invoked")}
+  >
+    {({ getRootProps, getInputProps, open }) => (
       <div {...getRootProps()}>
         <input {...getInputProps()} />
         <p>Drop some files here.</p>

package/typings/tests/hook.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import {useDropzone, DropzoneProps} from "../../";
+import { useDropzone, DropzoneProps } from "../../";
 
-export const Dropzone = ({children, ...opts}: DropzoneProps) => {
-  const {...state} = useDropzone(opts);
+export const Dropzone = ({ children, ...opts }: DropzoneProps) => {
+  const { ...state } = useDropzone(opts);
   return children(state);
-}
+};
 
 <Dropzone>
-  {({getRootProps, getInputProps}) => (
+  {({ getRootProps, getInputProps }) => (
     <div {...getRootProps()}>
       <input {...getInputProps()} />
     </div>
   )}
-</Dropzone>
+</Dropzone>;

package/typings/tests/plugin.tsx

@@ -1,19 +1,17 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
 import Dropzone from "../../";
 
 export class TestReactDragEvt extends Component {
   getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
     const files = Array.from(event.dataTransfer.files);
     return files;
-  }
+  };
 
   render() {
     return (
       <div>
         <Dropzone getFilesFromEvent={this.getFiles}>
-          {({getRootProps}) => (
-            <div {...getRootProps()} />
-          )}
+          {({ getRootProps }) => <div {...getRootProps()} />}
         </Dropzone>
       </div>
     );
@@ -24,15 +22,13 @@ export class TestDataTransferItems extends Component {
   getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
     const items = Array.from(event.dataTransfer.items);
     return items;
-  }
+  };
 
   render() {
     return (
       <div>
         <Dropzone getFilesFromEvent={this.getFiles}>
-          {({getRootProps}) => (
-            <div {...getRootProps()} />
-          )}
+          {({ getRootProps }) => <div {...getRootProps()} />}
         </Dropzone>
       </div>
     );
@@ -43,15 +39,13 @@ export class TestNativeDragEventEvt extends Component {
   getFiles = async (event: DragEvent) => {
     const files = Array.from(event.dataTransfer.files);
     return files;
-  }
+  };
 
   render() {
     return (
       <div>
         <Dropzone getFilesFromEvent={this.getFiles}>
-          {({getRootProps}) => (
-            <div {...getRootProps()} />
-          )}
+          {({ getRootProps }) => <div {...getRootProps()} />}
         </Dropzone>
       </div>
     );
@@ -62,35 +56,30 @@ export class TestChangeEvt extends Component {
   getFiles = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(event.target.files);
     return files;
-  }
+  };
 
   render() {
     return (
       <div>
         <Dropzone getFilesFromEvent={this.getFiles}>
-          {({getRootProps}) => (
-            <div {...getRootProps()} />
-          )}
+          {({ getRootProps }) => <div {...getRootProps()} />}
         </Dropzone>
       </div>
     );
   }
 }
 
-
 export class TestNativeEvt extends Component {
   getFiles = async (event: Event) => {
     const files = Array.from((event.target as HTMLInputElement).files);
     return files;
-  }
+  };
 
   render() {
     return (
       <div>
         <Dropzone getFilesFromEvent={this.getFiles}>
-          {({getRootProps}) => (
-            <div {...getRootProps()} />
-          )}
+          {({ getRootProps }) => <div {...getRootProps()} />}
         </Dropzone>
       </div>
     );

package/typings/tests/refs.tsx

@@ -1,11 +1,11 @@
-import React, {createRef} from "react";
-import Dropzone, {DropzoneRef} from "../../";
+import React, { createRef } from "react";
+import Dropzone, { DropzoneRef } from "../../";
 
-const ref = createRef<DropzoneRef>()
+const ref = createRef<DropzoneRef>();
 
 export const dropzone = (
   <Dropzone ref={ref}>
-    {({getRootProps, getInputProps}) => (
+    {({ getRootProps, getInputProps }) => (
       <div {...getRootProps()}>
         <input {...getInputProps()} />
         <p>Drop some files here.</p>