react-dropzone 19.1.1 → 19.3.0

package/dist/index.d.cts

@@ -3,9 +3,27 @@ import * as React from "react";
 //#region src/utils/index.d.ts
 /**
  * A map of accepted MIME types to file extensions, as passed to the `accept` prop.
+ *
+ * An extension value may be a single extension string or an array of them - both are
+ * accepted, mirroring the shape of `window.showOpenFilePicker`'s `accept`.
  */
 interface Accept {
-  [key: string]: readonly string[];
+  [key: string]: string | readonly string[];
+}
+/**
+ * A labeled group of accepted types, mirroring one entry of `window.showOpenFilePicker`'s
+ * `types` option. Passing the `accept` prop as an array of these lets the File System Access
+ * picker present multiple named filter rows instead of a single one (see
+ * {@link pickerOptionsFromAccept}). The optional `description` labels the row; when omitted it
+ * is derived from the group's extensions.
+ *
+ * Grouping only surfaces when the FS Access picker is actually used (`useFsAccessApi` +
+ * a secure context + browser support). The native `<input>` fallback has no concept of groups
+ * or descriptions, so every group is flattened into one accept attribute there.
+ */
+interface AcceptGroup {
+  description?: string;
+  accept: Accept;
 }
 /**
  * A file rejection error.
@@ -37,7 +55,7 @@ interface FileRejection {
 }
 type SharedProps = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
 type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
-  accept?: Accept;
+  accept?: Accept | AcceptGroup[];
   minSize?: number;
   maxSize?: number;
   maxFiles?: number;
@@ -46,6 +64,14 @@ type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
   noKeyboard?: boolean;
   noDrag?: boolean;
   noDragEventsBubbling?: boolean;
+  /**
+   * If true, disables paste-to-upload. By default, when the dropzone (or a focused child) receives a
+   * paste that carries files - e.g. a screenshot pasted with Ctrl/Cmd+V - those files go through the
+   * same `accept`/size/`validator` checks and `onDrop` callbacks as a drop. Pastes with no files
+   * (plain text, etc.) are ignored and left untouched. See
+   * https://github.com/react-dropzone/react-dropzone/issues/1210
+   */
+  noPaste?: boolean;
   disabled?: boolean;
   onDrop?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
   onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
@@ -75,7 +101,7 @@ type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
   useFsAccessApi?: boolean;
   autoFocus?: boolean;
 };
-type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;
+type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.ClipboardEvent<HTMLElement> | DragEvent | ClipboardEvent | Event;
 interface DropzoneRef {
   open: () => void;
 }
@@ -145,5 +171,5 @@ declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.Re
  */
 declare function useDropzone(props?: DropzoneOptions): DropzoneState;
 //#endregion
