react-dropzone 14.4.1 → 16.0.0

package/dist/index.cjs

@@ -0,0 +1,1077 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react, 1);
+let prop_types = require("prop-types");
+prop_types = __toESM(prop_types, 1);
+let file_selector = require("file-selector");
+let attr_accept = require("attr-accept");
+attr_accept = __toESM(attr_accept, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/utils/index.js
+const accepts = typeof attr_accept.default === "function" ? attr_accept.default : attr_accept.default.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 = "") => {
+	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) => {
+	return {
+		code: FILE_TOO_LARGE,
+		message: `File is larger than ${maxSize} ${maxSize === 1 ? "byte" : "bytes"}`
+	};
+};
+const 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"
+};
+/**
+* Check if the given file is a DataTransferItem with an empty type.
+*
+* 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";
+}
+/**
+* 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.
+*
+* 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);
+	return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];
+}
+function fileMatchSize(file, minSize, maxSize) {
+	if (isDefined(file.size)) {
+		if (isDefined(minSize) && isDefined(maxSize)) {
+			if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
+			if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
+		} else if (isDefined(minSize) && file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
+		else if (isDefined(maxSize) && file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
+	}
+	return [true, null];
+}
+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 }) {
+	if (!multiple && files.length > 1 || multiple && maxFiles >= 1 && files.length > maxFiles) return false;
+	return files.every((file) => {
+		const [accepted] = fileAccepted(file, accept);
+		const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
+		const customErrors = validator ? validator(file) : null;
+		return accepted && sizeMatch && !customErrors;
+	});
+}
+function isPropagationStopped(event) {
+	if (typeof event.isPropagationStopped === "function") return event.isPropagationStopped();
+	else if (typeof event.cancelBubble !== "undefined") return event.cancelBubble;
+	return false;
+}
+function isEvtWithFiles(event) {
+	if (!event.dataTransfer) return !!event.target && !!event.target.files;
+	return Array.prototype.some.call(event.dataTransfer.types, (type) => type === "Files" || type === "application/x-moz-file");
+}
+function onDocumentDragOver(event) {
+	event.preventDefault();
+}
+function isIe(userAgent) {
+	return userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1;
+}
+function isEdge(userAgent) {
+	return userAgent.indexOf("Edge/") !== -1;
+}
+function isIeOrEdge(userAgent = window.navigator.userAgent) {
+	return isIe(userAgent) || isEdge(userAgent);
+}
+/**
+* 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) => {
+		if (!isPropagationStopped(event) && fn) fn(event, ...args);
+		return isPropagationStopped(event);
+	});
+}
+/**
+* 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}
+*/
+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[]}[]}
+*/
+function pickerOptionsFromAccept(accept) {
+	if (isDefined(accept)) return [{
+		description: "Files",
+		accept: Object.entries(accept).filter(([mimeType, ext]) => {
+			let ok = true;
+			if (!isMIMEType(mimeType)) {
+				console.warn(`Skipped "${mimeType}" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types.`);
+				ok = false;
+			}
+			if (!Array.isArray(ext) || !ext.every(isExt)) {
+				console.warn(`Skipped "${mimeType}" because an invalid file extension was provided.`);
+				ok = false;
+			}
+			return ok;
+		}).reduce((agg, [mimeType, ext]) => ({
+			...agg,
+			[mimeType]: ext
+		}), {})
+	}];
+	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(",");
+}
+/**
+* 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
+/**
+* Convenience wrapper component for the `useDropzone` hook
+*
+* ```jsx
+* <Dropzone>
+*   {({getRootProps, getInputProps}) => (
+*     <div {...getRootProps()}>
+*       <input {...getInputProps()} />
+*       <p>Drag 'n' drop some files here, or click to select files</p>
+*     </div>
+*   )}
+* </Dropzone>
+* ```
+*/
+const Dropzone = (0, react.forwardRef)(({ children, ...params }, ref) => {
+	const { open, ...props } = useDropzone(params);
+	(0, react.useImperativeHandle)(ref, () => ({ open }), [open]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: children({
+		...props,
+		open
+	}) });
+});
+Dropzone.displayName = "Dropzone";
+const defaultProps = {
+	disabled: false,
+	getFilesFromEvent: file_selector.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: prop_types.default.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: prop_types.default.objectOf(prop_types.default.arrayOf(prop_types.default.string)),
+	/**
+	* Allow drag 'n' drop (or selection from the file dialog) of multiple files
+	*/
+	multiple: prop_types.default.bool,
+	/**
+	* If false, allow dropped items to take over the current browser window
+	*/
+	preventDropOnDocument: prop_types.default.bool,
+	/**
+	* If true, disables click to open the native file selection dialog
+	*/
+	noClick: prop_types.default.bool,
+	/**
+	* If true, disables SPACE/ENTER to open the native file selection dialog.
+	* Note that it also stops tracking the focus state.
+	*/
+	noKeyboard: prop_types.default.bool,
+	/**
+	* If true, disables drag 'n' drop
+	*/
+	noDrag: prop_types.default.bool,
+	/**
+	* If true, stops drag event propagation to parents
+	*/
+	noDragEventsBubbling: prop_types.default.bool,
+	/**
+	* Minimum file size (in bytes)
+	*/
+	minSize: prop_types.default.number,
+	/**
+	* Maximum file size (in bytes)
+	*/
+	maxSize: prop_types.default.number,
+	/**
+	* Maximum accepted number of files
+	* The default value is 0 which means there is no limitation to how many files are accepted.
+	*/
+	maxFiles: prop_types.default.number,
+	/**
+	* Enable/disable the dropzone
+	*/
+	disabled: prop_types.default.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: prop_types.default.func,
+	/**
+	* Cb for when closing the file dialog with no selection
+	*/
+	onFileDialogCancel: prop_types.default.func,
+	/**
+	* Cb for when opening the file dialog
+	*/
+	onFileDialogOpen: prop_types.default.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: prop_types.default.bool,
+	/**
+	* Set to true to focus the root element on render
+	*/
+	autoFocus: prop_types.default.bool,
+	/**
+	* Cb for when the `dragenter` event occurs.
+	*
+	* @param {DragEvent} event
+	*/
+	onDragEnter: prop_types.default.func,
+	/**
+	* Cb for when the `dragleave` event occurs
+	*
+	* @param {DragEvent} event
+	*/
+	onDragLeave: prop_types.default.func,
+	/**
+	* Cb for when the `dragover` event occurs
+	*
+	* @param {DragEvent} event
+	*/
+	onDragOver: prop_types.default.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: prop_types.default.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: prop_types.default.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: prop_types.default.func,
+	/**
+	* Cb for when there's some error from any of the promises.
+	*
+	* @param {Error} error
+	*/
+	onError: prop_types.default.func,
+	/**
+	* Custom validation function. It must return null if there's no errors.
+	* @param {File} file
+	* @returns {FileError|FileError[]|null}
+	*/
+	validator: prop_types.default.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,
+	isDragActive: false,
+	isDragAccept: false,
+	isDragReject: false,
+	isDragGlobal: false,
+	acceptedFiles: [],
+	fileRejections: []
+};
+/**
+* A React hook that creates a drag 'n' drop area.
+*
+* ```jsx
+* function MyDropzone(props) {
+*   const {getRootProps, getInputProps} = useDropzone({
+*     onDrop: acceptedFiles => {
+*       // do something with the File objects, e.g. upload to some server
+*     }
+*   });
+*   return (
+*     <div {...getRootProps()}>
+*       <input {...getInputProps()} />
+*       <p>Drag and drop some files here, or click to select files</p>
+*     </div>
+*   )
+* }
+* ```
+*
+* @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 acceptAttr = (0, react.useMemo)(() => acceptPropAsAcceptAttr(accept), [accept]);
+	const pickerTypes = (0, react.useMemo)(() => pickerOptionsFromAccept(accept), [accept]);
+	const onFileDialogOpenCb = (0, react.useMemo)(() => typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop, [onFileDialogOpen]);
+	const onFileDialogCancelCb = (0, react.useMemo)(() => typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop, [onFileDialogCancel]);
+	/**
+	* @constant
+	* @type {React.MutableRefObject<HTMLElement>}
+	*/
+	const rootRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const [state, dispatch] = (0, react.useReducer)(reducer, initialState);
+	const { isFocused, isFileDialogActive } = state;
+	const fsAccessApiWorksRef = (0, react.useRef)(typeof window !== "undefined" && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI());
+	const onWindowFocus = () => {
+		if (!fsAccessApiWorksRef.current && isFileDialogActive) setTimeout(() => {
+			if (inputRef.current) {
+				const { files } = inputRef.current;
+				if (!files.length) {
+					dispatch({ type: "closeDialog" });
+					onFileDialogCancelCb();
+				}
+			}
+		}, 300);
+	};
+	(0, react.useEffect)(() => {
+		window.addEventListener("focus", onWindowFocus, false);
+		return () => {
+			window.removeEventListener("focus", onWindowFocus, false);
+		};
+	}, [
+		inputRef,
+		isFileDialogActive,
+		onFileDialogCancelCb,
+		fsAccessApiWorksRef
+	]);
+	const dragTargetsRef = (0, react.useRef)([]);
+	const globalDragTargetsRef = (0, react.useRef)([]);
+	const onDocumentDrop = (event) => {
+		if (rootRef.current && rootRef.current.contains(event.target)) return;
+		event.preventDefault();
+		dragTargetsRef.current = [];
+	};
+	(0, react.useEffect)(() => {
+		if (preventDropOnDocument) {
+			document.addEventListener("dragover", onDocumentDragOver, false);
+			document.addEventListener("drop", onDocumentDrop, false);
+		}
+		return () => {
+			if (preventDropOnDocument) {
+				document.removeEventListener("dragover", onDocumentDragOver);
+				document.removeEventListener("drop", onDocumentDrop);
+			}
+		};
+	}, [rootRef, preventDropOnDocument]);
+	(0, react.useEffect)(() => {
+		const onDocumentDragEnter = (event) => {
+			globalDragTargetsRef.current = [...globalDragTargetsRef.current, event.target];
+			if (isEvtWithFiles(event)) dispatch({
+				isDragGlobal: true,
+				type: "setDragGlobal"
+			});
+		};
+		const onDocumentDragLeave = (event) => {
+			globalDragTargetsRef.current = globalDragTargetsRef.current.filter((el) => el !== event.target && el !== null);
+			if (globalDragTargetsRef.current.length > 0) return;
+			dispatch({
+				isDragGlobal: false,
+				type: "setDragGlobal"
+			});
+		};
+		const onDocumentDragEnd = () => {
+			globalDragTargetsRef.current = [];
+			dispatch({
+				isDragGlobal: false,
+				type: "setDragGlobal"
+			});
+		};
+		const onDocumentDropGlobal = () => {
+			globalDragTargetsRef.current = [];
+			dispatch({
+				isDragGlobal: false,
+				type: "setDragGlobal"
+			});
+		};
+		document.addEventListener("dragenter", onDocumentDragEnter, false);
+		document.addEventListener("dragleave", onDocumentDragLeave, false);
+		document.addEventListener("dragend", onDocumentDragEnd, false);
+		document.addEventListener("drop", onDocumentDropGlobal, false);
+		return () => {
+			document.removeEventListener("dragenter", onDocumentDragEnter);
+			document.removeEventListener("dragleave", onDocumentDragLeave);
+			document.removeEventListener("dragend", onDocumentDragEnd);
+			document.removeEventListener("drop", onDocumentDropGlobal);
+		};
+	}, [rootRef]);
+	(0, react.useEffect)(() => {
+		if (!disabled && autoFocus && rootRef.current) rootRef.current.focus();
+		return () => {};
+	}, [
+		rootRef,
+		autoFocus,
+		disabled
+	]);
+	const onErrCb = (0, react.useCallback)((e) => {
+		if (onError) onError(e);
+		else console.error(e);
+	}, [onError]);
+	const onDragEnterCb = (0, react.useCallback)((event) => {
+		event.preventDefault();
+		event.persist();
+		stopPropagation(event);
+		dragTargetsRef.current = [...dragTargetsRef.current, event.target];
+		if (isEvtWithFiles(event)) Promise.resolve(getFilesFromEvent(event)).then((files) => {
+			if (isPropagationStopped(event) && !noDragEventsBubbling) return;
+			const fileCount = files.length;
+			const isDragAccept = fileCount > 0 && allFilesAccepted({
+				files,
+				accept: acceptAttr,
+				minSize,
+				maxSize,
+				multiple,
+				maxFiles,
+				validator
+			});
+			dispatch({
+				isDragAccept,
+				isDragReject: fileCount > 0 && !isDragAccept,
+				isDragActive: true,
+				type: "setDraggedFiles"
+			});
+			if (onDragEnter) onDragEnter(event);
+		}).catch((e) => onErrCb(e));
+	}, [
+		getFilesFromEvent,
+		onDragEnter,
+		onErrCb,
+		noDragEventsBubbling,
+		acceptAttr,
+		minSize,
+		maxSize,
+		multiple,
+		maxFiles,
+		validator
+	]);
+	const onDragOverCb = (0, react.useCallback)((event) => {
+		event.preventDefault();
+		event.persist();
+		stopPropagation(event);
+		const hasFiles = isEvtWithFiles(event);
+		if (hasFiles && event.dataTransfer) try {
+			event.dataTransfer.dropEffect = "copy";
+		} catch {}
+		if (hasFiles && onDragOver) onDragOver(event);
+		return false;
+	}, [onDragOver, noDragEventsBubbling]);
+	const onDragLeaveCb = (0, react.useCallback)((event) => {
+		event.preventDefault();
+		event.persist();
+		stopPropagation(event);
+		const targets = dragTargetsRef.current.filter((target) => rootRef.current && rootRef.current.contains(target));
+		const targetIdx = targets.indexOf(event.target);
+		if (targetIdx !== -1) targets.splice(targetIdx, 1);
+		dragTargetsRef.current = targets;
+		if (targets.length > 0) return;
+		dispatch({
+			type: "setDraggedFiles",
+			isDragActive: false,
+			isDragAccept: false,
+			isDragReject: false
+		});
+		if (isEvtWithFiles(event) && onDragLeave) onDragLeave(event);
+	}, [
+		rootRef,
+		onDragLeave,
+		noDragEventsBubbling
+	]);
+	const setFiles = (0, react.useCallback)((files, event) => {
+		const acceptedFiles = [];
+		const fileRejections = [];
+		files.forEach((file) => {
+			const [accepted, acceptError] = fileAccepted(file, acceptAttr);
+			const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
+			const customErrors = validator ? validator(file) : null;
+			if (accepted && sizeMatch && !customErrors) acceptedFiles.push(file);
+			else {
+				let errors = [acceptError, sizeError];
+				if (customErrors) errors = errors.concat(customErrors);
+				fileRejections.push({
+					file,
+					errors: errors.filter((e) => e)
+				});
+			}
+		});
+		if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {
+			acceptedFiles.forEach((file) => {
+				fileRejections.push({
+					file,
+					errors: [TOO_MANY_FILES_REJECTION]
+				});
+			});
+			acceptedFiles.splice(0);
+		}
+		dispatch({
+			acceptedFiles,
+			fileRejections,
+			type: "setFiles"
+		});
+		if (onDrop) onDrop(acceptedFiles, fileRejections, event);
+		if (fileRejections.length > 0 && onDropRejected) onDropRejected(fileRejections, event);
+		if (acceptedFiles.length > 0 && onDropAccepted) onDropAccepted(acceptedFiles, event);
+	}, [
+		dispatch,
+		multiple,
+		acceptAttr,
+		minSize,
+		maxSize,
+		maxFiles,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		validator
+	]);
+	const onDropCb = (0, react.useCallback)((event) => {
+		event.preventDefault();
+		event.persist();
+		stopPropagation(event);
+		dragTargetsRef.current = [];
+		if (isEvtWithFiles(event)) Promise.resolve(getFilesFromEvent(event)).then((files) => {
+			if (isPropagationStopped(event) && !noDragEventsBubbling) return;
+			setFiles(files, event);
+		}).catch((e) => onErrCb(e));
+		dispatch({ type: "reset" });
+	}, [
+		getFilesFromEvent,
+		setFiles,
+		onErrCb,
+		noDragEventsBubbling
+	]);
+	const openFileDialog = (0, react.useCallback)(() => {
+		if (fsAccessApiWorksRef.current) {
+			dispatch({ type: "openDialog" });
+			onFileDialogOpenCb();
+			const opts = {
+				multiple,
+				types: pickerTypes
+			};
+			window.showOpenFilePicker(opts).then((handles) => getFilesFromEvent(handles)).then((files) => {
+				setFiles(files, null);
+				dispatch({ type: "closeDialog" });
+			}).catch((e) => {
+				if (isAbort(e)) {
+					onFileDialogCancelCb(e);
+					dispatch({ type: "closeDialog" });
+				} else if (isSecurityError(e)) {
+					fsAccessApiWorksRef.current = false;
+					if (inputRef.current) {
+						inputRef.current.value = null;
+						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);
+			});
+			return;
+		}
+		if (inputRef.current) {
+			dispatch({ type: "openDialog" });
+			onFileDialogOpenCb();
+			inputRef.current.value = null;
+			inputRef.current.click();
+		}
+	}, [
+		dispatch,
+		onFileDialogOpenCb,
+		onFileDialogCancelCb,
+		useFsAccessApi,
+		setFiles,
+		onErrCb,
+		pickerTypes,
+		multiple
+	]);
+	const onKeyDownCb = (0, react.useCallback)((event) => {
+		if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) return;
+		if (event.key === " " || event.key === "Enter" || event.keyCode === 32 || event.keyCode === 13) {
+			event.preventDefault();
+			openFileDialog();
+		}
+	}, [rootRef, openFileDialog]);
+	const onFocusCb = (0, react.useCallback)(() => {
+		dispatch({ type: "focus" });
+	}, []);
+	const onBlurCb = (0, react.useCallback)(() => {
+		dispatch({ type: "blur" });
+	}, []);
+	const onClickCb = (0, react.useCallback)(() => {
+		if (noClick) return;
+		if (isIeOrEdge()) setTimeout(openFileDialog, 0);
+		else openFileDialog();
+	}, [noClick, openFileDialog]);
+	const composeHandler = (fn) => {
+		return disabled ? null : fn;
+	};
+	const composeKeyboardHandler = (fn) => {
+		return noKeyboard ? null : composeHandler(fn);
+	};
+	const composeDragHandler = (fn) => {
+		return noDrag ? null : composeHandler(fn);
+	};
+	const stopPropagation = (event) => {
+		if (noDragEventsBubbling) event.stopPropagation();
+	};
+	const getRootProps = (0, react.useMemo)(() => ({ refKey = "ref", role, onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ...rest } = {}) => ({
+		onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
+		onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
+		onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
+		onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
+		onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),
+		onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
+		onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
+		onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
+		role: typeof role === "string" && role !== "" ? role : "presentation",
+		[refKey]: rootRef,
+		...!disabled && !noKeyboard ? { tabIndex: 0 } : {},
+		...rest
+	}), [
+		rootRef,
+		onKeyDownCb,
+		onFocusCb,
+		onBlurCb,
+		onClickCb,
+		onDragEnterCb,
+		onDragOverCb,
+		onDragLeaveCb,
+		onDropCb,
+		noKeyboard,
+		noDrag,
+		disabled
+	]);
+	const onInputElementClick = (0, react.useCallback)((event) => {
+		event.stopPropagation();
+	}, []);
+	const getInputProps = (0, react.useMemo)(() => ({ refKey = "ref", onChange, onClick, ...rest } = {}) => {
+		return {
+			accept: acceptAttr,
+			multiple,
+			type: "file",
+			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)),
+			tabIndex: -1,
+			[refKey]: inputRef,
+			...rest
+		};
+	}, [
+		inputRef,
+		accept,
+		multiple,
+		onDropCb,
+		disabled
+	]);
+	return {
+		...state,
+		isFocused: isFocused && !disabled,
+		getRootProps,
+		getInputProps,
+		rootRef,
+		inputRef,
+		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,
+			isFocused: true
+		};
+		case "blur": return {
+			...state,
+			isFocused: false
+		};
+		case "openDialog": return {
+			...initialState,
+			isFileDialogActive: true
+		};
+		case "closeDialog": return {
+			...state,
+			isFileDialogActive: false
+		};
+		case "setDraggedFiles": return {
+			...state,
+			isDragActive: action.isDragActive,
+			isDragAccept: action.isDragAccept,
+			isDragReject: action.isDragReject
+		};
+		case "setFiles": return {
+			...state,
+			acceptedFiles: action.acceptedFiles,
+			fileRejections: action.fileRejections,
+			isDragReject: false
+		};
+		case "setDragGlobal": return {
+			...state,
+			isDragGlobal: action.isDragGlobal
+		};
+		case "reset": return { ...initialState };
+		default: return state;
+	}
+}
+function noop() {}
+//#endregion
+exports.ErrorCode = ErrorCode;
+exports.default = Dropzone;
+exports.useDropzone = useDropzone;
+
+//# sourceMappingURL=index.cjs.map