react-dropzone - npm Package Compare versions

Comparing version 14.0.1 to 14.1.0

dist/es/index.js

@@ -89,3 +89,4 @@ var _excluded = ["children"],
   validator: null,
-  useFsAccessApi: true
+  useFsAccessApi: true,
+  autoFocus: false
 };
@@ -196,2 +197,7 @@ Dropzone.defaultProps = defaultProps;
   /**
+   * Set to true to focus the root element on render
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
    * Cb for when the `dragenter` event occurs.
@@ -401,2 +407,3 @@ *
  * to open the file picker instead of using an `<input type="file">` click event.
+ * @param {boolean} autoFocus Set to true to auto focus the root element.
  * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog
@@ -457,2 +464,3 @@ * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
       useFsAccessApi = _defaultProps$props.useFsAccessApi,
+      autoFocus = _defaultProps$props.autoFocus,
       preventDropOnDocument = _defaultProps$props.preventDropOnDocument,
@@ -478,2 +486,7 @@ noClick = _defaultProps$props.noClick,
   }, [onFileDialogCancel]);
+  /**
+   * @constant
+   * @type {React.MutableRefObject<HTMLElement>}
+   */
+
   var rootRef = useRef(null);
@@ -539,3 +552,11 @@ var inputRef = useRef(null);
     };
-  }, [rootRef, preventDropOnDocument]);
+  }, [rootRef, preventDropOnDocument]); // Auto focus the root when autoFocus is true
+
+  useEffect(function () {
+    if (!disabled && autoFocus && rootRef.current) {
+      rootRef.current.focus();
+    }
+
+    return function () {};
+  }, [rootRef, autoFocus, disabled]);
   var onErrCb = useCallback(function (e) {
@@ -542,0 +563,0 @@ if (onError) {

package.json

@@ -174,3 +174,3 @@ {
   "typings": "typings/react-dropzone.d.ts",
-  "version": "14.0.1",
+  "version": "14.1.0",
   "engines": {
@@ -177,0 +177,0 @@ "node": ">= 10.13"

src/index.js

@@ -71,2 +71,3 @@ /* eslint prefer-template: 0 */
   useFsAccessApi: true,
+  autoFocus: false,
 };
@@ -178,2 +179,7 @@
   /**
+   * Set to true to focus the root element on render
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
    * Cb for when the `dragenter` event occurs.
@@ -386,2 +392,3 @@ *
  * to open the file picker instead of using an `<input type="file">` click event.
+ * @param {boolean} autoFocus Set to true to auto focus the root element.
  * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog
@@ -439,2 +446,3 @@ * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
     useFsAccessApi,
+    autoFocus,
     preventDropOnDocument,
@@ -465,3 +473,8 @@ noClick,
 
+  /**
+   * @constant
+   * @type {React.MutableRefObject<HTMLElement>}
+   */
   const rootRef = useRef(null);
+
   const inputRef = useRef(null);
@@ -526,2 +539,10 @@
 
+  // Auto focus the root when autoFocus is true
+  useEffect(() => {
+    if (!disabled && autoFocus && rootRef.current) {
+      rootRef.current.focus();
+    }
+    return () => {};
+  }, [rootRef, autoFocus, disabled]);
+
   const onErrCb = useCallback(
@@ -528,0 +549,0 @@ (e) => {

typings/react-dropzone.d.ts

@@ -55,2 +55,3 @@ import * as React from "react";
   useFsAccessApi?: boolean;
+  autoFocus?: boolean;
 };
@@ -57,0 +58,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

425293

increased by0.82%

Lines of code

6904

increased by1.16%

No dependency changes