@yamada-ui/react/dist/cjs/components/file-input/use-file-input.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_dom = require('../../utils/dom.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
const require_hooks_use_clickable_index = require('../../hooks/use-clickable/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/file-input/use-file-input.ts
const useFileInput = (props) => {
	const { props: { id, ref, form, name, accept, defaultValue, disabled, multiple, readOnly, required, resetRef, value, onChange: onChangeProp, onClick: onClickProp,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
	const interactive = !(readOnly || disabled);
	const inputRef = (0, react.useRef)(null);
	const [values, setValues] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue,
		value,
		onChange: onChangeProp
	});
	const count = values?.length ?? 0;
	const onClick = (0, react.useCallback)(() => {
		if (!interactive) return;
		inputRef.current?.click();
	}, [interactive]);
	const onReset = (0, react.useCallback)(() => {
		if (inputRef.current) inputRef.current.value = "";
		setValues(void 0);
	}, [setValues]);
	const onChange = (0, react.useCallback)((ev) => {
		const files = !(0, require_utils_index.utils_exports.isNull)(ev.currentTarget.files) ? Array.from(ev.currentTarget.files) : void 0;
		setValues(files?.length ? files : void 0);
	}, [setValues]);
	const clickableProps = require_hooks_use_clickable_index.useClickable({
		...dataProps,
		...eventProps,
		...rest,
		disabled,
		focusOnClick: interactive,
		onClick: (0, require_utils_index.utils_exports.handlerAll)(onClickProp, onClick)
	});
	require_ref.assignRef(resetRef, onReset);
	const getInputProps = (0, react.useCallback)((props$1 = {}) => ({
		...require_dom.visuallyHiddenAttributes,
		...ariaProps,
		...dataProps,
		id,
		form,
		type: "file",
		name,
		accept,
		disabled,
		multiple,
		readOnly,
		required,
		...props$1,
		ref: require_ref.mergeRefs(inputRef, props$1.ref, ref),
		onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange)
	}), [
		required,
		ariaProps,
		dataProps,
		id,
		form,
		name,
		accept,
		disabled,
		multiple,
		readOnly,
		ref,
		onChange
	]);
	return {
		disabled,
		interactive,
		readOnly,
		required,
		values,
		clickableProps,
		getFieldProps: (0, react.useCallback)((props$1 = {}) => ({
			"data-placeholder": (0, require_utils_index.utils_exports.dataAttr)(!count),
			...clickableProps,
			tabIndex: interactive ? 0 : clickableProps.tabIndex,
			...props$1
		}), [
			clickableProps,
			count,
			interactive
		]),
		getInputProps
	};
};

//#endregion
exports.useFileInput = useFileInput;
//# sourceMappingURL=use-file-input.cjs.map