@dxc-technology/halstack-react 0.0.0-a7970fd → 0.0.0-a7fec42

package/radio-group/RadioGroup.js

@@ -23,6 +23,8 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Radio = _interopRequireDefault(require("./Radio"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -39,6 +41,8 @@ var getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
 };
 
 var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var _ref2;
+
   var label = _ref.label,
       name = _ref.name,
       helperText = _ref.helperText,
@@ -47,8 +51,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$optional = _ref.optional,
       optional = _ref$optional === void 0 ? false : _ref$optional,
-      _ref$optionalItemLabe = _ref.optionalItemLabel,
-      optionalItemLabel = _ref$optionalItemLabe === void 0 ? "N/A" : _ref$optionalItemLabe,
+      optionalItemLabel = _ref.optionalItemLabel,
       _ref$readonly = _ref.readonly,
       readonly = _ref$readonly === void 0 ? false : _ref$readonly,
       _ref$stacking = _ref.stacking,
@@ -78,8 +81,10 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       firstTimeFocus = _useState6[0],
       setFirstTimeFocus = _useState6[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var optionalItem = {
-    label: optionalItemLabel,
+    label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
     value: "",
     disabled: disabled
   };
@@ -92,7 +97,6 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       currentFocusIndex = _useState8[0],
       setCurrentFocusIndex = _useState8[1];
 
-  var colorsTheme = (0, _useTheme["default"])();
   var handleOnChange = (0, _react.useCallback)(function (newValue) {
     var currentValue = value !== null && value !== void 0 ? value : innerValue;
 
@@ -100,16 +104,16 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       value !== null && value !== void 0 ? value : setInnerValue(newValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     }
-  }, [value, innerValue, setInnerValue, onChange]);
+  }, [value, innerValue, onChange]);
 
-  var handleOnBlur = function handleOnBlur(e) {
+  var handleOnBlur = function handleOnBlur(event) {
     // If the radio group loses the focus to an element not contained inside it...
-    if (!e.currentTarget.contains(e.relatedTarget)) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
       setFirstTimeFocus(true);
       var currentValue = value !== null && value !== void 0 ? value : innerValue;
       !optional && !Boolean(currentValue) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue,
-        error: "This field is required. Please, choose an option."
+        error: translatedLabels.formFields.requiredSelectionErrorMessage
       }) : onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue
       });
@@ -147,27 +151,24 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   };
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 37: // arrow left
-
-      case 38:
-        // arrow up
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
+      case "Up":
+      case "ArrowUp":
         event.preventDefault();
         setPreviousRadioChecked();
         break;
 
-      case 39: // arrow right
-
-      case 40:
-        // arrow down
+      case "Right":
+      case "ArrowRight":
+      case "Down":
+      case "ArrowDown":
         event.preventDefault();
         setNextRadioChecked();
         break;
 
-      case 13: // enter
-
-      case 32:
-        // space
+      case " ":
         event.preventDefault();
         handleOnChange(innerOptions[currentFocusIndex].value);
         break;
@@ -182,7 +183,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     id: radioGroupLabelId,
     helperText: helperText,
     disabled: disabled
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, " ".concat(translatedLabels.formFields.optionalLabel))), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(RadioGroup, {
     onBlur: handleOnBlur,
@@ -192,20 +193,22 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     role: "radiogroup",
     "aria-disabled": disabled,
     "aria-labelledby": radioGroupLabelId,
-    "aria-invalid": error ? "true" : "false",
+    "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": !disabled && !readonly && !optional,
     "aria-readonly": readonly,
     "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
   }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
-    value: value !== null && value !== void 0 ? value : innerValue,
+    disabled: disabled,
+    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : "",
     readOnly: true,
     "aria-hidden": "true"
   }), innerOptions.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      option: option,
-      currentValue: value !== null && value !== void 0 ? value : innerValue,
+      key: "radio-".concat(index),
+      label: option.label,
+      checked: (value !== null && value !== void 0 ? value : innerValue) === option.value,
       onClick: function onClick() {
         handleOnChange(option.value);
         setCurrentFocusIndex(index);
@@ -260,7 +263,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.groupLabelMargin;
 });
 
