fix: fix Checkbox.Group type (#49073)

* fix: fix Checkbox.Group type

* fix: fix Checkbox.Group type

* fix: fix Checkbox.Group type

* fix: remove type

* fix: any

components/checkbox/Group.tsx

@@ -10,9 +10,7 @@ import type { CheckboxGroupContext } from './GroupContext';
 import GroupContext from './GroupContext';
 import useStyle from './style';
 
-export type CheckboxValueType = string | number | boolean;
-
-export interface CheckboxOptionType<T extends CheckboxValueType = CheckboxValueType> {
+export interface CheckboxOptionType<T = any> {
   label: React.ReactNode;
   value: T;
   style?: React.CSSProperties;
@@ -23,7 +21,7 @@ export interface CheckboxOptionType<T extends CheckboxValueType = CheckboxValueT
   required?: boolean;
 }
 
-export interface AbstractCheckboxGroupProps<T extends CheckboxValueType = CheckboxValueType> {
+export interface AbstractCheckboxGroupProps<T = any> {
   prefixCls?: string;
   className?: string;
   rootClassName?: string;
@@ -32,8 +30,7 @@ export interface AbstractCheckboxGroupProps<T extends CheckboxValueType = Checkb
   style?: React.CSSProperties;
 }
 
-export interface CheckboxGroupProps<T extends CheckboxValueType = CheckboxValueType>
-  extends AbstractCheckboxGroupProps<T> {
+export interface CheckboxGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
   name?: string;
   defaultValue?: T[];
   value?: T[];
@@ -41,8 +38,10 @@ export interface CheckboxGroupProps<T extends CheckboxValueType = CheckboxValueT
   children?: React.ReactNode;
 }
 
+type InternalCheckboxValueType = string | number | boolean;
+
 const CheckboxGroup = React.forwardRef(
-  <T extends CheckboxValueType = CheckboxValueType>(
+  <T extends InternalCheckboxValueType = InternalCheckboxValueType>(
     props: CheckboxGroupProps<T>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
@@ -168,6 +167,6 @@ const CheckboxGroup = React.forwardRef(
 export type { CheckboxGroupContext } from './GroupContext';
 export { GroupContext };
 
-export default CheckboxGroup as <T extends CheckboxValueType = CheckboxValueType>(
+export default CheckboxGroup as <T = any>(
   props: CheckboxGroupProps<T> & React.RefAttributes<HTMLDivElement>,
 ) => React.ReactElement;

components/checkbox/GroupContext.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import type { CheckboxOptionType, CheckboxValueType } from './Group';
+import type { CheckboxOptionType } from './Group';
 
-export interface CheckboxGroupContext<T extends CheckboxValueType = CheckboxValueType> {
+export interface CheckboxGroupContext<T = any> {
   name?: string;
   toggleOption?: (option: CheckboxOptionType<T>) => void;
   value?: any;

components/checkbox/__tests__/group.test.tsx

@@ -6,7 +6,6 @@ import { fireEvent, render } from '../../../tests/utils';
 import Collapse from '../../collapse';
 import Input from '../../input';
 import Table from '../../table';
-import type { CheckboxValueType } from '../Group';
 import type { CheckboxGroupProps } from '../index';
 import Checkbox from '../index';
 
@@ -89,7 +88,7 @@ describe('CheckboxGroup', () => {
     const renderCheckbox = (props: CheckboxGroupProps) => <Checkbox.Group {...props} />;
     const { container, rerender } = render(renderCheckbox({ options }));
     expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0);
-    rerender(renderCheckbox({ options, value: 'Apple' as unknown as CheckboxValueType[] }));
+    rerender(renderCheckbox({ options, value: 'Apple' as any }));
     expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1);
   });
 

components/checkbox/__tests__/type.test.tsx

@@ -27,4 +27,11 @@ describe('Checkbox.typescript', () => {
     );
     expect(group).toBeTruthy();
   });
+  it('Checkbox.Group defaultValue', () => {
+    const defaultValue: React.Key[] = ['1'];
+    const group = (
+      <Checkbox.Group options={[{ label: 'test', value: '1' }]} defaultValue={defaultValue} />
+    );
+    expect(group).toBeTruthy();
+  });
 });

components/checkbox/demo/check-all.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { Checkbox, Divider } from 'antd';
-import type { CheckboxProps, GetProp } from 'antd';
-
-type CheckboxValueType = GetProp<typeof Checkbox.Group, 'value'>[number];
+import type { CheckboxProps } from 'antd';
 
 const CheckboxGroup = Checkbox.Group;
 
@@ -10,12 +8,12 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
 const defaultCheckedList = ['Apple', 'Orange'];
 
 const App: React.FC = () => {
-  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
+  const [checkedList, setCheckedList] = useState<string[]>(defaultCheckedList);
 
   const checkAll = plainOptions.length === checkedList.length;
   const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
 
-  const onChange = (list: CheckboxValueType[]) => {
+  const onChange = (list: string[]) => {
     setCheckedList(list);
   };
 

components/checkbox/index.en-US.md

@@ -51,7 +51,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | name | The `name` property of all `input[type="checkbox"]` children | string | - |  |
 | options | Specifies options | string\[] \| number\[] \| Option\[] | \[] |  |
 | value | Used for setting the currently selected value | (string \| number \| boolean)\[] | \[] |  |
-| onChange | The callback function that is triggered when the state changes | (checkedValue: CheckboxValueType[]) => void | - |  |
+| onChange | The callback function that is triggered when the state changes | (checkedValue: T[]) => void | - |  |
 
 ##### Option
 

components/checkbox/index.zh-CN.md

@@ -52,7 +52,7 @@ demo:
 | name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - |  |
 | options | 指定可选项 | string\[] \| number\[] \| Option\[] | \[] |  |
 | value | 指定选中的选项 | (string \| number \| boolean)\[] | \[] |  |
-| onChange | 变化时的回调函数 | (checkedValue: CheckboxValueType[]) => void | - |  |
+| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - |  |
 
 ##### Option