@atlaskit/radio 5.6.9 → 6.0.0

package/dist/es2019/radio.js

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import __noop from '@atlaskit/ds-lib/noop';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { DN600, N80, N900 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { B100, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
-import getRadioCustomProperties from './styles';
 const packageName = "@atlaskit/radio";
-const packageVersion = "5.6.9";
+const packageVersion = "6.0.0";
 const fontFamily = getFontFamily();
 const noop = __noop;
 const labelPaddingStyles = css({
@@ -21,6 +19,7 @@ const labelStyles = css({
   boxSizing: 'border-box',
   position: 'relative',
   alignItems: 'flex-start',
+  color: `var(--ds-text, ${N900})`,
   fontFamily: fontFamily,
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-disabled]': {
@@ -28,12 +27,6 @@ const labelStyles = css({
     cursor: 'not-allowed'
   }
 });
-const lightLabelStyles = css({
-  color: `var(--ds-text, ${N900})`
-});
-const darkLabelStyles = css({
-  color: `var(--ds-text, ${DN600})`
-});
 const radioStyles = css({
   display: 'flex',
   // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
@@ -63,9 +56,9 @@ const radioStyles = css({
     -radio-dot-color and -radio-dot-opacity according to user interactions.
     All other variables are constant
   */
-  '--radio-background-color': 'var(--local-background)',
-  '--radio-border-color': 'var(--local-border)',
-  '--radio-dot-color': 'var(--local-dot-checked)',
+  '--radio-background-color': `var(--ds-background-input, ${N10})`,
+  '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--radio-dot-color': `var(--ds-icon-inverse, ${N10})`,
   '--radio-dot-opacity': 0,
   /* 24px * 7 / 12 === 14px height and width */
   transform: 'scale(calc(7 / 12))',
@@ -85,44 +78,44 @@ const radioStyles = css({
     transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
   },
   '&:hover': {
-    '--radio-background-color': 'var(--local-background-hover)',
-    '--radio-border-color': 'var(local-border-hover)'
+    '--radio-background-color': `var(--ds-background-input-hovered, ${N30})`,
+    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`
   },
   '&:active': {
-    '--radio-background-color': 'var(--local-background-active)'
+    '--radio-background-color': `var(--ds-background-input-pressed, ${N30})`
   },
   '&:focus': {
-    '--radio-border-color': 'var(--local-border-focus)'
+    '--radio-border-color': `var(--ds-border-focused, ${B100})`
   },
   '&:checked': {
-    '--radio-background-color': 'var(--local-background-checked)',
-    '--radio-border-color': 'var(--local-background-checked)',
+    '--radio-background-color': `var(--ds-background-selected-bold, ${B400})`,
+    '--radio-border-color': `var(--ds-background-selected-bold, ${B400})`,
     '--radio-dot-opacity': 1
   },
   '&:checked:hover': {
-    '--radio-background-color': 'var(--local-background-checked-hover)',
-    '--radio-border-color': 'var(--local-background-checked-hover)'
+    '--radio-background-color': `var(--ds-background-selected-bold-hovered, ${B300})`,
+    '--radio-border-color': `var(--ds-background-selected-bold-hovered, ${B300})`
   },
   '&:checked:active': {
-    '--radio-background-color': 'var(--local-background-checked-active)',
-    '--radio-border-color': 'var(--local-border-hover)',
-    '--radio-dot-color': 'var(--local-dot-active)'
+    '--radio-background-color': `var(--ds-background-selected-bold-pressed, ${B50})`,
+    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+    '--radio-dot-color': `var(--ds-icon-inverse, ${B400})`
   },
   '&:checked:focus': {
-    '--radio-border-color': 'var(--local-border-focus)'
+    '--radio-border-color': `var(--ds-border-focused, ${B100})`
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid], &:checked[data-invalid]': {
-    '--radio-border-color': 'var(--local-invalid)'
+    '--radio-border-color': `var(--ds-icon-danger, ${R300})`
   },
   '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
     cursor: 'not-allowed',
-    '--radio-background-color': 'var(--local-background-disabled)',
-    '--radio-border-color': 'var(--local-border-disabled)',
-    '--radio-dot-color': 'var(--local-dot-disabled)'
+    '--radio-background-color': `var(--ds-background-disabled, ${N20})`,
+    '--radio-border-color': `var(--ds-border-disabled, ${N20})`,
+    '--radio-dot-color': `var(--ds-icon-disabled, ${N70})`
   }
 });
-const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
+const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
   const {
     ariaLabel,
     isDisabled = false,
@@ -130,7 +123,6 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     isInvalid = false,
     isChecked = false,
     label,
-    mode,
     name,
     onChange = noop,
     value,
@@ -147,11 +139,10 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     packageName,
     packageVersion
   });
-  const radioCustomProperties = useMemo(() => css(getRadioCustomProperties(mode)), [mode]);
   return jsx("label", {
     "data-testid": testId && `${testId}--radio-label`,
     "data-disabled": isDisabled ? 'true' : undefined,
-    css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
+    css: labelStyles
   }, jsx("input", _extends({}, rest, {
     "aria-label": ariaLabel,
     checked: isChecked,
@@ -165,11 +156,8 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     // isInvalid is used in a nonstandard way so cannot
     // use :invalid selector
     ,
-    "data-invalid": isInvalid ? 'true' : undefined
-    // TODO radioCustomProperties can be defined at top of file when legacy theming removed
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: [radioStyles, radioCustomProperties],
+    "data-invalid": isInvalid ? 'true' : undefined,
+    css: radioStyles,
     ref: ref
   })), label ? jsx("span", {
     css: labelPaddingStyles
@@ -186,11 +174,8 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
  * - [Usage](https://atlassian.design/components/radio/usage)
  */
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(RadioWithMode, _extends({}, props, {
-    ref: ref,
-    mode: mode
-  })));
+  return jsx(InnerRadio, _extends({}, props, {
+    ref: ref
+  }));
 }));
 export default Radio;

package/dist/esm/radio-group.js

@@ -41,7 +41,7 @@ export default function RadioGroup(props) {
     if (typeof isDisabled !== 'undefined') {
       optionProps.isDisabled = isDisabled;
     }
-    var isChecked = value != null && optionProps.value === value;
+    var isChecked = value !== null && optionProps.value === value;
     return /*#__PURE__*/React.createElement(Radio, _extends({}, optionProps, {
       name: name || optionProps.name,
       key: index,

package/dist/esm/radio.js

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
+var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
 /** @jsx jsx */
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import __noop from '@atlaskit/ds-lib/noop';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { DN600, N80, N900 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { B100, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
-import getRadioCustomProperties from './styles';
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.6.9";
+var packageVersion = "6.0.0";
 var fontFamily = getFontFamily();
 var noop = __noop;
 var labelPaddingStyles = css({
@@ -23,6 +21,7 @@ var labelStyles = css({
   boxSizing: 'border-box',
   position: 'relative',
   alignItems: 'flex-start',
+  color: "var(--ds-text, ".concat(N900, ")"),
   fontFamily: fontFamily,
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-disabled]': {
@@ -30,12 +29,6 @@ var labelStyles = css({
     cursor: 'not-allowed'
   }
 });
-var lightLabelStyles = css({
-  color: "var(--ds-text, ".concat(N900, ")")
-});
-var darkLabelStyles = css({
-  color: "var(--ds-text, ".concat(DN600, ")")
-});
 var radioStyles = css({
   display: 'flex',
   // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
@@ -65,9 +58,9 @@ var radioStyles = css({
     -radio-dot-color and -radio-dot-opacity according to user interactions.
     All other variables are constant
   */
-  '--radio-background-color': 'var(--local-background)',
-  '--radio-border-color': 'var(--local-border)',
-  '--radio-dot-color': 'var(--local-dot-checked)',
+  '--radio-background-color': "var(--ds-background-input, ".concat(N10, ")"),
+  '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--radio-dot-color': "var(--ds-icon-inverse, ".concat(N10, ")"),
   '--radio-dot-opacity': 0,
   /* 24px * 7 / 12 === 14px height and width */
   transform: 'scale(calc(7 / 12))',
@@ -87,44 +80,44 @@ var radioStyles = css({
     transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
   },
   '&:hover': {
-    '--radio-background-color': 'var(--local-background-hover)',
-    '--radio-border-color': 'var(local-border-hover)'
+    '--radio-background-color': "var(--ds-background-input-hovered, ".concat(N30, ")"),
+    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")")
   },
   '&:active': {
-    '--radio-background-color': 'var(--local-background-active)'
+    '--radio-background-color': "var(--ds-background-input-pressed, ".concat(N30, ")")
   },
   '&:focus': {
-    '--radio-border-color': 'var(--local-border-focus)'
+    '--radio-border-color': "var(--ds-border-focused, ".concat(B100, ")")
   },
   '&:checked': {
-    '--radio-background-color': 'var(--local-background-checked)',
-    '--radio-border-color': 'var(--local-background-checked)',
+    '--radio-background-color': "var(--ds-background-selected-bold, ".concat(B400, ")"),
+    '--radio-border-color': "var(--ds-background-selected-bold, ".concat(B400, ")"),
     '--radio-dot-opacity': 1
   },
   '&:checked:hover': {
-    '--radio-background-color': 'var(--local-background-checked-hover)',
-    '--radio-border-color': 'var(--local-background-checked-hover)'
+    '--radio-background-color': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+    '--radio-border-color': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
   },
   '&:checked:active': {
-    '--radio-background-color': 'var(--local-background-checked-active)',
-    '--radio-border-color': 'var(--local-border-hover)',
-    '--radio-dot-color': 'var(--local-dot-active)'
+    '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(B50, ")"),
+    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+    '--radio-dot-color': "var(--ds-icon-inverse, ".concat(B400, ")")
   },
   '&:checked:focus': {
-    '--radio-border-color': 'var(--local-border-focus)'
+    '--radio-border-color': "var(--ds-border-focused, ".concat(B100, ")")
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid], &:checked[data-invalid]': {
-    '--radio-border-color': 'var(--local-invalid)'
+    '--radio-border-color': "var(--ds-icon-danger, ".concat(R300, ")")
   },
   '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
     cursor: 'not-allowed',
-    '--radio-background-color': 'var(--local-background-disabled)',
-    '--radio-border-color': 'var(--local-border-disabled)',
-    '--radio-dot-color': 'var(--local-dot-disabled)'
+    '--radio-background-color': "var(--ds-background-disabled, ".concat(N20, ")"),
+    '--radio-border-color': "var(--ds-border-disabled, ".concat(N20, ")"),
+    '--radio-dot-color': "var(--ds-icon-disabled, ".concat(N70, ")")
   }
 });
-var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
+var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
   var ariaLabel = props.ariaLabel,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
@@ -134,7 +127,6 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     _props$isChecked = props.isChecked,
     isChecked = _props$isChecked === void 0 ? false : _props$isChecked,
     label = props.label,
-    mode = props.mode,
     name = props.name,
     _props$onChange = props.onChange,
     onChange = _props$onChange === void 0 ? noop : _props$onChange,
@@ -150,13 +142,10 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     packageName: packageName,
     packageVersion: packageVersion
   });
-  var radioCustomProperties = useMemo(function () {
-    return css(getRadioCustomProperties(mode));
-  }, [mode]);
   return jsx("label", {
     "data-testid": testId && "".concat(testId, "--radio-label"),
     "data-disabled": isDisabled ? 'true' : undefined,
-    css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
+    css: labelStyles
   }, jsx("input", _extends({}, rest, {
     "aria-label": ariaLabel,
     checked: isChecked,
@@ -170,11 +159,8 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     // isInvalid is used in a nonstandard way so cannot
     // use :invalid selector
     ,
-    "data-invalid": isInvalid ? 'true' : undefined
-    // TODO radioCustomProperties can be defined at top of file when legacy theming removed
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: [radioStyles, radioCustomProperties],
+    "data-invalid": isInvalid ? 'true' : undefined,
+    css: radioStyles,
     ref: ref
   })), label ? jsx("span", {
     css: labelPaddingStyles
@@ -191,12 +177,8 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
  * - [Usage](https://atlassian.design/components/radio/usage)
  */
 var Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref) {
-    var mode = _ref.mode;
-    return jsx(RadioWithMode, _extends({}, props, {
-      ref: ref,
-      mode: mode
-    }));
-  });
+  return jsx(InnerRadio, _extends({}, props, {
+    ref: ref
+  }));
 }));
 export default Radio;

package/dist/types/radio-group.d.ts

@@ -3,11 +3,11 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { OptionsPropType, RadioValue } from './types';
 export interface RadioGroupProps {
     /**
-     * Once set, controls the selected value on the `RadioGroup`
+     * Once set, controls the selected value on the `RadioGroup`.
      */
     value?: RadioValue | null;
     /**
-     * Sets the initial selected value on the `RadioGroup`
+     * Sets the initial selected value on the `RadioGroup`.
      */
     defaultValue?: RadioValue | null;
     /**
@@ -15,11 +15,11 @@ export interface RadioGroupProps {
      */
     isDisabled?: boolean;
     /**
-     * Sets the required state of all `Radio` elements in the group
+     * Sets the required state of all `Radio` elements in the group.
      */
     isRequired?: boolean;
     /**
-     * Sets the invalid state of all `Radio` elements in the group
+     * Sets the invalid state of all `Radio` elements in the group.
      */
     isInvalid?: boolean;
     /**
@@ -27,23 +27,23 @@ export interface RadioGroupProps {
      */
     options: OptionsPropType;
     /**
-     * Function that gets fired after each invalid event
+     * Function that gets fired after each invalid event.
      */
     onInvalid?: (event: SyntheticEvent<any>) => void;
     /**
-     * Function that gets after each change event
+     * Function that gets after each change event.
      */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Sets the `name` prop on each of the `Radio` elements in the group
+     * Sets the `name` prop on each of the `Radio` elements in the group.
      */
     name?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from radio
+     * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
     /**
-     * The id of the element that links to this radiogroup.
+     * The id of the element that links to this radio group.
      */
     'aria-labelledby'?: string;
 }

package/dist/types/radio.d.ts

@@ -30,7 +30,7 @@ declare const Radio: import("react").MemoExoticComponent<import("react").Forward
     value?: string | undefined;
     testId?: string | undefined;
     analyticsContext?: Record<string, any> | undefined;
-} & import("@atlaskit/analytics-next").WithAnalyticsEventsProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+} & import("@atlaskit/analytics-next").WithAnalyticsEventsProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
     ariaLabel?: string | undefined;
     isDisabled?: boolean | undefined;
     isRequired?: boolean | undefined;

package/dist/types/types.d.ts

@@ -11,7 +11,7 @@ export type OptionsPropType = Array<OptionPropType>;
 export type RadioValue = string;
 type OwnProps = {
     /**
-     * the aria-label attribute associated with the radio element
+     * The aria-label attribute associated with the radio element.
      */
     ariaLabel?: string;
     /**
@@ -19,38 +19,38 @@ type OwnProps = {
      */
     isDisabled?: boolean;
     /**
-     * Marks this as a required field
+     * Marks this as a required field.
      */
     isRequired?: boolean;
     /**
-     * Field is invalid
+     * Marks this as an invalid field.
      */
     isInvalid?: boolean;
     /**
-     * Set the field as checked
+     * Set the field as checked.
      */
     isChecked?: boolean;
     /**
-     * The label value for the input rendered to the dom
+     * The label value for the input rendered to the DOM.
      */
     label?: ReactNode;
     /**
-     * onChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`
+     * onChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
      */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Field value
+     * Field value.
      */
     value?: RadioValue;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      * we have 2 different testid generated based on the one you pass to the Radio component:
      * - `{testId}--radio-input` to check if it got changed to checked/unchecked.
-     * - `{testId}--radio-label` to click the input
+     * - `{testId}--radio-label` to click the input.
      */
     testId?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from radio
+     * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
 };
@@ -58,35 +58,35 @@ type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type RadioProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'disabled' | 'required' | 'checked' | 'value'>, OwnProps> & WithAnalyticsEventsProps;
 export interface ExtractReactTypeProps extends WithAnalyticsEventsProps {
     /**
-     * the aria-label attribute associated with the radio element
+     * The aria-label attribute associated with the radio element.
      */
     ariaLabel?: string;
     /**
-     * Field disabled
+     * Marks this as a disabled field.
      */
     isDisabled?: boolean;
     /**
-     * Marks this as a required field
+     * Marks this as a required field.
      */
     isRequired?: boolean;
     /**
-     * Field is invalid
+     * Marks this as an invalid field.
      */
     isInvalid?: boolean;
     /**
-     * Set the field as checked
+     * Set the field as checked.
      */
     isChecked?: boolean;
     /**
-     * The label value for the input rendered to the dom
+     * The label value for the input rendered to the DOM.
      */
     label?: ReactNode;
     /**
-     * Field name, must be unique to the radio group
+     * Field name, must be unique to the radio group.
      */
     name?: string;
     /**
-     * `onChange` event handler, passed into the props of each `Radio` Component instantiated within RadioGroup
+     * `onChange` event handler, passed into the props of each `Radio` Component instantiated within RadioGroup.
      */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
@@ -96,11 +96,11 @@ export interface ExtractReactTypeProps extends WithAnalyticsEventsProps {
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
     /**
-     * `onInvalid` event handler, passed into the props of each `Radio` component instantiated within `RadioGroup`
+     * `onInvalid` event handler, passed into the props of each `Radio` component instantiated within `RadioGroup`.
      */
     onInvalid?: (e: SyntheticEvent<any>) => void;
     /**
-     * Field value
+     * Field value.
      */
     value?: RadioValue;
     /**
@@ -111,7 +111,7 @@ export interface ExtractReactTypeProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from radio
+     * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
 }

package/dist/types-ts4.5/radio-group.d.ts

@@ -3,11 +3,11 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { OptionsPropType, RadioValue } from './types';
 export interface RadioGroupProps {
     /**
-     * Once set, controls the selected value on the `RadioGroup`
+     * Once set, controls the selected value on the `RadioGroup`.
      */
     value?: RadioValue | null;
     /**
-     * Sets the initial selected value on the `RadioGroup`
+     * Sets the initial selected value on the `RadioGroup`.
      */
     defaultValue?: RadioValue | null;
     /**
@@ -15,11 +15,11 @@ export interface RadioGroupProps {
      */
     isDisabled?: boolean;
     /**
-     * Sets the required state of all `Radio` elements in the group
+     * Sets the required state of all `Radio` elements in the group.
      */
     isRequired?: boolean;
     /**
-     * Sets the invalid state of all `Radio` elements in the group
+     * Sets the invalid state of all `Radio` elements in the group.
      */
     isInvalid?: boolean;
     /**
@@ -27,23 +27,23 @@ export interface RadioGroupProps {
      */
     options: OptionsPropType;
     /**
-     * Function that gets fired after each invalid event
+     * Function that gets fired after each invalid event.
      */
     onInvalid?: (event: SyntheticEvent<any>) => void;
     /**
-     * Function that gets after each change event
+     * Function that gets after each change event.
      */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Sets the `name` prop on each of the `Radio` elements in the group
+     * Sets the `name` prop on each of the `Radio` elements in the group.
      */
     name?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from radio
+     * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
     /**
-     * The id of the element that links to this radiogroup.
+     * The id of the element that links to this radio group.
      */
     'aria-labelledby'?: string;
 }