@wix/design-system/dist/esm/Radio/Radio.js

@wix/design-system

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Radio.st.css.js';
import Text from '../Text';
import { generateDataAttr } from '../utils/generateDataAttr';
import { dataHooks } from './Radio.constants';
import { withFocusable } from '../common/Focusable';
import semanticClassNames from './Radio.semanticClassNames';
import { useUniqueId } from '../providers/useCollapse/utils';
const Radio = forwardRef(({ dataHook, checked = false, disabled = false, label, id, name, value, focusableOnFocus, focusableOnBlur, onChange = () => null, onMouseEnter = () => null, onMouseLeave = () => null, alignItems = 'center', className, style, size = 'medium', }, ref) => {
    const radioId = useUniqueId(id);
    const _onClick = (event) => {
        if (!disabled && !checked) {
            onChange({ value, ...event });
        }
    };
    const _onMouseEnter = (event) => {
        if (!disabled) {
            onMouseEnter(event);
        }
    };
    const _onMouseLeave = (event) => {
        if (!disabled) {
            onMouseLeave(event);
        }
    };
    return (React.createElement("div", { className: st(classes.root, {
            checked,
            disabled,
            alignItems,
            size,
        }, className), ...generateDataAttr({ checked, disabled }, ['checked', 'disabled']), style: style, "data-hook": dataHook, onClick: _onClick, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, "aria-checked": !!checked },
        React.createElement("input", { type: "radio", className: classes.input, "data-hook": dataHooks.input, disabled: disabled, checked: checked, value: value, name: name, id: radioId, onChange: () => null, onFocus: focusableOnFocus, onBlur: focusableOnBlur, ref: ref }),
        React.createElement("span", { className: st(classes.icon, semanticClassNames.icon), "data-hook": dataHooks.icon }),
        label && (React.createElement("label", { className: classes.label, "data-hook": dataHooks.label, htmlFor: radioId, onClick: e => e.stopPropagation() },
            React.createElement(Text, { className: classes.labelText, tagName: "div", size: size, weight: "thin" }, label)))));
});
Radio.displayName = 'Radio';
Radio.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    checked: PropTypes.bool,
    disabled: PropTypes.bool,
    label: PropTypes.any,
    name: PropTypes.string,
    id: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onChange: PropTypes.func,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    alignItems: PropTypes.oneOf(['top', 'center']),
    size: PropTypes.oneOf(['small', 'medium']),
};
export default withFocusable(Radio);
//# sourceMappingURL=Radio.js.map