react-dropzone 14.3.2 → 14.3.4

package/package.json

@@ -190,7 +190,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "14.3.2",
+  "version": "14.3.4",
   "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

@@ -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 {

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 () => {