fix: radioButton ref type (#44747)

* fix: radioButton ref

* fix: added radio types test

components/radio/__tests__/type.test.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Radio from '..';
+import type { RadioRef } from '..';
+
+describe('Radio.typescript', () => {
+  it('Radio', () => {
+    const ref = React.createRef<RadioRef>();
+    const checkbox = <Radio value ref={ref} />;
+
+    expect(checkbox).toBeTruthy();
+  });
+
+  it('Radio.Group', () => {
+    const group = (
+      <Radio.Group>
+        <Radio />
+      </Radio.Group>
+    );
+
+    expect(group).toBeTruthy();
+  });
+});

components/radio/index.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import Group from './group';
-import type { RadioProps } from './interface';
+import type { RadioProps, RadioRef } from './interface';
 import InternalRadio from './radio';
 import Button from './radioButton';
 
@@ -12,11 +12,12 @@ export {
   RadioGroupOptionType,
   RadioGroupProps,
   RadioProps,
+  RadioRef,
 } from './interface';
 export { Button, Group };
 
 type CompoundedComponent = React.ForwardRefExoticComponent<
-  RadioProps & React.RefAttributes<HTMLElement>
+  RadioProps & React.RefAttributes<RadioRef>
 > & {
   Group: typeof Group;
   Button: typeof Button;

components/radio/interface.ts

@@ -4,6 +4,7 @@ import type { AbstractCheckboxGroupProps } from '../checkbox/Group';
 import type { DisabledType } from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 
+export type { CheckboxRef as RadioRef } from 'rc-checkbox';
 export type RadioGroupButtonStyle = 'outline' | 'solid';
 export type RadioGroupOptionType = 'default' | 'button';
 

components/radio/radio.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import type { CheckboxRef } from 'rc-checkbox';
 import RcCheckbox from 'rc-checkbox';
 import { composeRef } from 'rc-util/lib/ref';
 
@@ -11,15 +10,15 @@ import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext } from '../form/context';
 import RadioGroupContext, { RadioOptionTypeContext } from './context';
-import type { RadioChangeEvent, RadioProps } from './interface';
+import type { RadioChangeEvent, RadioProps, RadioRef } from './interface';
 import useStyle from './style';
 
-const InternalRadio: React.ForwardRefRenderFunction<CheckboxRef, RadioProps> = (props, ref) => {
+const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (props, ref) => {
   const groupContext = React.useContext(RadioGroupContext);
   const radioOptionTypeContext = React.useContext(RadioOptionTypeContext);
 
   const { getPrefixCls, direction, radio } = React.useContext(ConfigContext);
-  const innerRef = React.useRef<CheckboxRef>(null);
+  const innerRef = React.useRef<RadioRef>(null);
   const mergedRef = composeRef(ref, innerRef);
   const { isFormItemInput } = React.useContext(FormItemInputContext);
 
@@ -104,7 +103,7 @@ const InternalRadio: React.ForwardRefRenderFunction<CheckboxRef, RadioProps> = (
   );
 };
 
-const Radio = React.forwardRef<CheckboxRef, RadioProps>(InternalRadio);
+const Radio = React.forwardRef<RadioRef, RadioProps>(InternalRadio);
 
 if (process.env.NODE_ENV !== 'production') {
   Radio.displayName = 'Radio';

components/radio/radioButton.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
-import type { CheckboxRef } from '../checkbox';
 import type { AbstractCheckboxProps } from '../checkbox/Checkbox';
 import { ConfigContext } from '../config-provider';
 import { RadioOptionTypeContextProvider } from './context';
-import type { RadioChangeEvent } from './interface';
+import type { RadioChangeEvent, RadioRef } from './interface';
 import Radio from './radio';
 
 export type RadioButtonProps = AbstractCheckboxProps<RadioChangeEvent>;
 
-const RadioButton: React.ForwardRefRenderFunction<CheckboxRef, RadioButtonProps> = (props, ref) => {
+const RadioButton: React.ForwardRefRenderFunction<RadioRef, RadioButtonProps> = (props, ref) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const { prefixCls: customizePrefixCls, ...radioProps } = props;
   const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
   return (
-    <RadioOptionTypeContextProvider value='button'>
+    <RadioOptionTypeContextProvider value="button">
-      <Radio prefixCls={prefixCls} {...radioProps} type='radio' ref={ref} />
+      <Radio prefixCls={prefixCls} {...radioProps} type="radio" ref={ref} />
     </RadioOptionTypeContextProvider>
   );
 };
 
-export default React.forwardRef<CheckboxRef, RadioButtonProps>(RadioButton);
+export default React.forwardRef<RadioRef, RadioButtonProps>(RadioButton);