@yamada-ui/react/dist/esm/components/file-input/file-input.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 { useInputBorder } from "../input/use-input-border.js";
import { useInputPropsContext } from "../input/input.js";
import { fileInputStyle } from "./file-input.style.js";
import { useFileInput } from "./use-file-input.js";
import { cloneElement, isValidElement, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/file-input/file-input.tsx
const defaultFormat = ({ name }) => name;
const { PropsContext: FileInputPropsContext, usePropsContext: useFileInputPropsContext, withContext, withProvider } = createSlotComponent("file-input", fileInputStyle);
/**
* `FileInput` is a component used for users to select files.
*
* @see https://yamada-ui.com/docs/components/file-input
*/
const FileInput = withProvider(({ children, component, errorBorderColor, focusBorderColor, format = defaultFormat, placeholder, separator = ",",...props }) => {
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const { values, getFieldProps, getInputProps } = useFileInput(props);
	const cloneChildren = useMemo(() => {
		if (!values?.length) return /* @__PURE__ */ jsx(styled.span, {
			overflow: "hidden",
			whiteSpace: "nowrap",
			children: placeholder
		});
		if (children) return children(values);
		return values.map((value, index) => {
			const last = values.length === index + 1;
			if (component) {
				const node = component({
					index,
					value
				});
				if (isValidElement(node)) return cloneElement(node, { key: index });
				else return node;
			} else return /* @__PURE__ */ jsxs(FileInputTag, { children: [format(value, index), !last ? separator : null] }, index);
		});
	}, [
		children,
		format,
		placeholder,
		separator,
		component,
		values
	]);
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(styled.input, { ...getInputProps() }) }), /* @__PURE__ */ jsx(styled.div, {
		...varProps,
		...getFieldProps(),
		children: cloneChildren
	})] });
}, "root")((props) => {
	return {
		...useInputPropsContext(),
		...props
	};
});
const FileInputTag = withContext("span", "tag")();

//#endregion
export { FileInput, FileInputPropsContext, useFileInputPropsContext };
//# sourceMappingURL=file-input.js.map