, {
- size,
- });
+ return (
+
+
+
+
+ );
}
-
- return (
-
-
-
-
- );
-});
+);
RadioButton.displayName = 'RadioButton';
diff --git a/packages/react/src/components/RadioButton/index.ts b/packages/react/src/components/RadioButton/index.ts
index 7a945acbd50a..ac7ae6046761 100644
--- a/packages/react/src/components/RadioButton/index.ts
+++ b/packages/react/src/components/RadioButton/index.ts
@@ -5,7 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
-import RadioButton from './RadioButton';
+import RadioButton, { RadioButtonProps } from './RadioButton';
export default RadioButton;
export { RadioButton };
+
+export type { RadioButtonProps };
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index cf7054206de0..12028b795c5c 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -14,6 +14,7 @@ import React, {
useState,
} from 'react';
import classNames from 'classnames';
+import type { RadioButtonProps } from '../RadioButton';
import { Legend } from '../Text';
import { usePrefix } from '../../internal/usePrefix';
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -44,7 +45,7 @@ export interface RadioButtonGroupProps
/**
* Specify the `` to be selected by default
*/
- defaultSelected?: string | number;
+ defaultSelected?: RadioButtonProps['value'];
/**
* Specify whether the group is disabled
@@ -87,10 +88,11 @@ export interface RadioButtonGroupProps
* the group changes
*/
onChange?: (
- selection: React.ReactNode,
- name: string,
+ selection: RadioButtonProps['value'],
+ name: RadioButtonGroupProps['name'],
event: React.ChangeEvent
) => void;
+
/**
* Provide where radio buttons should be placed
*/
@@ -119,7 +121,8 @@ export interface RadioButtonGroupProps
/**
* Specify the value that is currently selected in the group
*/
- valueSelected?: string | number;
+ valueSelected?: RadioButtonProps['value'];
+
/**
* `true` to specify if input selection in group is required.
*/
@@ -166,30 +169,38 @@ const RadioButtonGroup = React.forwardRef(
}
function getRadioButtons() {
- const mappedChildren = React.Children.map(children, (radioButton) => {
- const { value } = (radioButton as ReactElement)?.props ?? undefined;
-
- const newProps = {
- name: name,
- key: value,
- value: value,
- onChange: handleOnChange,
- checked: value === selected,
- required: required,
- };
-
- if (!selected && (radioButton as ReactElement)?.props.checked) {
- newProps.checked = true;
+ const mappedChildren = React.Children.map(
+ children as ReactElement,
+ (radioButton) => {
+ if (!radioButton) {
+ return;
+ }
+
+ const newProps = {
+ name: name,
+ key: radioButton.props.value,
+ value: radioButton.props.value,
+ onChange: handleOnChange,
+ checked: radioButton.props.value === selected,
+ required: required,
+ };
+
+ if (!selected && radioButton.props.checked) {
+ newProps.checked = true;
+ }
+
+ return React.cloneElement(radioButton, newProps);
}
- if (radioButton) {
- return React.cloneElement(radioButton as ReactElement, newProps);
- }
- });
+ );
return mappedChildren;
}
- function handleOnChange(newSelection, value, evt) {
+ function handleOnChange(
+ newSelection: RadioButtonProps['value'],
+ value: RadioButtonProps['name'],
+ evt: React.ChangeEvent
+ ) {
if (!readOnly) {
if (newSelection !== selected) {
setSelected(newSelection);
@@ -230,7 +241,7 @@ const RadioButtonGroup = React.forwardRef(
const divRef = useRef(null);
// Slug is always size `mini`
- let normalizedSlug;
+ let normalizedSlug: ReactElement | undefined;
if (slug && slug['type']?.displayName === 'Slug') {
normalizedSlug = React.cloneElement(slug as React.ReactElement, {
size: 'mini',
diff --git a/packages/react/src/components/RadioButtonGroup/index.ts b/packages/react/src/components/RadioButtonGroup/index.ts
index fbdadcbd2c57..85c816be1a29 100644
--- a/packages/react/src/components/RadioButtonGroup/index.ts
+++ b/packages/react/src/components/RadioButtonGroup/index.ts
@@ -5,7 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
-import RadioButtonGroup from './RadioButtonGroup';
+import RadioButtonGroup, { RadioButtonGroupProps } from './RadioButtonGroup';
export default RadioButtonGroup;
export { RadioButtonGroup };
+
+export type { RadioButtonGroupProps };