-export { type Accept, DropEvent, DropzoneInputProps, DropzoneOptions, DropzoneProps, DropzoneRef, DropzoneRootProps, DropzoneState, ErrorCode, type FileError, FileRejection, type FileWithPath, type ValidatorResult, Dropzone as default, useDropzone };
+export { type Accept, type AcceptGroup, DropEvent, DropzoneInputProps, DropzoneOptions, DropzoneProps, DropzoneRef, DropzoneRootProps, DropzoneState, ErrorCode, type FileError, FileRejection, type FileWithPath, type ValidatorResult, Dropzone as default, useDropzone };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -3,9 +3,27 @@ import * as React from "react";
 //#region src/utils/index.d.ts
 /**
  * A map of accepted MIME types to file extensions, as passed to the `accept` prop.
+ *
+ * An extension value may be a single extension string or an array of them - both are
+ * accepted, mirroring the shape of `window.showOpenFilePicker`'s `accept`.
  */
 interface Accept {
-  [key: string]: readonly string[];
+  [key: string]: string | readonly string[];
+}
+/**
+ * A labeled group of accepted types, mirroring one entry of `window.showOpenFilePicker`'s
+ * `types` option. Passing the `accept` prop as an array of these lets the File System Access
+ * picker present multiple named filter rows instead of a single one (see
+ * {@link pickerOptionsFromAccept}). The optional `description` labels the row; when omitted it
+ * is derived from the group's extensions.
+ *
+ * Grouping only surfaces when the FS Access picker is actually used (`useFsAccessApi` +
+ * a secure context + browser support). The native `<input>` fallback has no concept of groups
+ * or descriptions, so every group is flattened into one accept attribute there.
+ */
+interface AcceptGroup {
+  description?: string;
+  accept: Accept;
 }
 /**
  * A file rejection error.
@@ -37,7 +55,7 @@ interface FileRejection {
 }
 type SharedProps = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
 type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
-  accept?: Accept;
+  accept?: Accept | AcceptGroup[];
   minSize?: number;
   maxSize?: number;
   maxFiles?: number;
@@ -46,6 +64,14 @@ type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
   noKeyboard?: boolean;
   noDrag?: boolean;
   noDragEventsBubbling?: boolean;
+  /**
+   * If true, disables paste-to-upload. By default, when the dropzone (or a focused child) receives a
+   * paste that carries files - e.g. a screenshot pasted with Ctrl/Cmd+V - those files go through the
+   * same `accept`/size/`validator` checks and `onDrop` callbacks as a drop. Pastes with no files
+   * (plain text, etc.) are ignored and left untouched. See
+   * https://github.com/react-dropzone/react-dropzone/issues/1210
+   */
+  noPaste?: boolean;
   disabled?: boolean;
   onDrop?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
   onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
@@ -75,7 +101,7 @@ type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
   useFsAccessApi?: boolean;
   autoFocus?: boolean;
 };
-type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;
+type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.ClipboardEvent<HTMLElement> | DragEvent | ClipboardEvent | Event;
 interface DropzoneRef {
   open: () => void;
 }
@@ -145,5 +171,5 @@ declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.Re
  */
 declare function useDropzone(props?: DropzoneOptions): DropzoneState;
 //#endregion
