nudge-components-library/dist/components/default-options/RadioGroup.js

A library of nudge UI components

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useContext, useState, useEffect, useRef } from 'react';
import '../../styles/globals.css.js';
import { ThemeContext } from '../../theme/ThemeContext.js';
import '../../styles/tokens.css.js';

function RadioGroup({ radioLabel, label, value, checked, defaultChecked = false, onChange, name, disabled = false, nudgeText, id, ariaLabel, onFocus, onBlur, nudgeVisible = true, nudgePosition = "bottom", renderNudge, }) {
    const theme = useContext(ThemeContext);
    const [isChecked, setIsChecked] = useState(defaultChecked);
    useEffect(() => {
        if (checked !== undefined) {
            setIsChecked(checked);
        }
    }, [checked]);
    const handleChange = () => {
        if (!disabled && onChange) {
            onChange(value);
        }
    };
    const nudgeId = id ? `${id}-nudge` : undefined;
    const nudgeElement = renderNudge && nudgeVisible ? (jsx("div", { id: nudgeId, style: theme.radio.nudgeText, children: renderNudge(isChecked) })) : nudgeVisible && nudgeText ? (jsx("div", { id: nudgeId, style: theme.radio.nudgeText, children: jsx("span", { children: nudgeText }) })) : null;
    const handleTouchStart = (e) => {
        if (onFocus) {
            onFocus(e);
        }
    };
    const containerRef = useRef(null);
    useEffect(() => {
        const handleTouchOutside = (event) => {
            if (containerRef.current &&
                !containerRef.current.contains(event.target)) {
                if (onBlur) {
                    const dummyEvent = {
                        target: containerRef.current,
                    };
                    onBlur(dummyEvent);
                }
            }
        };
        document.addEventListener("touchstart", handleTouchOutside);
        return () => {
            document.removeEventListener("touchstart", handleTouchOutside);
        };
    }, [onBlur]);
    const radioInput = (jsxs("label", { htmlFor: id, style: theme.radio.container, role: "radio", "aria-checked": isChecked, tabIndex: disabled ? -1 : 0, onKeyDown: (e) => !disabled && (e.key === "Enter" || e.key === " ") && handleChange(), children: [jsx("input", { id: id, type: "radio", name: name, value: value, checked: checked !== undefined ? checked : undefined, defaultChecked: checked === undefined ? defaultChecked : undefined, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onTouchStart: handleTouchStart, "aria-label": ariaLabel ?? label, "aria-describedby": nudgeVisible ? nudgeId : undefined, style: theme.radio.input, disabled: disabled }), jsx("span", { style: {
                    ...(isChecked
                        ? { ...theme.radio.radioCircle, ...theme.radio.radioCircleChecked }
                        : theme.radio.radioCircle),
                }, children: isChecked && jsx("span", { style: theme.radio.radioDot }) }), jsx("span", { style: theme.radio.label, children: label })] }));
    let content;
    if (nudgeVisible && (nudgePosition === "left" || nudgePosition === "right")) {
        content = (jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [nudgePosition === "left" && (jsx("div", { style: theme.radio.nudgeLeft, children: nudgeElement })), radioInput, nudgePosition === "right" && (jsx("div", { style: theme.radio.nudgeRight, children: nudgeElement }))] }));
    }
    else {
        content = (jsxs(Fragment, { children: [nudgeVisible && nudgePosition === "top" && (jsx("div", { style: theme.radio.nudgeTop, children: nudgeElement })), radioInput, nudgeVisible && nudgePosition === "bottom" && (jsx("div", { style: theme.radio.nudgeBottom, children: nudgeElement }))] }));
    }
    return (jsxs("div", { style: {
            ...theme.radio.wrapper,
            ...(disabled ? theme.radio.disabled : {}),
        }, ref: containerRef, children: [radioLabel && jsx("div", { style: theme.radio.radioLabel, children: radioLabel }), content] }));
}

export { RadioGroup };
//# sourceMappingURL=RadioGroup.js.map