@yamada-ui/react/dist/esm/components/dropzone/dropzone.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { Portal } from "../portal/portal.js";
import { useLoadingComponent } from "../loading/use-loading-component.js";
import { useInputBorder } from "../input/use-input-border.js";
import { Fade } from "../fade/fade.js";
import { dropzoneStyle } from "./dropzone.style.js";
import { useDropzone } from "./use-dropzone.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/dropzone/dropzone.tsx
const { ComponentContext, PropsContext: DropzonePropsContext, useComponentContext, usePropsContext: useDropzonePropsContext, withContext, withProvider } = createSlotComponent("dropzone", dropzoneStyle);
/**
* `Dropzone` is a component used for uploading files via drag and drop.
*
* @see https://yamada-ui.com/docs/components/dropzone
*/
const DropzoneRoot = withProvider(({ children, errorBorderColor, focusBorderColor, loadingScheme, inputProps, loadingProps, overlayProps,...rest }) => {
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const { dragAccept, dragIdle, dragReject, loading, getInputProps, getRootProps } = useDropzone(rest);
	return /* @__PURE__ */ jsxs(ComponentContext, {
		value: useMemo(() => ({
			dragAccept,
			dragIdle,
			dragReject,
			loading
		}), [
			dragAccept,
			dragIdle,
			dragReject,
			loading
		]),
		children: [/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(styled.input, { ...getInputProps(inputProps) }) }), /* @__PURE__ */ jsxs(styled.div, {
			"data-group": true,
			...varProps,
			...getRootProps(),
			children: [/* @__PURE__ */ jsx(DropzoneOverlay, {
				...overlayProps,
				children: /* @__PURE__ */ jsx(DropzoneLoading, {
					loadingScheme,
					...loadingProps
				})
			}), children]
		})]
	});
}, "root")();
const DropzoneIcon = withContext("svg", "icon")();
const DropzoneTitle = withContext("p", "title")();
const DropzoneDescription = withContext("p", "description")();
const DropzoneOverlay = withContext(Fade, "overlay")(void 0, (props) => {
	const { loading } = useComponentContext();
	return {
		open: loading,
		unmountOnExit: true,
		...props
	};
});
const DropzoneLoading = withContext(({ loadingScheme = "oval",...rest }) => {
	return /* @__PURE__ */ jsx(useLoadingComponent(loadingScheme), { ...rest });
}, "loading")();
const DropzoneAccept = ({ children }) => {
	const { dragAccept } = useComponentContext();
	return dragAccept ? children : null;
};
const DropzoneReject = ({ children }) => {
	const { dragReject } = useComponentContext();
	return dragReject ? children : null;
};
const DropzoneIdle = ({ children }) => {
	const { dragIdle } = useComponentContext();
	return dragIdle ? children : null;
};

//#endregion
export { DropzoneAccept, DropzoneDescription, DropzoneIcon, DropzoneIdle, DropzonePropsContext, DropzoneReject, DropzoneRoot, DropzoneTitle, useDropzonePropsContext };
//# sourceMappingURL=dropzone.js.map