react-dropzone 14.2.9 → 14.3.8

package/package.json

@@ -5,9 +5,14 @@
   "module": "dist/es/index.js",
   "exports": {
     ".": {
-      "import": "./dist/es/index.js",
-      "require": "./dist/index.js",
-      "types": "./typings/react-dropzone.d.ts"
+      "import": {
+        "types": "./typings/react-dropzone.d.ts",
+        "default": "./dist/es/index.js"
+      },
+      "require": {
+        "types": "./typings/react-dropzone.d.ts",
+        "default": "./dist/index.js"
+      }
     }
   },
   "typesVersions": {
@@ -21,9 +26,10 @@
   "scripts": {
     "cz": "git-cz",
     "clean": "rimraf ./dist",
-    "build": "yarn clean && yarn build:umd && yarn build:es",
+    "build": "yarn clean && yarn build:umd && yarn build:es && yarn build:es-package",
     "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'",
+    "build:es-package": "echo '{\"type\":\"module\"}' > dist/es/package.json",
     "start": "styleguidist server",
     "styleguide": "styleguidist build",
     "test": "cross-env NODE_ENV=test yarn lint && jest --coverage && yarn typescript",
@@ -44,11 +50,11 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "8 KB"
+      "limit": "17 KB"
     },
     {
       "path": "dist/es/index.js",
-      "limit": "8 KB"
+      "limit": "17 KB"
     }
   ],
   "lint-staged": {
@@ -112,8 +118,8 @@
     "react": ">= 16.8 || 18.0.0"
   },
   "dependencies": {
-    "attr-accept": "^2.2.2",
-    "file-selector": "^0.6.0",
+    "attr-accept": "^2.2.4",
+    "file-selector": "^2.1.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
@@ -180,12 +186,12 @@
     "size-limit": "^7.0.5",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.3",
-    "typescript": "^4.0.2",
+    "typescript": "^5.6.3",
     "webpack": "^5.67.0",
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "14.2.9",
+  "version": "14.3.8",
   "engines": {
     "node": ">= 10.13"
   },

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 role=\\"presentation\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" tabindex=\\"-1\\"></div>"`;
+exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"presentation\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" tabindex=\\"-1\\"></div>"`;

package/src/index.js

@@ -26,7 +26,7 @@ import {
   onDocumentDragOver,
   pickerOptionsFromAccept,
   TOO_MANY_FILES_REJECTION,
-} from "./utils/index";
+} from "./utils/index.js";
 
 /**
  * Convenience wrapper component for the `useDropzone` hook
@@ -154,7 +154,7 @@ Dropzone.propTypes = {
   /**
    * Use this to provide a custom file aggregator
    *
-   * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
+   * @param {(DragEvent|Event|Array<FileSystemFileHandle>)} event A drag event or input change event (if files were selected via the file dialog)
    */
   getFilesFromEvent: PropTypes.func,
 
@@ -310,7 +310,7 @@ export default Dropzone;
  * in a asynchronous fashion, from drag or input change events.
  *
  * @callback getFilesFromEvent
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
+ * @param {(DragEvent|Event|Array<FileSystemFileHandle>)} event A drag event or input change event (if files were selected via the file dialog)
  * @returns {(File[]|Promise<File[]>)}
  */
 
