From fab6b8ea5162e9d54379d7a0f317f9c6df25cb22 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Thu, 23 Jan 2025 20:52:39 +0800
Subject: [PATCH] fix(no-forward-ref): loose fix

---
 .../src/rules/no-forward-ref.spec.ts                   | 10 +++++-----
 .../eslint-plugin-react-x/src/rules/no-forward-ref.ts  |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts
index beaf1fd1fe..13d1181f9c 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts
@@ -191,7 +191,7 @@ ruleTester.run(RULE_NAME, rule, {
         interface ComponentProps {
           foo: string;
         }
-        const Component = function Component({ ref, ...props }: ComponentProps & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref, ...props }: ComponentProps & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={ref} />;
         };
       `,
@@ -211,7 +211,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref, ...props }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref, ...props }: { foo: string } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={ref}>{props.foo}</div>;
         };
       `,
@@ -231,7 +231,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref, foo }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref, foo }: { foo: string } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={ref}>{foo}</div>;
         };
       `,
@@ -251,7 +251,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref: r, foo }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref: r, foo }: { foo: string } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={r}>{foo}</div>;
         };
       `,
@@ -271,7 +271,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref: r, foo, ...rest }: { foo: string, bar: number } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref: r, foo, ...rest }: { foo: string, bar: number } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={r}>{foo}</div>;
         };
       `,
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts
index 6a67c86c71..ff327448f1 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts
@@ -131,8 +131,8 @@ function getComponentPropsFixes(
         getText(typeArg1),
         "&",
         "{",
-        `ref:`,
-        `React.RefObject<${getText(typeArg0)}>`,
+        `ref?:`,
+        `React.RefObject<${getText(typeArg0)} | null>`,
         "}",
       ].join(" "),
     ),