@mantine/dropzone/cjs/Dropzone.cjs

Dropzone component built with Mantine theme and components

"use client";
const require_Dropzone_context = require("./Dropzone.context.cjs");
const require_DropzoneStatus = require("./DropzoneStatus.cjs");
const require_Dropzone_module = require("./Dropzone.module.cjs");
let react_dropzone = require("react-dropzone");
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/dropzone/src/Dropzone.tsx
const defaultProps = {
	multiple: true,
	maxSize: Infinity,
	activateOnClick: true,
	activateOnDrag: true,
	dragEventsBubbling: true,
	activateOnKeyboard: true,
	useFsAccessApi: false,
	variant: "light",
	rejectColor: "red"
};
const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { radius, variant, acceptColor, rejectColor }) => {
	const acceptColors = theme.variantColorResolver({
		color: acceptColor || theme.primaryColor,
		theme,
		variant
	});
	const rejectColors = theme.variantColorResolver({
		color: rejectColor || "red",
		theme,
		variant
	});
	return { root: {
		"--dropzone-radius": (0, _mantine_core.getRadius)(radius),
		"--dropzone-accept-color": acceptColors.color,
		"--dropzone-accept-bg": acceptColors.background,
		"--dropzone-reject-color": rejectColors.color,
		"--dropzone-reject-bg": rejectColors.background
	} };
});
const Dropzone = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("Dropzone", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, radius, disabled, loading, multiple, maxSize, accept, children, onDropAny, onDrop, onReject, openRef, name, maxFiles, autoFocus, activateOnClick, activateOnDrag, dragEventsBubbling, activateOnKeyboard, onDragEnter, onDragLeave, onDragOver, onFileDialogCancel, onFileDialogOpen, preventDropOnDocument, useFsAccessApi, getFilesFromEvent, validator, rejectColor, acceptColor, enablePointerEvents, loaderProps, inputProps, mod, attributes, ...others } = props;
	const getStyles = (0, _mantine_core.useStyles)({
		name: "Dropzone",
		classes: require_Dropzone_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { getRootProps, getInputProps, isDragAccept, isDragReject, isDragActive, open } = (0, react_dropzone.useDropzone)({
		onDrop: onDropAny,
		onDropAccepted: onDrop,
		onDropRejected: onReject,
		disabled: disabled || loading,
		accept: Array.isArray(accept) ? accept.reduce((r, key) => ({
			...r,
			[key]: []
		}), {}) : accept,
		multiple,
		maxSize,
		maxFiles,
		autoFocus,
		noClick: !activateOnClick,
		noDrag: !activateOnDrag,
		noDragEventsBubbling: !dragEventsBubbling,
		noKeyboard: !activateOnKeyboard,
		onDragEnter,
		onDragLeave,
		onDragOver,
		onFileDialogCancel,
		onFileDialogOpen,
		preventDropOnDocument,
		useFsAccessApi,
		validator,
		...getFilesFromEvent ? { getFilesFromEvent } : null
	});
	(0, _mantine_hooks.assignRef)(openRef, open);
	const isAccepted = isDragActive && isDragAccept;
	const isRejected = isDragActive && isDragReject;
	const isIdle = !isAccepted && !isRejected;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dropzone_context.DropzoneProvider, {
		value: {
			accept: isAccepted,
			reject: isRejected,
			idle: isIdle
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
			...getRootProps(),
			...getStyles("root", { focusable: true }),
			...others,
			mod: [{
				accept: isAccepted,
				reject: isRejected,
				idle: isIdle,
				disabled,
				loading,
				"activate-on-click": activateOnClick
			}, mod],
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.LoadingOverlay, {
					visible: loading,
					overlayProps: { radius },
					unstyled,
					loaderProps
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
					...getInputProps(inputProps),
					name
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					...getStyles("inner"),
					"data-enable-pointer-events": enablePointerEvents || void 0,
					children
				})
			]
		})
	});
});
Dropzone.classes = require_Dropzone_module.default;
Dropzone.varsResolver = varsResolver;
Dropzone.displayName = "@mantine/dropzone/Dropzone";
Dropzone.Accept = require_DropzoneStatus.DropzoneAccept;
Dropzone.Idle = require_DropzoneStatus.DropzoneIdle;
Dropzone.Reject = require_DropzoneStatus.DropzoneReject;
//#endregion
exports.Dropzone = Dropzone;

//# sourceMappingURL=Dropzone.cjs.map