@@ -703,6 +703,7 @@ export function useDropzone(props = {}) {
       dispatch({
         acceptedFiles,
         fileRejections,
+        isDragReject: fileRejections.length > 0,
         type: "setFiles",
       });
 
@@ -946,7 +947,18 @@ export function useDropzone(props = {}) {
           accept: acceptAttr,
           multiple,
           type: "file",
-          style: { display: "none" },
+          style: {
+            border: 0,
+            clip: "rect(0, 0, 0, 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            margin: "0 -1px -1px 0",
+            overflow: "hidden",
+            padding: 0,
+            position: "absolute",
+            width: "1px",
+            whiteSpace: "nowrap",
+          },
           onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
           onClick: composeHandler(
             composeEventHandlers(onClick, onInputElementClick)
@@ -1014,6 +1026,7 @@ function reducer(state, action) {
         ...state,
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections,
+        isDragReject: action.isDragReject,
       };
     case "reset":
       return {
@@ -1026,4 +1039,4 @@ function reducer(state, action) {
 
 function noop() {}
 
-export { ErrorCode } from "./utils";
+export { ErrorCode } from "./utils/index.js";

package/src/index.spec.js

@@ -2510,7 +2510,7 @@ describe("useDropzone() hook", () => {
       expect(onDropSpy).toHaveBeenCalledWith(files, [], expect.anything());
     });
 
-    it("sets {acceptedFiles, fileRejections}", async () => {
+    it("sets {acceptedFiles, fileRejections, isDragReject}", async () => {
       const FileList = ({ files = [] }) => (
         <ul>
           {files.map((file) => (
@@ -2558,11 +2558,18 @@ describe("useDropzone() hook", () => {
             "image/*": [],
           }}
         >
-          {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
+          {({
+            getRootProps,
+            getInputProps,
+            acceptedFiles,
+            fileRejections,
+            isDragReject,
+          }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
               <FileList files={acceptedFiles} />
               <RejectedFileList fileRejections={fileRejections} />
+              {isDragReject && "dragReject"}
             </div>
           )}
         </Dropzone>
@@ -2574,6 +2581,7 @@ describe("useDropzone() hook", () => {
       const acceptedFileList = getAcceptedFiles(dropzone);
       expect(acceptedFileList).toHaveLength(images.length);
       expect(matchToFiles(acceptedFileList, images)).toBe(true);
+      expect(dropzone).not.toHaveTextContent("dragReject");
 
       await act(() => fireEvent.drop(dropzone, createDtWithFiles(files)));
 
@@ -2585,6 +2593,7 @@ describe("useDropzone() hook", () => {
       expect(matchToErrorCode(rejectedFileErrorList, "file-invalid-type")).toBe(
         true
       );
+      expect(dropzone).toHaveTextContent("dragReject");
     });
 
     it("resets {isDragActive, isDragAccept, isDragReject}", async () => {

package/src/utils/index.js

@@ -15,15 +15,18 @@ export const ErrorCode = {
   TooManyFiles: TOO_MANY_FILES,
 };
 
-// File Errors
-export const getInvalidTypeRejectionErr = (accept) => {
-  accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
-  const messageSuffix = Array.isArray(accept)
-    ? `one of ${accept.join(", ")}`
-    : accept;
+/**
+ *
+ * @param {string} accept
+ */
+export const getInvalidTypeRejectionErr = (accept = "") => {
+  const acceptArr = accept.split(",");
+  const msg =
+    acceptArr.length > 1 ? `one of ${acceptArr.join(", ")}` : acceptArr[0];
+
   return {
     code: FILE_INVALID_TYPE,
-    message: `File type must be ${messageSuffix}`,
+    message: `File type must be ${msg}`,
   };
 };
 
@@ -50,8 +53,16 @@ export const TOO_MANY_FILES_REJECTION = {
   message: "Too many files",
 };
 
-// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
-// that MIME type will always be accepted
+/**
+ * Check if file is accepted.
+ *
+ * Firefox versions prior to 53 return a bogus MIME type for every file drag,
+ * so dragovers with that MIME type will always be accepted.
+ *
+ * @param {File} file
+ * @param {string} accept
+ * @returns
+ */
 export function fileAccepted(file, accept) {
   const isAcceptable =
     file.type === "application/x-moz-file" || accepts(file, accept);
@@ -82,7 +93,7 @@ function isDefined(value) {
  *
  * @param {object} options
  * @param {File[]} options.files
- * @param {string|string[]} [options.accept]
+ * @param {string} [options.accept]
  * @param {number} [options.minSize]
  * @param {number} [options.maxSize]
  * @param {boolean} [options.multiple]
@@ -297,6 +308,7 @@ export function isMIMEType(v) {
     v === "video/*" ||
     v === "image/*" ||
     v === "text/*" ||
+    v === "application/*" ||
     /\w+\/[-+.\w]+/g.test(v)
   );
 }

package/src/utils/index.spec.js

@@ -269,7 +269,7 @@ describe("fileAccepted()", () => {
 
   it("accepts file when multiple accept criteria", () => {
     const file = createFile("hamster.pdf", 100, "application/pdf");
-    expect(utils.fileAccepted(file, [".pdf", ".png"])).toEqual([true, null]);
+    expect(utils.fileAccepted(file, ".pdf,.png")).toEqual([true, null]);
   });
 
   it("rejects file when single accept criteria", () => {
@@ -282,7 +282,7 @@ describe("fileAccepted()", () => {
 
   it("rejects file when multiple accept criteria", () => {
     const file = createFile("hamster.pdf", 100, "application/pdf");
-    expect(utils.fileAccepted(file, [".gif", ".png"])).toEqual([
+    expect(utils.fileAccepted(file, ".gif,.png")).toEqual([
       false,
       {
         code: "file-invalid-type",
@@ -290,13 +290,51 @@ describe("fileAccepted()", () => {
       },
     ]);
   });
+});
 
-  it("rejects file when single accept criteria as array", () => {
-    const file = createFile("hamster.pdf", 100, "application/pdf");
-    expect(utils.fileAccepted(file, [".gif"])).toEqual([
-      false,
-      { code: "file-invalid-type", message: "File type must be .gif" },
-    ]);
+describe("getTooLargeRejectionErr()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
+
+  it("prints byte when maxSize is 1", () => {
+    expect(utils.getTooLargeRejectionErr(1).message).toEqual(
+      "File is larger than 1 byte"
+    );
+  });
+
+  it("prints bytes when maxSize > 1", () => {
+    expect(utils.getTooLargeRejectionErr(100).message).toEqual(
+      "File is larger than 100 bytes"
+    );
+  });
+});
+
+describe("getTooSmallRejectionErr()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
+
+  it("prints byte when minSize is 1", () => {
+    expect(utils.getTooSmallRejectionErr(1).message).toEqual(
+      "File is smaller than 1 byte"
+    );
+  });
+
+  it("prints bytes when minSize > 1", () => {
+    expect(utils.getTooSmallRejectionErr(100).message).toEqual(
+      "File is smaller than 100 bytes"
+    );
   });
 });
 
@@ -461,6 +499,7 @@ describe("isMIMEType()", () => {
     expect(utils.isMIMEType("image/*")).toBe(true);
     expect(utils.isMIMEType("video/*")).toBe(true);
     expect(utils.isMIMEType("audio/*")).toBe(true);
+    expect(utils.isMIMEType("application/*")).toBe(true);
     expect(utils.isMIMEType("test/*")).toBe(false);
     expect(utils.isMIMEType("text")).toBe(false);
     expect(utils.isMIMEType("")).toBe(false);

package/typings/react-dropzone.d.ts

@@ -4,11 +4,11 @@ import { FileWithPath } from "file-selector";
 export { FileWithPath };
 export default function Dropzone(
   props: DropzoneProps & React.RefAttributes<DropzoneRef>
-): JSX.Element;
+): React.ReactElement;
 export function useDropzone(options?: DropzoneOptions): DropzoneState;
 
 export interface DropzoneProps extends DropzoneOptions {
-  children?(state: DropzoneState): JSX.Element;
+  children?(state: DropzoneState): React.ReactElement;
 }
 
 export enum ErrorCode {
@@ -63,7 +63,8 @@ export type DropEvent =
   | React.DragEvent<HTMLElement>
   | React.ChangeEvent<HTMLInputElement>
   | DragEvent
-  | Event;
+  | Event
+  | Array<FileSystemFileHandle>;
 
 export type DropzoneState = DropzoneRef & {
   isFocused: boolean;

package/CONTRIBUTING.md

@@ -1,135 +0,0 @@
-# Contributing
-
-First off, thanks for taking the time to contribute! 
-
-All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 
-
-And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
-* Star the project
-* Refer this project in your project's readme
-* Mention the project at local meetups and tell your friends/colleagues
-* Become a sponsor
-
-## Table of Contents
-
-* [Code of Conduct](#code-of-conduct)
-* [I Have a Question](#i-have-a-question)
-* [I Want To Contribute](#i-want-to-contribute)
-* [Reporting Bugs](#reporting-bugs)
-* [Suggesting Enhancements](#suggesting-enhancements)
-* [Your First Code Contribution](#your-first-code-contribution)
-* [Styleguides](#styleguides)
-* [Join The Project Team](#join-the-project-team)
-
-## Code of Conduct
-
-This project and everyone participating in it is governed by the
-[Code of Conduct](https://github.com/react-dropzone/react-dropzone?tab=coc-ov-file#readme).
-By participating, you are expected to uphold this code. Please report unacceptable behavior
-to rolandjitsu@gmail.com.
-
-## I Have a Question
-
-If you want to ask a question, we assume that you have read the available [Documentation](https://react-dropzone.js.org/).
-
-Before you ask a question, it is best to search for existing [Issues](/issues) or [Discussions](/discussions) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.
-
-If you then still feel the need to ask a question and need clarification, we recommend the following:
-
-* Open an [Issue](/issues/new).
-* Provide as much context as you can about what you're running into.
-* Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
-
-We will then take care of the issue as soon as possible.
-
-## I Want To Contribute
-
-### Reporting Bugs
-
-#### Before Submitting a Bug Report
-
-A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
-
-* Make sure that you are using the latest version.
-* Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://react-dropzone.js.org/). If you are looking for support, you might want to check [this section](#i-have-a-question)).
-* To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](issues?q=label%3Abug).
-* Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue.
-* Collect information about the bug:
-    * Stack trace (Traceback)
-    * OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
-    * Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant.
-    * Possibly your input and the output
-    * Can you reliably reproduce the issue? And can you also reproduce it with older versions?
-
-#### How Do I Submit a Good Bug Report?
-
-We use GitHub issues to track bugs and errors. If you run into an issue with the project, open an [Issue](/issues/new), select the `Bug Report` and fill in all the details.
-
-Once it's filed:
-
-* The project team will label the issue accordingly.
-* A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs example`. Bugs with the `needs example` tag will not be addressed until they are reproduced.
-* If the team is able to reproduce the issue, it will be marked `needs investigation`, as well as possibly other tags (such as `in progress`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
-
-### Suggesting Enhancements
-
-This section guides you through submitting an enhancement suggestion for this project, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
-
-#### Before Submitting an Enhancement
-
-* Make sure that you are using the latest version.
-* Read the [documentation](https://react-dropzone.js.org/) carefully and find out if the functionality is already covered, maybe by an individual configuration.
-* Perform a [search](/issues) to see if the enhancement has already been suggested (filter by the `enhancement` label). If it has, add a comment to the existing issue instead of opening a new one.
-* Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
-
-#### How Do I Submit a Good Enhancement Suggestion?
-
-Enhancement suggestions are tracked as [GitHub issues](/issues). If you have a suggestion, open an [Issue](/issues/new), select the `Feature Request` and fill in all the details.
-
-### Your First Code Contribution
-
-Make sure your node version is at least 18, then:
-
-1. Fork this repo
-2. Clone your fork:
-```bash
-git clone https://github.com/myusername/react-dropzone.git
-```
-3. Install system dependencies (needed for local development):
-```bash
-# macOS
-brew install libpng libimagequant
-# Linux
-sudo apt-get install -y libpng-dev libimagequant-dev
-```
-4. Install project dependencies:
-```bash
-yarn install
-```
-5. Create a new branch:
-```bash
-git checkout -b fix/fix-some-bug
-```
-6. Start hacking
-7. Commit and push your code
-8. Make a PR
-
-**NOTE** If you're using Apple silicon, you'll need to install Rosetta 2 (see [imagemin/pngquant-bin#121](https://github.com/imagemin/pngquant-bin/issues/121) and [SO](https://stackoverflow.com/a/66662497/1092007)):
-```bash
-/usr/sbin/softwareupdate --install-rosetta
-```
-
-## Styleguides
-
-When you commit we'll make sure everything is formatted according to our styleguide, so don't worry to much about it.
-
-### Commit Messages
-
-Please follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) spec.
-
-## Join The Project Team
-
-Send an email to rolandjitsu@gmail.com and see how you can become a project member.
-
-## Attribution
-This guide is based on the **contributing.md**. [Make your own](https://contributing.md/)!