-export { type Accept, DropEvent, DropzoneInputProps, DropzoneOptions, DropzoneProps, DropzoneRef, DropzoneRootProps, DropzoneState, ErrorCode, type FileError, FileRejection, type FileWithPath, type ValidatorResult, Dropzone as default, useDropzone };
+export { type Accept, type AcceptGroup, DropEvent, DropzoneInputProps, DropzoneOptions, DropzoneProps, DropzoneRef, DropzoneRootProps, DropzoneState, ErrorCode, type FileError, FileRejection, type FileWithPath, type ValidatorResult, Dropzone as default, useDropzone };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -135,8 +135,9 @@ function isPropagationStopped(event) {
 	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") || Array.prototype.some.call(event.dataTransfer.items ?? [], isKindFile);
+	const dataTransfer = event.dataTransfer ?? event.clipboardData;
+	if (!dataTransfer) return !!event.target && !!event.target.files;
+	return Array.prototype.some.call(dataTransfer.types, (type) => type === "Files" || type === "application/x-moz-file") || Array.prototype.some.call(dataTransfer.items ?? [], isKindFile);
 }
 function isKindFile(item) {
 	return typeof item === "object" && item !== null && item.kind === "file";
@@ -173,27 +174,91 @@ function canUseFileSystemAccessAPI() {
 	return "showOpenFilePicker" in window;
 }
 /**
+* Coerce an `accept` extension value to an array. `window.showOpenFilePicker` allows a single
+* extension string as well as an array, so we accept both and normalize to an array. Anything
+* else (a malformed value) collapses to an empty list.
+*/
+function toExtensions(ext) {
+	if (Array.isArray(ext)) return ext;
+	if (typeof ext === "string") return [ext];
+	return [];
+}
+/**
+* Normalize either `accept` form to the internal array of `{description, accept}` groups.
+*
+* - The object form (`{mime: ext}`) becomes a single group; its `description` (which the object
+*   form can't express) is derived from the extensions like any other group.
+* - The array form is passed through; entries missing an `accept` map are dropped.
+*
+* In both cases a missing `description` is filled in later from the group's extensions (see
+* {@link describeAccept}), so the picker always gets the non-empty description it requires
+* (https://crbug.com/1264708). Returns `undefined` when no `accept` is provided.
+*/
+function normalizeAcceptGroups(accept) {
+	if (!isDefined(accept)) return;
+	if (Array.isArray(accept)) return accept.filter((group) => isDefined(group) && isDefined(group.accept));
+	return [{ accept }];
+}
+/**
+* Build a human-readable label for a picker group from its (validated) accept map, used when the
+* caller doesn't supply a `description`. Prefer the file extensions, fall back to the MIME types,
+* then to a generic label - `showOpenFilePicker` requires a non-empty description (crbug 1264708).
+*/
+function describeAccept(accept) {
+	const extensions = [];
+	const mimeTypes = Object.keys(accept);
+	for (const ext of Object.values(accept)) for (const e of toExtensions(ext)) if (!extensions.includes(e)) extensions.push(e);
+	if (extensions.length > 0) return extensions.join(", ");
+	if (mimeTypes.length > 0) return mimeTypes.join(", ");
+	return "Files";
+}
+/**
+* Merge every `accept` group into a single MIME-type -> extensions map. Duplicate MIME keys union
+* their extensions. This flattened map drives the native `<input accept>` attribute and the
+* drag/drop validators, which have no concept of groups or descriptions.
+*/
+function flattenAccept(accept) {
+	const groups = normalizeAcceptGroups(accept);
+	if (!isDefined(groups)) return;
+	const merged = {};
+	for (const group of groups) for (const [mimeType, ext] of Object.entries(group.accept)) {
+		const existing = merged[mimeType] ?? (merged[mimeType] = []);
+		for (const e of toExtensions(ext)) if (!existing.includes(e)) existing.push(e);
+	}
+	return merged;
+}
+/**
 * Convert the `{accept}` dropzone prop to the `{types}` option for showOpenFilePicker.
+*
+* Each group becomes one filter row in the picker. Invalid MIME types / extensions are dropped
+* with a warning; a group left with no valid entries is omitted entirely (showOpenFilePicker
+* rejects an empty `accept`). Returns `undefined` when nothing valid remains.
 */
 function pickerOptionsFromAccept(accept) {
-	if (isDefined(accept)) return [{
-		description: "Files",
-		accept: Object.entries(accept).filter(([mimeType, ext]) => {
+	const groups = normalizeAcceptGroups(accept);
+	if (!isDefined(groups)) return;
+	const options = groups.map((group) => {
+		const acceptForPicker = Object.entries(group.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)) {
+			if (!(Array.isArray(ext) || typeof ext === "string") || !toExtensions(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;
+			agg[mimeType] = toExtensions(ext);
 			return agg;
-		}, {})
-	}];
+		}, {});
+		return {
+			description: isDefined(group.description) && group.description !== "" ? group.description : describeAccept(acceptForPicker),
+			accept: acceptForPicker
+		};
+	}).filter((option) => Object.keys(option.accept).length > 0);
+	return options.length > 0 ? options : void 0;
 }
 /**
 * Convert the `{accept}` dropzone prop to a comma-separated accept attribute string.
@@ -208,7 +273,8 @@ function pickerOptionsFromAccept(accept) {
 * See https://github.com/react-dropzone/react-dropzone/issues/1220
 */
 function acceptPropAsAcceptAttr(accept, { omitWildcardMimeTypesWithExtensions = false } = {}) {
-	if (isDefined(accept)) return Object.entries(accept).reduce((a, [mimeType, ext]) => {
+	if (isDefined(accept)) return Object.entries(accept).reduce((a, [mimeType, extVal]) => {
+		const ext = toExtensions(extVal);
 		if (omitWildcardMimeTypesWithExtensions && isMIMETypeWildcard(mimeType) && ext.some(isExt)) a.push(...ext);
 		else a.push(mimeType, ...ext);
 		return a;
@@ -312,9 +378,10 @@ const initialState = {
 * ```
 */
 function useDropzone(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, getErrorMessage } = props;
-	const acceptAttr = useMemo(() => acceptPropAsAcceptAttr(accept), [accept]);
-	const inputAcceptAttr = useMemo(() => acceptPropAsAcceptAttr(accept, { omitWildcardMimeTypesWithExtensions: true }), [accept]);
+	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, noPaste = false, onError, validator, getErrorMessage } = props;
+	const flatAccept = useMemo(() => flattenAccept(accept), [accept]);
+	const acceptAttr = useMemo(() => acceptPropAsAcceptAttr(flatAccept), [flatAccept]);
+	const inputAcceptAttr = useMemo(() => acceptPropAsAcceptAttr(flatAccept, { omitWildcardMimeTypesWithExtensions: true }), [flatAccept]);
 	const pickerTypes = useMemo(() => pickerOptionsFromAccept(accept), [accept]);
 	const onFileDialogOpenCb = useMemo(() => typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop, [onFileDialogOpen]);
 	const onFileDialogCancelCb = useMemo(() => typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop, [onFileDialogCancel]);
@@ -620,6 +687,33 @@ function useDropzone(props = {}) {
 		beginProcessing,
 		endProcessing
 	]);
+	const onPasteCb = useCallback((event) => {
+		if (!isEvtWithFiles(event)) return;
+		event.preventDefault();
+		event.persist?.();
+		stopPropagation(event);
+		const signal = beginProcessing();
+		Promise.resolve(getFilesFromEvent(event)).then((files) => {
+			if (signal.aborted) return;
+			if (isPropagationStopped(event) && !noDragEventsBubbling) {
+				endProcessing(signal);
+				return;
+			}
+			return setFiles(files, event, signal);
+		}).catch((e) => {
+			if (!signal.aborted) {
+				endProcessing(signal);
+				onErrCb(e);
+			}
+		});
+	}, [
+		getFilesFromEvent,
+		setFiles,
+		onErrCb,
+		noDragEventsBubbling,
+		beginProcessing,
+		endProcessing
+	]);
 	const openFileDialog = useCallback(() => {
 		if (fsAccessApiWorksRef.current) {
 			dispatch({ type: "openDialog" });
@@ -696,10 +790,13 @@ function useDropzone(props = {}) {
 	const composeDragHandler = (fn) => {
 		return noDrag ? null : composeHandler(fn);
 	};
+	const composePasteHandler = (fn) => {
+		return noPaste ? null : composeHandler(fn);
+	};
 	const stopPropagation = (event) => {
 		if (noDragEventsBubbling) event.stopPropagation();
 	};
-	const getRootProps = useMemo(() => ({ refKey = "ref", role, onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, ...rest } = {}) => ({
+	const getRootProps = useMemo(() => ({ refKey = "ref", role, onKeyDown, onFocus, onBlur, onClick, onDragEnter, onDragOver, onDragLeave, onDrop, onPaste, ...rest } = {}) => ({
 		onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
 		onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
 		onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -708,6 +805,7 @@ function useDropzone(props = {}) {
 		onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
 		onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
 		onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
+		onPaste: composePasteHandler(composeEventHandlers(onPaste, onPasteCb)),
 		role: typeof role === "string" && role !== "" ? role : "presentation",
 		[refKey]: rootRef,
 		...!disabled && !noKeyboard ? { tabIndex: 0 } : {},
@@ -723,8 +821,10 @@ function useDropzone(props = {}) {
 		onDragOverCb,
 		onDragLeaveCb,
 		onDropCb,
+		onPasteCb,
 		noKeyboard,
 		noDrag,
+		noPaste,
 		disabled
 	]);
 	const onInputElementClick = useCallback((event) => {