@atlaskit/radio
Version:
A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
112 lines (111 loc) • 6.15 kB
JavaScript
/* radio.tsx generated by @compiled/babel-plugin v0.36.1 */
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";
import { forwardRef, memo } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import __noop from '@atlaskit/ds-lib/noop';
import { fg } from '@atlaskit/platform-feature-flags';
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
var packageName = "@atlaskit/radio";
var packageVersion = "8.1.8";
var noop = __noop;
var labelPaddingStyles = null;
var labelStyles = null;
var radioStyles = null;
var newRadioStyles = 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(["_11c82smr _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm _mqf87wap _g7st13gf"]),
style: {
"--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
"--_1ynhf1h": ix("var(--ds-text-disabled, ".concat(N80, ")"))
}
}, /*#__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 _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", fg('platform-visual-refresh-icons') && "_t9ec1soj _z0ai120g _1qdg120g"]),
style: {
"--_1q9y51y": ix("var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)")),
"--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
"--_vnm8xo": ix("var(--ds-border-input, ".concat(N100, ")")),
"--_jf353p": ix("var(--ds-icon-inverse, ".concat(N10, ")")),
"--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
"--_174hl94": ix("var(--ds-background-input-pressed, ".concat(N30, ")")),
"--_1rdyq0k": ix("var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")"))),
"--_1gcp7nr": ix("var(--ds-background-selected-bold, ".concat(B400, ")")),
"--_14y1fod": ix("var(--ds-background-selected-bold-hovered, ".concat(B300, ")")),
"--_9b0jbo": ix("var(--ds-background-selected-bold-pressed, ".concat(B50, ")")),
"--_uq1ko9": ix("var(--ds-icon-inverse, ".concat(B400, ")")),
"--_m4cp67": ix("var(--ds-icon-danger, ".concat(R300, ")")),
"--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
"--_1ufdgqf": ix("var(--ds-border-disabled, ".concat(N20, ")")),
"--_1xmcmw9": ix("var(--ds-icon-disabled, ".concat(N70, ")"))
}
})), 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;