-var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n\n  row-gap: ", ";\n  column-gap: ", ";\n"])), function (props) {
+var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  row-gap: ", ";\n  column-gap: ", ";\n"])), function (props) {
   return props.stacking;
 }, function (props) {
   return props.theme.groupVerticalGutter;

package/radio-group/RadioGroup.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcRadioGroup from "./RadioGroup";

package/radio-group/RadioGroup.test.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _react = _interopRequireDefault(require("react"));
 
-var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
-
 var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
+
 var options = [{
   label: "Option 01",
   value: "1"
@@ -38,7 +38,7 @@ var options = [{
   label: "Option 09",
   value: "9"
 }];
-var single_disabled_options = [{
+var singleDisabledOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -90,14 +90,46 @@ describe("Radio Group component tests", function () {
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal");
   });
+  test("Sends its value when submitted", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        radiogroup: "5"
+      });
+    });
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "radiogroup",
+      label: "test-radio-group-label",
+      options: options
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole,
+        getAllByRole = _render3.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    var submit = getByText("Submit");
+
+    _userEvent["default"].click(radioGroup);
+
+    _userEvent["default"].click(getAllByRole("radio")[4]);
+
+    _userEvent["default"].click(submit);
+  });
   test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       options: options,
       disabled: true
     })),
-        getByRole = _render3.getByRole,
-        getAllByRole = _render3.getAllByRole;
+        getByRole = _render4.getByRole,
+        getAllByRole = _render4.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -107,8 +139,8 @@ describe("Radio Group component tests", function () {
     });
 
     _react2.fireEvent.keyDown(radioGroup, {
-      key: "Enter",
-      code: "Enter",
+      key: " ",
+      code: "Space",
       keyCode: 13,
       charCode: 13
     });
@@ -132,13 +164,13 @@ describe("Radio Group component tests", function () {
     });
   });
   test("Disabled option renders with correct aria attribute, correct tabIndex value and it is not focusable by keyboard (focus 'jumps' the disabled option)", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radioGroup-label",
-      options: single_disabled_options
+      options: singleDisabledOptions
     })),
-        getByRole = _render4.getByRole,
-        getAllByRole = _render4.getAllByRole;
+        getByRole = _render5.getByRole,
+        getAllByRole = _render5.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -165,14 +197,39 @@ describe("Radio Group component tests", function () {
     expect(radios[1].tabIndex).toBe(-1);
     expect(radios[2].tabIndex).toBe(-1);
   });
+  test("Disabled radio group doesn't send its value when submitted", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({});
+    });
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "radiogroup",
+      defaultValue: "1",
+      disabled: true,
+      label: "test-radio-group-label",
+      options: options
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render6.getByText;
+
+    var submit = getByText("Submit");
+
+    _userEvent["default"].click(submit);
+  });
   test("Error state renders with correct aria attributes", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       options: options,
       error: "Error message"
     })),
-        getByRole = _render5.getByRole,
-        getByText = _render5.getByText;
+        getByRole = _render7.getByRole,
+        getByText = _render7.getByText;
 
     var radioGroup = getByRole("radiogroup");
     var errorMessage = getByText("Error message");
@@ -184,14 +241,14 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       options: options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render6.getByRole,
-        getAllByRole = _render6.getAllByRole;
+        getByRole = _render8.getByRole,
+        getAllByRole = _render8.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
@@ -218,15 +275,15 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       value: "",
       options: options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole;
