[Fix] prop-types: className missing in prop validation false negative

Author: akulsr0

lib/util/propTypes.js

@@ -634,6 +634,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
           // So we should construct an optional children prop
           this.shouldSpecifyOptionalChildrenProps = true;
 
+          this.shouldSpecifyClassNameProp = true;
+
           const rightMostName = getRightMostTypeName(node.typeName);
           const importedName = localToImportedMap[rightMostName];
           const idx = genericTypeParamIndexWherePropsArePresent[
@@ -825,6 +827,14 @@ module.exports = function propTypesInstructions(context, components, utils) {
           isRequired: false,
         };
       }
+      if (this.shouldSpecifyClassNameProp) {
+        this.declaredPropTypes.className = {
+          fullName: 'className',
+          name: 'className',
+          isRequired: false,
+        };
+      }
+
       this.foundDeclaredPropertiesList.forEach((tsInterfaceBody) => {
         if (tsInterfaceBody && (tsInterfaceBody.type === 'TSPropertySignature' || tsInterfaceBody.type === 'TSMethodSignature')) {
           let accessor = 'name';

tests/lib/rules/prop-types.js

@@ -4181,6 +4181,16 @@ ruleTester.run('prop-types', rule, {
         );
       `,
       features: ['types'],
+    },
+    {
+      code: `
+        import React from "react"
+
+        export function Heading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+          return <div className={cn("font-semibold text-lg", className)} {...props} />
+        }
+      `,
+      features: ['types'],
     }
   )),