@cimpress/react-components/dist/src/radio/Radio.js

React components to support the MCP styleguide

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Radio = exports.RADIO_NAME = void 0;
const react_1 = __importDefault(require("react"));
const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
const css_1 = require("@emotion/css");
const utils_1 = require("../utils");
const RadioIcon_1 = require("./RadioIcon");
const cvar_1 = __importDefault(require("../theme/cvar"));
const RadioGroup_1 = require("./RadioGroup");
exports.RADIO_NAME = 'CimRadio';
const disabledStyle = (0, css_1.css) `
  cursor: not-allowed;
  color: ${(0, cvar_1.default)('color-icon-disabled')};
`;
const radioLabel = (0, css_1.css) `
  display: flex;
  align-items: center;

  &:has(input:checked) {
    --crc-radio-icon-display: block;
  }
`;
const radioIcon = (0, css_1.css) `
  margin-right: ${(0, cvar_1.default)('spacing-8')};
`;
const radioInput = (0, css_1.css) `
  display: none;
`;
const Radio = (props) => {
    var _a;
    const { id, name, checked, label, value, disabled = false, backgroundColor, className = '', onCheck, onBlur, onFocus, style } = props, rest = __rest(props, ["id", "name", "checked", "label", "value", "disabled", "backgroundColor", "className", "onCheck", "onBlur", "onFocus", "style"]);
    const { onChange: radioGroupOnChange, name: radioGroupName, selected: radioGroupSelected, } = (_a = (0, RadioGroup_1.useRadioGroupContext)()) !== null && _a !== void 0 ? _a : {};
    // `undefined` in case of uncontrolled radio
    const isChecked = checked !== null && checked !== void 0 ? checked : (radioGroupSelected != null ? radioGroupSelected === value : undefined);
    const debouncedChange = (0, lodash_debounce_1.default)((e, debouncedValue) => {
        onCheck === null || onCheck === void 0 ? void 0 : onCheck(e, debouncedValue);
        radioGroupOnChange === null || radioGroupOnChange === void 0 ? void 0 : radioGroupOnChange(e, debouncedValue);
    }, 200, {
        leading: true,
        trailing: false,
    });
    const handleChange = (e) => {
        e.persist();
        debouncedChange(e, value);
    };
    const inputId = (0, utils_1.useMemoizedId)({ id });
    return (react_1.default.createElement("label", { className: (0, css_1.cx)('crc-radio', className, radioLabel, { [disabledStyle]: disabled }), htmlFor: inputId, style: style },
        react_1.default.createElement(RadioIcon_1.RadioIcon, { className: radioIcon, color: disabled ? (0, cvar_1.default)('color-icon-disabled') : (0, cvar_1.default)('color-button-primary'), backgroundColor: backgroundColor }),
        react_1.default.createElement("input", Object.assign({ id: inputId, className: radioInput, name: name !== null && name !== void 0 ? name : radioGroupName, type: "radio", disabled: disabled, checked: isChecked, value: value, onBlur: onBlur, onFocus: onFocus, onChange: handleChange }, rest)),
        label));
};
exports.Radio = Radio;
exports.Radio.displayName = exports.RADIO_NAME;
//# sourceMappingURL=Radio.js.map