From 59d38ecea65d14c47d3c20f82b0cbf158d6d8d66 Mon Sep 17 00:00:00 2001
From: Aleksei Mamaev <42127361+LexiosAlex@users.noreply.github.com>
Date: Tue, 12 Sep 2023 06:40:53 +0300
Subject: [PATCH] fix: radioButton ref type (#44747)

* fix: radioButton ref

* fix: added radio types test
---
 components/radio/__tests__/type.test.tsx | 22 ++++++++++++++++++++++
 components/radio/index.ts                |  5 +++--
 components/radio/interface.ts            |  1 +
 components/radio/radio.tsx               |  9 ++++-----
 components/radio/radioButton.tsx         | 11 +++++------
 5 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 components/radio/__tests__/type.test.tsx

diff --git a/components/radio/__tests__/type.test.tsx b/components/radio/__tests__/type.test.tsx
new file mode 100644
index 0000000000..3544855535
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/components/radio/index.ts b/components/radio/index.ts
index bae4f15ede..a06656fdb1 100644
--- a/components/radio/index.ts
+++ b/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;
diff --git a/components/radio/interface.ts b/components/radio/interface.ts
index 861ad33c53..e6878c2c4f 100644
--- a/components/radio/interface.ts
+++ b/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';
 
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index 48fe0afd7b..5dd9c40fe8 100644
--- a/components/radio/radio.tsx
+++ b/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';
diff --git a/components/radio/radioButton.tsx b/components/radio/radioButton.tsx
index 2a42c95840..736793512e 100644
--- a/components/radio/radioButton.tsx
+++ b/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'>
-      <Radio prefixCls={prefixCls} {...radioProps} type='radio' ref={ref} />
+    <RadioOptionTypeContextProvider value="button">
+      <Radio prefixCls={prefixCls} {...radioProps} type="radio" ref={ref} />
     </RadioOptionTypeContextProvider>
   );
 };
 
-export default React.forwardRef<CheckboxRef, RadioButtonProps>(RadioButton);
+export default React.forwardRef<RadioRef, RadioButtonProps>(RadioButton);