From 90a00b9318374b402114a4136c6f118b48d9346e Mon Sep 17 00:00:00 2001
From: Cory Deppen <cory@deppen.us>
Date: Sat, 28 Dec 2024 19:41:26 -0500
Subject: [PATCH] [Fix] `prop-types`: support `ComponentPropsWithRef` from a
 namespace import

---
 CHANGELOG.md                  |   2 +
 lib/util/propTypes.js         |   3 +-
 tests/lib/rules/prop-types.js | 320 ++++++++++++++++++++++++++++++++++
 3 files changed, 324 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56f3d47dd2..c7cd5f1c4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,12 +9,14 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Fixed
 * [`no-unknown-property`]: allow shadow root attrs on `<template>` ([#3912][] @ljharb)
+* [`prop-types`]: support `ComponentPropsWithRef` from a namespace import ([#3651][] @corydeppen)
 
 ### Changed
 * [Docs] [`button-has-type`]: clean up phrasing ([#3909][] @hamirmahal)
 
 [#3912]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3912
 [#3909]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3909
+[#3651]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3651
 
 ## [7.37.4] - 2025.01.12
 
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
index 3a8cc67f93..7cec5abbdd 100644
--- a/lib/util/propTypes.js
+++ b/lib/util/propTypes.js
@@ -107,9 +107,10 @@ module.exports = function propTypesInstructions(context, components, utils) {
   const defaults = { customValidators: [] };
   const configuration = Object.assign({}, defaults, context.options[0] || {});
   const customValidators = configuration.customValidators;
-  const allowedGenericTypes = new Set(['ComponentProps', 'ComponentPropsWithoutRef', 'forwardRef', 'ForwardRefRenderFunction', 'VFC', 'VoidFunctionComponent', 'PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
+  const allowedGenericTypes = new Set(['ComponentProps', 'ComponentPropsWithRef', 'ComponentPropsWithoutRef', 'forwardRef', 'ForwardRefRenderFunction', 'VFC', 'VoidFunctionComponent', 'PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
   const genericTypeParamIndexWherePropsArePresent = {
     ComponentProps: 0,
+    ComponentPropsWithRef: 0,
     ComponentPropsWithoutRef: 0,
     ForwardRefRenderFunction: 1,
     forwardRef: 1,
diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
index 4a7d05ad6f..d9eb574024 100644
--- a/tests/lib/rules/prop-types.js
+++ b/tests/lib/rules/prop-types.js
@@ -4131,6 +4131,20 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import {ComponentPropsWithRef, forwardRef} from "react";
+
+        export const FancyButton = forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button">>(
+          ({ className, children, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+              {children}
+            </button>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import {ComponentProps, forwardRef} from "react";
@@ -4167,6 +4181,28 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import {ComponentPropsWithRef, ElementRef, forwardRef} from "react";
+
+        const BaseButton = forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = forwardRef<ElementRef<typeof BaseButton>, ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import {ComponentProps, ElementRef, forwardRef} from "react";
@@ -4233,6 +4269,50 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import {ComponentProps, ComponentPropsWithRef, ElementRef, forwardRef} from "react";
+
+        const BaseButton = forwardRef<HTMLButtonElement, ComponentProps<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = forwardRef<ElementRef<typeof BaseButton>, ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import {ComponentProps, ComponentPropsWithRef, ElementRef, forwardRef} from "react";
+
+        const BaseButton = forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = forwardRef<ElementRef<typeof BaseButton>, ComponentProps<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React from "react";
@@ -4251,6 +4331,20 @@ ruleTester.run('prop-types', rule, {
       code: `
         import React from "react";
 
+        export const FancyButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<"button">>(
+          ({ className, children, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+              {children}
+            </button>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React from "react";
+
         export const FancyButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
           ({ className, children, ...props }, ref) => (
             <button ref={ref} className={className} {...props}>
@@ -4287,6 +4381,28 @@ ruleTester.run('prop-types', rule, {
       code: `
         import React from "react";
 
+        const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React from "react";
+
         const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
           ({ children, className, ...props }, ref) => (
             <button ref={ref} className={className} {...props}>
@@ -4317,6 +4433,50 @@ ruleTester.run('prop-types', rule, {
           ),
         );
 
+        export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentProps<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
         export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentPropsWithoutRef<typeof BaseButton>>(
           ({ children, className, ...props }, ref) => (
             <BaseButton ref={ref} className={className} {...props}>
@@ -4367,6 +4527,20 @@ ruleTester.run('prop-types', rule, {
       code: `
         import * as React from "react";
 
+        export const FancyButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<"button">>(
+          ({ className, children, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+              {children}
+            </button>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import * as React from "react";
+
         export const FancyButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
           ({ className, children, ...props }, ref) => (
             <button ref={ref} className={className} {...props}>
@@ -4403,6 +4577,28 @@ ruleTester.run('prop-types', rule, {
       code: `
         import * as React from "react";
 
+        const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import * as React from "react";
+
         const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
           ({ children, className, ...props }, ref) => (
             <button ref={ref} className={className} {...props}>
@@ -4465,6 +4661,50 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import * as React from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import * as React from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<React.ElementRef<typeof BaseButton>, React.ComponentProps<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React, {ComponentPropsWithoutRef} from "react";
@@ -4479,6 +4719,20 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import React, {ComponentPropsWithRef} from "react";
+
+        export const FancyButton = React.forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button">>(
+          ({ className, children, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+              {children}
+            </button>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React, {ComponentProps} from "react";
@@ -4515,6 +4769,28 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import React, {ComponentPropsWithRef, ElementRef} from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<ElementRef<typeof BaseButton>, ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React, {ComponentProps, ElementRef} from "react";
@@ -4581,6 +4857,50 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import React, {ComponentProps, ComponentPropsWithRef, ElementRef} from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<ElementRef<typeof BaseButton>, ComponentProps<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React, {ComponentProps, ComponentPropsWithRef, ElementRef} from "react";
+
+        const BaseButton = React.forwardRef<HTMLButtonElement, ComponentProps<"button">>(
+          ({ children, className, ...props }, ref) => (
+            <button ref={ref} className={className} {...props}>
+                {children}
+            </button>
+          ),
+        );
+
+        export const FancyButton = React.forwardRef<ElementRef<typeof BaseButton>, ComponentPropsWithRef<typeof BaseButton>>(
+          ({ children, className, ...props }, ref) => (
+            <BaseButton ref={ref} className={className} {...props}>
+              {children}
+            </BaseButton>
+          ),
+        );
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React, { forwardRef } from 'react';