@hitachivantara/uikit-react-core/dist/RadioGroup/RadioGroup.js

UI Kit Core React components.

import { setId } from "../utils/setId.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { HvFormElement } from "../FormElement/FormElement.js";
import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
import { useControlled } from "../hooks/useControlled.js";
import { HvLabelContainer } from "../FormElement/LabelContainer.js";
import { useClasses } from "./RadioGroup.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { Children, cloneElement, forwardRef, useCallback, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/RadioGroup/RadioGroup.tsx
var getValueFromSelectedChildren = (children) => {
	const childrenArray = Children.toArray(children);
	const childrenCount = childrenArray.length;
	for (let i = 0; i !== childrenCount; i += 1) {
		const child = childrenArray[i];
		if (child?.props?.checked !== void 0 ? child?.props?.checked : child?.props?.defaultChecked) return child?.props?.value;
	}
	return null;
};
/**
* A radio group is a type of selection list that can only have a single entry checked at any one time.
*/
var HvRadioGroup = forwardRef(function HvRadioGroup(props, ref) {
	const { id, classes: classesProp, className, children, name, value: valueProp, defaultValue, label, description, status, statusMessage, required, readOnly, disabled, orientation = "vertical", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, onChange, ...others } = useDefaultProps("HvRadioGroup", props);
	const { classes, cx } = useClasses(classesProp);
	const elementId = useUniqueId(id);
	const [value, setValue] = useControlled(valueProp, defaultValue !== void 0 ? defaultValue : () => getValueFromSelectedChildren(children));
	const onChildChangeInterceptor = useCallback((childOnChange, event, isChecked, newValue) => {
		childOnChange?.(event, isChecked, newValue);
		onChange?.(event, newValue);
		setValue(newValue);
	}, [onChange, setValue]);
	const modifiedChildren = useMemo(() => {
		return Children.map(children, (child) => {
			return cloneElement(child, {
				checked: (child?.props?.value ?? "on") === value,
				name: child?.props?.name || name || elementId,
				onChange: (event, isChecked, newValue) => onChildChangeInterceptor(child?.props?.onChange, event, isChecked, newValue),
				inputProps: {
					...child?.props?.inputProps,
					required
				},
				disabled: disabled || child?.props?.disabled,
				readOnly: readOnly || child?.props?.readOnly
			});
		});
	}, [
		children,
		disabled,
		elementId,
		name,
		onChildChangeInterceptor,
		readOnly,
		required,
		value
	]);
	const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
	const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
	return /* @__PURE__ */ jsxs(HvFormElement, {
		id,
		name,
		status: status || "standBy",
		disabled,
		required,
		readOnly,
		className: cx(classes.root, className),
		children: [
			/* @__PURE__ */ jsx(HvLabelContainer, {
				label,
				description,
				labelId: setId(elementId, "label"),
				descriptionId: setId(elementId, "description"),
				classes: { label: classes.label }
			}),
			/* @__PURE__ */ jsx("div", {
				ref,
				role: "radiogroup",
				"aria-label": ariaLabel,
				"aria-labelledby": ariaLabelledBy || label && setId(elementId, "label") || void 0,
				"aria-invalid": status === "invalid" ? true : void 0,
				"aria-errormessage": status === "invalid" ? errorMessageId : void 0,
				"aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
				className: cx(classes.group, {
					[classes.vertical]: orientation === "vertical",
					[classes.horizontal]: orientation === "horizontal",
					[classes.invalid]: status === "invalid"
				}),
				...others,
				children: modifiedChildren
			}),
			canShowError && /* @__PURE__ */ jsx(HvWarningText, {
				id: setId(elementId, "error"),
				disableBorder: true,
				className: classes.error,
				children: statusMessage
			})
		]
	});
});
//#endregion
export { HvRadioGroup };