+        getByRole = _render9.getByRole,
+        getAllByRole = _render9.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
@@ -245,7 +302,7 @@ describe("Radio Group component tests", function () {
   test("The 'defaultValue' gives the radio group an initial value when it is uncontrolled", function () {
     var onChange = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -253,8 +310,8 @@ describe("Radio Group component tests", function () {
       options: options,
       onChange: onChange
     })),
-        getAllByRole = _render8.getAllByRole,
-        container = _render8.container;
+        getAllByRole = _render10.getAllByRole,
+        container = _render10.container;
 
     var radio = getAllByRole("radio")[1];
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -266,7 +323,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -276,9 +333,9 @@ describe("Radio Group component tests", function () {
       optional: true,
       optionalItemLabel: "No selection"
     })),
-        getByRole = _render9.getByRole,
-        getByText = _render9.getByText,
-        container = _render9.container;
+        getByRole = _render11.getByRole,
+        getByText = _render11.getByText,
+        container = _render11.container;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("false");
@@ -299,7 +356,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       value: "2",
       label: "test-radio-group-label",
@@ -308,9 +365,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render10.getByRole,
-        getAllByRole = _render10.getAllByRole,
-        container = _render10.container;
+        getByRole = _render12.getByRole,
+        getAllByRole = _render12.getAllByRole,
+        container = _render12.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -332,16 +389,16 @@ describe("Radio Group component tests", function () {
   test("Select an option by clicking on its label", function () {
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByText = _render11.getByText,
-        getAllByRole = _render11.getAllByRole,
-        container = _render11.container;
+        getByText = _render13.getByText,
+        getAllByRole = _render13.getAllByRole,
+        container = _render13.container;
 
     var radioLabel = getByText("Option 09");
     var checkedRadio = getAllByRole("radio")[8];
@@ -359,15 +416,15 @@ describe("Radio Group component tests", function () {
   test("Select an option by clicking on its radio input", function () {
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getAllByRole = _render12.getAllByRole,
-        container = _render12.container;
+        getAllByRole = _render14.getAllByRole,
+        container = _render14.container;
 
     var checkedRadio = getAllByRole("radio")[6];
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -384,7 +441,7 @@ describe("Radio Group component tests", function () {
   test("Select an option that is already checked does not call onChange event but gives the focus", function () {
     var onChange = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -392,7 +449,7 @@ describe("Radio Group component tests", function () {
       options: options,
       onChange: onChange
     })),
-        getAllByRole = _render13.getAllByRole;
+        getAllByRole = _render15.getAllByRole;
 
     var checkedRadio = getAllByRole("radio")[1];
     expect(checkedRadio.tabIndex).toBe(0);
@@ -403,56 +460,26 @@ describe("Radio Group component tests", function () {
     expect(onChange).not.toHaveBeenCalled();
     expect(document.activeElement).toEqual(checkedRadio);
   });
-  test("The 'enter' key checks the current focused option if anyone is checked", function () {
-    var onChange = jest.fn();
-
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getByRole = _render14.getByRole,
-        getAllByRole = _render14.getAllByRole,
-        container = _render14.container;
-
-    var radioGroup = getByRole("radiogroup");
-    var checkedRadio = getAllByRole("radio")[0];
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith("1");
-    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
-    expect(checkedRadio.tabIndex).toBe(0);
-    expect(submitInput.value).toBe("1");
-  });
   test("The 'space' key checks the current focused option if anyone is checked", function () {
     var onChange = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByRole = _render15.getByRole,
-        getAllByRole = _render15.getAllByRole,
-        container = _render15.container;
+        getByRole = _render16.getByRole,
+        getAllByRole = _render16.getAllByRole,
+        container = _render16.container;
 
     var radioGroup = getByRole("radiogroup");
     var checkedRadio = getAllByRole("radio")[0];
     var submitInput = container.querySelector("input[name=\"test\"]");
 
     _react2.fireEvent.keyDown(radioGroup, {
-      key: "Space",
+      key: " ",
       code: "Space",
       keyCode: 32,
       charCode: 32
@@ -467,7 +494,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -475,9 +502,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render16.getByRole,
-        getAllByRole = _render16.getAllByRole,
-        container = _render16.container;
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole,
+        container = _render17.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -510,7 +537,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "8",
       name: "test",
       label: "test-radio-group-label",
@@ -519,9 +546,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render17.getByRole,
-        getAllByRole = _render17.getAllByRole,
-        container = _render17.container;
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole,
+        container = _render18.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -559,7 +586,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -568,9 +595,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render18.getByRole,
-        getAllByRole = _render18.getAllByRole,
-        container = _render18.container;
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.getAllByRole,
+        container = _render19.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -607,16 +634,16 @@ describe("Radio Group component tests", function () {
   test("Keyboard focus movement continues from the last radio input clicked", function () {
     var onChange = jest.fn();
 
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole,
-        container = _render19.container;
+        getByRole = _render20.getByRole,
+        getAllByRole = _render20.getAllByRole,
+        container = _render20.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -655,7 +682,7 @@ describe("Radio Group component tests", function () {
   test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
     var onChange = jest.fn();
 
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -663,9 +690,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       readonly: true
     })),
-        getByRole = _render20.getByRole,
-        getAllByRole = _render20.getAllByRole,
-        container = _render20.container;
+        getByRole = _render21.getByRole,
+        getAllByRole = _render21.getAllByRole,
+        container = _render21.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");

package/radio-group/types.d.ts

@@ -102,8 +102,8 @@ export declare type RefType = HTMLDivElement;
  * Single radio prop types.
  */
 export declare type RadioProps = {
-    option: Option;
-    currentValue?: string;
+    label: string;
+    checked: boolean;
     onClick: () => void;
     error?: string;
     disabled: boolean;