@atlaskit/radio/dist/cjs/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 v0.36.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./radio.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _colors = require("@atlaskit/theme/colors");
var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var packageName = "@atlaskit/radio";
var packageVersion = "8.1.8";
var noop = _noop.default;
var labelPaddingStyles = null;
var labelStyles = null;
var radioStyles = null;
var newRadioStyles = null;
var InnerRadio = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
  var onChangeAnalytics = (0, _usePlatformLeafEventHandler.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: (0, _runtime.ax)(["_11c82smr _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm _mqf87wap _g7st13gf"]),
    style: {
      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
      "--_1ynhf1h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N80, ")"))
    }
  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, 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: (0, _runtime.ax)(["_18s8ze3t _19itbyy8 _2rko1q5u _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1s1q _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1q5u _qc5orqeg _z0ai1cbz _1qdg1cbz _18postnw _aetrb3bt _1peq1xmd _iosi1j4g _11jy1j4g _f3ett94y _19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _2kbk1ouc _6cyr1ouc _n8t01ouc _1o5r1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1if11pl2 _bl0e1pl2 _92na1pl2 _awur1pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _wml0snw8 _tusmsnw8 _1c6fsnw8 _qfttsnw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8 _y2mv1ri4 _1bg4jfq9 _6tjk1ri4 _awqnjfq9 _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_t9ec1soj _z0ai120g _1qdg120g"]),
    style: {
      "--_1q9y51y": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)")),
      "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
      "--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
      "--_jf353p": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N10, ")")),
      "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
      "--_174hl94": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N30, ")")),
      "--_1rdyq0k": (0, _runtime.ix)("var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
      "--_1gcp7nr": (0, _runtime.ix)("var(--ds-background-selected-bold, ".concat(_colors.B400, ")")),
      "--_14y1fod": (0, _runtime.ix)("var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")),
      "--_9b0jbo": (0, _runtime.ix)("var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")")),
      "--_uq1ko9": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.B400, ")")),
      "--_m4cp67": (0, _runtime.ix)("var(--ds-icon-danger, ".concat(_colors.R300, ")")),
      "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
      "--_1ufdgqf": (0, _runtime.ix)("var(--ds-border-disabled, ".concat(_colors.N20, ")")),
      "--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")"))
    }
  })), label ? /*#__PURE__*/React.createElement("span", {
    className: (0, _runtime.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__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
  return /*#__PURE__*/React.createElement(InnerRadio, (0, _extends2.default)({}, props, {
    ref: ref
  }));
}));
var _default = exports.default = Radio;