@yamada-ui/react/dist/cjs/components/field/field.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_children = require('../../utils/children.cjs');
const require_context = require('../../utils/context.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_field_style = require('./field.style.cjs');
const require_fieldset = require('../fieldset/fieldset.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/field/field.tsx
const [FieldContext, useFieldContext] = require_context.createContext({
	name: "FieldContext",
	strict: false
});
const { PropsContext: FieldPropsContext, usePropsContext: useFieldPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("field", require_field_style.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 = (0, react.useId)();
	const labelId = (0, react.useId)();
	const helperMessageId = (0, react.useId)();
	const errorMessageId = (0, react.useId)();
	const [focused, setFocused] = (0, react.useState)(false);
	const [omittedChildren, customLabel, customHelperMessage, customErrorMessage] = require_children.useSplitChildren(children, FieldLabel, FieldHelperMessage, FieldErrorMessage);
	id ??= uuid;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldContext, {
		value: (0, react.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__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
			"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
			"data-focus": (0, require_utils_index.utils_exports.dataAttr)(focused),
			"data-invalid": (0, require_utils_index.utils_exports.dataAttr)(invalid),
			"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
			...rest,
			children: [
				customLabel || (label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldLabel, {
					optionalIndicator,
					requiredIndicator,
					...labelProps,
					children: label
				}) : null),
				omittedChildren,
				customHelperMessage || (helperMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldHelperMessage, {
					...helperMessageProps,
					children: helperMessage
				}) : null),
				customErrorMessage || (errorMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldErrorMessage, {
					...errorMessageProps,
					children: errorMessage
				}) : null)
			]
		})
	});
}, "root")();
const FieldLabel = withContext(({ id, htmlFor, children, optionalIndicator = null, required, requiredIndicator = null,...rest }) => {
	const fieldsetContext = require_fieldset.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__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.label, {
		id,
		htmlFor,
		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
		"data-focus": (0, require_utils_index.utils_exports.dataAttr)(focused),
		"data-invalid": (0, require_utils_index.utils_exports.dataAttr)(invalid),
		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
		...rest,
		children: [children, required ? requiredIndicator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRequiredIndicator, {}) : optionalIndicator]
	});
}, "label")();
const FieldRequiredIndicator = withContext(({ children,...rest }) => {
	if (!(0, react.isValidElement)(children)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
		"aria-hidden": true,
		role: "presentation",
		...rest,
		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: "*" })
	});
	else return children;
}, "requiredIndicator")();
const FieldHelperMessage = withContext((props) => {
	const fieldsetContext = require_fieldset.useFieldsetContext();
	const { helperMessageId, invalid = fieldsetContext?.invalid, replace } = useFieldContext() ?? {};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
		id: helperMessageId,
		hidden: replace && invalid ? true : false,
		...props
	});
}, "helperMessage")();
const FieldErrorMessage = withContext((props) => {
	const fieldsetContext = require_fieldset.useFieldsetContext();
	const { errorMessageId, invalid = fieldsetContext?.invalid } = useFieldContext() ?? {};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
		id: errorMessageId,
		"aria-live": invalid ? "polite" : void 0,
		hidden: !invalid,
		...props
	});
}, "errorMessage")();

//#endregion
exports.FieldErrorMessage = FieldErrorMessage;
exports.FieldHelperMessage = FieldHelperMessage;
exports.FieldLabel = FieldLabel;
exports.FieldPropsContext = FieldPropsContext;
exports.FieldRoot = FieldRoot;
exports.useFieldContext = useFieldContext;
exports.useFieldPropsContext = useFieldPropsContext;
//# sourceMappingURL=field.cjs.map