@yamada-ui/react/dist/esm/components/radio/use-radio-group.js

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

"use client";


import { createContext as createContext$1 } from "../../utils/context.js";
import { visuallyHiddenAttributes } from "../../utils/dom.js";
import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
import { useFieldProps } from "../field/use-field-props.js";
import { useCallback, useId } from "react";

//#region src/components/radio/use-radio-group.ts
const [RadioGroupContext, useRadioGroupContext] = createContext$1({
	name: "RadioGroupContext",
	strict: false
});
const useRadioGroup = (props = {}) => {
	const uuid = useId();
	const { context: { labelId } = {}, props: { id = uuid, defaultValue, disabled, readOnly, required, value: valueProp, onChange: onChangeProp,...rest }, ariaProps: { "aria-describedby": ariaDescribedbyProp,...ariaProps }, dataProps, eventProps } = useFieldProps(props);
	const interactive = !(readOnly || disabled);
	const [value, setValue] = useControllableState({
		defaultValue,
		value: valueProp,
		onChange: onChangeProp
	});
	const onChange = useCallback((valueOrEv) => {
		if (!interactive) return;
		if ((0, utils_exports.isObject)(valueOrEv)) setValue(valueOrEv.target.value);
		else setValue(valueOrEv);
	}, [interactive, setValue]);
	const getRootProps = useCallback(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby,...props$1 } = {}) => ({
		...dataProps,
		id,
		"aria-describedby": (0, utils_exports.cx)(ariaDescribedbyProp, ariaDescribedby),
		"aria-labelledby": (0, utils_exports.cx)(labelId, ariaLabelledby),
		role: "radiogroup",
		...rest,
		...props$1,
		ref: mergeRefs(ref, rest.ref)
	}), [
		ariaDescribedbyProp,
		dataProps,
		id,
		labelId,
		rest
	]);
	return {
		name: id,
		value,
		getInputProps: useCallback((props$1 = {}) => {
			const checked = !(0, utils_exports.isUndefined)(value) && value === props$1.value;
			return {
				...dataProps,
				...ariaProps,
				type: "radio",
				name: id,
				style: visuallyHiddenAttributes.style,
				"aria-checked": checked,
				"data-checked": (0, utils_exports.dataAttr)(checked),
				checked,
				disabled,
				readOnly,
				required,
				...props$1,
				onBlur: (0, utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
				onChange: (0, utils_exports.handlerAll)(props$1.onChange, onChange),
				onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
			};
		}, [
			ariaProps,
			dataProps,
			disabled,
			eventProps,
			id,
			onChange,
			readOnly,
			required,
			value
		]),
		getLabelProps: useCallback((props$1) => ({
			...dataProps,
			...props$1
		}), [dataProps]),
		getRootProps,
		onChange
	};
};

//#endregion
export { RadioGroupContext, useRadioGroup, useRadioGroupContext };
//# sourceMappingURL=use-radio-group.js.map