@atlaskit/radio/dist/esm/radio.js

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

/* radio.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"];
import "./radio.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/// <reference types="node" />
// for typing `process`
import { forwardRef, memo } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import __noop from '@atlaskit/ds-lib/noop';
var packageName = "@atlaskit/radio";
var packageVersion = "10.2.3";
var noop = __noop;
var labelPaddingStyles = null;
var labelStyles = null;
var labelDisabledStyles = null;
var radioBaseStyles = null;
var radioInteractiveStyles = null;
var radioDisabledStyles = null;
var radioDisabledCheckedStyles = null;
var radioInvalidStyles = null;
var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
  var ariaLabel = props.ariaLabel,
    ariaLabelledBy = props['aria-labelledby'],
    _props$isDisabled = props.isDisabled,
    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
    isRequired = props.isRequired,
    _props$isInvalid = props.isInvalid,
    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
    _props$isChecked = props.isChecked,
    isChecked = _props$isChecked === void 0 ? false : _props$isChecked,
    label = props.label,
    labelId = props.labelId,
    name = props.name,
    _props$onChange = props.onChange,
    onChange = _props$onChange === void 0 ? noop : _props$onChange,
    value = props.value,
    testId = props.testId,
    analyticsContext = props.analyticsContext,
    rest = _objectWithoutProperties(props, _excluded);
  var onChangeAnalytics = usePlatformLeafEventHandler({
    fn: onChange,
    action: 'changed',
    analyticsData: analyticsContext,
    componentName: 'radio',
    packageName: packageName,
    packageVersion: packageVersion
  });
  return /*#__PURE__*/React.createElement("label", {
    "data-testid": testId && "".concat(testId, "--radio-label"),
    "data-disabled": isDisabled ? 'true' : undefined,
    className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazi7uo", isDisabled && "_syaz1gmx _80om13gf"])
  }, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
    // It is necessary only for Safari. It allows to render focus styles.
    tabIndex: 0,
    "aria-label": ariaLabel
    // TODO: Make `aria-labelledby` a `never` in TS. See https://product-fabric.atlassian.net/browse/DSP-23009
    ,
    "aria-labelledby": labelId || ariaLabelledBy,
    checked: isChecked,
    disabled: isDisabled,
    name: name,
    onChange: onChangeAnalytics,
    required: isRequired,
    type: "radio",
    value: value,
    "data-testid": testId && "".concat(testId, "--radio-input")
    // isInvalid is used in a nonstandard way so cannot
    // use :invalid selector
    ,
    "data-invalid": isInvalid ? 'true' : undefined,
    ref: ref,
    className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1j9a _1151rsbi _1s6w5w2r _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !isDisabled && "_iosijmqp _11jyjmqp _f3ett94y _y2mvdfik _1bg41l7b _6tjkdfik _awqn1l7b _1rvql4ek _1p9jrsbi _x2tz1q28 _1iwz1q28 _sj8yr01l _jcko12kk _1dvdrsbi _60ak5w2r", isDisabled && "_80om13gf _1q6q187o _1151bk0g _1s6w2sac", isDisabled && isChecked && "_tqbwt94y", isInvalid && !isDisabled && "_1151s4qr _11jys4qr"])
  })), label ? /*#__PURE__*/React.createElement("span", {
    className: ax(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
  }, label) : null);
});

/**
 * __Radio__
 *
 * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
 *
 * - [Examples](https://atlassian.design/components/radio/examples)
 * - [Code](https://atlassian.design/components/radio/code)
 * - [Usage](https://atlassian.design/components/radio/usage)
 */
var Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
  return /*#__PURE__*/React.createElement(InnerRadio, _extends({}, props, {
    ref: ref
  }));
}));
export default Radio;