@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.
101 lines (98 loc) • 5.15 kB
JavaScript
/* radio.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
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';
import { fg } from '@atlaskit/platform-feature-flags';
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
const packageName = "@atlaskit/radio";
const packageVersion = "0.0.0-development";
const noop = __noop;
const labelPaddingStyles = null;
const labelStyles = null;
// These styles should be removed when the platform-radio-atomic-styles feature gate is cleaned up.
const labelLegacyStyles = null;
const labelDisabledStyles = null;
const radioBaseStyles = null;
const radioInteractiveStyles = null;
const radioDisabledStyles = null;
const radioDisabledCheckedStyles = null;
// These styles are applied when the platform-radio-atomic-styles feature gate is disabled.
// When the feature gate is cleaned up, this style block can be removed.
const radioLegacyStyles = null;
const radioInvalidStyles = null;
const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
const {
ariaLabel,
'aria-labelledby': ariaLabelledBy,
isDisabled = false,
isRequired,
isInvalid = false,
isChecked = false,
label,
labelId,
name,
onChange = noop,
value,
testId,
analyticsContext,
// events and all other input props
...rest
} = props;
const onChangeAnalytics = usePlatformLeafEventHandler({
fn: onChange,
action: 'changed',
analyticsData: analyticsContext,
componentName: 'radio',
packageName,
packageVersion
});
return /*#__PURE__*/React.createElement("label", {
"data-testid": testId && `${testId}--radio-label`,
"data-disabled": isDisabled ? 'true' : undefined,
className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazj3m3", !fg('platform-radio-atomic-styles') && "_mqf81tvo _g7st13gf", isDisabled && fg('platform-radio-atomic-styles') && "_syaz1tvo _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 && `${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 _1q6qmag2 _11511fmg _1s6w1qbb _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !fg('platform-radio-atomic-styles') && "_iosizyvw _11jyzyvw _f3ett94y _y2mvjdfc _1bg41l7b _6tjkjdfc _awqn1l7b _1rvq10ko _1p9j1fmg _x2tzhh5a _1iwzhh5a _sj8y1wq0 _jckox2ru _1dvd1fmg _60ak1dzn", !fg('platform-radio-atomic-styles') && "_19ybk8x7 _1d7pk8x7 _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1y1w _o1bd1y1w _2kbk1y1w _6cyr1y1w _n8t01y1w _1o5r1y1w _nxi61y1w _neoe1y1w _1el21y1w _lekrzcs9 _11v7zcs9 _1if1zcs9 _bl0ezcs9 _92nazcs9 _awurzcs9 _1f8czcs9 _s2ftzcs9 _17a1zcs9 _x48a15t7 _1ib215t7 _wml015t7 _tusm15t7 _1c6f15t7 _qftt15t7 _1yk915t7 _gdmb15t7 _pmm415t7", !isDisabled && fg('platform-radio-atomic-styles') && "_iosizyvw _11jyzyvw _f3ett94y _y2mvjdfc _1bg41l7b _6tjkjdfc _awqn1l7b _1rvq10ko _1p9j1fmg _x2tzhh5a _1iwzhh5a _sj8y1wq0 _jckox2ru _1dvd1fmg _60ak1dzn", isDisabled && fg('platform-radio-atomic-styles') && "_80om13gf _1q6q1y1w _1151zcs9 _1s6w15t7", isDisabled && isChecked && fg('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && fg('platform-radio-atomic-styles') && "_1151k8x7 _11jyk8x7"])
})), 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)
*/
const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
return /*#__PURE__*/React.createElement(InnerRadio, _extends({}, props, {
ref: ref
}));
}));
export default Radio;