@yamada-ui/react/dist/cjs/components/field/use-field-props.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_effect = require('../../utils/effect.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_environment_provider = require('../../core/system/environment-provider.cjs');
const require_fieldset = require('../fieldset/fieldset.cjs');
const require_field = require('./field.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/field/use-field-props.ts
const useFieldProps = ({ id, "aria-describedby": ariaDescribedby, disabled, invalid, notSupportReadOnly, readOnly, required, onBlur, onFocus,...rest } = {}) => {
	const { getDocument } = require_environment_provider.useEnvironment();
	const fieldsetContext = require_fieldset.useFieldsetContext();
	const fieldContext = require_field.useFieldContext();
	const [errorMessageId, setErrorMessageId] = (0, react.useState)(void 0);
	const [helperMessageId, setHelperMessageId] = (0, react.useState)(void 0);
	id ??= fieldContext?.id;
	disabled ??= fieldContext?.disabled ?? fieldsetContext?.disabled;
	required ??= fieldContext?.required ?? fieldsetContext?.required;
	readOnly ??= fieldContext?.readOnly ?? fieldsetContext?.readOnly;
	invalid ??= fieldContext?.invalid ?? fieldsetContext?.invalid;
	require_effect.useSafeLayoutEffect(() => {
		const hasErrorMessage = !!fieldContext?.errorMessageId && !!getDocument()?.getElementById(fieldContext.errorMessageId);
		const hasHelperMessage = !!fieldContext?.helperMessageId && !!getDocument()?.getElementById(fieldContext.helperMessageId);
		setErrorMessageId(invalid && hasErrorMessage ? fieldContext.errorMessageId : void 0);
		setHelperMessageId((!fieldContext?.replace || !invalid) && hasHelperMessage ? fieldContext.helperMessageId : void 0);
	}, [
		fieldContext?.errorMessageId,
		fieldContext?.helperMessageId,
		fieldContext?.replace,
		invalid
	]);
	const props = (0, react.useMemo)(() => ({
		id,
		disabled,
		readOnly,
		required,
		...rest
	}), [
		id,
		disabled,
		readOnly,
		required,
		rest
	]);
	const dataProps = (0, react.useMemo)(() => ({
		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
		"data-invalid": (0, require_utils_index.utils_exports.dataAttr)(invalid),
		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
		"data-required": (0, require_utils_index.utils_exports.dataAttr)(required)
	}), [
		disabled,
		invalid,
		readOnly,
		required
	]);
	return {
		context: fieldContext,
		props,
		ariaProps: (0, react.useMemo)(() => ({
			"aria-describedby": (0, require_utils_index.utils_exports.cx)(errorMessageId, helperMessageId, ariaDescribedby),
			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(notSupportReadOnly ? readOnly || disabled : disabled),
			"aria-invalid": (0, require_utils_index.utils_exports.ariaAttr)(invalid),
			"aria-readonly": notSupportReadOnly ? void 0 : (0, require_utils_index.utils_exports.ariaAttr)(readOnly),
			"aria-required": (0, require_utils_index.utils_exports.ariaAttr)(required)
		}), [
			errorMessageId,
			helperMessageId,
			ariaDescribedby,
			notSupportReadOnly,
			readOnly,
			disabled,
			invalid,
			required
		]),
		dataProps,
		eventProps: (0, react.useMemo)(() => ({
			onBlur: (0, require_utils_index.utils_exports.handlerAll)(fieldContext?.onBlur, onBlur),
			onFocus: (0, require_utils_index.utils_exports.handlerAll)(fieldContext?.onFocus, onFocus)
		}), [
			fieldContext?.onBlur,
			fieldContext?.onFocus,
			onBlur,
			onFocus
		])
	};
};
const resetFieldProps = {
	disabled: false,
	invalid: false,
	readOnly: false,
	required: false
};

//#endregion
exports.resetFieldProps = resetFieldProps;
exports.useFieldProps = useFieldProps;
//# sourceMappingURL=use-field-props.cjs.map