@mantine/core/esm/components/FileInput/FileInput.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
import { genericFactory } from "../../core/factory/factory.mjs";
import { CloseButton } from "../CloseButton/CloseButton.mjs";
import { Input } from "../Input/Input.mjs";
import { InputBase } from "../InputBase/InputBase.mjs";
import { FileButton } from "../FileButton/FileButton.mjs";
import { useEffect, useRef } from "react";
import { useMergedRef, useUncontrolled } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/FileInput/FileInput.tsx
const DefaultValue = ({ value }) => /* @__PURE__ */ jsx("div", {
	style: {
		overflow: "hidden",
		textOverflow: "ellipsis",
		whiteSpace: "nowrap"
	},
	children: Array.isArray(value) ? value.map((file) => file.name).join(", ") : value?.name
});
const defaultProps = {
	valueComponent: DefaultValue,
	size: "sm"
};
const FileInput = genericFactory((_props) => {
	const props = useProps("FileInput", defaultProps, _props);
	const { unstyled, vars, onChange, value, defaultValue, multiple, accept, name, form, valueComponent: ValueComponent, clearable, clearSectionMode, clearButtonProps, readOnly, capture, fileInputProps, rightSection, size, placeholder, component, resetRef: resetRefProp, classNames, styles, attributes, ...others } = props;
	const resetRef = useRef(null);
	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
		classNames,
		styles,
		props
	});
	const [_value, setValue] = useUncontrolled({
		value,
		defaultValue,
		onChange,
		finalValue: multiple ? [] : null
	});
	const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;
	const clearButton = /* @__PURE__ */ jsx(CloseButton, {
		...clearButtonProps,
		variant: "subtle",
		onClick: () => setValue(multiple ? [] : null),
		size,
		unstyled
	});
	const _clearable = clearable && hasValue && !readOnly;
	useEffect(() => {
		if (Array.isArray(_value) && _value.length === 0 || _value === null) resetRef.current?.();
	}, [_value]);
	return /* @__PURE__ */ jsx(FileButton, {
		onChange: setValue,
		multiple,
		accept,
		name,
		form,
		resetRef: useMergedRef(resetRef, resetRefProp),
		disabled: readOnly,
		capture,
		inputProps: fileInputProps,
		children: (fileButtonProps) => /* @__PURE__ */ jsx(InputBase, {
			component: component || "button",
			rightSection,
			__clearSection: clearButton,
			__clearable: _clearable,
			__clearSectionMode: clearSectionMode,
			...fileButtonProps,
			...others,
			__staticSelector: "FileInput",
			multiline: true,
			type: "button",
			pointer: true,
			__stylesApiProps: props,
			unstyled,
			size,
			classNames,
			styles,
			attributes,
			children: !hasValue ? /* @__PURE__ */ jsx(Input.Placeholder, {
				__staticSelector: "FileInput",
				classNames: resolvedClassNames,
				styles: resolvedStyles,
				attributes,
				children: placeholder
			}) : /* @__PURE__ */ jsx(ValueComponent, { value: _value })
		})
	});
});
FileInput.classes = InputBase.classes;
FileInput.displayName = "@mantine/core/FileInput";
//#endregion
export { FileInput };

//# sourceMappingURL=FileInput.mjs.map