react-dropzone 16.0.0 → 18.0.0

package/dist/index.js

@@ -1,44 +1,40 @@
-import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
-import PropTypes from "prop-types";
 import { fromEvent } from "file-selector";
-import _accepts from "attr-accept";
-import { jsx } from "react/jsx-runtime";
-//#region src/utils/index.js
-const accepts = typeof _accepts === "function" ? _accepts : _accepts.default;
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
+import attrAccept from "attr-accept";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/utils/index.ts
+const accepts = typeof attrAccept === "function" ? attrAccept : attrAccept.default;
 const FILE_INVALID_TYPE = "file-invalid-type";
 const FILE_TOO_LARGE = "file-too-large";
 const FILE_TOO_SMALL = "file-too-small";
 const TOO_MANY_FILES = "too-many-files";
-const ErrorCode = {
-	FileInvalidType: FILE_INVALID_TYPE,
-	FileTooLarge: FILE_TOO_LARGE,
-	FileTooSmall: FILE_TOO_SMALL,
-	TooManyFiles: TOO_MANY_FILES
-};
-/**
-*
-* @param {string} accept
-*/
-const getInvalidTypeRejectionErr = (accept = "") => {
+let ErrorCode = /* @__PURE__ */ function(ErrorCode) {
+	ErrorCode["FileInvalidType"] = "file-invalid-type";
+	ErrorCode["FileTooLarge"] = "file-too-large";
+	ErrorCode["FileTooSmall"] = "file-too-small";
+	ErrorCode["TooManyFiles"] = "too-many-files";
+	return ErrorCode;
+}({});
+function 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 ${msg}`
 	};
-};
-const getTooLargeRejectionErr = (maxSize) => {
+}
+function getTooLargeRejectionErr(maxSize) {
 	return {
 		code: FILE_TOO_LARGE,
 		message: `File is larger than ${maxSize} ${maxSize === 1 ? "byte" : "bytes"}`
 	};
-};
-const getTooSmallRejectionErr = (minSize) => {
+}
+function getTooSmallRejectionErr(minSize) {
 	return {
 		code: FILE_TOO_SMALL,
 		message: `File is smaller than ${minSize} ${minSize === 1 ? "byte" : "bytes"}`
 	};
-};
+}
 const TOO_MANY_FILES_REJECTION = {
 	code: TOO_MANY_FILES,
 	message: "Too many files"
@@ -49,16 +45,6 @@ const TOO_MANY_FILES_REJECTION = {
 * During drag events, browsers may return DataTransferItem objects instead of File objects.
 * Some browsers (e.g., Chrome) return an empty MIME type for certain file types (like .md files)
 * on DataTransferItem during drag events, even though the type is correctly set during drop.
-*
-* This function detects such cases by checking for:
-* 1. Empty type string
-* 2. Presence of getAsFile method (indicates it's a DataTransferItem, not a File)
-*
-* We accept these during drag to provide proper UI feedback, while maintaining
-* strict validation during drop when real File objects are available.
-*
-* @param {File | DataTransferItem} file
-* @returns {boolean}
 */
 function isDataTransferItemWithEmptyType(file) {
 	return file.type === "" && typeof file.getAsFile === "function";
@@ -71,13 +57,9 @@ function isDataTransferItemWithEmptyType(file) {
 *
 * Chrome/other browsers may return an empty MIME type for files during drag events,
 * so we accept those as well (we'll validate properly on drop).
-*
-* @param {File} file
-* @param {string} accept
-* @returns
 */
 function fileAccepted(file, accept) {
-	const isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept) || isDataTransferItemWithEmptyType(file);
+	const isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept ?? "") || isDataTransferItemWithEmptyType(file);
 	return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];
 }
 function fileMatchSize(file, minSize, maxSize) {
@@ -93,19 +75,7 @@ function fileMatchSize(file, minSize, maxSize) {
 function isDefined(value) {
 	return value !== void 0 && value !== null;
 }
-/**
-*
-* @param {object} options
-* @param {File[]} options.files
-* @param {string} [options.accept]
-* @param {number} [options.minSize]
-* @param {number} [options.maxSize]
-* @param {boolean} [options.multiple]
-* @param {number} [options.maxFiles]
-* @param {(f: File) => FileError|FileError[]|null} [options.validator]
-* @returns
-*/
-function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles, validator }) {
+function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles = 0, validator }) {
 	if (!multiple && files.length > 1 || multiple && maxFiles >= 1 && files.length > maxFiles) return false;
 	return files.every((file) => {
 		const [accepted] = fileAccepted(file, accept);
@@ -136,14 +106,11 @@ function isIeOrEdge(userAgent = window.navigator.userAgent) {
 	return isIe(userAgent) || isEdge(userAgent);
 }
 /**
-* This is intended to be used to compose event handlers
+* This is intended to be used to compose event handlers.
 * They are executed in order until one of them calls `event.isPropagationStopped()`.
 * Note that the check is done on the first invoke too,
 * meaning that if propagation was stopped before invoking the fns,
 * no handlers will be executed.
-*
-* @param {Function} fns the event hanlder functions
-* @return {Function} the event handler to add to an element
 */
 function composeEventHandlers(...fns) {
 	return (event, ...args) => fns.some((fn) => {
@@ -152,19 +119,13 @@ function composeEventHandlers(...fns) {
 	});
 }
 /**
-* canUseFileSystemAccessAPI checks if the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
-* is supported by the browser.
-* @returns {boolean}
+* canUseFileSystemAccessAPI checks if the File System Access API is supported by the browser.
 */
 function canUseFileSystemAccessAPI() {
 	return "showOpenFilePicker" in window;
 }
 /**
-* Convert the `{accept}` dropzone prop to the
-* `{types}` option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
-*
-* @param {AcceptProp} accept
-* @returns {{accept: string[]}[]}
+* Convert the `{accept}` dropzone prop to the `{types}` option for showOpenFilePicker.
 */
 function pickerOptionsFromAccept(accept) {
 	if (isDefined(accept)) return [{
@@ -180,75 +141,47 @@ function pickerOptionsFromAccept(accept) {
 				ok = false;
 			}
 			return ok;
-		}).reduce((agg, [mimeType, ext]) => ({
-			...agg,
-			[mimeType]: ext
-		}), {})
+		}).reduce((agg, [mimeType, ext]) => {
+			agg[mimeType] = ext;
+			return agg;
+		}, {})
 	}];
-	return accept;
 }
 /**
 * Convert the `{accept}` dropzone prop to an array of MIME types/extensions.
-* @param {AcceptProp} accept
-* @returns {string}
 */
 function acceptPropAsAcceptAttr(accept) {
-	if (isDefined(accept)) return Object.entries(accept).reduce((a, [mimeType, ext]) => [
-		...a,
-		mimeType,
-		...ext
-	], []).filter((v) => isMIMEType(v) || isExt(v)).join(",");
+	if (isDefined(accept)) return Object.entries(accept).reduce((a, [mimeType, ext]) => {
+		a.push(mimeType, ...ext);
+		return a;
+	}, []).filter((v) => isMIMEType(v) || isExt(v)).join(",");
 }
 /**
 * Check if v is an exception caused by aborting a request (e.g window.showOpenFilePicker()).
-*
-* See https://developer.mozilla.org/en-US/docs/Web/API/DOMException.
-* @param {any} v
-* @returns {boolean} True if v is an abort exception.
 */
 function isAbort(v) {
 	return v instanceof DOMException && (v.name === "AbortError" || v.code === v.ABORT_ERR);
 }
 /**
 * Check if v is a security error.
-*
-* See https://developer.mozilla.org/en-US/docs/Web/API/DOMException.
-* @param {any} v
-* @returns {boolean} True if v is a security error.
 */
 function isSecurityError(v) {
 	return v instanceof DOMException && (v.name === "SecurityError" || v.code === v.SECURITY_ERR);
 }
 /**
 * Check if v is a MIME type string.
-*
-* See accepted format: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers.
-*
-* @param {string} v
 */
 function isMIMEType(v) {
 	return v === "audio/*" || v === "video/*" || v === "image/*" || v === "text/*" || v === "application/*" || /\w+\/[-+.\w]+/g.test(v);
 }
 /**
 * Check if v is a file extension.
-* @param {string} v
 */
 function isExt(v) {
 	return /^.*\.[\w]+$/.test(v);
 }
-/**
-* @typedef {Object.<string, string[]>} AcceptProp
-*/
-/**
-* @typedef {object} FileError
-* @property {string} message
-* @property {ErrorCode|string} code
-*/
-/**
-* @typedef {"file-invalid-type"|"file-too-large"|"file-too-small"|"too-many-files"} ErrorCode
-*/
 //#endregion
-//#region src/index.jsx
+//#region src/index.tsx
 /**
 * Convenience wrapper component for the `useDropzone` hook
 *
@@ -266,261 +199,12 @@ function isExt(v) {
 const Dropzone = forwardRef(({ children, ...params }, ref) => {
 	const { open, ...props } = useDropzone(params);
 	useImperativeHandle(ref, () => ({ open }), [open]);
-	return /* @__PURE__ */ jsx(Fragment, { children: children({
+	return /* @__PURE__ */ jsx(Fragment, { children: children?.({
 		...props,
 		open
 	}) });
 });
 Dropzone.displayName = "Dropzone";
-const defaultProps = {
-	disabled: false,
-	getFilesFromEvent: fromEvent,
-	maxSize: Infinity,
-	minSize: 0,
-	multiple: true,
-	maxFiles: 0,
-	preventDropOnDocument: true,
-	noClick: false,
-	noKeyboard: false,
-	noDrag: false,
-	noDragEventsBubbling: false,
-	validator: null,
-	useFsAccessApi: false,
-	autoFocus: false
-};
-Dropzone.defaultProps = defaultProps;
-Dropzone.propTypes = {
-	/**
-	* Render function that exposes the dropzone state and prop getter fns
-	*
-	* @param {object} params
-	* @param {Function} params.getRootProps Returns the props you should apply to the root drop container you render
-	* @param {Function} params.getInputProps Returns the props you should apply to hidden file input you render
-	* @param {Function} params.open Open the native file selection dialog
-	* @param {boolean} params.isFocused Dropzone area is in focus
-	* @param {boolean} params.isFileDialogActive File dialog is opened
-	* @param {boolean} params.isDragActive Active drag is in progress
-	* @param {boolean} params.isDragAccept Dragged files are accepted
-	* @param {boolean} params.isDragReject True only during an active drag when some dragged files would be rejected. After drop, this resets to false. Use fileRejections for post-drop errors.
-	* @param {boolean} params.isDragGlobal Files are being dragged anywhere on the document
-	* @param {File[]} params.acceptedFiles Accepted files
-	* @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected. This persists after drop and is the source of truth for post-drop rejections.
-	*/
-	children: PropTypes.func,
-	/**
-	* Set accepted file types.
-	* Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.
-	* Keep in mind that mime type determination is not reliable across platforms. CSV files,
-	* for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
-	* Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).
-	*/
-	accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
-	/**
-	* Allow drag 'n' drop (or selection from the file dialog) of multiple files
-	*/
-	multiple: PropTypes.bool,
-	/**
-	* If false, allow dropped items to take over the current browser window
-	*/
-	preventDropOnDocument: PropTypes.bool,
-	/**
-	* If true, disables click to open the native file selection dialog
-	*/
-	noClick: PropTypes.bool,
-	/**
-	* If true, disables SPACE/ENTER to open the native file selection dialog.
-	* Note that it also stops tracking the focus state.
-	*/
-	noKeyboard: PropTypes.bool,
-	/**
-	* If true, disables drag 'n' drop
-	*/
-	noDrag: PropTypes.bool,
-	/**
-	* If true, stops drag event propagation to parents
-	*/
-	noDragEventsBubbling: PropTypes.bool,
-	/**
-	* Minimum file size (in bytes)
-	*/
-	minSize: PropTypes.number,
-	/**
-	* Maximum file size (in bytes)
-	*/
-	maxSize: PropTypes.number,
-	/**
-	* Maximum accepted number of files
-	* The default value is 0 which means there is no limitation to how many files are accepted.
-	*/
-	maxFiles: PropTypes.number,
-	/**
-	* Enable/disable the dropzone
-	*/
-	disabled: PropTypes.bool,
-	/**
-	* Use this to provide a custom file aggregator
-	*
-	* @param {(DragEvent|Event|Array<FileSystemFileHandle>)} event A drag event or input change event (if files were selected via the file dialog)
-	*/
-	getFilesFromEvent: PropTypes.func,
-	/**
-	* Cb for when closing the file dialog with no selection
-	*/
-	onFileDialogCancel: PropTypes.func,
-	/**
-	* Cb for when opening the file dialog
-	*/
-	onFileDialogOpen: PropTypes.func,
-	/**
-	* Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
-	* to open the file picker instead of using an `<input type="file">` click event.
-	*/
-	useFsAccessApi: PropTypes.bool,
-	/**
-	* Set to true to focus the root element on render
-	*/
-	autoFocus: PropTypes.bool,
-	/**
-	* Cb for when the `dragenter` event occurs.
-	*
-	* @param {DragEvent} event
-	*/
-	onDragEnter: PropTypes.func,
-	/**
-	* Cb for when the `dragleave` event occurs
-	*
-	* @param {DragEvent} event
-	*/
-	onDragLeave: PropTypes.func,
-	/**
-	* Cb for when the `dragover` event occurs
-	*
-	* @param {DragEvent} event
-	*/
-	onDragOver: PropTypes.func,
-	/**
-	* Cb for when the `drop` event occurs.
-	* Note that this callback is invoked after the `getFilesFromEvent` callback is done.
-	*
-	* Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
-	* `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
-	* If `multiple` is set to false and additional files are dropped,
-	* all files besides the first will be rejected.
-	* Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
-	*
-	* Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
-	* If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
-	*
-	* `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
-	* For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
-	*
-	* ```js
-	* function onDrop(acceptedFiles) {
-	*   const req = request.post('/upload')
-	*   acceptedFiles.forEach(file => {
-	*     req.attach(file.name, file)
-	*   })
-	*   req.end(callback)
-	* }
-	* ```
-	*
-	* @param {File[]} acceptedFiles
-	* @param {FileRejection[]} fileRejections
-	* @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-	*/
-	onDrop: PropTypes.func,
-	/**
-	* Cb for when the `drop` event occurs.
-	* Note that if no files are accepted, this callback is not invoked.
-	*
-	* @param {File[]} files
-	* @param {(DragEvent|Event)} event
-	*/
-	onDropAccepted: PropTypes.func,
-	/**
-	* Cb for when the `drop` event occurs.
-	* Note that if no files are rejected, this callback is not invoked.
-	*
-	* @param {FileRejection[]} fileRejections
-	* @param {(DragEvent|Event)} event
-	*/
-	onDropRejected: PropTypes.func,
-	/**
-	* Cb for when there's some error from any of the promises.
-	*
-	* @param {Error} error
-	*/
-	onError: PropTypes.func,
-	/**
-	* Custom validation function. It must return null if there's no errors.
-	* @param {File} file
-	* @returns {FileError|FileError[]|null}
-	*/
-	validator: PropTypes.func
-};
-/**
-* A function that is invoked for the `dragenter`,
-* `dragover` and `dragleave` events.
-* It is not invoked if the items are not files (such as link, text, etc.).
-*
-* @callback dragCb
-* @param {DragEvent} event
-*/
-/**
-* A function that is invoked for the `drop` or input change event.
-* It is not invoked if the items are not files (such as link, text, etc.).
-*
-* @callback dropCb
-* @param {File[]} acceptedFiles List of accepted files
-* @param {FileRejection[]} fileRejections List of rejected files and why they were rejected. This is the authoritative source for post-drop file rejections.
-* @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-*/
-/**
-* A function that is invoked for the `drop` or input change event.
-* It is not invoked if the items are files (such as link, text, etc.).
-*
-* @callback dropAcceptedCb
-* @param {File[]} files List of accepted files that meet the given criteria
-* (`accept`, `multiple`, `minSize`, `maxSize`)
-* @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-*/
-/**
-* A function that is invoked for the `drop` or input change event.
-*
-* @callback dropRejectedCb
-* @param {File[]} files List of rejected files that do not meet the given criteria
-* (`accept`, `multiple`, `minSize`, `maxSize`)
-* @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-*/
-/**
-* A function that is used aggregate files,
-* in a asynchronous fashion, from drag or input change events.
-*
-* @callback getFilesFromEvent
-* @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[]>)}
-*/
-/**
-* An object with the current dropzone state.
-*
-* @typedef {object} DropzoneState
-* @property {boolean} isFocused Dropzone area is in focus
-* @property {boolean} isFileDialogActive File dialog is opened
-* @property {boolean} isDragActive Active drag is in progress
-* @property {boolean} isDragAccept Dragged files are accepted
-* @property {boolean} isDragReject True only during an active drag when some dragged files would be rejected. After drop, this resets to false. Use fileRejections for post-drop errors.
-* @property {boolean} isDragGlobal Files are being dragged anywhere on the document
-* @property {File[]} acceptedFiles Accepted files
-* @property {FileRejection[]} fileRejections Rejected files and why they were rejected. This persists after drop and is the source of truth for post-drop rejections.
-*/
-/**
-* An object with the dropzone methods.
-*
-* @typedef {object} DropzoneMethods
-* @property {Function} getRootProps Returns the props you should apply to the root drop container you render
-* @property {Function} getInputProps Returns the props you should apply to hidden file input you render
-* @property {Function} open Open the native file selection dialog
-*/
 const initialState = {
 	isFocused: false,
 	isFileDialogActive: false,
@@ -549,81 +233,13 @@ const initialState = {
 *   )
 * }
 * ```
-*
-* @function useDropzone
-*
-* @param {object} props
-* @param {import("./utils").AcceptProp} [props.accept] Set accepted file types.
-* Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.
-* Keep in mind that mime type determination is not reliable across platforms. CSV files,
-* for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
-* Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).
-* @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files
-* @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window
-* @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog
-* @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.
-* Note that it also stops tracking the focus state.
-* @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop
-* @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents
-* @param {number} [props.minSize=0] Minimum file size (in bytes)
-* @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)
-* @param {boolean} [props.disabled=false] Enable/disable the dropzone
-* @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator
-* @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection
-* @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
-* 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
-* @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
-* @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs
-* @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs
-* @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.
-* Note that this callback is invoked after the `getFilesFromEvent` callback is done.
-*
-* Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
-* `accept` must be an object with keys as a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) and the value an array of file extensions (optional).
-* If `multiple` is set to false and additional files are dropped,
-* all files besides the first will be rejected.
-* Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
-*
-* Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
-* If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
-*
-* The second parameter (fileRejections) is the authoritative list of rejected files after a drop.
-* Use this parameter or the fileRejections state property to handle post-drop file rejections,
-* as isDragReject only indicates rejection state during active drag operations.
-*
-* `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
-* For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
-*
-* ```js
-* function onDrop(acceptedFiles) {
-*   const req = request.post('/upload')
-*   acceptedFiles.forEach(file => {
-*     req.attach(file.name, file)
-*   })
-*   req.end(callback)
-* }
-* ```
-* @param {dropAcceptedCb} [props.onDropAccepted]
-* @param {dropRejectedCb} [props.onDropRejected]
-* @param {(error: Error) => void} [props.onError]
-*
-* @returns {DropzoneState & DropzoneMethods}
 */
 function useDropzone(props = {}) {
-	const { accept, disabled, getFilesFromEvent, maxSize, minSize, multiple, maxFiles, onDragEnter, onDragLeave, onDragOver, onDrop, onDropAccepted, onDropRejected, onFileDialogCancel, onFileDialogOpen, useFsAccessApi, autoFocus, preventDropOnDocument, noClick, noKeyboard, noDrag, noDragEventsBubbling, onError, validator } = {
-		...defaultProps,
-		...props
-	};
+	const { accept, disabled = false, getFilesFromEvent = fromEvent, maxSize = Number.POSITIVE_INFINITY, minSize = 0, multiple = true, maxFiles = 0, onDragEnter, onDragLeave, onDragOver, onDrop, onDropAccepted, onDropRejected, onFileDialogCancel, onFileDialogOpen, useFsAccessApi = false, autoFocus = false, preventDropOnDocument = true, noClick = false, noKeyboard = false, noDrag = false, noDragEventsBubbling = false, onError, validator } = props;
 	const acceptAttr = useMemo(() => acceptPropAsAcceptAttr(accept), [accept]);
 	const pickerTypes = useMemo(() => pickerOptionsFromAccept(accept), [accept]);
 	const onFileDialogOpenCb = useMemo(() => typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop, [onFileDialogOpen]);
 	const onFileDialogCancelCb = useMemo(() => typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop, [onFileDialogCancel]);
-	/**
-	* @constant
-	* @type {React.MutableRefObject<HTMLElement>}
-	*/
 	const rootRef = useRef(null);
 	const inputRef = useRef(null);
 	const [state, dispatch] = useReducer(reducer, initialState);
@@ -633,7 +249,7 @@ function useDropzone(props = {}) {
 		if (!fsAccessApiWorksRef.current && isFileDialogActive) setTimeout(() => {
 			if (inputRef.current) {
 				const { files } = inputRef.current;
-				if (!files.length) {
+				if (!files?.length) {
 					dispatch({ type: "closeDialog" });
 					onFileDialogCancelCb();
 				}
@@ -654,7 +270,7 @@ function useDropzone(props = {}) {
 	const dragTargetsRef = useRef([]);
 	const globalDragTargetsRef = useRef([]);
 	const onDocumentDrop = (event) => {
-		if (rootRef.current && rootRef.current.contains(event.target)) return;
+		if (rootRef.current && event.target && rootRef.current.contains(event.target)) return;
 		event.preventDefault();
 		dragTargetsRef.current = [];
 	};
@@ -672,7 +288,7 @@ function useDropzone(props = {}) {
 	}, [rootRef, preventDropOnDocument]);
 	useEffect(() => {
 		const onDocumentDragEnter = (event) => {
-			globalDragTargetsRef.current = [...globalDragTargetsRef.current, event.target];
+			if (event.target) globalDragTargetsRef.current = [...globalDragTargetsRef.current, event.target];
 			if (isEvtWithFiles(event)) dispatch({
 				isDragGlobal: true,
 				type: "setDragGlobal"
@@ -725,7 +341,7 @@ function useDropzone(props = {}) {
 	}, [onError]);
 	const onDragEnterCb = useCallback((event) => {
 		event.preventDefault();
-		event.persist();
+		event.persist?.();
 		stopPropagation(event);
 		dragTargetsRef.current = [...dragTargetsRef.current, event.target];
 		if (isEvtWithFiles(event)) Promise.resolve(getFilesFromEvent(event)).then((files) => {
@@ -762,7 +378,7 @@ function useDropzone(props = {}) {
 	]);
 	const onDragOverCb = useCallback((event) => {
 		event.preventDefault();
-		event.persist();
+		event.persist?.();
 		stopPropagation(event);
 		const hasFiles = isEvtWithFiles(event);
 		if (hasFiles && event.dataTransfer) try {
@@ -773,9 +389,9 @@ function useDropzone(props = {}) {
 	}, [onDragOver, noDragEventsBubbling]);
 	const onDragLeaveCb = useCallback((event) => {
 		event.preventDefault();
-		event.persist();
+		event.persist?.();
 		stopPropagation(event);
-		const targets = dragTargetsRef.current.filter((target) => rootRef.current && rootRef.current.contains(target));
+		const targets = dragTargetsRef.current.filter((target) => rootRef.current?.contains(target));
 		const targetIdx = targets.indexOf(event.target);
 		if (targetIdx !== -1) targets.splice(targetIdx, 1);
 		dragTargetsRef.current = targets;
@@ -805,7 +421,7 @@ function useDropzone(props = {}) {
 				if (customErrors) errors = errors.concat(customErrors);
 				fileRejections.push({
 					file,
-					errors: errors.filter((e) => e)
+					errors: errors.filter((e) => e != null)
 				});
 			}
 		});
@@ -840,7 +456,7 @@ function useDropzone(props = {}) {
 	]);
 	const onDropCb = useCallback((event) => {
 		event.preventDefault();
-		event.persist();
+		event.persist?.();
 		stopPropagation(event);
 		dragTargetsRef.current = [];
 		if (isEvtWithFiles(event)) Promise.resolve(getFilesFromEvent(event)).then((files) => {
@@ -872,7 +488,7 @@ function useDropzone(props = {}) {
 				} else if (isSecurityError(e)) {
 					fsAccessApiWorksRef.current = false;
 					if (inputRef.current) {
-						inputRef.current.value = null;
+						inputRef.current.value = "";
 						inputRef.current.click();
 					} else onErrCb(/* @__PURE__ */ new Error("Cannot open the file picker because the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API is not supported and no <input> was provided."));
 				} else onErrCb(e);
@@ -882,7 +498,7 @@ function useDropzone(props = {}) {
 		if (inputRef.current) {
 			dispatch({ type: "openDialog" });
 			onFileDialogOpenCb();
-			inputRef.current.value = null;
+			inputRef.current.value = "";
 			inputRef.current.click();
 		}
 	}, [
@@ -896,7 +512,7 @@ function useDropzone(props = {}) {
 		multiple
 	]);
 	const onKeyDownCb = useCallback((event) => {
-		if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) return;
+		if (!rootRef.current?.isEqualNode(event.target)) return;
 		if (event.key === " " || event.key === "Enter" || event.keyCode === 32 || event.keyCode === 13) {
 			event.preventDefault();
 			openFileDialog();
@@ -995,13 +611,7 @@ function useDropzone(props = {}) {
 		open: composeHandler(openFileDialog)
 	};
 }
-/**
-* @param {DropzoneState} state
-* @param {{type: string} & DropzoneState} action
-* @returns {DropzoneState}
-*/
 function reducer(state, action) {
-	/* istanbul ignore next */
 	switch (action.type) {
 		case "focus": return {
 			...state,