chore(deps): update dependency @types/react to v18.2.66 (#47798)

* chore(deps): update dependency @types/react to v18.2.66 * Update package.json Signed-off-by: afc163 <afc163@gmail.com> * fix: React LegacyRef * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * chore: fix lint errors --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: afc163 <afc163@gmail.com>
ant-design · Mar 16, 2024 · bcc5d11 · bcc5d11
1 parent 8ba9900
commit bcc5d11
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 76 deletions.
diff --git a/components/_util/type.ts b/components/_util/type.ts
@@ -20,7 +20,9 @@ export type GetProp<
   PropName extends keyof GetProps<T>,
 > = NonNullable<GetProps<T>[PropName]>;
 
-type ReactRefComponent<Props extends { ref?: React.Ref<any> }> = (props: Props) => React.ReactNode;
+type ReactRefComponent<Props extends { ref?: React.Ref<any> | string }> = (
+  props: Props,
+) => React.ReactNode;
 
 export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> =
   T extends React.Component<any>

diff --git a/components/radio/__tests__/group.test.tsx b/components/radio/__tests__/group.test.tsx
@@ -1,29 +1,26 @@
-import type { RefAttributes } from 'react';
 import React from 'react';
 
 import type { RadioGroupProps } from '..';
 import Radio from '..';
 import { fireEvent, render } from '../../../tests/utils';
 
 describe('Radio Group', () => {
-  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
-    return (
-      <Radio.Group {...props}>
-        <Radio value="A">A</Radio>
-        <Radio value="B">B</Radio>
-        <Radio value="C">C</Radio>
-      </Radio.Group>
-    );
-  }
-
-  function createRadioGroupByOption(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
+  const RadioGroupComponent: React.FC<RadioGroupProps> = (props) => (
+    <Radio.Group {...props}>
+      <Radio value="A">A</Radio>
+      <Radio value="B">B</Radio>
+      <Radio value="C">C</Radio>
+    </Radio.Group>
+  );
+
+  const RadioGroupByOptions = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
     const options = [
       { label: 'A', value: 'A' },
       { label: 'B', value: 'B' },
       { label: 'C', value: 'C' },
     ];
-    return <Radio.Group {...props} options={options} />;
-  }
+    return <Radio.Group {...props} options={options} ref={ref} />;
+  });
 
   it('responses hover events', () => {
     const onMouseEnter = jest.fn();
@@ -45,20 +42,11 @@ describe('Radio Group', () => {
   it('fire change events when value changes', () => {
     const onChange = jest.fn();
 
-    const { container, rerender } = render(
-      createRadioGroup({
-        onChange,
-      }),
-    );
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
     const radios = container.querySelectorAll('input');
 
     // controlled component
-    rerender(
-      createRadioGroup({
-        onChange,
-        value: 'A',
-      }),
-    );
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
     fireEvent.click(radios[1]);
     expect(onChange.mock.calls.length).toBe(1);
   });
@@ -127,34 +115,25 @@ describe('Radio Group', () => {
   it("won't fire change events when value not changes", () => {
     const onChange = jest.fn();
 
-    const { container, rerender } = render(
-      createRadioGroup({
-        onChange,
-      }),
-    );
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
     const radios = container.querySelectorAll('input');
 
     // controlled component
-    rerender(
-      createRadioGroup({
-        onChange,
-        value: 'A',
-      }),
-    );
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
     fireEvent.click(radios[0]);
     expect(onChange.mock.calls.length).toBe(0);
   });
 
   it('optional should correct render', () => {
-    const { container } = render(createRadioGroupByOption());
+    const { container } = render(<RadioGroupByOptions />);
     const radios = container.querySelectorAll('input');
 
     expect(radios.length).toBe(3);
   });
 
   it('all children should have a name property', () => {
     const GROUP_NAME = 'GROUP_NAME';
-    const { container } = render(createRadioGroup({ name: GROUP_NAME }));
+    const { container } = render(<RadioGroupComponent name={GROUP_NAME} />);
 
     container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
       expect(el.name).toEqual(GROUP_NAME);
@@ -173,22 +152,19 @@ describe('Radio Group', () => {
   it('should forward ref', () => {
     let radioGroupRef: HTMLDivElement;
     const { container } = render(
-      createRadioGroupByOption({
-        ref(ref: HTMLDivElement) {
+      <RadioGroupByOptions
+        ref={(ref: HTMLDivElement) => {
           radioGroupRef = ref;
-        },
-      }),
+        }}
+      />,
     );
 
     expect(radioGroupRef!).toBe(container.querySelector<HTMLDivElement>('.ant-radio-group'));
   });
 
   it('should support data-* or aria-* props', () => {
     const { container } = render(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      } as RadioGroupProps),
+      <RadioGroupComponent data-radio-group-id="radio-group-id" aria-label="radio-group" />,
     );
     expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe(
       'radio-group-id',

diff --git a/components/radio/__tests__/radio-button.test.tsx b/components/radio/__tests__/radio-button.test.tsx
@@ -1,4 +1,3 @@
-import type { RefAttributes } from 'react';
 import React from 'react';
 import type { RadioGroupProps } from '..';
 import Radio, { Button } from '..';
@@ -36,15 +35,13 @@ describe('Radio Button', () => {
 });
 
 describe('Radio Group', () => {
-  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
-    return (
-      <Radio.Group {...props}>
-        <Button value="A">A</Button>
-        <Button value="B">B</Button>
-        <Button value="C">C</Button>
-      </Radio.Group>
-    );
-  }
+  const RadioGroupComponent = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => (
+    <Radio.Group {...props} ref={ref}>
+      <Radio value="A">A</Radio>
+      <Radio value="B">B</Radio>
+      <Radio value="C">C</Radio>
+    </Radio.Group>
+  ));
 
   it('responses hover events', () => {
     const onMouseEnter = jest.fn();
@@ -66,12 +63,12 @@ describe('Radio Group', () => {
   it('fire change events when value changes', () => {
     const onChange = jest.fn();
 
-    const { container, rerender } = render(createRadioGroup({ onChange }));
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
 
     const radios = container.querySelectorAll('input');
 
     // controlled component
-    rerender(createRadioGroup({ onChange, value: 'A' }));
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
     fireEvent.click(radios[1]);
     expect(onChange.mock.calls.length).toBe(1);
   });
@@ -137,23 +134,18 @@ describe('Radio Group', () => {
   it("won't fire change events when value not changes", () => {
     const onChange = jest.fn();
 
-    const { container, rerender } = render(
-      createRadioGroup({
-        onChange,
-      }),
-    );
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
     const radios = container.querySelectorAll('input');
 
     // controlled component
-    rerender(createRadioGroup({ onChange, value: 'A' }));
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
     fireEvent.click(radios[0]);
     expect(onChange.mock.calls.length).toBe(0);
   });
 
   it('all children should have a name property', () => {
     const GROUP_NAME = 'GROUP_NAME';
-    const { container } = render(createRadioGroup({ name: GROUP_NAME }));
-
+    const { container } = render(<RadioGroupComponent name={GROUP_NAME} />);
     container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
       expect(el.name).toEqual(GROUP_NAME);
     });
@@ -171,22 +163,19 @@ describe('Radio Group', () => {
   it('should forward ref', () => {
     let radioGroupRef: HTMLDivElement;
     const { container } = render(
-      createRadioGroup({
-        ref(ref: HTMLDivElement) {
+      <RadioGroupComponent
+        ref={(ref: HTMLDivElement) => {
           radioGroupRef = ref;
-        },
-      }),
+        }}
+      />,
     );
 
     expect(radioGroupRef!).toBe(container.querySelector('.ant-radio-group'));
   });
 
   it('should support data-* or aria-* props', () => {
     const { container } = render(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      } as RadioGroupProps),
+      <RadioGroupComponent data-radio-group-id="radio-group-id" aria-label="radio-group" />,
     );
     expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe(
       'radio-group-id',

diff --git a/package.json b/package.json
@@ -208,7 +208,7 @@
     "@types/prismjs": "^1.26.3",
     "@types/progress": "^2.0.7",
     "@types/qs": "^6.9.12",
-    "@types/react": "18.2.60",
+    "@types/react": "^18.2.66",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.22",
     "@types/react-highlight-words": "^0.16.7",