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

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

"use client";


import { useSplitChildren } from "../../utils/children.js";
import { createContext as createContext$1 } from "../../utils/context.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { fieldStyle } from "./field.style.js";
import { useFieldsetContext } from "../fieldset/fieldset.js";
import { isValidElement, useId, useMemo, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/field/field.tsx
const [FieldContext, useFieldContext] = createContext$1({
	name: "FieldContext",
	strict: false
});
const { PropsContext: FieldPropsContext, usePropsContext: useFieldPropsContext, withContext, withProvider } = createSlotComponent("field", fieldStyle);
/**
* `Field` is a component used to group form elements with label, helper message, error message, etc.
*
* @see https://yamada-ui.com/docs/components/field
*/
const FieldRoot = withProvider(({ id, children, disabled, errorMessage, helperMessage, invalid, label, optionalIndicator, readOnly, replace = true, required, requiredIndicator, errorMessageProps, helperMessageProps, labelProps,...rest }) => {
	const uuid = useId();
	const labelId = useId();
	const helperMessageId = useId();
	const errorMessageId = useId();
	const [focused, setFocused] = useState(false);
	const [omittedChildren, customLabel, customHelperMessage, customErrorMessage] = useSplitChildren(children, FieldLabel, FieldHelperMessage, FieldErrorMessage);
	id ??= uuid;
	return /* @__PURE__ */ jsx(FieldContext, {
		value: useMemo(() => ({
			id,
			disabled,
			errorMessageId,
			focused,
			helperMessageId,
			invalid,
			labelId,
			readOnly,
			replace,
			required,
			onBlur: () => setFocused(false),
			onFocus: () => setFocused(true)
		}), [
			id,
			disabled,
			labelId,
			focused,
			invalid,
			helperMessageId,
			errorMessageId,
			readOnly,
			replace,
			required
		]),
		children: /* @__PURE__ */ jsxs(styled.div, {
			"data-disabled": (0, utils_exports.dataAttr)(disabled),
			"data-focus": (0, utils_exports.dataAttr)(focused),
			"data-invalid": (0, utils_exports.dataAttr)(invalid),
			"data-readonly": (0, utils_exports.dataAttr)(readOnly),
			...rest,
			children: [
				customLabel || (label ? /* @__PURE__ */ jsx(FieldLabel, {
					optionalIndicator,
					requiredIndicator,
					...labelProps,
					children: label
				}) : null),
				omittedChildren,
				customHelperMessage || (helperMessage ? /* @__PURE__ */ jsx(FieldHelperMessage, {
					...helperMessageProps,
					children: helperMessage
				}) : null),
				customErrorMessage || (errorMessage ? /* @__PURE__ */ jsx(FieldErrorMessage, {
					...errorMessageProps,
					children: errorMessage
				}) : null)
			]
		})
	});
}, "root")();
const FieldLabel = withContext(({ id, htmlFor, children, optionalIndicator = null, required, requiredIndicator = null,...rest }) => {
	const fieldsetContext = useFieldsetContext();
	const fieldContext = useFieldContext();
	id ??= fieldContext?.labelId;
	htmlFor ??= fieldContext?.id;
	required ??= fieldContext?.required ?? fieldsetContext?.required;
	const disabled = fieldContext?.disabled ?? fieldsetContext?.disabled;
	const invalid = fieldContext?.invalid ?? fieldsetContext?.invalid;
	const readOnly = fieldContext?.readOnly ?? fieldsetContext?.readOnly;
	const focused = fieldContext?.focused;
	return /* @__PURE__ */ jsxs(styled.label, {
		id,
		htmlFor,
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		"data-focus": (0, utils_exports.dataAttr)(focused),
		"data-invalid": (0, utils_exports.dataAttr)(invalid),
		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
		...rest,
		children: [children, required ? requiredIndicator ? /* @__PURE__ */ jsx(FieldRequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ jsx(FieldRequiredIndicator, {}) : optionalIndicator]
	});
}, "label")();
const FieldRequiredIndicator = withContext(({ children,...rest }) => {
	if (!isValidElement(children)) return /* @__PURE__ */ jsx(styled.span, {
		"aria-hidden": true,
		role: "presentation",
		...rest,
		children: children ?? /* @__PURE__ */ jsx(Fragment$1, { children: "*" })
	});
	else return children;
}, "requiredIndicator")();
const FieldHelperMessage = withContext((props) => {
	const fieldsetContext = useFieldsetContext();
	const { helperMessageId, invalid = fieldsetContext?.invalid, replace } = useFieldContext() ?? {};
	return /* @__PURE__ */ jsx(styled.span, {
		id: helperMessageId,
		hidden: replace && invalid ? true : false,
		...props
	});
}, "helperMessage")();
const FieldErrorMessage = withContext((props) => {
	const fieldsetContext = useFieldsetContext();
	const { errorMessageId, invalid = fieldsetContext?.invalid } = useFieldContext() ?? {};
	return /* @__PURE__ */ jsx(styled.span, {
		id: errorMessageId,
		"aria-live": invalid ? "polite" : void 0,
		hidden: !invalid,
		...props
	});
}, "errorMessage")();

//#endregion
export { FieldErrorMessage, FieldHelperMessage, FieldLabel, FieldPropsContext, FieldRoot, useFieldContext, useFieldPropsContext };
//# sourceMappingURL=field.js.map