@yamada-ui/react/dist/esm/components/field/use-field-props.js

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

"use client";


import { useSafeLayoutEffect } from "../../utils/effect.js";
import { utils_exports } from "../../utils/index.js";
import { useEnvironment } from "../../core/system/environment-provider.js";
import { useFieldsetContext } from "../fieldset/fieldset.js";
import { useFieldContext } from "./field.js";
import { useMemo, useState } from "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 } = useEnvironment();
	const fieldsetContext = useFieldsetContext();
	const fieldContext = useFieldContext();
	const [errorMessageId, setErrorMessageId] = useState(void 0);
	const [helperMessageId, setHelperMessageId] = 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;
	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 = useMemo(() => ({
		id,
		disabled,
		readOnly,
		required,
		...rest
	}), [
		id,
		disabled,
		readOnly,
		required,
		rest
	]);
	const dataProps = useMemo(() => ({
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		"data-invalid": (0, utils_exports.dataAttr)(invalid),
		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
		"data-required": (0, utils_exports.dataAttr)(required)
	}), [
		disabled,
		invalid,
		readOnly,
		required
	]);
	return {
		context: fieldContext,
		props,
		ariaProps: useMemo(() => ({
			"aria-describedby": (0, utils_exports.cx)(errorMessageId, helperMessageId, ariaDescribedby),
			"aria-disabled": (0, utils_exports.ariaAttr)(notSupportReadOnly ? readOnly || disabled : disabled),
			"aria-invalid": (0, utils_exports.ariaAttr)(invalid),
			"aria-readonly": notSupportReadOnly ? void 0 : (0, utils_exports.ariaAttr)(readOnly),
			"aria-required": (0, utils_exports.ariaAttr)(required)
		}), [
			errorMessageId,
			helperMessageId,
			ariaDescribedby,
			notSupportReadOnly,
			readOnly,
			disabled,
			invalid,
			required
		]),
		dataProps,
		eventProps: useMemo(() => ({
			onBlur: (0, utils_exports.handlerAll)(fieldContext?.onBlur, onBlur),
			onFocus: (0, utils_exports.handlerAll)(fieldContext?.onFocus, onFocus)
		}), [
			fieldContext?.onBlur,
			fieldContext?.onFocus,
			onBlur,
			onFocus
		])
	};
};
const resetFieldProps = {
	disabled: false,
	invalid: false,
	readOnly: false,
	required: false
};

//#endregion
export { resetFieldProps, useFieldProps };
//# sourceMappingURL=use-field-props.js.map